<script setup lang="ts">

import {FormatterUtils} from "@/utils/FormatterUtils.ts";
import {onMounted, ref} from "vue";
import type {IRecordScanData} from "@/model/table/IRecordScanData.ts";
import type {IRecordScanSearch} from "@/interface/page/rocordScan/IRecordScanSearch.ts";
import type {IAppStockScan} from "@/model/table/IAppStockScan.ts";
import StockScanApi from "@/api/stockScan.ts";
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
import type {PageDataResponse} from "@/interface/api/PageDataResponse.ts";
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
import MessageUtils from "@/utils/MessageUtils.ts";
import RecordScanApi from "@/api/recordScan.ts";

const tableData = ref<IRecordScanData[] | undefined>([]); // 表格数据
const querySearch = ref<IRecordScanSearch>({});
const pageSize = ref<number>(100); // 分页单页数据
const pageIndex = ref<number>(1); // 分页页码
const totalPages = ref<number | undefined>(1); // 总数据数
const scanRatio = ref<number>(0.00); // 扫码率
const scanDataList = ref<IAppStockScan[] | undefined>([]); // 扫码基础资料数据

// 查询
const query = () => {
  const loadingInstance = MessageUtils.loading("正在查询中...");
  RecordScanApi.query(querySearch.value, pageSize.value, pageIndex.value).then(res => {
    const stringify = JSON.stringify(res.data);
    const response = JSON.parse(stringify) as AppServeDataResponse<PageDataResponse<IRecordScanData>>;
    if (response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      tableData.value = response.data.data;
      totalPages.value = response.data.totalCount;
      return;
    }
    MessageUtils.warningMessageBox(response.msg);
  }).catch(() => {}).finally(() => {
    loadingInstance.close();
  });
  queryScanRatio();
};
// 重置查询参数
const resetInput = () => {
  querySearch.value = {};
};
// 导出数据
const downLoad = () => {
  MessageUtils.confirmMessageBox('确定导出数据？','导出确认').then(() => {
    RecordScanApi.downloadTask(querySearch.value).then((response) => {
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', '扫码数据下载.xlsx');
      document.body.appendChild(link);
      MessageUtils.successMessage('您的下载将尽快开始，请稍后');
      link.click();
      document.body.removeChild(link);
    }).catch(() => {})
  }).catch(() => {});
};
// 分页功能
const paginationChange = (val: number) => {
  query();
};
// 查询扫码基础资料数据
const queryScanData = () => {
  StockScanApi.queryAll().then(res => {
    const responseString = JSON.stringify(res.data);
    const response = JSON.parse(responseString) as AppServeDataResponse<IAppStockScan[]>;
    if (response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      scanDataList.value = response.data;
      return;
    }
    MessageUtils.errMessage(response.msg);
  }).catch(() => {}).finally(() => {
  });
};
// 查询扫码率
const queryScanRatio = () => {
  RecordScanApi.queryScanRatio(querySearch.value).then(res => {
    const responseString = JSON.stringify(res.data);
    const response = JSON.parse(responseString) as AppServeDataResponse<number>;
    if (response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      scanRatio.value = response.data;
      return;
    }
    MessageUtils.errMessage(response.msg);
  }).catch(() => {})
}

onMounted(() => {
  query();
  queryScanData();
});


</script>

<template>
  <div style="margin-left: 10px;margin-top: 10px; width: calc(100vw - 280px);">
    <h3>设备扫码记录</h3>
    <el-row class="searchCard">
      <el-row style="width: 100%;">
        <el-col :span="20">
          <el-form class="searchForm" v-model="querySearch" label-position="top" label-width="150px" inline>
            <el-form-item label="扫码点位：" style="width: 250px;">
              <el-select  v-model="querySearch.location" placeholder="请选择扫码点位" clearable>
                <template #header>
                  <el-button type="primary" @click="queryScanData" size="small">重新加载</el-button>
                </template>
                <el-option v-for="item in scanDataList" :key="item.scanId" :label="item.scanId" :value="item.scanId">
                  <span style="float: left">{{ item.scanId }}</span>
                  <span style=" float: right;color: var(--el-text-color-secondary);font-size: 13px; ">{{ item.scanName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="条码：" style="width: 250px;">
              <el-input v-model="querySearch.code" placeholder="请输入条码" clearable></el-input>
            </el-form-item>
            <el-form-item label="扫码时间：" style="width: 250px;">
              <el-date-picker
                  v-model="querySearch.scanTimes"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
              />
            </el-form-item>
          </el-form>
          <el-row>
            <el-button-group style="width: 100%;margin-left: 10px; margin-bottom: 10px">
              <el-button type="primary" @click="query">查询/刷新</el-button>
              <el-button type="warning" @click="resetInput">重置查询参数</el-button>
              <el-button type="info" @click="downLoad">导出数据</el-button>
            </el-button-group>
          </el-row>
        </el-col>
        <el-col :span="3" :offset="1">
          <div class="scanRatioClass" style="margin-top: 5px; width: 100px;height: 100px">
            <el-progress type="dashboard" :percentage="scanRatio">
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
                <span class="percentage-label">扫码率</span>
              </template>
            </el-progress>
          </div>
        </el-col>
      </el-row>

    </el-row>
    <el-row class="dataTable">
      <el-table :data="tableData" stripe border style="width: 100%" max-height="calc(100vh - 320px)">
        <el-table-column type="index" width="80" label="序号" align="center" show-overflow-tooltip fixed="left"/>
        <el-table-column prop="recordId" label="记录号" width="150" align="center" show-overflow-tooltip/>
        <el-table-column prop="location" label="扫码点位" width="100" align="center" show-overflow-tooltip/>
        <el-table-column prop="code" label="条码" width="150" align="center" show-overflow-tooltip/>
        <el-table-column prop="size" label="尺寸" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="weight" label="重量" width="100" align="center" show-overflow-tooltip/>
        <el-table-column prop="length" label="长" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="width" label="宽" width="100" align="center" show-overflow-tooltip/>
        <el-table-column prop="height" label="高" width="100" align="center" show-overflow-tooltip/>
        <el-table-column prop="scanTime" label="扫码时间" width="180" align="center" :formatter="FormatterUtils.formatCellValueTime" show-overflow-tooltip/>
        <el-table-column prop="remark" label="备注" min-width="250" align="center" show-overflow-tooltip />
      </el-table>
      <el-pagination style="margin: 10px"
                     background
                     v-model:current-page="pageIndex"
                     v-model:page-size="pageSize"
                     :page-sizes="[10, 100, 200, 300]"
                     size="small"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="totalPages"
                     @size-change="paginationChange"
                     @current-change="paginationChange"
      />
    </el-row>
  </div>
</template>

<style scoped>
.searchCard {
  width: 100%;
  border: #ccc solid 1px;
  border-radius: 4px;
  background-color: #fff;
}
.dataTable {
  margin: 10px 10px 0 auto;
  width: 100%;
  border: #ccc solid 1px;
  border-radius: 4px;
  background-color: #fff;
}
.searchForm {
  margin: 5px 10px 0 10px;
  width: 100%;
}
.searchForm :deep(.el-form-item__label){
  font-size: 13px;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
.scanRatioClass .el-progress--line {
  margin-bottom: 15px;
  max-width: 60px;
}
.scanRatioClass .el-progress--circle {
  margin-right: 15px;
}
</style>