<template>
  <el-row :gutter="8" class="thicknessDistributionMap">
    <el-col :span="10">
      <div class="left-box">
        <search-bar :formConfigs="formConfig" @headBtnClick="buttonClick" />
        <base-table
          ref="thicknessDistributionTable"
          id="thicknessDistributionTable1"
          :table-props="tableProps"
          :table-data="tableData"
          :max-height="tableH"
          highlight-current-row
          @current-change="handleCurrentChange"
        />
      </div>
    </el-col>
    <el-col :span="14">
      <div class="right-box">
        <thickness-distribution-chart />
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { tableHeight } from '@/utils/index'
import thicknessDistributionChart from './../components/thicknessDistributionChart.vue'
import { queryThickness, drawThickness } from '@/api/qualityManagement'
import { timeFormatter } from '@/utils'
import moment from 'moment'
const tableProps = [
  {
    prop: 'glassId',
    label: 'ID'
  },
  {
    prop: 'testTime',
    label: '检测时间',
    filter: timeFormatter,
    minWidth: 160
  },
  {
    prop: 'grindType',
    label: '研磨类型'
  }
]
export default {
  name: 'thicknessDistributionMap',
  components: { thicknessDistributionChart },
  data() {
    return {
      formConfig: [
        {
          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: 'input',
          label: '玻璃ID',
          placeholder: '玻璃ID',
          param: 'glassId'
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'button',
          btnName: '绘图',
          name: 'draw',
          color: 'primary'
        }
      ],
      listQuery: {
        startTime: '',
        endTime: '',
        glassId: ''
      },
      tableProps,
      tableData: [],
      tableH: tableHeight(350),
      drawGlassId: ''
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(350)
    })
    this.formConfig[0].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'
    this.getList()
  },
  methods: {
    getList() {
      queryThickness({ ...this.listQuery }).then((res) => {
        console.log(res)
        if (res.code === 0 && res.data.length > 0) {
          let _this = this
          _this.tableData = res.data
          _this.$nextTick(() => {
            _this.$refs.thicknessDistributionTable.setCurrent(
              'thicknessDistributionTable1',
              0
            )
          })
          _this.drawGlassId = _this.tableData[0].id
        } else {
          this.tableData = []
          this.drawGlassId = ''
        }
      })
    },
    buttonClick(val) {
      switch (val.btnName) {
        case 'search':
          this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
          this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
          this.listQuery.glassId = val.glassId
          this.getList()
          break
        default:
          drawThickness(this.drawGlassId).then((res) => {
            console.log(res)
          })
      }
    },
    handleCurrentChange(val) {
      this.drawGlassId = val.newVal.id
    }
  }
}
</script>
<style lang="scss" scoped>
.thicknessDistributionMap {
  width: 100%;
  padding: 0 8px 0 16px;
  .left-box,
  .right-box {
    height: calc(100vh - 205px);
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
  }
}
</style>
