<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-card style="margin-bottom: 10px;width: 100%;">
          <span style="margin-left: 10px">工位号：</span>
          <el-select
            v-model="stationNumberValue"
            placeholder="请选择工位号"
            clearable
            filterable
            size="small"
            style="width: 200px; margin-left: 13px">
            <el-option
              v-for="item in stationNumber"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="mini" />
          </el-select>
          <span style="margin-left: 10px">基本机型：</span>
          <el-select
            v-model="bigEngine"
            placeholder="请选择基本机型"
            clearable
            filterable
            size="small"
            style="width: 200px; margin-left: 13px"
            @change="selectBigEngine">
            <el-option
              v-for="item in bigEngineList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="mini" />
          </el-select>

          <el-select v-model="EngineName1" placeholder="请选择比对零件号" filterable size="small">
            <el-option
              v-for="item in smallEngineList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="mini" />
          </el-select>
          <el-button size="small" type="distribution" style="margin: 0 2vw;" @click="searchBomList()">比对零件号差异</el-button>
          <el-select v-model="EngineName2" placeholder="请选择比对零件号" filterable size="small">
            <el-option
              v-for="item in smallEngineList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="mini" />
          </el-select>
        </el-card>
      </el-col>
      <el-col :span="12">
        <!-- <el-card style="margin-bottom: 10px">
          <el-button size="small" type="distribution">创建一级菜单</el-button>
        </el-card> -->
        <el-card>
          <el-table
            ref="multipleTableLeft"
            :data="tableData"
            :cell-class-name="cellClassName"
            stripe
            size="mini"
            height="700"
            style="height:calc(100vh - 330px);">
            <el-table-column type="index" width="60" label="序号" align="center" />
            <el-table-column align="center" label="工位号">
              <template slot-scope="scope">
                {{ scope.row.工位号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="零件号">
              <template slot-scope="scope">
                {{ scope.row.零件号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="零件编号">
              <template slot-scope="scope">
                {{ scope.row.零件编号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="零件名称">
              <template slot-scope="scope">
                {{ scope.row.零件名称 }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="数量">
              <template slot-scope="scope">
                {{ scope.row.数量 }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">

        <el-card>
          <el-table
            ref="multipleTableRight"
            :data="tableData"
            :cell-class-name="cellClassName"
            stripe
            size="mini"
            height="700"
            style="height:calc(100vh - 330px);">
            <el-table-column type="index" width="60" label="序号" align="center" />
            <el-table-column align="center" label="工位号">
              <template slot-scope="scope">
                {{ scope.row.工位号2 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="零件号">
              <template slot-scope="scope">
                {{ scope.row.零件号2 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="零件编号">
              <template slot-scope="scope">
                {{ scope.row.零件编号2 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="零件名称">
              <template slot-scope="scope">
                {{ scope.row.零件名称2 }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="数量">
              <template slot-scope="scope">
                {{ scope.row.数量2 }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'MenuManagement',
  data() {
    return {
      tableData: [],
      EngineName1: '',
      EngineName2: '',
      rules1: {
        moduleName: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
      },
      rules2: {
        moduleName: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
      },
      smallEngineList: [],
      dom1: null,
      dom2: null,
      stationNumber: [], // 工位号
      stationNumberValue: '',
      bigEngine: '',
      bigEngineList: []
    }
  },
  created() {
    this.getSmallEngine()
    this.getStationNumber()
    this.getEndStation()
    setTimeout(() => {
      this.dom1 = this.$refs.multipleTableLeft.bodyWrapper
      this.dom2 = this.$refs.multipleTableRight.bodyWrapper
      this.listenerScroll()
    }, 500)
  },
  methods: {
    listenerScroll() {
      this.dom2.addEventListener('scroll', () => {
        // 横滚
        this.dom1.scrollLeft = this.dom2.scrollLeft
        // 竖滚
        this.dom1.scrollTop = this.dom2.scrollTop
      })

      this.dom1.addEventListener('scroll', () => {
        // 横滚
        this.dom2.scrollLeft = this.dom1.scrollLeft
        // 竖滚
        this.dom2.scrollTop = this.dom1.scrollTop
      })
    },
    // 工位号
    getStationNumber() {
      this.stationNumber = []
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.stationNumber.push({
            label: response.data[i].工位号,
            value: response.data[i].工位号
          })
        }
      })
    },
    // 查询零件号数据
    searchBomList() {
      this.tableData = []

      let stationNumberValue_check

      this.stationNumberValue ? stationNumberValue_check = 1 : (stationNumberValue_check = 0, this.stationNumberValue = '')

      var param = []
      param[0] = ['零件号1', this.EngineName1]
      param[1] = ['零件号2', this.EngineName2]
      param[2] = ['工位号_ischeck', stationNumberValue_check]
      param[3] = ['工位号', this.stationNumberValue]
      var Data = this.CreateData('11', '北汽福田_BOM_零件差异查询', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response, 66)
        if (response.data.length !== 0) {
          this.tableData = response.data
        }
        // this.loading = false
      })
    },
    // 选择大机型触发事件
    selectBigEngine() {
      this.EngineName1 = ''
      this.EngineName2 = ''
      this.getSmallEngine()
    },
    // 获取大机型
    getEndStation() {
      this.bigEngine = ''
      this.bigEngineList = []
      var param = []
      var Data = this.CreateData('11', 'MES_基本变量_机型代码_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.bigEngineList.push({
            label: response.data[i].发动机型号,
            value: response.data[i].发动机型号,
            labelName: response.data[i].发动机机型标志
          })
        }
      })
    },
    // 获取小机型
    getSmallEngine() {
      this.smallEngineList = []
      var param = []
      this.bigEngine ? param[0] = ['基本型号', this.bigEngine] : ''
      var Data = this.CreateData('11', '北汽福田_BOM_零件号查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.smallEngineList.push({
            label: response.data[i].零件号,
            value: response.data[i].零件号
          })
        }
      })
    },
    // 根据差异来决定该行颜色
    cellClassName({ row, column }) {
      let isNoEqual = false
      row.工位号 !== row.工位号2 ? isNoEqual = true : ''
      // row.零件号 !== row.零件号2 ? isNoEqual = true : ''
      row.零件编号 !== row.零件编号2 ? isNoEqual = true : ''
      row.零件名称 !== row.零件名称2 ? isNoEqual = true : ''
      row.数量 !== row.数量2 ? isNoEqual = true : ''

      if (isNoEqual) {
        return 'NoEqual-row'
      }
      return ''
    }
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

/deep/.el-table .el-table__body .NoEqual-row {
  background: rgba(255, 255, 0, 0.5) !important;
  /* color: #fff !important; */
}
</style>
