<!--
 * @Author: zhp
 * @Date: 2023-11-06 15:15:30
 * @LastEditTime: 2024-06-07 14:15:00
 * @LastEditors: DY
 * @Description:
-->
<template>
  <el-drawer class="drawer" :visible.sync="visible" size="85%" @closed="$emit('destroy')">
    <small-title slot="title" :no-padding="true">
      {{ '详情' }}
      <el-button type="primary" plain size="small" style="float: right" @click="exportDetail">导出</el-button>
    </small-title>
    <div ref="detail" class="detailBox">
      <el-row :gutter="20">
        <el-col :span="3">
          <p class="title">工单号</p>
          <p class="text">{{ dataForm.workOrderNumber }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">订单号</p>
          <p class="text">{{ dataForm.orderNumber }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">工单类型</p>
          <p class="text">{{ ['', '芯片订单', '组件类型', 'bipv类型'][dataForm.workOrderType] }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">工单来源</p>
          <p class="text">{{ ['', '手动', 'ERP'][dataForm.source] }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">工艺流程</p>
          <p class="text">{{ dataForm.process }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">BOM</p>
          <p class="text">{{ dataForm.bom }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">工单状态</p>
          <p class="text">{{ ['未开始', '生产中', '已完成'][dataForm.orderStatus] }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">投入状态</p>
          <p class="text">{{ getDictDataLabel('work_order_in_status', dataForm.inStatus) }}</p>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">
          <p class="title">计划投入量</p>
          <p class="text">{{ dataForm.plannedInvestment }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">目标产量</p>
          <p class="text">{{ dataForm.targetProduction }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">实际投入</p>
          <p class="text">{{ dataForm.actualInvestment }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">实际产出</p>
          <p class="text">{{ dataForm.actualProduction }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">创建时间</p>
          <p class="text">{{ parseTime(dataForm.createTime) }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">开始时间</p>
          <p class="text">{{ dataForm.startDate?.length > 0 ? dataForm.startDate[0] + '-' + dataForm.startDate[1] + '-' + dataForm.startDate[2] : '' }}</p>
        </el-col>
        <el-col :span="3">
          <p class="title">完成时间</p>
          <p class="text">{{ dataForm.endDate?.length > 0 ? dataForm.endDate[0] + '-' + dataForm.endDate[1] + '-' + dataForm.endDate[2] : '' }}</p>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <div class="chartDiv">
        <div ref="bar" :style="{ height: '30vh', width: '40vw' }" />
        <div ref="pie" :style="{ height: '30vh', width: '40vw' }" />
      </div>
      <div class="chartDiv">
        <div ref="equipmentLine" :style="{ height: '30vh', width: '40vw' }" />
        <div ref="line" v-show="dataForm.orderStatus === 1" :style="{ height: '30vh', width: '40vw' }" />
      </div>
    </div>
  </el-drawer>

</template>

<script>
// import basicAdd from './basic-add';
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
import { getWorkOrderDetail } from '@/api/produceData/order';
import SmallTitle from './SmallTitle';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import { getDictDataLabel } from "@/utils/dict";

export default {
  components: {
    SmallTitle,
  },
  mixins: [resize],
  props: {
    date: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      lineChart: null,
      pieChart: null,
      barChart: null,
      equipmentLineChart: null,
      visible: false,
      dataForm: {}
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    // this.getCurrentTime()
  },
  methods: {
    exportDetail() {
      // 导出
      const pdf = new jsPDF('l', 'pt', 'a4');

      const canvas = document.createElement('canvas')
      
      const element = this.$refs['detail'];
      const width = pdf.internal.pageSize.getWidth()
      const height = pdf.internal.pageSize.getHeight()
      
      canvas.width = width * 2
      canvas.height = height * 2

      canvas.style.width = width + 'px'
      canvas.style.height = height + 'px'
      
      const options = {
        // scale: 2,
        dpi: 300,
        canvas: canvas,
        useCORS: true
      };

      html2canvas(element, options).then((canvas) => {
        const imgData = canvas.toDataURL('image/png', 1.0);
        pdf.addImage(imgData, 'PNG', 0, 0, width, height);
        pdf.save(this.dataForm.workOrderNumber + '详情.pdf');
      });
    },
    init(id) {
      this.visible = true
      this.$nextTick(() => {
        this.initLineChart()
      })
      if (id) {
        getWorkOrderDetail(id).then(res => {
          if (res.code === 0) {
            this.dataForm = res.data.prodWorkOrderDO
            this.buildChart(this.dataForm)
            // 在制品
            const xAxisList = Object.keys(res.data.inProcessDis)
            const yAxisList = Object.values(res.data.inProcessDis)
            this.initEqLineChart(xAxisList, yAxisList)
            // 趋势图
            const seriesList = []
            const dateList = []
            res.data.his.forEach(element => {
              seriesList.push(element.actualProduction)
              dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
            })
            this.initLineChart(dateList, seriesList)
          }
          // if (this.dataForm.orderStatus === 1) {
          //   this.trend()
          // }
        })
        // getEqNum(id).then(response => {
        //   if (response.code === 0) {
        //     const xAxisList = Object.keys(response.data)
        //     const yAxisList = Object.values(response.data)
        //     this.initEqLineChart(xAxisList, yAxisList)
        //   }
        // })
        
      }
    },
    trend() {
      // 趋势图
      getDailyTrend({ factory: this.dataForm.id }).then(trendRes => {
        if (trendRes?.data.length > 0) {
          const seriesList = []
          const dateList = []
          trendRes.data.forEach(element => {
            seriesList.push(element.actualProduction)
            dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
          })
          this.initLineChart(dateList, seriesList)
        }
      })
    },
    buildChart(data) {
      // 生产明细
      const barList = [data.targetProduction, data.plannedInvestment, data.actualInvestment, data.actualProduction, data.wasteNum, data.reworkNum]
      this.initChart(barList)
      // 良品率
      const pieList = [
        { value: data.actualProduction, name: '实际产出' },
        { value: data.wasteNum, name: '废品数量' },
        { value: data.reworkNum, name: '待再加工数量' }
      ]
      this.initPieChart(pieList)
    },
    initChart(barData) {
      this.barChart = echarts.init(this.$refs['bar'])
      this.barChart.setOption({
        title: {
          text: '生产明细',
          left: 'center'
          // subtext: 'Fake Data'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
        calculable: true,
        grid: {
          top: '20%',
          left: "1%",
          right: "3%",
          bottom: "1%",
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['目标产量', '计划投入量', '实际投入', '实际产出', '废品数量', '待再加工数量'],
          axisLabel: {
            rotate:45
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: barData,
            type: 'bar',
            barWidth: '40%'
          }
        ]
      }, true)
    },
    initPieChart(pieData) {
      this.pieChart = echarts.init(this.$refs['pie'])
      this.pieChart.setOption({
        title: {
          text: '产品良率 ' + (pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100 + '%',
          left: 'center'
          // subtext: 'Fake Data'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'right',
          orient: 'vertical'
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: pieData
          }
        ]
      }, true)
    },
    initEqLineChart(xAxisList, yAxisList) {
      this.equipmentLineChart = echarts.init(this.$refs['equipmentLine'])
      this.equipmentLineChart.setOption({
        title: {
          text: '在制品分布',
          left: 'center'
          // subtext: 'Fake Data'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
        calculable: true,
        grid: {
          top: '20%',
          left: "1%",
          right: "3%",
          bottom: "1%",
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxisList,
          axisLabel: {
            rotate:45,
            // width: '10%'
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yAxisList,
            type: 'bar',
            barWidth: '40px'
          }
        ]
      }, true)
    },
    initLineChart(xAxisList, seriesList) {
      this.lineChart = echarts.init(this.$refs['line'])
      this.lineChart.setOption({
        title: {
          text: '历史趋势',
          left: 'center' // 设置标题居中
        },
        xAxis: {
          type: 'category',
          data: xAxisList,
          axisLabel: {
            rotate:45
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: seriesList,
            type: 'line'
          }
        ]
      }, true)
    }
    // getCurrentTime() {
    //   // new Date().Format("yyyy-MM-dd HH:mm:ss")
    //   this.dataForm.logTime = new Date()
    //   // this.dataForm.logTime = year + "-" + month + "-" + day;
    //   console.log(this.dataForm.logTime);
    // },
  },
};
</script>
<style scoped>
.chartDiv {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 5px;
  padding-left: 30px;
}
  .drawer >>> .el-drawer {
  border-radius: 8px 0 0 8px;
}

.drawer >>> .el-form-item__label {
  padding: 0;
}

.drawer >>> .el-drawer__header {
  margin: 0;
  padding: 32px 32px 24px;
  border-bottom: 1px solid #dcdfe6;
  /* margin-bottom: 30px; */
}
.detailBox p {
  margin: 0;
  padding: 0 32px;
}
.detailBox .title {
  /* width: 56px; */
  /* height: 14px; */
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 16px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.detailBox .text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(102,102,102,0.75);
  padding-bottom: 20px;
}
.detailBox {
  padding-top: 30px;
  width: 99%;
}
</style>
