<!--
 * @Author: zhp
 * @Date: 2023-11-06 15:15:30
 * @LastEditTime: 2024-06-04 16:54:46
 * @LastEditors: DY
 * @Description:
-->
<template>
  <el-drawer class="drawer" :visible.sync="visible" size="58%" @closed="$emit('destroy')">
    <small-title slot="title" :no-padding="true">
      {{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }}
    </small-title>
    <div class="detailBox">
      <el-row :gutter="24">
        <el-col :span="8">
          <p class="title">工厂名称</p>
          <p class="text">{{ factoryList[dataForm.factory] }}</p>
        </el-col>
        <el-col :span="8">
          <p class="title">时间维度</p>
          <p class="text">{{ ['日', '周', '月', '年'][dataForm.targetType] }}</p>
        </el-col>
        <el-col :span="8">
          <p class="title">时间</p>
          <p class="text">{{ dataForm.targetTime}}</p>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
        {{ '芯片' }}
      </small-title>
      <el-row :gutter="24">
        <el-col :span="6">
          <p class="title">芯片产量(片)</p>
          <p class="text">{{ dataForm.chipYield }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">芯片良率(%)</p>
          <p class="text">{{ dataForm.chipYieldRate }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">芯片BOM</p>
          <p class="text">{{ dataForm.chipBom }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">芯片总功率(MW)</p>
          <p class="text">{{ dataForm.chipTotalPower }}</p>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <p class="title">{{ ['FTO投入量(片)', '钼电极投入量(片)'][ftype] }}</p>
          <p class="text">{{ [dataForm.ftoInput, dataForm.molybdenumElectrodeInput][ftype] }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">{{ ['CSS稼动率(%)', 'PID6稼动率(%)'][ftype] }}</p>
          <p class="text">{{ dataForm.chipCssMarriageRate }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">芯片段OEE(%)</p>
          <p class="text">{{ dataForm.chipOee }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">芯片平均功率(W)</p>
          <p class="text">{{ dataForm.chipAveragePower }}</p>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <p class="title">芯片人均产量(片/人)</p>
          <p class="text">{{ dataForm.chipAnnualAverageProduction }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">芯片产能利用率(%)</p>
          <p class="text">{{ dataForm.chipCapacityUtilizationRate }}</p>
        </el-col>
      </el-row>
      <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
        {{ '标准组件' }}
      </small-title>
      <el-row :gutter="24">
        <el-col :span="6">
          <p class="title">封装BOM</p>
          <p class="text">{{ dataForm.componentBom }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">封装线OEE(%)</p>
          <p class="text">{{ dataForm.componentOee }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">标准组件良率(%)</p>
          <p class="text">{{ dataForm.componentYieldRate }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">标准组件产量(片)</p>
          <p class="text">{{ dataForm.componentYield }}</p>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <p class="title">标准组件总功率(MW)</p>
          <p class="text">{{ dataForm.componentTotalPower }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">封装产能利用率(%)</p>
          <p class="text">{{ dataForm.componentCapacityUtilizationRate }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">标准组件人均产量(片/人)</p>
          <p class="text">{{ dataForm.componentAnnualAverageProduction }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">标准组件平均功率(W)</p>
          <p class="text">{{ dataForm.componentAveragePower }}</p>
        </el-col>
      </el-row>
      <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
        {{ 'BIPV产品' }}
      </small-title>
      <el-row :gutter="24">
        <el-col :span="6">
          <p class="title">产品产量(㎡)</p>
          <p class="text">{{ dataForm.bipvProductOutput }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">人均产量(㎡/人)</p>
          <p class="text">{{ dataForm.bipvAnnualAverageProduction }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">芯片使用量(片)</p>
          <p class="text">{{ dataForm.bipvChipUsage }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">芯片利用率(%)</p>
          <p class="text">{{ dataForm.bipvChipUtilizationRate }}</p>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <p class="title">内部材料成本(元/㎡)</p>
          <p class="text">{{ dataForm.bipvInsideMaterialCost }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">OEM及委外材料成本(元/㎡)</p>
          <p class="text">{{ dataForm.bipvOeeMaterialCost }}</p>
        </el-col>
        <el-col :span="6">
          <p class="title">综合材料成本(元/㎡)</p>
          <p class="text">{{ dataForm.bipvComprehensiveMaterialCost }}</p>
        </el-col>
      </el-row>
    </div>
  </el-drawer>

</template>

<script>
import { getProduceTargetDetail } from '@/api/produceData';
import SmallTitle from './SmallTitle';
import { factoryList } from "@/utils/constants";

export default {
  components: {
    SmallTitle,
  },
  props: {
    ftype: {
      type: Number,
      default: 0
    }
  },
  // mixins: [basicAdd],
  data() {
    return {
      factoryList,
      urlOptions: {
        isGetCode: false,
        // codeURL: getCode,
        // createURL: createQualityScrapLog,
        // updateURL: updateQualityScrapLog,
        // infoURL: getQualityScrapLog,
      },
      lineList: [],
      typeList: [],
      workOrderList: [],
      detList: [],
      teamList: [],
      sourceList: [
        {
          id: 1,
          name: '手动',
        },
        {
          id: 2,
          name: '自动',
        }
      ],
      sectionList: [],
      visible: false,
      dataForm: {
        id: undefined,
        logTime: undefined,
        source: 1,
        detId: undefined,
        workOrderId: null,
        teamId: undefined,
        num: undefined,
        lineId: undefined,
        description: undefined,
        // description: undefined,
        remark: undefined,
      },
      // materialList: [],
      dataRule: {
        // materialId: [{ required: true, message: "", trigger: "blur" }],
        workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }],
        num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
        detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }],

        logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }],
      }
    };
  },
  mounted() {
    this.getDict()
    console.log('我看看', this.dataForm)
    // this.getCurrentTime()
  },
  methods: {
    init(id) {
      this.visible = true
      console.log('打印', id)
      if (id) {
        getProduceTargetDetail(id).then(res => {
          this.dataForm = res.data
        })
      }
    },
    // 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);
    // },
    async getDict() {
    //   // 物料列表
    //   const res = await getList()
    //   this.typeList = res.data
    //   getWorkOrderList().then((res) => {
    //     console.log(res);
    //     // console.log(response);
    //     this.workOrderList = res.data.map((item) => {
    //       return {
    //         name: item.name,
    //         id: item.id
    //       }
    //     })
    //     // console.log(this.formConfig[0].selectOptions);
    //     // this.listQuery.total = response.data.total;
    //   })
    //   getLineList().then((res) => {
    //     console.log(res);
    //     // console.log(response);
    //     this.lineList = res.data.map((item) => {
    //       return {
    //         name: item.name,
    //         id: item.id
    //       }
    //     })
    //     // console.log(this.formConfig[0].selectOptions);
    //     // this.listQuery.total = response.data.total;
    //   })
    //   getDetList().then((res) => {
    //     console.log(res);
    //     // console.log(response);
    //     this.detList = res.data.map((item) => {
    //       return {
    //         name: item.content,
    //         id: item.id
    //       }
    //     })
    //     // console.log(this.formConfig[0].selectOptions);
    //     // this.listQuery.total = response.data.total;
    //   })
    //   getTeamList().then((res) => {
    //     console.log(res);
    //     // console.log(response);
    //     this.teamList = res.data.map((item) => {
    //       return {
    //         name: item.name,
    //         id: item.id
    //       }
    //     })
    //     // console.log(this.formConfig[0].selectOptions);
    //     // this.listQuery.total = response.data.total;
    //   })
    // },
    // async getWorksectionById(lineId) {
    //   if (lineId) {
    //     const { code, data } = await this.$axios({
    //       url: '/base/core-workshop-section/listByParentId',
    //       method: 'get',
    //       params: {
    //         id: lineId,
    //       },
    //     });
    //     if (code == 0) {
    //       console.log(data)
    //       this.sectionList = data.map((item) => {
    //         return {
    //           name: item.name,
    //           id: item.id,
    //         };
    //       });
    //     }
    //   } else {
    //     this.$axios({
    //       url: '/base/core-workshop-section/listAll',
    //       method: 'get',
    //       // params: {
    //       //   id: lineId,
    //       // },
    //     }).then((res) => {
    //       // console.log(data)
    //       this.sectionList = res.data.map((item) => {
    //         return {
    //           name: item.name,
    //           id: item.id,
    //         };
    //       });
    //     })
    //   }
    },
  },
};
</script>
<style scoped>
  .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 {
  width: 98%;
}

</style>
