<script setup lang="ts">
import {useI18n} from "vue-i18n";
import {ref} from "vue";
import type {IEtagTaskQuery} from "@/interface/page/etagTask/IEtagTaskQuery.ts";
import type {IAppEtagTask} from "@/model/table/IAppEtagTask.ts";
import {EtagTaskTypeFormatter} from "@/plugin/formatter/EtagTaskTypeFormatter.ts";
import EtagTaskStatusFormatter from "@/plugin/formatter/EtagTaskStatusFormatter.ts";
import EtagTaskLightModelFormatter from "@/plugin/formatter/EtagTaskLightModelFormatter.ts";
import MessageUtils from "@/utils/MessageUtils.ts";
import EtagTaskApi from "@/api/etagTask.ts";
import type {PageDataResponse} from "@/interface/api/PageDataResponse.ts";
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
import {FormatterUtils} from "@/utils/FormatterUtils.ts";
import AddEtagTask from "@/components/page/etagTask/AddEtagTask.vue";
import EditEtagTask from "@/components/page/etagTask/EditEtagTask.vue";

const { t } = useI18n();
const pageSize = ref<number>(100); // 分页单页数据
const pageIndex = ref<number>(1); // 分页页码
const totalPages = ref<number | undefined>(1); // 总数据数
const etagTaskTypeFormatter = new EtagTaskTypeFormatter();
const etagTaskStatusFormatter = new EtagTaskStatusFormatter();
const etagTagTaskLightModelFormatter = new EtagTaskLightModelFormatter();
const querySearch = ref<IEtagTaskQuery>({}); // 查询条件
const tableData = ref<IAppEtagTask[]>([]); // 表格数据 ---- 任务列表
const showAddDialog = ref<boolean>(false); // 添加对话框显示状态
const editFormData = ref<IAppEtagTask>({}); // 编辑窗口的数据
const showEditDialog = ref<boolean>(false); // 修改窗口显示状态

// 查询
const query = () => {
  const loadingInstance = MessageUtils.loading();
  EtagTaskApi.queryEtagTask(querySearch.value, pageIndex.value, pageSize.value).then(res => {
    const responseString = JSON.stringify(res.data);
    const response = JSON.parse(responseString) as AppServeDataResponse<PageDataResponse<IAppEtagTask>>;
    if (response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      tableData.value = response.data.data ?? [];
      totalPages.value = response.data.totalCount;
      MessageUtils.successMessage('查询成功');
      return
    }
    MessageUtils.errMessage('查询失败');
  }).catch(() => {}).finally(() => {
    loadingInstance.close();
  })
};
// 分页变化时
const paginationChange = () => {
  query();
};
// 添加
const add = () => {
  showAddDialog.value = true;
};
// 重置查询条件
const resetInput = () => {
  querySearch.value = {};
};
// 修改
const edit = (row: IAppEtagTask) => {
  editFormData.value = {
    taskId: row.taskId,
    taskGroup: row.taskGroup,
    taskType: row.taskType,
    vehicleNo: row.vehicleNo,
    orderId: row.orderId,
    location: row.location,
    goodsId: row.goodsId,
    goodsName: row.goodsName,
    lightNum: row.lightNum,
    confirmNum: row.confirmNum,
    taskStatus: row.taskStatus,
    lightModel: row.lightModel,
    taskSource: row.taskSource,
    createPerson: row.createPerson,
    createTime: row.createTime,
    lightTime: row.lightTime,
    confirmTime: row.confirmTime,
    confirmPerson: row.confirmPerson,
    completeTime: row.completeTime,
    remark: row.remark,
  }
  showEditDialog.value = true;
};

</script>

<template>
  <div style="margin-left: 10px;margin-top: 10px; width: calc(100vw - 280px);">
    <h3>{{t('tabPage.etagTask.title')}}</h3>
    <el-row class="searchCard">
      <el-row style="width: 100%;">
        <el-form class="searchForm" v-model="querySearch" label-position="top" label-width="150px" inline>
          <el-form-item :label="t('tabPage.etagTask.taskId')+ ':'" style="width: 250px;">
            <el-input v-model="querySearch.taskId" placeholder="" clearable></el-input>
          </el-form-item>
          <el-form-item :label="t('tabPage.etagTask.taskGroup')+ ':'" style="width: 250px;">
            <el-input v-model="querySearch.taskGroup" placeholder="" clearable></el-input>
          </el-form-item>
          <el-form-item :label="t('tabPage.etagTask.taskType')+ ':'" style="width: 250px;">
            <el-select v-model="querySearch.taskType" placeholder="" clearable>
              <el-option v-for="item in etagTaskTypeFormatter.etagTaskType" :label="item.label" :key="item.value" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('tabPage.etagTask.vehicleNo')+ ':'" style="width: 250px;">
            <el-input v-model="querySearch.vehicleNo" placeholder="" clearable></el-input>
          </el-form-item>
          <el-form-item :label="t('tabPage.etagTask.goodsId')+ ':'" style="width: 250px;">
            <el-input v-model="querySearch.goodsId" placeholder="" clearable></el-input>
          </el-form-item>
          <el-form-item :label="t('tabPage.etagTask.taskStatus')+ ':'" style="width: 250px;">
            <el-select v-model="querySearch.taskStatus" placeholder="" clearable>
              <el-option v-for="item in etagTaskStatusFormatter.etagTaskStatus" :label="item.label" :key="item.value" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('tabPage.etagTask.createTime')+ ':'" style="width: 250px;">
            <el-date-picker
                v-model="querySearch.createTime"
                type="datetimerange"
                range-separator="-"
            />
          </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">{{t('baseButton.queryOrReflush')}}</el-button>
            <el-button type="success" @click="add">{{t('baseButton.addRecord')}}</el-button>
            <el-button type="warning" @click="resetInput">{{t('baseButton.resetInput')}}</el-button>
          </el-button-group>
        </el-row>
      </el-row>

    </el-row>
    <el-row class="dataTable">
      <el-table :data="tableData" stripe border style="width: 100%" max-height="calc(100vh - 400px)">
        <el-table-column type="index" width="80" :label="t('baseColName.id')" align="center" show-overflow-tooltip fixed="left"/>
        <el-table-column prop="taskId" :label="t('tabPage.etagTask.taskId')" width="150" align="center" show-overflow-tooltip/>
        <el-table-column prop="taskGroup" :label="t('tabPage.etagTask.taskGroup')" width="120" align="center" show-overflow-tooltip/>
        <el-table-column prop="taskType" :label="t('tabPage.etagTask.taskType')" width="100" align="center" show-overflow-tooltip>
          <template v-slot="scope">
            <el-tag v-if="scope.row.taskType" :type="etagTaskTypeFormatter.etagTaskTypeFormatter(scope.row.taskType).type">
              {{etagTaskTypeFormatter.etagTaskTypeFormatter(scope.row.taskType).label}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="vehicleNo" :label="t('tabPage.etagTask.vehicleNo')" width="150" align="center" show-overflow-tooltip/>
        <el-table-column prop="orderId" :label="t('tabPage.etagTask.orderId')" width="150" align="center" show-overflow-tooltip />
        <el-table-column prop="location" :label="t('tabPage.etagTask.location')" width="150" align="center" show-overflow-tooltip/>
        <el-table-column prop="goodsId" :label="t('tabPage.etagTask.goodsId')" width="120" align="center" show-overflow-tooltip/>
        <el-table-column prop="goodsName" :label="t('tabPage.etagTask.goodsName')" width="120" align="center" show-overflow-tooltip/>
        <el-table-column prop="lightNum" :label="t('tabPage.etagTask.lightNum')" width="150" align="center" show-overflow-tooltip/>
        <el-table-column prop="confirmNum" :label="t('tabPage.etagTask.confirmNum')" width="150" align="center" show-overflow-tooltip />
        <el-table-column prop="taskStatus" :label="t('tabPage.etagTask.taskStatus')" width="150" align="center" show-overflow-tooltip>
          <template v-slot="scope">
            <el-tag v-if="scope.row.taskStatus" :type="etagTaskStatusFormatter.etagTaskStatusFormatter(scope.row.taskStatus).type">
              {{etagTaskStatusFormatter.etagTaskStatusFormatter(scope.row.taskStatus).label}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lightModel" :label="t('tabPage.etagTask.lightModel')" width="120" align="center" show-overflow-tooltip>
          <template v-slot="scope">
            <el-tag v-if="scope.row.lightModel" :type="etagTagTaskLightModelFormatter.etagTaskLightModelFormatter(scope.row.lightModel).type">
              {{etagTagTaskLightModelFormatter.etagTaskLightModelFormatter(scope.row.lightModel).label}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="taskSource" :label="t('tabPage.etagTask.taskSource')" width="120" align="center" show-overflow-tooltip/>
        <el-table-column prop="createPerson" :label="t('tabPage.etagTask.createPerson')" width="150" align="center" show-overflow-tooltip/>
        <el-table-column prop="createTime" :label="t('tabPage.etagTask.createTime')" width="180" align="center" :formatter="FormatterUtils.formatCellValueTime" show-overflow-tooltip />
        <el-table-column prop="lightTime" :label="t('tabPage.etagTask.lightTime')" width="180" align="center" :formatter="FormatterUtils.formatCellValueTime" show-overflow-tooltip/>
        <el-table-column prop="confirmTime" :label="t('tabPage.etagTask.confirmTime')" width="180" align="center" :formatter="FormatterUtils.formatCellValueTime" show-overflow-tooltip/>
        <el-table-column prop="confirmPerson" :label="t('tabPage.etagTask.confirmPerson')" width="150" align="center" show-overflow-tooltip/>
        <el-table-column prop="completedTime" :label="t('tabPage.etagTask.completeTime')" width="180" align="center" :formatter="FormatterUtils.formatCellValueTime" show-overflow-tooltip />
        <el-table-column prop="remark" :label="t('baseColName.remark')" min-width="200" align="center" show-overflow-tooltip />
        <el-table-column :label="t('baseColName.action')" fixed="right" width="120" align="center">
          <template #default="scope">
            <el-button-group>
              <el-button size="small" type="primary" @click="edit(scope.row)">{{ t('baseButton.edit')}}</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </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>
<!--  添加标签任务-->
  <AddEtagTask v-model="showAddDialog" @reLoadingTableData="query" />
<!--  编辑标签任务-->
  <EditEtagTask v-model="showEditDialog" @reLoadingTableData="query" :formData="editFormData" />
</template>

<style scoped>

</style>