<template>
  <my-drawer
    class="sop-dialog"
    :visible="visible"
    :header="title"
    size="80%"
    attach="body"
    :closeOnOverlayClick="false"
    :close-btn="true"
    :footer="false"
    destroyOnClose
    @close="emit('update:visible', false)"
  >
    <div class="sop-step">
      <t-collapse class="sop-step-mid" defaultExpandAll>
        <t-collapse-panel disabled>
          <template #expandIcon></template>
          <template #header> SOP信息 </template>
          <t-form colon label-width="120px">
            <t-row :gutter="[0, 4]">
              <t-col :span="3">
                <t-form-item label="服务单元">{{ curRow.service }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="SOP流水号">{{ curRow.sopNo }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="客户类型">{{
                    customerTypeFilter(curRow.customType)
                }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="客户名称">{{ curRow.custom }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="登记时间">{{
                  timestampFilter(curRow.createTime, 'mm')
                }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="登记人">{{
                  curRow.createName
                }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="节点负责人">{{
                  curRow.userName
                }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="违规类型">{{
                  violationTypeFilter(curRow.type)
                }}</t-form-item>
              </t-col>
              <t-col :span="12">
                <t-form-item label="违规情况说明">{{
                  curRow.content
                }}</t-form-item>
              </t-col>
              <t-col :span="12">
                <t-form-item label="附件说明">
                  <attachment-view
                    :ids="curRow.attachmentIds"
                  ></attachment-view>
                </t-form-item>
              </t-col>
            </t-row>
          </t-form>
        </t-collapse-panel>
      </t-collapse>
      <div class="sop-step-list" style="flex-direction: column">
        <t-form
          ref="formRef"
          :data="formData"
          labelWidth="100px"
          :rules="rules"
          colon
          class="sop-step-body"
        >
          <t-row :gutter="[0, 30]">
            <template v-if="!IS_VIEW_MODE">
            <t-col :span="12">
              <div class="form-group-title"> 新增跟进 </div>
            </t-col>
            <t-col :span="12">
              <t-form-item label="跟进人">
                {{ userStore.user.realName }}</t-form-item
              >
            </t-col>
            <t-col :span="12">
              <t-form-item label="跟进说明" name="remark">
                <t-textarea
                  v-model="formData.remark"
                  tips="限100字以内"
                  :maxlength="100"
                ></t-textarea>
              </t-form-item>
            </t-col>
            <t-col :span="12">
              <t-form-item label="附件说明">
                <my-upload @change="fileChange"></my-upload>
              </t-form-item>
            </t-col>
            </template>
            <t-col :span="12">
              <div class="m-b-10px" v-if="!IS_VIEW_MODE">
                历史明细查阅
                <t-link
                  theme="primary"
                  class="m-l-10px"
                  @click="showHistory = !showHistory"
                  >查看 <ChevronUpIcon v-if="showHistory" />
                  <ChevronDownIcon v-else /></t-link
              ></div>
              <t-table
                v-if="showHistory || IS_VIEW_MODE"
                size="small"
                row-key="id"
                :columns="columns"
                :data="tableData"
                bordered
              >
                <template #createTime="{ row, col }">
                  {{ timestampFilter(row[col.colKey], 'mm') }}
                </template>
                <template #attachment="{ row, col }">
                  <attachment-view
                    :ids="row[col.colKey]"
                    :imgSize="60"
                  ></attachment-view>
                </template>
              </t-table>
            </t-col>
          </t-row>
        </t-form>
        <t-space v-if="!IS_VIEW_MODE" class="sop-step-footer">
          <t-button theme="primary" @click="save">保存</t-button>
          <t-button theme="default" @click="emit('update:visible', false)"
            >取消</t-button
          >
        </t-space>
      </div>
    </div>
  </my-drawer>
</template>
<script setup name="ViolationFlowDialog">
import useClearDialog from '@/hooks/useClearDialog';
import { ChevronUpIcon, ChevronDownIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';

import { ref, computed } from 'vue';
import { useUserStore } from '@/store';
import { violationDetailList, flowViolation } from '@/api/sop';
import {customerTypeFilter, timestampFilter, violationTypeFilter} from '@/utils/filter';

const userStore = useUserStore();

const props = defineProps({
  visible: Boolean,
  curRow: {
    type: Object,
    default() {
      return {};
    },
  },
  type: {
    type: String,
    default: 'new',
  },

});
const emit = defineEmits(['update:visible', 'success']);

const formRef = ref(null);
const tableData = ref([]);
const showHistory = ref(false);
const IS_VIEW_MODE = computed(() => {
  return props.type === 'view';
});
const title = computed(() => {
  return `违规信息(违规流水号：${props.curRow.code})`;
});

const getDetail = async () => {
  const res = await violationDetailList(props.curRow.id);
  tableData.value = res;
};

const { formData } = useClearDialog(
  {
    attachmentIds: '',
    remark: '',
  },
  props,
  formRef,
  getDetail
);

const rules = {
  remark: [
    {
      required: true,
      message: '请填写跟进说明',
      type: 'error',
      trigger: 'blur',
    },
  ],
};
const fileChange = (fileList) => {
  formData.attachmentIds = fileList.map((item) => item.id).join(',');
};
const columns = [
  { colKey: 'createTime', title: '跟进时间', width: 180 },
  { colKey: 'createName', title: '跟进人' },
  { colKey: 'remark', title: '跟进说明' },
  { colKey: 'attachmentIds', title: '附件说明', cell: 'attachment' },
];

const save = async () => {
  const valid = await formRef.value.validate();
  if (valid !== true) return;

  const res = await flowViolation({
    ...formData,
    violationId: props.curRow.id,
  }).catch(() => {});
  if (!res) return;

  MessagePlugin.success('保存成功');
  emit('update:visible', false);
  emit('success');
};
</script>
