<template>
  <div class="message-list waits-list">
    <div
      v-for="item in tableData"
      :key="item.id"
      class="message-item cursor-pointer"
      @click="editSopFlowHandle(item)"
    >
      <div class="m-head">
        <div class="m-title">
          <span style="vertical-align: top"
            >{{ item.typeStr }}（{{ item.code }}）</span
          >
          <t-tag v-if="item.diffTime == 0" theme="success" variant="light"
            >正常</t-tag
          >
          <template v-else>
            <t-tag theme="danger" variant="light">已超时</t-tag>
            <t-tag theme="danger" variant="light" class="m-l-5px"
              >超时时长：{{
                item.diffTime <= 30 ? `${item.diffTime}天` : '大于30天'
              }}</t-tag
            >
          </template>
        </div>
        <div class="m-time">{{ timestampFilter(item.flowTime, 'mm') }}</div>
      </div>
      <div class="m-body">
        <div class="m-content">{{ item.taskName }}</div>
        <t-space class="m-info" :size="5">
          <p>发起人：{{ item.createRealName }}</p>
          <p>服务单元： {{ item.serviceName }} </p>
          <p>客户类型：{{ customerTypeFilter(item.customType) }}</p>
          <p>客户名称：{{ item.customName }}</p>
          <template #separator>
            <t-divider layout="vertical" />
          </template>
        </t-space>
      </div>
    </div>

    <t-pagination
      v-if="pagination.total > 0"
      class="page-pagination"
      v-model="pagination.pageNumber"
      v-model:pageSize="pagination.pageSize"
      :total="pagination.total"
      showJumper
      :showPageSize="false"
      @change="onChange"
    />
    <div class="none-box" v-if="!tableData.length">
      <img src="../../../../assets/none_message.png" />
      <p>暂无数据</p>
    </div>

    <!-- SopStepDialog -->
    <sop-step-dialog
      v-model:visible="showSopStepDialog"
      :sop="curSopData"
      type="fill"
      @confirm="sopStepConfirm"
    ></sop-step-dialog>
    <!-- PlanChangeDialog -->
    <plan-change-dialog
      v-model:visible="showPlanChangeDialog"
      :sop="curSopData"
      type="fill"
      @confirm="sopStepConfirm"
    ></plan-change-dialog>
    <!-- QualityIssueDialog -->
    <quality-issue-dialog
      v-model:visible="showQualityIssueDialog"
      :sop="curSopData"
      type="fill"
      @confirm="sopStepConfirm"
    ></quality-issue-dialog>
    <!-- AbnormalAudit -->
    <abnormal-audit
      v-model:visible="showAbnormalAudit"
      :curRow="curSopData"
      @confirm="sopStepConfirm"
    ></abnormal-audit>
  </div>
</template>

<script setup name="MyTaskList">
import { ref } from 'vue';
import { timestampFilter, customerTypeFilter } from '@/utils/filter';
import SopStepDialog from '@/views/sop/sop-manage/sop-step/sop-step-dialog.vue';
import PlanChangeDialog from '@/views/sop/sop-manage/plan-change/plan-change-dialog.vue';
import QualityIssueDialog from '@/views/sop/sop-manage/quality-issue/quality-issue-dialog.vue';
import AbnormalAudit from '@/views/work-hours/work-hours-manage/abnormal-check/abnormal-audit.vue';
import { MessagePlugin } from 'tdesign-vue-next';

const { tableData, pagination, onChange } = defineProps([
  'tableData',
  'pagination',
  'onChange',
]);
const emit = defineEmits(['success']);

const showSopStepDialog = ref(false);
const showPlanChangeDialog = ref(false);
const showQualityIssueDialog = ref(false);
const showAbnormalAudit = ref(false);
const curSopData = ref({});
const editSopFlowHandle = (row) => {
  curSopData.value = row;
  if (row.type === 'PROJECT_EXCHANGE_FLOW') {
    showPlanChangeDialog.value = true;
    return;
  }
  if (row.type === 'QUALITY_PROBLEM_FLOW') {
    showQualityIssueDialog.value = true;
    return;
  }
  if (row.type === 'OFFICE_SOP_FLOW' || row.type === 'CLOUD_MARK_SOP_FLOW') {
    curSopData.value.sopNo = row.code;
    showSopStepDialog.value = true;
    return;
  }
  if (row.type === 'DING_EXCEPTION_FLOW') {
    showAbnormalAudit.value = true;
    return;
  }

  MessagePlugin.error('未知类型待办');
};
const sopStepConfirm = () => {
  emit('success');
};
</script>
