

<template>
  <el-card shadow="never" class="mb20" style="position: relative" v-loading="state.tableLoading">
    <el-button link type="primary" style="position: absolute;right: 20px;top:32px;z-index:2" @click="linkList">
      更多<SvgIcon name="ele-ArrowRight"/>
    </el-button>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane :name="item.value" v-for="item in tabsList" :key="item.value" :label="item.label"></el-tab-pane>
    </el-tabs>
    <!-- 表格 -->
    <el-table :data="state.tableList" row-key="id">
      <!-- 工单待办 -->
      <template v-if="activeName === '0'">
        <el-table-column prop="no" label="工单超期间隔" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="no" label="工单编码" show-overflow-tooltip></el-table-column>
        <el-table-column width="100" label="省/市工单" prop="isProvince" >
          <template #default="{ row }">
            <span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="当前节点" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="工单状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="工单标题" show-overflow-tooltip></el-table-column>
        <el-table-column prop="expiredTime" label="受理时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expiredTime" label="节点期满时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expiredTime" label="工单期满时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="受理类型" show-overflow-tooltip></el-table-column>
        <el-table-column label="紧急程度" show-overflow-tooltip prop="emergencyLevelText" width="100">
          <template #default="{ row }">
										<span v-if="row.emergencyLevel === 2 || row.emergencyLevel === 3" class="color-danger">{{
                        row.emergencyLevelText}}</span>
            <span v-else class="color-primary">{{ row.emergencyLevelText }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="热点分类" show-overflow-tooltip></el-table-column>
        <el-table-column prop="expiredTime" label="受理人" show-overflow-tooltip width="120">
          <template #default="{ row }">
            <span>{{ row.employeeName + '[' + row.employeeStaffNo + ']' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right" align="center">
          <template #default="{ row }">
            <el-button link type="primary" @click="onOrderDetail(row)" title="查看工单详情" v-auth="'business:order:detail'">
              工单详情
            </el-button>
          </template>
        </el-table-column>
      </template>
      <!-- 延期待办 -->
      <template v-if="activeName === '1'">
        <el-table-column prop="no" label="工单编码" show-overflow-tooltip></el-table-column>
        <el-table-column width="100" label="省/市工单" prop="isProvince" >
          <template #default="{ row }">
            <span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="延期审批状态" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="no" label="工单标题" show-overflow-tooltip></el-table-column>
        <el-table-column prop="expiredTime" label="受理时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expiredTime" label="延期申请时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="延期申请部门" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="no" label="延期申请人" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="no" label="延期申请时限" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="no" label="延期申请单位" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="expiredTime" label="申请前期满时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expiredTime" label="申请后期满时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right" align="center">
          <template #default="{ row }">
            <el-button link type="primary" @click="onOrderDetail(row)" title="查看延期详情" v-auth="'business:delay:detail'">
              延期详情
            </el-button>
          </template>
        </el-table-column>
      </template>
      <!-- 甄别待办 -->
      <template v-if="activeName === '2'">
        <el-table-column prop="no" label="工单编码" show-overflow-tooltip></el-table-column>
        <el-table-column width="100" label="省/市工单" prop="isProvince" >
          <template #default="{ row }">
            <span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="甄别状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="当前节点" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="工单标题" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="来源方式" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="受理类型" show-overflow-tooltip></el-table-column>
        <el-table-column prop="expiredTime" label="受理人" show-overflow-tooltip width="120">
          <template #default="{ row }">
            <span>{{ row.employeeName + '[' + row.employeeStaffNo + ']' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="接办部门" show-overflow-tooltip></el-table-column>
        <el-table-column prop="expiredTime" label="受理时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expiredTime" label="甄别申请时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="甄别申请人" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="no" label="甄别申请部门" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="no" label="甄别申请类型" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="no" label="甄别申请原因" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column label="操作" width="150" fixed="right" align="center">
          <template #default="{ row }">
            <el-button link type="primary" @click="onOrderDetail(row)" title="甄别审批" v-auth="'business:screen:detail'">
              甄别审批
            </el-button>
          </template>
        </el-table-column>
      </template>
      <!-- 发布待办 -->
      <template v-if="activeName === '3'">
        <el-table-column prop="no" label="工单编码" show-overflow-tooltip></el-table-column>
        <el-table-column width="100" label="省/市工单" prop="isProvince" >
          <template #default="{ row }">
            <span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="发布状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="工单标题" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="来源方式" show-overflow-tooltip></el-table-column>
        <el-table-column prop="expiredTime" label="受理人" show-overflow-tooltip width="120">
          <template #default="{ row }">
            <span>{{ row.employeeName + '[' + row.employeeStaffNo + ']' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="中心会签" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="接办部门" show-overflow-tooltip></el-table-column>
        <el-table-column prop="expiredTime" label="接办时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expiredTime" label="受理时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expiredTime" label="办结时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right" align="center">
          <template #default="{ row }">
            <el-button link type="primary" @click="release(row)" title="发布工单" v-auth="'business:publish:publish'">
              发布
            </el-button>
          </template>
        </el-table-column>
      </template>
      <!-- 回访待办 -->
      <template v-if="activeName === '4'">
        <el-table-column prop="no" label="工单编码" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="工单变体" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="来源方式" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="回访状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="受理类型" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="热点分类" show-overflow-tooltip></el-table-column>
        <el-table-column prop="expiredTime" label="受理人" show-overflow-tooltip width="120">
          <template #default="{ row }">
            <span>{{ row.employeeName + '[' + row.employeeStaffNo + ']' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="一级部门" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="接办部门" show-overflow-tooltip></el-table-column>
        <el-table-column prop="expiredTime" label="受理时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expiredTime" label="办结时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expiredTime" label="发布时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expiredTime" label="回访任务创建时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="回访人" show-overflow-tooltip></el-table-column>
        <el-table-column prop="no" label="回访标签" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="150" fixed="right" align="center">
          <template #default="{ row }">
            <el-button link type="primary" @click="onOrderDetail(row)" title="工单回访" v-auth="'business:followUp:detail'">
              回访
            </el-button>
          </template>
        </el-table-column>
      </template>
      <template #empty>
        <Empty />
      </template>
    </el-table>
    <!-- 工单详情 -->
    <order-detail ref="orderDetailRef"/>
  </el-card>
</template>
<script setup lang="ts">
import {reactive, ref,defineAsyncComponent} from "vue";
import {formatDate} from "/@/utils/formatTime";
import {useRouter} from "vue-router";

const OrderDetail = defineAsyncComponent(() => import('/@/views/business/order/components/Order-detail.vue')); // 工单详情
const state = reactive<any>({
  tableLoading:false, // 表格loading
  tableList: [], //表格数据
})
const tabsList = ref([
  {
    label: '工单待办',
    name: '0',
  },{
    label: '延期待办',
    name: '1',
  },{
    label: '甄别待办',
    name: '2',
  },{
    label: '发布待办',
    name: '3',
  },{
    label: '回访待办',
    name: '4',
  },
])
const activeName = ref<string>('0'); // tab切换
// 查看工单详情
const orderDetailRef = ref<RefType>();
const onOrderDetail = (row: any) => {
  orderDetailRef.value.openDialog(row);
};
// 发布
const release = (row: any) => {
  console.log('发布');
};
// tab切换
const handleClick = (tab: any, event: any) => {
  state.tableLoading = true;
  setTimeout(() => {
    state.tableLoading = false;
  }, 300);
};
// 跳转
const router = useRouter();
const goLink = (val: string) => {
  router.push(val);
};
// 列表入口
const linkList = ()=>{
  switch (activeName.value) {
    case '0': // 工单待办
      router.push('/business/order/backlog')
      break;
    case '1': // 延期待办
      router.push('/business/delay/backlog')
      break;
    case '2': //甄别待办
      router.push('/business/discern/backlog')
      break;
    case '3': // 发布待办
      router.push('/business/publish')
      break;
    case '4': // 回访待办
      router.push('/business/followUp/backlog')
      break;
  }
}
</script>
<style scoped lang="scss">

</style>