<!-- 创建其他评审材料 -->
<script lang="ts" setup name="EditArea">
import type { Ref } from 'vue'
import { defineExpose, nextTick, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import axios from 'axios'
import { getDictByCode } from '@/api/system/dict'
import { UploadFile, getPhotoUrl } from '@/api/file'
import { getSearchDept } from '@/api/quality/supervise/record'
import { addOther, otherFileTypes } from '@/api/quality/review/work'
import { getListByUrl } from '@/api/quality/prevent/index'
const emits = defineEmits(['confirm'])
const dataFormRef = ref()
const $route = useRoute()
const dialogFormVisible = ref(false) // 对话框是否显示
// 表单
const areaForm = ref({
  createTime: '',
  fileCode: '',
  fileName: '',
  filePath: '',
  fileType: '',
  managementId: $route.query.id as string,
  MaterialSource: '1',
  targetId: '',
})
// 附件名称
const uploadName = ref('')
// 前端校验规则
const rules: FormRules = {
  MaterialSource: [{ required: true, message: '材料来源必选', trigger: ['blur', 'change'] }],
  fileType: [{ required: true, message: '文件类型必选', trigger: ['blur', 'change'] }],
  fileName: [{ required: true, message: '文件名称必填', trigger: ['blur', 'change'] }],
  filePath: [{ required: true, message: '附件必须上传', trigger: ['blur', 'change'] }],
  fileCode: [{ required: true, message: '文件编号必填', trigger: ['blur', 'change'] }],
  // bizLabCode: [{ required: true, message: '实验室必选', trigger: ['blur', 'change'] }],
  // deptId: [{ required: true, message: '部门必须按', trigger: ['blur', 'change'] }],
}
// 重置表单
const resetForm = () => {
  areaForm.value = {
    createTime: '',
    fileCode: '',
    fileName: '',
    filePath: '',
    fileType: '',
    managementId: $route.query.id as string,
    MaterialSource: '1',
    targetId: '',
  }
  uploadName.value = ''
}
// 获取字典
const MaterialSource = ref<{ id: string; value: string; name: string }[]>([
  {
    name: '系统',
    id: '1',
    value: '1',
  },
  {
    name: '上传',
    id: '2',
    value: '2',
  },
]) // 材料来源
const fileTypeList = ref<any[]>([]) // 文件类型
const fileTypeAllList = ref<any[]>([]) // 文件类型
const fetchDict = () => {
  otherFileTypes({}).then((res) => {
    fileTypeList.value = res.data.filter((item: any) => item.name !== '其他材料')
    fileTypeAllList.value = res.data
  })
}
fetchDict()
watch(() => areaForm.value.MaterialSource, (newVal) => {
  if (newVal === '1') {
    fileTypeList.value = fileTypeAllList.value.filter((item: any) => item.name !== '其他材料')
  }
  else {
    fileTypeList.value = fileTypeAllList.value
  }
})
const fileCodeList = ref<any[]>([])
watch(() => areaForm.value.fileType, (newVal) => {
  if (areaForm.value.MaterialSource === '1') {
    const data = fileTypeAllList.value.filter((item: any) => item.code === newVal)[0]
    getListByUrl({ formId: data.formId || undefined, offset: 1, limit: 100, approvalStatus: '0' }, data.tips.slice(1)).then((res) => {
      fileCodeList.value = res.data.rows
    })
  }
})
watch(() => areaForm.value.fileCode, (newVal) => {
  if (areaForm.value.MaterialSource === '1' && newVal) {
    const data = fileCodeList.value.filter((item: any) => item.reportNo === newVal)[0] || {}
    areaForm.value.targetId = data.data.id
    areaForm.value.fileName = data.reportName
    // areaForm.value.filePath = data.filePath
  }
})
// 保存按钮
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      // emits('confirm', {
      //   ...areaForm.value,
      // })
      // dialogFormVisible.value = false
      addOther({ ...areaForm.value, formName: areaForm.value.fileName, formNo: areaForm.value.fileCode }).then((res) => {
        emits('confirm', {})
        dialogFormVisible.value = false
      })
    }
  })
}
// 初始化对话框
const initDialog = (row: any = {}) => {
  dialogFormVisible.value = true
  resetForm()
  nextTick(() => {
    dataFormRef.value?.clearValidate()
  })
  areaForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  areaForm.value.MaterialSource = '1'
  areaForm.value.managementId = $route.query.id as string
  // console.log($route.params.id, '$route.params.id')
}
defineExpose({
  initDialog,
})

const cancel = () => {
  dialogFormVisible.value = false
}
// 上传附件
const fileRef = ref() // 文件上传input，获取input的引用
const onFileChange = (event: any) => {
  // 原生上传
  if (event.target.files?.length !== 0) {
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    UploadFile(fd).then((res1) => {
      fileRef.value.value = ''
      if (res1.code === 200) {
        ElMessage.success('上传成功')
        getPhotoUrl(res1.data[0]).then((res) => {
          areaForm.value.filePath = res.data
          // 展示上传文件名称
          const data = res.data.split('/')
          uploadName.value = data[data.length - 1]
          dataFormRef.value?.clearValidate('filePath')
        })
      }
    })
  }
}
// 导入
const importList = () => {
  fileRef.value.click()
}
// 删除
const close = () => {
  areaForm.value.filePath = ''
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="创建其他评审材料" append-to-body width="30%">
    <el-form ref="dataFormRef" :rules="rules" :model="areaForm" label-position="right" label-width="80px">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="材料来源" prop="MaterialSource">
            <el-select v-model="areaForm.MaterialSource" placeholder="材料来源">
              <el-option
                v-for="item in MaterialSource"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="文件类型" prop="fileType">
            <el-select v-model="areaForm.fileType" placeholder="文件类型">
              <el-option
                v-for="item in fileTypeList"
                :key="item.name"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="文件编号" prop="fileCode">
            <el-input v-if="areaForm.MaterialSource === '2'" v-model="areaForm.fileCode" placeholder="文件编号" style="width: 100%;" />
            <el-select v-if="areaForm.MaterialSource === '1'" v-model="areaForm.fileCode" placeholder="文件编号">
              <el-option
                v-for="item in fileCodeList"
                :key="item.id"
                :label="item.name || item.formName || item.fileName"
                :value="item.code || item.formNo || item.fileCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="文件名称" prop="fileName">
            <el-input v-model="areaForm.fileName" placeholder="文件名称" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col v-if="areaForm.MaterialSource === '2'" :span="24">
          <el-form-item label="附件" prop="filePath">
            <!-- <el-input-number v-model="areaForm.fileName" style="width: 100%;" /> -->
            <a class="link" :href="areaForm.filePath" type="primary" style="margin-right: 10px;" target="_blank">
              {{ uploadName }}
              <span v-if="!$route.path.includes('detail')" class="close" @click.stop.capture.prevent="close">x</span>
            </a>
            <el-button v-if="!areaForm.filePath" type="primary" @click="importList">
              上传
            </el-button>
            <input ref="fileRef" style="display: none;" type="file" accept=".doc,.docx,.pdf,.xls,.xlsx" @change="onFileChange">
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="areaForm.createTime"
              type="datetime"
              style="width: 100%;"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="创建时间"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveForm(dataFormRef)">
          保存
        </el-button>
        <el-button @click="cancel">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}

.link {
  position: relative;
  color: #5d93ff;
  // display: inline-block;
  font-size: 16px;
  text-decoration: none;
  // margin-right: 10px;
  padding-right: 10px;
  // height: 33px;
  line-height: 33px;

  &:hover {
    text-decoration: underline;

    .close {
      display: block;
    }
  }

  .close {
    position: absolute;
    top: -20px;
    right: -10px;
    display: none;
    z-index: 99;
    height: 40px;
    width: 40px;
    color: rgb(121 118 115);
    // background-color: #ccc;
    text-align: center;
  }
  // &::before {
  //   content: "x";
  //   width: 15px;
  //   height: 15px;
  //   position: absolute;
  //   right: -4px;
  //   top: -16px;
  //   color: #817d7d;
  //   font-size: 16px;
  //   // background-color: #ccc;
  //   // border-radius: 50%;
  //   display: none;
  // }

  // &:hover {
  //   &::before {
  //     display: block;
  //   }
  // }
}
</style>