<template>
  <el-dialog v-model="state.dialogVisible" draggable title="重复工单" ref="dialogRef" width="60%" append-to-body>
    <el-table :data="state.tableData"  ref="multipleTableRef" >
      <el-table-column prop="phoneNo" label="工单标题" show-overflow-tooltip>
        <template #default="{row}">
          <span class="color-primary">{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="hotspotName" label="热点分类" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="no" label="工单编码" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="currentStepName" label="当前环节" show-overflow-tooltip></el-table-column>
      <el-table-column prop="statusText" label="状态" width="70" fixed="right" align="center">
        <template #default="{row}">
          <!-- 草稿 -->
          <span class="color-info" v-if="row.status === 0">{{ row.statusText }}</span>
          <!-- 待签收 -->
          <span class="color-success" v-if="row.status === 10">{{ row.statusText }}</span>
          <!-- 办理中 -->
          <span class="color-primary" v-if="row.status === 20">{{ row.statusText }}</span>
          <!-- 会签中 -->
          <span class="color-primary" v-if="row.status === 30">{{ row.statusText }}</span>
          <!-- 退回 -->
          <span class="color-danger" v-if="row.status === 40">{{ row.statusText }}</span>
          <!-- 办理完成 -->
          <span class="color-success" v-if="row.status === 50">{{ row.statusText }}</span>
          <!-- 已归档 -->
          <span class="color-info" v-if="row.status === 60">{{ row.statusText }}</span>
        </template>
      </el-table-column>
      <template #empty>
        <Empty />
      </template>
    </el-table>
    <pagination
        :total="state.total"
        v-model:page="state.queryParams.PageIndex"
        v-model:limit="state.queryParams.PageSize"
        @pagination="getList"
    />
    <template #footer>
				<span class="dialog-footer">
					<el-button class="default-button" @click="state.dialogVisible = false">关 闭</el-button>
				</span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="orderRepeat">
import { reactive, ref} from 'vue';
import {duplicateOrder} from '/@/api/business/order'
// 定义变量内容
const state = reactive<any>({
  dialogVisible: false, // 弹窗显示隐藏
  queryParams: {
    PageIndex: 1, // 当前页
    PageSize: 10, // 每页条数
  },
  tableData: [], // 表格数据
  total: 0,   // 总条数
  loading: false, // 加载状态
  ruleForm: {}, // 表单数据
});
const ruleFormRef = ref<RefType>(); // 表单ref
// 打开弹窗
const openDialog = (row: any) => {
  state.ruleForm = row;
  getList();
  state.dialogVisible = true;
};
const dialogRef = ref<RefType>();
// 关闭弹窗
const closeDialog = () => {
  state.dialogVisible = false;
};
/** 获取历史工单 */
const getList = () => {
  if (!state.ruleForm.duplicateIds) return;
  state.loading = true;
  let req = {
    ...state.queryParams,
    OrderIds:state.ruleForm.duplicateIds
  }
  duplicateOrder(req)
      .then((response: any) => {
        state.tableData = response?.result.items ?? [];
        state.total = response?.result.total;
        state.loading = false;
      })
      .catch(() => {
        state.loading = false;
      });
};
// 暴露变量
defineExpose({
  openDialog,
  closeDialog,
});
</script>
