<template>
  <div>
    <el-row :gutter="10" class="main-box">
      <el-col :span="18">
        <div class="left-box">
          <search-bar
            :formConfigs="formConfig"
            ref="searchBarForm"
            @headBtnClick="buttonClick"
          />
          <base-table
            ref="palletTable1"
            id="palletTable"
            :page="listQuery.current"
            :limit="listQuery.size"
            :table-props="tableProps"
            :table-data="tableData"
            :max-height="tableH"
            highlight-current-row
            @current-change="selectPallet"
          />
          <pagination
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            :total="total"
            @pagination="getList()"
          />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="right-box">
          <el-row>
            <el-col class="rigth-top">
              <span class="title">托盘对应产品等级数据</span>
              <base-table
                :table-props="tableProps2"
                :table-data="tableData2"
                :max-height="tableH2"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col class="right-bottom">
              <span class="title">托盘对应产品等级分析</span>
              <pallet-level-chart :chartMsg="chartMsg" />
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import palletLevelChart from './../components/palletLevelChart.vue'
import {
  palletIndicatorAnalysisPage,
  palletIndicatorGetType
} from '@/api/deviceManagement'
import { timeFormatter } from '@/utils'
import moment from 'moment'
const tableProps = [
  {
    prop: 'proLineName',
    label: '产线',
    minWidth: 80
  },
  {
    prop: 'code',
    label: '工单编号',
    minWidth: 120
  },
  {
    prop: 'glassId',
    label: '玻璃ID',
    minWidth: 120
  },
  {
    prop: 'rackId',
    label: '成品架ID',
    minWidth: 120
  },
  {
    prop: 'loadTime',
    label: '产品上片时间',
    filter: timeFormatter,
    minWidth: 160
  },
  {
    prop: 'unloadTime',
    label: '产品下片时间',
    filter: timeFormatter,
    minWidth: 160
  },
  {
    prop: 'grade',
    label: '玻璃等级',
    minWidth: 80
  },
  {
    prop: 'palletId',
    label: '面磨托盘ID',
    minWidth: 120
  },
  {
    prop: 'glassLength',
    label: '玻璃长度'
  },
  {
    prop: 'glassWidth',
    label: '玻璃宽度'
  },
  {
    prop: 'glassHeight',
    label: '玻璃厚度'
  }
]
const tableProps2 = [
  {
    prop: 'productType',
    label: '产品分类'
  },
  {
    prop: 'num',
    label: '数量'
  },
  {
    prop: 'percentage',
    label: '占比'
  }
]
export default {
  name: 'analysisOfPallet',
  components: { palletLevelChart },
  data() {
    return {
      formConfig: [
        {
          type: 'input',
          label: '托盘ID',
          placeholder: '托盘ID',
          param: 'palletId'
        },
        {
          type: 'datePicker',
          label: '产品上片时间',
          dateType: 'datetimerange',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: 'yyyy-MM-ddTHH:mm:ss',
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          param: 'timeVal',
          defaultSelect: [],
          width: 350
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        }
      ],
      listQuery: {
        current: 1,
        size: 20,
        palletId: '',
        startTime: '',
        endTime: ''
      },
      total: 0,
      tableProps,
      tableData: [],
      tableH: tableHeight(330),
      listQuery2: {
        current: 1,
        size: 500
      },
      tableProps2,
      tableData2: [],
      tableH2: tableHeight(360) / 2,
      chartMsg: {}
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(330)
      this.tableH2 = tableHeight(360) / 2
    })
    this.formConfig[1].defaultSelect = [
      moment().format('yyyy-MM-DD') + 'T00:00:00',
      moment().format('yyyy-MM-DD') + 'T23:59:59'
    ]
    this.listQuery.startTime = moment().format('yyyy-MM-DD') + 'T00:00:00'
    this.listQuery.endTime = moment().format('yyyy-MM-DD') + 'T23:59:59'
  },
  methods: {
    getList() {
      if (this.listQuery.palletId) {
        palletIndicatorAnalysisPage({ ...this.listQuery }).then((res) => {
          this.tableData = res.data.records
          this.total = res.data.total
        })
        this.getLevel()
      } else {
        this.$message.error('请先输入托盘id后再查询')
      }
    },
    getLevel() {
      // 需要修改ID
      palletIndicatorGetType({
        palletId: this.listQuery.palletId,
        startTime: this.listQuery.startTime,
        endTime: this.listQuery.endTime
      }).then((res) => {
        this.tableData2 = []
        if (res.code === 0) {
          const data = res.data
          this.chartMsg = data
          console.log(this.chartMsg)
          let arr = [
            { name: '良品', num: 'okNum', percentage: 'okPercentage' },
            {
              name: '待再加工',
              num: 'reprocessNum',
              percentage: 'rePercentage'
            },
            { name: '废品', num: 'wasteNum', percentage: 'noPercentage' },
            { name: '抽检', num: 'checkNum', percentage: 'checkPercentage' },
            { name: '废弃', num: 'scrapNum', percentage: 'scrapPercentage' },
            { name: '碎片', num: 'chipNum', percentage: 'checkPercentage' },
            {
              name: '次良品',
              num: 'inferiorNum',
              percentage: 'inferiorPercentage'
            }
          ]
          for (let i = 0; i < 7; i++) {
            let obj = {}
            obj.productType = arr[i].name
            obj.num = data[arr[i].num]
            obj.percentage = data[arr[i].percentage]
            this.tableData2.push(obj)
          }
        }
      })
    },
    buttonClick(val) {
      if (val.btnName === 'search') {
        this.listQuery.palletId = val.palletId
        this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
        this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
        this.getList()
      }
    },
    selectPallet(newVal) {
      let palletId = newVal.palletId
      this.getLevel(palletId)
    }
  }
}
</script>
<style lang="scss" scoped>
.main-box {
  width: 100%;
  padding: 0px 6px 0 16px;
  .left-box {
    height: calc(100vh - 204px);
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
  }
  .rigth-top {
    background-color: #fff;
    margin-bottom: 10px;
    height: calc((100vh - 214px) / 2);
    border-radius: 8px;
    padding: 16px;
  }
  .right-bottom {
    background-color: #fff;
    height: calc((100vh - 214px) / 2);
    border-radius: 8px;
    padding: 16px;
  }
  .title {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 22px;
  }
  .title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #0b58ff;
    border-radius: 1px;
    margin-right: 8px;
    vertical-align: middle;
  }
}
</style>
