<template>
  <div>
    <el-form ref="queryFormRef" :model="queryParams" :inline="true" style="height: 65px;">
      <el-form-item label="拷机计划:" style="margin-left: 10px;">
        <el-input v-model="queryParams.checkName" placeholder="拷机计划" width="120px" clearable/>
      </el-form-item>
      <el-form-item label="设备SN:" style="margin-left: 10px;">
        <el-input v-model="queryParams.queryDeviceSn" placeholder="设备SN" width="130px" clearable/>
      </el-form-item>
      <el-form-item label="审核人:" style="margin-left: 10px;">
        <el-input v-model="queryParams.checkMan" placeholder="审核人" width="130px" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="button" :disabled="state.search_disabled" @click="queryList">
          查询报告
        </el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="state.tableData" border stripe style="width: 100%" :height="tableHeight"
      highlight-current-row :header-cell-style="{ background: '#606266', color: '#FFFFFF' }"
      @current-change="handleCurrentRowChange">
      <el-table-column fixed type="index" width="50" align="center" />
      <el-table-column fixed prop="checkName" label="拷机计划" header-align="center" width="200" />
      <el-table-column prop="checkNum" label="检测总数" header-align="center" align="center" width="100" />
      <el-table-column prop="checkQualNum" label="合格数" header-align="center" align="center" width="100" />
      <el-table-column label="不合格数" header-align="center" align="center" width="100">
        <template #default="scope">
          <el-button plain="true" v-if="scope.row.checkUnqualNum !== '0'">
            <font :color="scope.row.checkUnqualNum === '0' ? 'black' : 'red'">{{ scope.row.checkUnqualNum }}</font>
          </el-button>
          <li v-else>{{ scope.row.checkUnqualNum }}</li>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" header-align="center" width="100">
        <template #default="scope">
          {{ tool.dateFormatYMDHm(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column fit prop="chkrptDesc" label="报告描述" header-align="center" min-width="150" />
      <el-table-column label="审核时间" header-align="center" width="100">
        <template #default="scope">
          {{ tool.dateFormatYMDHm(scope.row.invalidTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="invalidMan" label="审核人" header-align="center" width="100" />
      <el-table-column label="审核结果" header-align="center" align="center" width="80">
        <template #default="scope">
          <el-tag v-if="scope.row.invalidFlag === '1'" type="danger">作废</el-tag>
          <el-tag v-else-if="scope.row.invalidFlag === '0'" type="success">通过</el-tag>
          <el-tag v-else type="info">待审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column fit prop="invalidBecause" label="作废原因" header-align="center" min-width="200" />
      <el-table-column fixed="right" label="" align="left" width="250">
        <template #default="scope">
          <el-button type="text" @click="handleReportCheck(scope.row)">报告审核</el-button>
          <el-button type="text" @click="handleDeviceCheck(scope.row)">设备审核</el-button>
          <el-button type="text" @click="handleDown(scope.row)">报告下载</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-config-provider :locale="locale">
      <el-pagination v-model:currentPage="queryParams.page" v-model:page-size="queryParams.rows"
        :page-sizes="[10, 15, 20, 25, 100]" :small="state.pagination.small" :disabled="state.pagination.disabled"
        :background="state.pagination.background" layout="total, sizes, prev, pager, next, jumper"
        :total="state.pagination.total" style="text-align: center; margin-top: 10px; height: 30px"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-config-provider>

    <el-dialog :title="dialog.title" v-model="dialog.visible" width="450px" draggable center>
      <el-form ref="formRef" :model="formData" label-width="100px">
        <el-form-item label="拷机计划:">
          <el-input v-model="formData.checkName" disabled width="120px" />
        </el-form-item>
        <el-form-item label="报告明细:">
          <el-descriptions direction="vertical" :column="3" border>
            <el-descriptions-item label="检测总数" align="center">{{ formData.checkNum }}</el-descriptions-item>
            <el-descriptions-item label="合格数" align="center">{{ formData.checkQualNum }}</el-descriptions-item>
            <el-descriptions-item label="不合格数" align="center">{{ formData.checkUnqualNum }}</el-descriptions-item>
          </el-descriptions>
        </el-form-item>
        <el-form-item label="报告描述:">
          <el-input v-model="formData.chkrptDesc" placeholder="报告描述" width="120px" type="textarea" disabled />
        </el-form-item>
        <el-form-item label="人工审核:">
          <el-radio-group v-model="formData.invalidFlag">
            <el-radio border label="0">通过</el-radio>
            <el-radio border label="1">作废</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="作废原因:" v-if="formData.invalidFlag === '1'">
          <el-input v-model="formData.invalidBecause" placeholder="作废原因" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-drawer v-model="state.drawer.visible" :direction="state.drawer.direction" size="46%">
      <template #title>
      <span style="font-size: 22px;margin-bottom: -20px;margin-top: -10px;">拷机计划：{{state.drawer.title}}</span>
    </template>
      <el-table v-loading="detail_loading" :data="state.drawerData" border style="width:100%"
        :height="drawerTableHeight">
        <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="70" 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="70" 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="70" 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="70" 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="80" 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="80" 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="70" 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="55" 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="人工判定" header-align="center" align="left" width="150">
          <template #default="scope">
            <el-radio-group v-model="scope.row.manualQualFlag" size="small">
              <el-radio-button border label="1" @change="handleCheck(scope.row, 1)">合格</el-radio-button>
              <el-radio-button border label="0" @change="handleCheck(scope.row, 0)">不合格</el-radio-button>
            </el-radio-group>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>

  <el-dialog v-model="state.pdf_dialog.visible" width="990px" draggable="true" center=true>
    <div id="demo">
      <div style="margin:10px">
        <el-descriptions :column="4" border direction="vertical">
          <template #title>
            <div>
              <span style="display:inline-block;width:950px;text-align:center;">{{ state.pdf_dialog.title }}</span>
            </div>
          </template>
          <el-descriptions-item label="拷机人员" label-align="center" align="center">{{ state.pdfData.createMan
          }}
          </el-descriptions-item>
          <el-descriptions-item label="审核人员" label-align="center" align="center">{{ state.pdfData.createMan
          }}
          </el-descriptions-item>
          <el-descriptions-item label="开始时间" label-align="center" align="center">{{
              tool.dateFormatNoSec(state.pdfData.startTime)
          }}
          </el-descriptions-item>
          <el-descriptions-item label="结束时间" label-align="center" align="center"> {{
              tool.dateFormatNoSec(state.pdfData.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 v-loading="detail_loading" :data="state.pdfData.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 min-width="80" 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.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">
            <template #default="scope">
              <font :color="scope.row.manualQualFlag == 0 ? 'red' : 'green'">{{ scope.row.manualQualFlag == 0 ? "✖" :
                  "✔"
              }}</font>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.pdf_dialog.visible = false">关闭</el-button>
        <el-button @click="DownPdf">下载</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted } from "vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import TChkrptAction from "@/api/qualitymanagement/tchkrpt";
import TCheckdetailAction from "@/api/qualitymanagement/tcheckdetail";
import { TChkrptModel, TChkrptDetailModel, TChkrptQueryParam, Dialog, PageResult } from "@/types";
import tool from "@/until/tool"
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { stringify } from "querystring";
import htmlToPdf from "@/until/htmlToPdf"

let locale = ref(zhCn);

const formRef = ref(ElForm); // 属性名必须和元素的ref属性值一致

const loading = ref(false);
const detail_loading = ref(false);
const state = reactive({
  queryParams: { page: 1, rows: 10 } as TChkrptQueryParam,
  currentType: 0,//val=0 废除考核报告; =1 人工审核;
  pagination: {
    total: 0,
    small: false,
    background: true,
    disabled: false,
  },
  drawer: {
    visible: false,
    direction: "rtl",
    title: "设备审核"
  },
  pdf_dialog: {} as Dialog,
  search_disabled: false,
  dialog: {} as Dialog,
  formData: {} as TChkrptModel,
  tableData: [] as TChkrptModel[],
  drawerData: [] as TChkrptDetailModel[],
  pdfData: {} as TChkrptModel,
});

const {
  queryParams,
  pagination,
  drawer,
  dialog,
  formData,
  tableData,
  drawerData,
  pdf_dialog,
  pdfData
} = toRefs(state);

const tableHeight = ref(document.documentElement.clientHeight - 190);
const drawerTableHeight = ref(document.documentElement.clientHeight - 100);

const currentRow = ref();

const handleCurrentRowChange = (val: TChkrptModel | undefined) => {
  currentRow.value = val;
};

const handleReportCheck = (row: TChkrptModel) => {
  state.currentType = 0;
  state.formData = JSON.parse(JSON.stringify(row));
  state.dialog = {
    title: "人工审核",
    visible: true,
    disabled: false,
  };
};

const handleDeviceCheck = (row: TChkrptModel) => {
  state.drawerData = JSON.parse(JSON.stringify(row.detailList));
  state.drawer.visible = true;
  state.drawer.title = row.checkName;
};

const queryList = () => {
  loading.value = true;
  state.search_disabled = true;
  TChkrptAction.QueryTChkrptList(state.queryParams).then((result) => {
      if (result.status === 200) {
        const { res, flag, error } = result.data;
        if (flag === "1") {
          const pageData = res as PageResult<TChkrptModel[]>;
          state.tableData = pageData.list;
          state.pagination.total = pageData.total;
        } else {
          ElMessage.error(error);
        }
      }
      loading.value = false;
      state.search_disabled = false;
    })
    .catch((error) => {
      ElMessage.error(error);
      //请求失败时的操作
      loading.value = false;
      state.search_disabled = false;
    });
};

const handleSizeChange = (val: number) => {
  queryParams.value.rows = val;
  queryList();
};

const handleCurrentChange = (val: number) => {
  queryParams.value.page = val;
  queryList();
};

const submitForm = () => {
  if (state.currentType == 0) {
    formRef.value.validate((valid: any) => {
      if (valid) {
        state.formData.invalidMan = localStorage.getItem("UserName") || "";
        TChkrptAction.EditTChkrpt(state.formData).then((result) => {
          const { res, flag, error } = result.data;
          if (flag === "1") {
            ElMessage.success("审核成功!!!");
            queryList();
            cancel();
          } else {
            ElMessage.error(error);
          }
        }).catch((error) => {
          ElMessage.error(error);
        });
      }
    });
  }
};

const cancel = () => {
  state.dialog.visible = false;
};

onMounted(() => {
  window.onresize = function () {
    tableHeight.value = document.documentElement.clientHeight - 190;
  };
  queryList();
});
const handleDown = (row: TChkrptModel) => {
  state.pdfData = JSON.parse(JSON.stringify(row));

  state.pdf_dialog = {
    title: state.pdfData.checkName,
    disabled: false,
    visible: true
  };
}

// const open = () => {
//   let dom = document.getElementById('demo') as HTMLDivElement;
//   if (dom != null) {
//     tool.addWaterMarker("通过", dom, "46px Microsoft JhengHei", "Red", 100, 100);
//   }
// }

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

const handleCheck = (row: TChkrptDetailModel, val: number) => {
  detail_loading.value = true;
  TCheckdetailAction.EditTCheckDetail(row).then((result) => {
    const { res, flag, error } = result.data;
    if (flag === "1") {
      ElMessage.success("审核成功");
      queryList();
      cancel();
    } else {
      ElMessage.error(error);
    }
    detail_loading.value = false;
  }).catch((error) => {
    ElMessage.error(error);
    detail_loading.value = false;
  });
};

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";
  }
};

</script>

<style lang="scss" scoped>
.button {
  margin: 10px 0;
}

labclass {
  width: 150;
}
</style>