<template>
  <div class="app-container">
    <el-card>
      <span>工艺员:</span>
      <el-select v-model="craftmenValue" placeholder="工艺员" size="small" style="width:100px" @change="searchParts()">
        <el-option
          v-for="item in craftmen"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <span>零件图号:</span>
      <el-select v-model="partNumValue" filterable placeholder="零件图号" style="margin-right: 10px" size="small" clearable @clear="returnDate = ''">
        <el-option
          v-for="item in partNum"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 10px" @click="searchData()">查询</el-button>
      <span>打回时间:</span>
      <el-date-picker v-model="returnDate" :clearable="false" type="datetime" placeholder="打回时间" size="small" readonly/>
    </el-card>

    <el-row>
      <el-col :span="12">
        <el-card>
          <div style="display: inline-block;margin-bottom: 20px">改前零件工艺</div>
          <el-table id="div1" ref="div1" :data="tableData1" :row-class-name="tableRowClassName1" size="mini" border style="height:350px;overflow-y: auto;" @mouseenter.native="changeScrollBefore">
            <el-table-column align="center" label="工序顺序" width="70px">
              <template slot-scope="scope">
                {{ scope.row.工序顺序 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工艺名称" width="120px">
              <template slot-scope="scope">
                {{ scope.row.工艺名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="难度等级" width="70px">
              <template slot-scope="scope">
                {{ scope.row.工艺难度等级 }}
              </template>
            </el-table-column>
            <el-table-column header-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 style="margin-left:15px">
          <div style="display: inline-block;margin-bottom: 20px">改后零件工艺</div>
          <el-table id="div2" ref="div2" :data="tableData2" :row-class-name="tableRowClassName2" size="mini" border style="height:350px;overflow-y: scroll;" @mouseenter.native="changeScrollAfter">
            <el-table-column align="center" label="工序顺序" width="70px">
              <template slot-scope="scope">
                {{ scope.row.工序顺序 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工艺名称" width="120px">
              <template slot-scope="scope">
                {{ scope.row.工艺名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="难度等级" width="70px">
              <template slot-scope="scope">
                {{ scope.row.工艺难度等级 }}
              </template>
            </el-table-column>
            <el-table-column header-align="center" label="工艺要求">
              <template slot-scope="scope">
                {{ scope.row.工艺要求 }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-card>
      <div id="myChart" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
import { initCraftmen, searchPart, searchProcessOld, searchProcessNew, searchChart } from '@/api/ManufacturingCenter/ProcessAdjustQuery'

export default {
  data() {
    return {
      returnDate: '',
      craftmenValue: '',
      craftmen: [],
      partNumValue: '', // 工艺计划流水号
      partNum: [],
      partStatus: '',
      tableData1: [],
      tableData2: [],
      dataX: [],
      partsNum: []
    }
  },
  created() {
    this.fetchData()
    this.searchChart()
  },
  methods: {
    changeScrollBefore() {
      const div1 = document.getElementById('div1')
      const div2 = document.getElementById('div2')
      div2.removeAttribute('onscroll')
      div1.setAttribute('onscroll', 'document.getElementById(\'div2\').scrollTop = scrollTop')
    },
    changeScrollAfter() {
      const div1 = document.getElementById('div1')
      const div2 = document.getElementById('div2')
      div1.removeAttribute('onscroll')
      div2.setAttribute('onscroll', 'document.getElementById(\'div1\').scrollTop = scrollTop')
    },
    searchChart() {
      searchChart().then(response => {
        console.log(response, 11)
        for (let i = 0; i < response.data.length; i++) {
          this.dataX.push(response.data[i].姓名)
          this.partsNum.push(response.data[i].零件数量)
        }
        this.drawLine()
      })
    },
    drawLine() {
      const myChart = echarts.init(document.getElementById('myChart'))
      myChart.clear()
      myChart.setOption({
        title: {
          text: '在制零件工艺调整统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          name: '工艺员',
          data: this.dataX,
          axisLabel: {
            interval: 0,
            rotate: 0,
            margin: 10
          }
        },
        yAxis: {
          type: 'value',
          name: '工艺被调整零件数',
          min: 0,
          minInterval: 1
        },
        series: [
          {
            name: '工艺调整零件数',
            type: 'bar',
            data: this.partsNum,
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
        ]
      })
    },
    fetchData() {
      this.craftmen = []
      initCraftmen().then(response => { // 初始化工艺员
        for (let i = 0; i < response.data.length; i++) {
          this.craftmen.push({
            label: response.data[i].姓名,
            value: response.data[i].人员编号
          })
        }
      })
    },
    searchParts() {
      this.tableData1 = []
      this.tableData2 = []
      this.partNum = []
      this.partNumValue = ''
      this.returnDate = ''
      searchPart(this.craftmenValue).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.partNum.push({
            label: response.data[i].零件图号_零件工艺计划,
            value: response.data[i].工艺计划流水号
          })
        }
      })
    },
    searchData() {
      this.tableData1 = []
      this.tableData2 = []
      if (this.partNumValue !== '' && this.partNumValue !== null) {
        searchProcessOld(this.partNumValue).then(response => {
          this.tableData1 = response.data
          this.returnDate = response.data[0].操作时间
        })
        searchProcessNew(this.partNumValue).then(response => {
          this.tableData2 = response.data
        })
      } else {
        this.$message.error('请先选择零件')
      }
    },
    tableRowClassName2({ row }) {
      for (let i = 0; i < this.tableData1.length; i++) {
        row.工艺编号 === null ? row.工艺编号 = 0 : row.工艺编号
        if (this.tableData1[i].工序流水号 === row.工序流水号 && this.tableData1[i].工艺编号 !== null) {
          if (this.tableData1[i].工艺编号 !== row.工艺编号 || this.tableData1[i].工艺要求 !== row.工艺要求 || this.tableData1[i].工艺难度等级 !== row.工艺难度等级) {
            return 'change'
          } else {
            if (this.tableData1[i].工序顺序 !== row.工序顺序 && (row.工艺要求 || row.工艺难度等级)) {
              return 'change'
            } else {
              return ''
            }
          }
        }
      }
    },
    tableRowClassName1({ row }) {
      for (let i = 0; i < this.tableData2.length; i++) {
        row.工艺编号 === null ? row.工艺编号 = 0 : row.工艺编号
        if (this.tableData2[i].工序流水号 === row.工序流水号 && this.tableData2[i].工艺编号 !== null) {
          if (this.tableData2[i].工艺编号 !== row.工艺编号 || this.tableData2[i].工艺要求 !== row.工艺要求 || this.tableData2[i].工艺难度等级 !== row.工艺难度等级) {
            return 'change'
          } else {
            if (this.tableData1[i].工序顺序 !== row.工序顺序 && (row.工艺要求 || row.工艺难度等级)) {
              return 'change'
            } else {
              return ''
            }
          }
        }
      }
    }
  }
}
</script>

<style>
  .el-table .change {
    background: oldlace;
  }
</style>

<style scoped>
  .el-card{
    margin-bottom: 15px;
  }
  .el-date-editor{
    width:200px
  }
  .el-select{
    width:200px
  }
  .el-input{
    width:200px
  }
  span{
    margin: 10px 0 10px 10px;
  }
  .searchForm .el-form-item{
    margin-bottom: 5px;
  }
</style>
