<template>
    <div id="demo">
      <div style="margin:10px;">
        <el-descriptions :column="4" border direction="vertical">
          <template #title>
            <div>
              <span style="display:inline-block;width:900px;text-align:center;">{{ state.checkData.checkName }}</span>
            </div>
          </template>
          <el-descriptions-item label="拷机人员" label-align="center" align="center">{{ state.chkrptData.createMan
          }}
          </el-descriptions-item>
          <el-descriptions-item label="审核人员" label-align="center" align="center">{{ state.chkrptData.createMan
          }}
          </el-descriptions-item>
          <el-descriptions-item label="开始时间" label-align="center" align="center">{{ tool.dateFormatNoSec(state.checkData.startTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="结束时间" label-align="center" align="center"> {{ tool.dateFormatNoSec(state.checkData.endTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="技术指标" label-align="left" align="left" span="4">
            完整性:>=95%;{{ "\xa0\xa0\xa0" }}识别准确率:>=95%;{{ "\xa0\xa0\xa0" }}最终准确率:>=95%;{{ "\xa0\xa0\xa0"
            }}信号合格率:>=95%(外置>=50,内置>=45);{{ "\xa0\xa0\xa0" }}电压合格率:>=95%(电源供电合格范围3.3~3.8V,电池供电3.5~3.8)
          </el-descriptions-item>
        </el-descriptions>
        <el-table :data="state.chkrptData.detailList" border style="width:100%">
          <el-table-column fixed type="index" width="50" align="center" />
          <el-table-column fixed prop="deviceSn" label="设备SN" width="110" header-align="center" align="center">
          </el-table-column>
          <el-table-column label="完整性(外)" fit width="65" header-align="center" align="center">
            <template #default="scope">
              <font :color="GetDataIntegrity(scope.row.revIntegRate)">{{ scope.row.revIntegRate }}</font>
            </template>
          </el-table-column>
          <el-table-column label="完整性(内)" fit width="65" header-align="center" align="center">
            <template #default="scope">
              <font :color="GetDataIntegrity(scope.row.insideRevIntegRate)">{{ scope.row.insideRevIntegRate }}</font>
            </template>
          </el-table-column>
          <el-table-column label="识别准确率" fit width="95" header-align="center" align="center">
            <template #default="scope">
              <font :color="GetDataAccuracy(scope.row.recogAccuracy)">{{ scope.row.recogAccuracy }}</font>
            </template>
          </el-table-column>
          <el-table-column label="最终准确率" fit width="95" header-align="center" align="center">
            <template #default="scope">
              <font :color="GetOriginaldataAccuracy(scope.row.finalAccuracy)">{{ scope.row.finalAccuracy }}</font>
            </template>
          </el-table-column>
          <el-table-column label="信号合格率(外)" fit width="85" header-align="center" align="center">
            <template #default="scope">
              <font :color="GetSignalQualityAverage(scope.row.rsrpQualRate)">{{ scope.row.rsrpQualRate }}</font>
            </template>
          </el-table-column>
          <el-table-column label="信号合格率(内)" fit width="85" header-align="center" align="center">
            <template #default="scope">
              <font :color="GetSignalQualityAverage(scope.row.insideRsrpQualRate)">{{ scope.row.insideRsrpQualRate }}</font>
            </template>
          </el-table-column>
          <el-table-column label="电压合格率" fit width="95" header-align="center" align="center">
            <template #default="scope">
              <font :color="GetVoltageAverage(scope.row.vtQualRate)">{{ scope.row.vtQualRate }}</font>
            </template>
          </el-table-column>
          <el-table-column label="系统判定" fit width="80" header-align="center" align="center">
            <template #default="scope">
              <font :color="scope.row.systemQualFlag == 0 ? 'red' : 'green'">{{ scope.row.systemQualFlag == 0 ? "✖" :
                  "✔"
              }}</font>
            </template>
          </el-table-column>
          <el-table-column label="人工判定" fit header-align="center" align="center" width="80" v-if="state.chkrptData.id">
            <template #default="scope">
              <font :color="scope.row.manualQualFlag == 0 ? 'red' : 'green'">{{ scope.row.manualQualFlag == 0 ? "✖" :
                  "✔"
              }}</font>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div style="text-align: center;margin-top:10px">
        <el-button @click="closeClick">关闭</el-button>
        <el-button @click="DownPdf">下载</el-button>
    </div>
</template>

<script lang="ts" setup>
import { TChkrptModel, TCheckModel } from "@/types";
import { onMounted, reactive } from "vue";
import TChkrptAction from '@/api/qualitymanagement/tchkrpt'
import { ElMessage } from "element-plus";
import { watch } from "@vue/runtime-core";
import htmlToPdf from '@/until/htmlToPdf';
import tool from "@/until/tool"

//子->父
const emit = defineEmits(['close'])

const props = defineProps({
  //子组件接收父组件传递过来的值
  title: String,
  checkData: Object
})

onMounted(() => {
  state.checkData = props.checkData as TCheckModel;
  getTChkrpt();
});

const state = reactive({
  checkData: {} as TCheckModel,
  chkrptData: {} as TChkrptModel,
  visible: false,
});

const getTChkrpt = () => {
  TChkrptAction.GenerateTChkrpt(state.checkData.checkId, state.checkData.createMan).then((result) => {
    if (result.status === 200) {
      const { res, flag, errot } = result.data;
      if (flag != undefined && flag == 1) { 
        state.chkrptData = res as TChkrptModel;
        //console.log(state.chkrptData);   
      }
    }
  }).catch((error) => {
    //请求失败时的操作
    ElMessage.error(error);
  });
}

const DownPdf = () => {
  let dom = document.getElementById('demo');
  if (dom) {
    let filename = state.checkData.checkName;
    htmlToPdf.downloadPDF(dom, filename);
  }
}

const GetDataIntegrity = (val: any) => {
  if (val) {
    if (val < 95) {
      return "#F56C6C";
    }
    else {
      return "#303133";
    }
  }
  else {
    return "red";
  }
};
const GetDataAccuracy = (val: any) => {
  if (val) {
    if (val < 95) {
      return "#F56C6C";
    }
    else {
      return "#303133";
    }
  }
  else {
    return "red";
  }
};
const GetOriginaldataAccuracy = (val: any) => {
  if (val) {
    if (val < 95) {
      return "#F56C6C";
    }
    else {
      return "#303133";
    }
  }
  else {
    return "red";
  }
};
const GetSignalQualityAverage = (val: any) => {
  if (val) {
    if (val < 95) {
      return "#F56C6C";
    }
    else {
      return "#303133";
    }
  }
  else {
    return "red";
  }
};
const GetVoltageAverage = (val: any) => {
  if (val) {
    if (val < 95) {
      return "#F56C6C";
    }
    else {
      return "#303133";
    }
  }
  else {
    return "red";
  }
}

const closeClick=()=>{
  state.checkData={} as TCheckModel;
  state.chkrptData={} as TChkrptModel;
  emit('close', true)
}
</script>