<template>
  <my-drawer
    class="sop-dialog"
    :visible="visible"
    header="新增违规"
    size="80%"
    attach="body"
    :closeOnOverlayClick="false"
    :close-btn="true"
    :footer="false"
    @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="72px">
            <t-row :gutter="[0, 4]">
              <t-col :span="3">
                <t-form-item label="服务单元">{{
                  sop.serviceName
                }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="SOP流水号">{{ sop.sopNo }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="客户类型">{{
                  sop.customManagerTypeStr
                }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="客户名称">{{ sop.customName }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="项目单号">{{ sop.crmNo }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="实施产品">{{
                  sop.productName
                }}</t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="项目名称">{{ sop.crmName }}</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
          class="sop-step-body"
          ref="formRef"
          :data="formData"
          :rules="rules"
          labelAlign="top"
          colon
        >
          <t-row :gutter="[0, 20]">
            <t-col :span="5">
              <t-form-item label="节点负责人" name="userId">
<!--                <select-filter-user-->
<!--                  v-model="formData.userId"-->
<!--                  placeholder="输入关键词搜索选择"-->
<!--                  clearable-->
<!--                ></select-filter-user>-->
                <select-url-user
                    v-model="formData.userId"
                    url="/api/admin/sop/user/list"
                    :params="{sop_info_id:sop.id}"
                    clearable
                ></select-url-user>
              </t-form-item>
            </t-col>
            <t-col :span="5" :offset="1">
              <t-form-item label="违规类型" name="type">
                <t-select
                  v-model="formData.type"
                  :options="dictToOptionList(VIOLATION_TYPE)"
                >
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :span="12">
              <t-form-item label="违规情况说明" name="content">
                <t-textarea
                  v-model="formData.content"
                  :autosize="{ minRows: 3, maxRows: 5 }"
                  :maxlength="100"
                ></t-textarea>
              </t-form-item>
            </t-col>
            <t-col :span="12">
              <t-form-item label="截图说明">
                <my-upload @change="imageChange"></my-upload>
              </t-form-item>
            </t-col>
          </t-row>
        </t-form>
        <t-space 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="AddViolationDialog">
import { ref, reactive, watch } from 'vue';
import { VIOLATION_TYPE } from '@/config/constants';
import { dictToOptionList } from '@/utils/tool';
import { saveViolation } from '@/api/sop';
import { MessagePlugin } from 'tdesign-vue-next';

const emit = defineEmits(['update:visible', 'success']);
const props = defineProps({
  visible: Boolean,
  sop: {
    type: Object,
    default() {
      return {};
    },
  },
});

const initFormData = {
  id: null,
  userId: null,
  type: '',
  status: 'NOT_START',
  content: '',
  attachmentIds: '',
  crmNo: '',
  serviceId: null,
  sopNo: '',
};

let formData = reactive(initFormData);
const formRef = ref(null);

const rules = {
  userId: [
    {
      required: true,
      message: '节点负责人必选',
      type: 'error',
      trigger: 'change',
    },
  ],
  type: [
    { required: true, message: '类型必选', type: 'error', trigger: 'change' },
  ],
  content: [
    {
      required: true,
      message: '违规情况说明必填',
      type: 'error',
      trigger: 'change',
    },
  ],
};

watch(
  () => props.visible,
  (val) => {
    if (val) {
      formData.crmNo = props.sop.crmNo || '';
      formData.serviceId = props.sop.serviceId || '';
      formData.sopNo = props.sop.sopNo || '';
    }
  }
);

const imageChange = (fileList) => {
  formData.attachmentIds = fileList.map((item) => item.id).join(',');
};

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

  const res = await saveViolation(formData).catch(() => {});
  if (!res) return;

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