<template>
  <div class="finalInspectionData">
    <el-row class="box-top">
      <el-col>
        <div class="search-box">
          <search-bar
            :formConfigs="formConfig"
            @headBtnClick="buttonClick"
            @select-changed="selectChanged"
          />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="8" class="box">
      <el-col :span="9">
        <div class="left-box">
          <span class="table-button" @click="generateReport">生成表格</span>
          <base-table
            :selectWidth="40"
            :table-props="tablePropsL"
            :table-data="tableDataL"
            :max-height="tableHL"
            @selection-change="selectChange"
          />
        </div>
      </el-col>
      <el-col :span="15">
        <div class="right-box">
          <div v-if="reportTitle">
            <span class="title">{{ reportTitle }}</span>
          </div>
          <div class="table-box" v-if="reportTitle === '单片玻璃基板缺陷统计'">
            <glass-quality-report :tableData="glassQualityArr" />
          </div>
          <div class="table-box" v-if="reportTitle === '厚度汇总报表'">
            <glass-thick-report :tableData="thickReportArr" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import {
  listGlass,
  qualityReport,
  thickReport,
  qualityReportexport,
  thickReportexport
} from '@/api/qualityManagement'
import glassQualityReport from './finalInspectionDataReport/glassQualityReport.vue'
import glassThickReport from './finalInspectionDataReport/glassThickReport.vue'
import moment from 'moment'
import { timeFormatter } from '@/utils'
const tablePropsL = [
  {
    prop: 'glassId',
    label: 'ID',
    minWidth: 100
  },
  {
    prop: 'unloadTime',
    label: '检测时间',
    minWidth: 120,
    filter: timeFormatter
  },
  {
    prop: 'grindtype',
    label: '研磨类型',
    minWidth: 80
  }
]
export default {
  name: 'FinalInspectionData',
  components: { glassQualityReport, glassThickReport },
  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: 'select',
          label: '玻璃架',
          selectOptions: [],
          param: 'glassFrame',
          defaultSelect: '全部',
          width: 150,
          clearable: false
        },
        {
          type: 'select',
          label: '报表类型',
          selectOptions: [
            { id: '单片玻璃基板缺陷统计', name: '单片玻璃基板缺陷统计' },
            { id: '终检下片包装', name: '终检下片包装' },
            { id: '厚度汇总报表', name: '厚度汇总报表' }
          ],
          param: 'fullInspectionType1',
          defaultSelect: '',
          onchange: true,
          width: 150
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'separate'
        },
        {
          type: 'button',
          btnName: '导出',
          name: 'export',
          color: 'primary',
          plain: true
        }
      ],
      tablePropsL,
      tableDataL: [],
      tableHL: tableHeight(300),
      reportTitle: '',
      listQuery: {
        startTime: '2020-07-06T16:59:23',
        endTime: '2023-07-06T16:59:23',
        glassFrame: '',
        current: 1,
        size: 500
      },
      selectArr: [], // 表格选中的数据
      glassQualityArr: [], //基板玻璃品质
      thickReportArr: [] // 厚度汇总
    }
  },
  mounted() {
    this.getOption()
    window.addEventListener('resize', () => {
      this.tableHL = tableHeight(300)
    })
    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.listQuery.glassFrame = '全部'
    this.getList()
  },
  methods: {
    getList() {
      listGlass({ ...this.listQuery }).then((res) => {
        if (res.code === 0) {
          this.tableDataL = res.data
        } else {
          this.tableDataL = []
        }
      })
    },
    getOption() {
      let arr = JSON.parse(
        localStorage.getItem('publicList')
      ).glassRackStationVoList
      let newArr = arr.map((item) => ({
        id: item.dataName,
        name: item.dataName
      }))
      newArr.push({ id: '全部', name: '全部' }, { id: '废片', name: '废片' })
      this.formConfig[1].selectOptions = newArr
      console.log(newArr)
    },
    buttonClick(val) {
      let arr = []
      switch (val.btnName) {
        case 'search':
          this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
          this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
          this.listQuery.glassFrame = val.glassFrame
          this.getList()
          break
        default:
          if (this.selectArr.length === 0) {
            this.$message({
              message: '请勾选左侧表格数据',
              type: 'warning'
            })
            return false
          }
          if (this.reportTitle === '') {
            this.$message({
              message: '请选择报表类型',
              type: 'warning'
            })
            return false
          }
          console.log(this.selectArr)
          for (let i of this.selectArr) {
            arr.push(i.glassId)
          }
          if (this.reportTitle === '单片玻璃基板缺陷统计') {
            this.exportGlassReport(arr)
          } else if (this.reportTitle === '厚度汇总报表') {
            this.exportThickReport(arr)
          }
      }
    },
    selectChanged(val) {
      this.reportTitle = val.value
      this.glassQualityArr = []
      this.thickReportArr = []
    },
    selectChange(val) {
      this.selectArr = val
    },
    // 生成报表
    generateReport() {
      if (this.selectArr.length === 0) {
        this.$message({
          message: '请勾选左侧表格数据',
          type: 'warning'
        })
        return false
      }
      if (this.reportTitle === '') {
        this.$message({
          message: '请选择报表类型',
          type: 'warning'
        })
        return false
      }
      let arr = []
      for (let i of this.selectArr) {
        arr.push(i.glassId)
      }
      switch (this.reportTitle) {
        case '单片玻璃基板缺陷统计':
          this.getGlassReport(arr)
          break
        case '厚度汇总报表':
          this.getThickReport(arr)
          break
        default:
      }
    },
    getGlassReport(arr) {
      qualityReport({
        // glassId: [122206240688, 122206240692],
        glassId: arr,
        size: 1000,
        current: 1
      }).then((res) => {
        console.log(res)
        this.glassQualityArr = res.data
      })
    },
    exportGlassReport(arr) {
      qualityReportexport({
        glassId: arr,
        size: 1000,
        current: 1
      }).then((response) => {
        console.log(response)
        let fileName = ''
        const contentDisposition = response.headers['content-disposition']
        if (contentDisposition) {
          fileName = decodeURIComponent(
            contentDisposition.slice(
              contentDisposition.indexOf('filename=') + 9
            )
          )
        }
        const blob = new Blob([response.data])
        const reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = (e) => {
          const a = document.createElement('a')
          a.download = fileName
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      })
    },
    getThickReport(arr) {
      thickReport({
        glassId: arr,
        size: 1000,
        current: 1
      }).then((res) => {
        console.log(res)
        this.thickReportArr = res.data
      })
    },
    exportThickReport(arr) {
      thickReportexport({
        glassId: arr,
        size: 1000,
        current: 1
      }).then((response) => {
        console.log(response)
        let fileName = ''
        const contentDisposition = response.headers['content-disposition']
        if (contentDisposition) {
          fileName = decodeURIComponent(
            contentDisposition.slice(
              contentDisposition.indexOf('filename=') + 9
            )
          )
        }
        const blob = new Blob([response.data])
        const reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = (e) => {
          const a = document.createElement('a')
          a.download = fileName
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.finalInspectionData {
  width: 100%;
  .box-top {
    width: 100%;
    padding: 8px 16px 0;
    .search-box {
      height: 62px;
      padding: 10px 16px;
      box-sizing: border-box;
      border-radius: 8px;
      background-color: #fff;
    }
  }
  .box {
    width: 100%;
    padding: 8px 8px 0 16px;
    .left-box,
    .right-box {
      height: calc(100vh - 220px);
      padding: 16px;
      border-radius: 8px;
      background-color: #fff;
      .table-box {
        margin-top: 16px;
        height: calc(100vh - 290px);
        overflow: auto;
      }
    }
    .left-box {
      .table-button {
        display: inline-block;
        height: 30px;
        width: 100%;
        text-align: center;
        padding-top: 4px;
        margin-bottom: 16px;
        font-size: 14px;
        color: #0b58ff;
        border-radius: 4px;
        border: 1px dotted #0b58ff;
        cursor: pointer;
      }
    }
    .right-box {
      .title::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 16px;
        background: #0b58ff;
        border-radius: 1px;
        margin-right: 8px;
        vertical-align: middle;
      }
    }
  }
}
</style>
