<template>
  <div class="message-list">
    <div
      class="message-item cursor-pointer"
      v-for="item in tableData"
      :key="item.id"

    >
      <div class="m-head">
        <div
          class="m-title flex items-center"
          style="max-width: calc(100% - 180px)"
        >
          <t-link hover="color" @click="editSopFlowHandle(item)">
          <span>{{ messageTypeFilter(item.messageType) }}</span>
<!--          <span class="ellipsis">{{ item.content }}</span>-->

          </t-link>
          <t-tag
            theme="danger"
            variant="light"
            size="small"
            v-if="!item.readStatus"
            >未读</t-tag
          >
        </div>

        <div class="m-time">{{ timestampFilter(item.sendTime, 'mm') }}</div>
      </div>
      <div class="m-body m-t-10px" @click="open(item)">
         <div class="m-content">{{ item.content }}</div>
        <t-space class="m-info" :size="5">
          <p>发起人：{{ item.formUser }}</p>
          <p>服务单元：{{ item.service }} </p>
          <p>客户类型：{{ customerTypeFilter(item.customType) }}</p>
          <p>客户名称：{{ item.custom }}</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>
    <violation-flow-dialog
        v-model:visible="showViolationFlowDialog"
        :curRow="curSopData"
        @confirm="sopStepConfirm"
    ></violation-flow-dialog>
  </div>
</template>

<script setup name="MessageList">
import {timestampFilter, customerTypeFilter, messageTypeFilter} from '@/utils/filter';
import QualityIssueDialog from "@/views/sop/sop-manage/quality-issue/quality-issue-dialog.vue";
import SopStepDialog from "@/views/sop/sop-manage/sop-step/sop-step-dialog.vue";
import AbnormalAudit from "@/views/work-hours/work-hours-manage/abnormal-check/abnormal-audit.vue";
import PlanChangeDialog from "@/views/sop/sop-manage/plan-change/plan-change-dialog.vue";
import {reactive, ref} from "vue";
import {MessagePlugin} from "tdesign-vue-next";
import ViolationFlowDialog from "@/views/sop/sop-monitor/violation-registration/flow-dialog.vue";
import {getViolationBy, setMyMessagesRead} from "@/api/my-workbenches";
import {sopListApi} from "@/api/sop";

const { tableData, pagination, onChange } = defineProps([
  'tableData',
  'pagination',
  'onChange',
]);
const emit = defineEmits(['open']);
const open = (row) => {
  emit('open', row);
};
const showSopStepDialog = ref(false);
const showPlanChangeDialog = ref(false);
const showQualityIssueDialog = ref(false);
const showViolationFlowDialog = ref(false);
const curSopData = ref({});
const curRow = ref({});





const editSopFlowHandle = (row) => {
  curRow.value = row;
  if (row.messageType === 'AFTER' || row.messageType === 'BEFORE') {
    const params = reactive({
      pageNumber: 1,
      pageSize: 10,
      serviceId: "",
      formWidgetMetadataViewList: [],
      formWidgetMetadataConditionList: [{fieldId: "sopNo", operator: "EQ", fieldValue: row.code}],
      type: row.objType
    });
    sopListApi(params).then(res => {
      if (res.records.length) {
        curSopData.value = res.records[0];
        showSopStepDialog.value = true;
      } else {
        MessagePlugin.error('未找到对应的SOP');
      }
    })

    return;
  }
  if (row.messageType === 'VIOLATION') {
    getViolationBy(row.code)
      .then(res=>{
          curSopData.value = res;
          showViolationFlowDialog.value = true;
      })
    return;
  }
  // if (row.messageType === 'SYSTEM_PLAN_CHANGE') {
  //   curSopData.value = row;
  //   showPlanChangeDialog.value = true;
  //   return;
  // }
  // if (row.messageType === 'QUALITY') {
  //   showQualityIssueDialog.value = true;
  //   return;
  // }


  MessagePlugin.error('未知类型待办');
};
const sopStepConfirm = () => {
  setMyMessagesRead(curRow.id).then(() => {
    // search()
    workStore.updateWorkCounts();
  });
  emit('success');
};
</script>
