<script name="editPersonInfoDialog" setup>
import { ref, getCurrentInstance, watch } from 'vue'
import { changFilesParam, fileFormatVerification, handleFileSuccess, handleFilePreview, reviewFileParam, fileTypes, fileDesc } from '@/utils/uploadAction.js'
import store from '@/store'
import { detail, personSave } from '@/http/apis/projectSafetyRiskMonitor/securityPersonnelControl'
const { proxy } = getCurrentInstance(),
  uploadUrl = store.dictStore.uploadUrl,
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: Object
  }),
  emits = defineEmits(['close']),
  loading = ref(false),
  dialogForm = ref({
    infoList: [{ investigationReport: [] }]
  }),
  dialogFormRef = ref(),
  submit = async (formEl) => {
    if (!formEl) {
      return
    }
    formEl.validate(async (valid) => {
      if (valid) {
        try {
          loading.value = true
          const postData = dialogForm.value.infoList.map(i => {
            return {
              ...i,
              projectCode: props.data.projectCode,
              investigationReport: i?.investigationReport?.length && JSON.stringify(changFilesParam(i.investigationReport)) || undefined
            }
          })
          await personSave(postData)
          proxy.$message.success('提交成功！')
          loading.value = false
          emits('close', true)
        } catch (e) {
          loading.value = false
        }
      }
    }
    )
  },
  // 添加
  // add = () => {
  //   if (dialogForm.value.infoList?.length >= 10) {
  //     proxy.$message.warning('最多增加10个！')
  //     return
  //   }
  //   dialogForm.value.infoList.push({
  //     investigationReport: []
  //   })
  // },
  // // 删除
  // del = (index) => {
  //   dialogForm.value.infoList?.splice(index, 1)
  // },
  getDetail = async () => {
    const res = await detail(props.data.projectCode)
    dialogForm.value.infoList = res.data.personSafetyInfo?.map(i => {
      return {
        ...i,
        investigationReport: i.investigationReport ? reviewFileParam(JSON.parse(i.investigationReport)) : []
      }
    }) || [{ investigationReport: [] }]
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      getDetail()
    } else {
      dialogForm.value = { infoList: [{ investigationReport: [] }] }
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="填写安全人员信息"
    width="600px"
    destroy-on-close
    @close="emits('close')"
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      label-width="auto"
      status-icon
      class="mt-16"
      label-suffix="："
    >
      <div v-for="(item,index) in dialogForm.infoList" :key="index" class="flex items-start">
        <div class="flex-1">
          <el-form-item label="项目安全负责人" :prop="`infoList[${index}].username`" :rules="[{required:true,message:'请填写'}]">
            <el-input
              v-model="item.username"
              placeholder="请填写"
            />
          </el-form-item>
          <el-form-item label="联系方式" :prop="`infoList[${index}].contactInfo`" :rules="[{required:true,message:'请填写'}]">
            <el-input
              v-model="item.contactInfo"
              placeholder="请填写"
              :maxlength="11"
            />
          </el-form-item>
          <el-form-item label="项目保密协议" :prop="`infoList[${index}].investigationReport`" :rules="[{required:true,message:'请上传'}]">
            <el-upload
              v-model:file-list="item.investigationReport"
              class=" w-full"
              :action="uploadUrl"
              :limit="1"
              :on-success="res => handleFileSuccess(res, dialogForm.infoList[index].investigationReport, true)"
              :before-upload="file=>fileFormatVerification(file, {types: fileTypes})"
              :accept="fileTypes.map(i=>`.${i}`).join(',')"
              :on-preview="handleFilePreview"
            >
              <el-button type="primary" plain>选择文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  支持{{ fileDesc }}文件
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </div>
        <!--              <el-button-->
        <!--                v-if="dialogForm.infoList?.length>1"-->
        <!--                icon="Delete"-->
        <!--                type="danger"-->
        <!--                plain-->
        <!--                class="ml-16"-->
        <!--                link-->
        <!--                @click="del(index)"-->
        <!--              >删除</el-button>-->
        <!--            </div>-->
        <!--      <el-button-->
        <!--        icon="Plus"-->
        <!--        type="primary"-->
        <!--        plain-->
        <!--        @click="add"-->
        <!--      >增加</el-button>-->
      </div></el-form>
    <template #footer>
      <el-button
        type="primary"
        :loading="loading"
        @click="submit(dialogFormRef)"
      >
        提交
      </el-button>
      <el-button
        @click="emits('close')"
      >
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>
