<template>
  <div class="finalInspectionData">
    <el-row class="box-top">
      <el-col>
        <div class="search-box">
          <search-bar
            :formConfigs="formConfig"
            ref="searchBarForm"
            @headBtnClick="buttonClick"
            @select-changed="selectChanged"
          />
        </div>
      </el-col>
    </el-row>
    <div class="box">
      <split-pane v-model="split1">
        <template #left>
          <div class="split-pane 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>
        </template>
        <template #right>
          <div class="split-pane right-box">
            <div class="inner-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 class="table-box" v-if="reportTitle === '终检下片包装'">
                <glass-pack-report
                  :tableData1="packClaReportArr"
                  :tableData2="packReportArr"
                />
              </div>
              <div class="table-box" v-if="reportTitle === '玻璃判废统计表'">
                <glass-waste-report :tableData="wasteReportArr" />
              </div>
              <div class="table-box" v-if="reportTitle === '判废机组统计表'">
                <waste-machine-report :tableData="wasteMachineArr" />
              </div>
              <div class="table-box" v-if="reportTitle === '判废位置统计表'">
                <waste-location-report :tableData="wasteLocationArr" />
              </div>
              <div class="table-box" v-if="reportTitle === '玻璃基板缺陷报表'">
                <glass-defect-report :tableData="glassDefectArr" />
              </div>
              <div class="table-box" v-if="reportTitle === '厚度检查机报表'">
                <thickness-report :tableData="glassDefectArr" />
              </div>
            </div>
          </div>
        </template>
      </split-pane>
    </div>
  </div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import {
  listGlass,
  qualityReport,
  thickReport,
  qualityReportexport,
  thickReportexport,
  queryGlassData,
  claGlassData,
  getGlassVoid,
  getUnitVoid
} from '@/api/reportManagement'
import glassQualityReport from './finalInspectionDataReport/glassQualityReport.vue'
import glassThickReport from './finalInspectionDataReport/glassThickReport.vue'
import glassPackReport from './finalInspectionDataReport/glassPackReport.vue'
import glassWasteReport from './finalInspectionDataReport/glassWasteReport.vue'
import wasteMachineReport from './finalInspectionDataReport/wasteMachineReport.vue'
import wasteLocationReport from './finalInspectionDataReport/wasteLocationReport.vue'
import glassDefectReport from './finalInspectionDataReport/glassDefectReport.vue'
import thicknessReport from './finalInspectionDataReport/thicknessReport.vue'
import moment from 'moment'
import { timeFormatter } from '@/utils'
const tablePropsL = [
  {
    prop: 'glassId',
    label: 'ID',
    minWidth: 120
  },
  {
    prop: 'unloadTime',
    label: '检测时间',
    minWidth: 160,
    filter: timeFormatter
  },
  {
    prop: 'grindtype',
    label: '研磨类型',
    minWidth: 80
  },
  {
    prop: 'rackId',
    label: '玻璃架',
    minWidth: 80
  },
  {
    prop: 'glassNum',
    label: '数量',
    minWidth: 80
  }
]
export default {
  name: 'FinalInspectionData',
  components: {
    glassQualityReport,
    glassThickReport,
    glassPackReport,
    glassWasteReport,
    wasteMachineReport,
    wasteLocationReport,
    glassDefectReport,
    thicknessReport
  },
  data() {
    return {
      split1: 0.3,
      formConfig: [
        {
          type: 'select',
          label: '报表类型',
          selectOptions: [
            { id: '玻璃基板品质报表', name: '玻璃基板品质报表' },
            { id: '终检下片包装', name: '终检下片包装' },
            { id: '厚度汇总报表', name: '厚度汇总报表' },
            { id: '玻璃判废统计表', name: '玻璃判废统计表' },
            { id: '判废机组统计表', name: '判废机组统计表' },
            { id: '判废位置统计表', name: '判废位置统计表' },
            { id: '玻璃基板缺陷报表', name: '玻璃基板缺陷报表' },
            { id: '厚度检查机报表', name: '厚度检查机报表' }
          ],
          param: 'fullInspectionType',
          defaultSelect: '',
          onchange: true,
          width: 150
        },
        {
          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: '',
          label: '',
          selectOptions: [
            { id: '1', name: '1' },
            { id: '2', name: '2' },
            { id: '3', name: '3' },
            { id: '4', name: '4' },
            { id: '5', name: '5' },
            { id: '6', name: '6' },
            { id: '全部', name: '全部' }
          ],
          param: 'glassFrame1',
          defaultSelect: '全部',
          width: 150,
          clearable: false
        },
        {
          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: '',
        endTime: '',
        glassFrame: '',
        current: 1,
        size: 500
      },
      selectArr: [], // 表格选中的数据
      glassQualityArr: [], //基板玻璃品质
      thickReportArr: [], // 厚度汇总
      packReportArr: [], //下片包装
      packClaReportArr: [],
      wasteReportArr: [{ name1: 11 }, { name1: 22 }], // 玻璃判废
      wasteMachineArr: [],
      wasteLocationArr: [
        { name: '颗粒/面检数超标', dd1: '11', dd2: '0' },
        { name: '颗粒/缺陷聚集', name1: '22' },
        { name: '划伤', name1: '33' },
        { name: '面磨印记', name1: '44' },
        { name: '磨痕', name1: '55' }
      ],
      glassDefectArr: []
    }
  },
  mounted() {
    this.getOption()
    window.addEventListener('resize', () => {
      this.tableHL = tableHeight(300)
    })
    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'
    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[2].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 = []
      this.packReportArr = []
      this.packClaReportArr = []
      this.wasteReportArr = []
      this.wasteMachineArr = []
      console.log(val)
      if (val.value === '判废位置统计表') {
        this.formConfig[3].type = 'select'
        this.formConfig[3].label = '研磨类型'
      } else {
        this.formConfig[3].type = ''
        this.formConfig[3].label = ''
      }
      this.formConfig[1].defaultSelect =
        this.$refs.searchBarForm.formInline.timeVal
      this.formConfig[2].defaultSelect =
        this.$refs.searchBarForm.formInline.glassFrame
    },
    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
        case '终检下片包装':
          this.getGlassData(arr)
          break
        case '玻璃判废统计表':
          this.getWasteData(arr)
          break
        case '判废机组统计表':
          this.getWasteMachineData(arr)
          break
        default:
          console.log('111')
      }
    },
    // 玻璃基板品质报表
    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)
        }
      })
    },
    // 终检下片包装
    getGlassData(arr) {
      queryGlassData({
        glassId: arr
      }).then((res) => {
        console.log(res)
        this.packReportArr = res.data
      })
      claGlassData({
        glassId: arr
      }).then((res) => {
        console.log(res)
        this.packClaReportArr = res.data
      })
    },
    // 玻璃判废统计表
    getWasteData(arr) {
      getGlassVoid({
        size: 1000,
        current: 1,
        glassId: arr
      }).then((res) => {
        console.log(res)
        this.wasteReportArr = res.data
      })
    },
    // 判废机组统计表
    getWasteMachineData(arr) {
      getUnitVoid({
        size: 1000,
        current: 1,
        glassId: arr
      }).then((res) => {
        console.log(res)
        this.wasteMachineArr = res.data
      })
    }
  }
}
</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 {
    height: calc(100vh - 215px);
    margin: 8px 16px 0 16px;
    .split-pane {
      height: 100%;
      border-radius: 8px;
    }
    .left-box {
      padding: 16px;
      background-color: #fff;
      .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 {
      .inner-box {
        height: 100%;
        margin-left: 16px;
        padding: 16px 16px 0;
        border-radius: 8px;
        overflow: auto;
        background-color: #fff;
        .table-box {
          margin-top: 16px;
          height: calc(100vh - 290px);
          overflow: auto;
        }
      }
      .title::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 16px;
        background: #0b58ff;
        border-radius: 1px;
        margin-right: 8px;
        vertical-align: middle;
      }
    }
  }
}
</style>
