<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-input v-model="state.filter.serno" 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-input v-model="state.filter.exserno" 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-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-select v-model="state.filter.functionCode" default-first-option="true" filterable allow-create 
                    value-key="code"
                    @blur="codeblur()"
                    title='可直接输入具体功能码'
                    ref="codeSel">
                    <el-option v-for="item in options" :key="item.key" :label="item.name"
                      :value="Number(item.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-select v-model="state.filter.testType" placeholder="">
                    <el-option v-for="(value, key) in PCBATestType" :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.user" 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-select v-model="state.filter.result" placeholder="">
                    <el-option v-for="(value, key) in PCBATestState" :key="key" :label="value[1].name"
                      :value="Number(value[1].value)" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                <el-form-item label="检测时间范围">
                  <el-date-picker
                    v-model="state.filter.testTimeRange"
                    type="daterange"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    range-separator="To"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                  <el-button type="primary" icon="ele-Search" @click="onQuery" style="margin-left: 80vh;"> 查询 </el-button>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>
          <div class="my-flex my-flex-start" style="margin-top: -35px;">

          </div>
        </el-card>
      </el-col>
      <!--表格-->
      <el-col :xs="24">
        <el-card style="height: 45vh" class="my-fill mt8" shadow="hover">
          <el-table v-loading="state.loading" stripe :data="state.tableModel" row-key="id" style="width: 100%">
            <el-table-column prop="serno" label="序列号" />
            <el-table-column prop="exserno" label="外部序列号" />
            <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="functionCode" label="功能码" />
            <el-table-column prop="functionName" label="功能名称" />
            <el-table-column prop="testType" label="检测类型">
              <template #default="{ row }">
                <div :style="{ color: getPCBATestType(row.testType).color }" class="bold-font">
                  {{ getPCBATestType(row.testType).name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="测试时间" />
            <el-table-column prop="result" label="测试结果">
              <template #default="{ row }">
                <div :style="{ color: getPCBATestState(row.result).color }" class="bold-font">
                  {{ getPCBATestState(row.result).name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="testNum" label="测试功能数" />
            <el-table-column prop="testSuccessNum" label="测试成功功能数" />
            <el-table-column prop="user" label="测试员" />
            <el-table-column prop="info" label="备注" />
          </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 { BoardTestRecordApi } from '/@/api/admin/PCBA/boardTestRecordApi';
import { BoardTestRecordDto } from '/@/api/admin/PCBA/boardTestRecordDto';
import type { pageInput } from "/@/api/admin/shareDto/shareDto";
import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
import { getCurrentInstance } from 'vue';
const { proxy: ctx } = getCurrentInstance();

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

const getPCBATestState = (val) => {
  val = String(val);
  if (PCBATestState.value?.has(val)) {
    const stateObj = PCBATestState.value.get(val);
    if (stateObj.name === '未测试') {
      return { ...stateObj, color:'royalblue' };
    }
    return stateObj;
  } else {
    return { name: val, color: 'inherit' };
  }
};

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

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

const codeblur = () => {
  let value = ctx.$refs.codeSel.selectedLabel;
  if (value == '所有' || value == '') {
    value = -1;
  }
  state.filter.functionCode = value;
};

const options = [{
  value: -1,
  name: '所有',
  key: "-1",
  info: "可直接输入具体功能码"
}];

/**数据对象*/
const state = reactive({
  /**加载显示 */
  loading: false,
  /**条件查询模块 */
  filter: {
    /**serno */
    serno: "",
    /**exserno */
    exserno: "",
    /**boardType */
    boardType: -1,
    /**functionCode */
    functionCode: -1,
    /**检测类型 */
    testType: -1,
    /**检测时间范围 */
    testTimeRange: [], // 新增属性，用于存储时间范围
    /**测试结果 */
    result: -1,
    /**测试员 */
    user: "",
  },
  /**表格信息 */
  tableModel: [] as BoardTestRecordDto,
  /**动态表头 */
  dynamicColumns: [
    { prop:'serno', label: '序列号' },
    { prop: 'boardType', label: '主板类型' },
    { prop: 'boardName', label: '主板名称' },
    { prop: 'functionCode', label: '功能码' },
    { prop: 'functionName', label: '功能名称' },
    { prop: 'testType', label: '检测类型' },
    { prop: 'time', label: '检测时间' },
    { prop:'result', label: '测试结果' },
    { prop: 'testNum', label: '测试功能数' },
    { prop: 'testSuccessNum', label: '测试成功功能数' },
    { prop: 'user', label: '测试员' },
    { prop: 'duration', label: '测试耗时' },
    { prop: 'info', label: '备注' },
  ],
  /**分页标识 */
  pageInput: {
    CurrentPage: 1,
    PageSize: 10,
  } as pageInput,
  /**分页总数 */
  total: 0,
});

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

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

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

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

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

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