<template>
  <div class="layout-pd">
    <el-row>
      <!--操作-->
      <el-col :xs="24">
        <el-card class="mt8" shadow="hover">
          <el-form :model="state.filter" :inline="true" @submit.stop.prevent>
            <el-form-item prop="name" style="width: 100%">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="主板类型">
                  <el-select v-model="state.filter.boardType" placeholder="">
                    <el-option v-for="(value, key) in PCBABoardType" :key="key" :label="value[1].name"
                      :value="Number(value[1].value)" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="检测员">
                  <el-input v-model="state.filter.lastTestUser" placeholder="单行输入" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="创建时间范围">
                  <el-date-picker
                    v-model="state.filter.createTimeRange"
                    type="daterange"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    range-separator="To"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>
          <div class="my-flex my-flex-start" style="margin-top: -38px;">
            <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
            <el-button type="primary" icon="ele-Document" @click="exportDataToExcel"> 导出 </el-button>
            <!--<el-button  type="primary" icon="ele-CirclePlus" @click="onBatExport"> 批量导出 </el-button>-->
          </div>
        </el-card>
      </el-col>
      <!--表格-->
      <el-col :xs="24">
        <el-card style="height: 55vh" class="my-fill mt8" shadow="hover">
          <el-table id="myTable" ref="myTable" v-loading="state.loading" stripe :data="state.tableModel" row-key="id" style="width: 100%">
            <!--<el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"  >
            </el-table-column>-->
            <el-table-column prop="boardType" label="主板类型">
              <template #default="{ row }">
                <div :style="{ color: getPCBABoardType(row.boardType).color }" class="bold-font">
                  {{ getPCBABoardType(row.boardType).name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="boardNum" label="主板数量" />
            <el-table-column prop="boardSuccessNum" label="测试通过数量" />
            <el-table-column prop="boardOneTestSuccessNum" label="一次通过数量" />
            <el-table-column prop="boardTestTimes" label="测试次数" />
            <el-table-column prop="boardSuccessTimes" label="测试成功次数" />
            <el-table-column prop="boardSuccessRate" label="测试通过率">
              <template #default="{ row }">
                <div> {{row.boardSuccessRate }}%</div>
              </template>
            </el-table-column>
            <el-table-column prop="boardOneTestSuccessRate" label="测试一次通过率">
              <template #default="{ row }">
                <div> {{row.boardOneTestSuccessRate }}%</div>
              </template>
            </el-table-column>
            <el-table-column prop="boardTestSuccessRate" label="测试成功率">
              <template #default="{ row }">
                <div> {{row.boardTestSuccessRate }}%</div>
              </template>
            </el-table-column>
          </el-table>
          <div class="my-flex my-flex-end" style="margin-top: 20px">
            <el-pagination
              v-model:currentPage="state.pageInput.CurrentPage"
              v-model:page-size="state.pageInput.PageSize"
              :total="state.total"
              :page-sizes="[10, 20, 50, 100]"
              small
              background
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, watch, ref } from "vue";
import eventBus from "/@/utils/mitt";
import { BoardSummaryApi } from '/@/api/admin/PCBA/boardSummaryApi';
import { BoardSummaryOutput } from '/@/api/admin/PCBA/boardSummaryDto';
import type { pageInput } from "/@/api/admin/shareDto/shareDto";
import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
import { getCurrentInstance } from 'vue';
import { saveAs } from 'file-saver';
import * as ExcelJS from 'exceljs';

const { proxy: ctx } = getCurrentInstance();

/**获取全局缓存*/
const globalCacheStore = useGlobalCacheStore();
/**数据字典缓存*/
const PCBATestState = ref(globalCacheStore.getGlobalStore().get('pcbaTestState'));
const PCBABoardType = ref(globalCacheStore.getGlobalStore().get('pcbaBoardType'));

const getPCBATestState = (val) => {
  val = String(val);
  if (PCBATestState.value?.has(val)) {
    return PCBATestState.value.get(val);
  } else {
    return val;
  }
};

const getPCBABoardType = (val) => {
  val = String(val);
  if (PCBABoardType.value?.has(val)) {
    return PCBABoardType.value.get(val);
  } else {
    return val;
  }
};

/**数据对象*/
const state = reactive({
  /**加载显示 */
  loading: false,
  /**条件查询模块 */
  filter: {
    /**boardType */
    boardType: -1,
    /**检测员 */
    lastTestUser: "",
    /**创建时间范围 */
    createTimeRange: [], // 新增属性，用于存储时间范围
  },
  /**表格信息 */
  tableModel: [] as BoardSummaryOutput,
  /**动态表头 */
  dynamicColumns: [],
  /**分页标识 */
  pageInput: {
    CurrentPage: 1,
    PageSize: 10,
  } as pageInput,
  /**分页总数 */
  total: 0,
});

onMounted(() => {
  init();
  eventBus.off('refreshView');
  eventBus.on('refreshView', async () => {
    await init();
  });
});

onBeforeMount(() => {
  eventBus.off('refreshView');
});

/**
 * 监听变换
 */
watch(() => {}, () => {});

/**条件查询 */
const onQuery = () => {
  init();
};

/**初始化 */
const init = async () => {
  state.loading = true;
  // 处理时间范围，将数组中的开始和结束时间分别赋值给API需要的字段
  const { createTimeRange, ...filterWithoutTimeRange } = state.filter;
  const beginCreateTime = createTimeRange.length > 0? createTimeRange[0] : "";
  const endCreateTime = createTimeRange.length > 1? createTimeRange[1] : "";
  const res: any = await new BoardSummaryApi().getList({
   ...state.pageInput,
    Filter: {
     ...filterWithoutTimeRange,
      beginCreateTime,
      endCreateTime,
    },
  });
  state.total = res?.data?.total?? 0;
  state.tableModel = res?.data?.list?? [];
  state.loading = false;
};

async function exportDataToExcel() {
  const tableData = ctx.$refs.myTable.data;
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('My Sheet');
  worksheet.columns = [
    { header: '主板数量', key: 'boardNum', width: 15 },
    { header: '测试通过数量', key: 'boardSuccessNum', width: 15 },
    { header: '一次通过数量', key: 'boardOneTestSuccessNum', width: 15 },
    { header: '测试次数', key: 'boardTestTimes', width: 15 },
    { header: '测试成功次数', key: 'boardSuccessTimes', width: 15 },
    { header: '测试通过率', key: 'boardSuccessRate', width: 15 },
    { header: '测试一次通过率', key: 'boardOneTestSuccessRate', width: 15 },
    { header: '测试成功率', key: 'boardTestSuccessRate', width: 15 }
  ];

  for (let i = 0; i < tableData.length; i++) {
    let data = tableData[i];
    data.boardSuccessRate += "%";
    data.boardOneTestSuccessRate += "%";
    data.boardTestSuccessRate += "%";
    worksheet.addRow(tableData[i]);
  }

  // 生成 Excel 文件
  const buffer = await workbook.xlsx.writeBuffer();
  // 将文件保存到本地
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  saveAs(blob, '主板检测汇总.xlsx');
  console.log('文件已成功导出！');
}

/** 页条数变化 */
const onSizeChange = () => {
  init();
};

/** 页数变化 */
const onCurrentChange = () => {
  init();
};
</script>

<style scoped lang="scss">
</style>