<!--
 * @Description: 考核方案管理新建/编辑/详情页面
 * @Author: 李亚光
 * @Date: 2023-09-14
 -->
<script lang="ts" setup name="RuleProgrammeHandler">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
const $route = useRoute()
const $router = useRouter()
// 对话框类型：create,update
const dialogStatus = ref('create')
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 表单对象
const ruleForm = ref({

})
// 表单验证规则
const rules = ref<FormRules>({
  reason: [{ required: true, message: '送检原因必填', trigger: ['blur', 'change'] }],
})
// 表单实例对象
const ruleFormRef = ref()
const radio1 = ref('')
const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    fd.append('multipartFile', event.target.files[0])
    // uploadApi(fd).then((res) => {
    //   if (res.code === 200) {
    //     ruleForm.value.instructionsFile = ruleForm.value.instructionsFile ? `${ruleForm.value.instructionsFile},${res.data[0]}` : res.data[0]
    //     // 重置当前验证
    //     ruleFormRef.value?.clearValidate('minioFileName')
    //     ElMessage.success('文件上传成功')
    //     fileRef.value.value = ''
    //     loading.close()
    //   }
    //   else {
    //     // ElMessage.error(res.message)
    //     loading.close()
    //   }
    // })
  }
}
// 上传
const upload = () => {
  fileRef.value.click()
}
// 删除上传的文件
const deleteFile = (fileName: string) => {
  const data = ruleForm.value.instructionsFile.split(',')
  const filterData = data.filter(item => item !== fileName)
  ruleForm.value.instructionsFile = filterData.length ? filterData.join(',') : ''
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page class="base-info-device" :title="`考核指标-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button type="primary">
          保存
        </el-button>
        <el-button type="info" @click="$router.go(-1)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-form
        ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="130px" class="form"
        :class="[$route.path.includes('detail') ? 'isDetail' : '']" :disabled="$route.path.includes('detail')"
      >
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="考核方案名称" prop="approvalNo">
              <el-input v-model.trim="ruleForm.approvalNo" placeholder="考核方案名称" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考核对象" prop="approvalNo">
              <el-select v-model.trim="ruleForm.approvalNo" placeholder="指标考核对象" style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="具体考核部门" prop="approvalName">
              <el-input v-model.trim="ruleForm.approvalName" type="textarea" placeholder="考核部门" :rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="考核周期" prop="approvalNo">
              <el-select v-model.trim="ruleForm.approvalNo" placeholder="考核周期" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考核等级评定" prop="approvalNo">
              <el-select v-model.trim="ruleForm.approvalNo" placeholder="考核等级评定" style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="考核填报发送日期" prop="approvalNo">
              <el-date-picker
                v-model="ruleForm.endTime"
                style="width: 100%;" type="datetime" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                placeholder="考核填报发送日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考核填报截至日期" prop="approvalNo">
              <el-date-picker
                v-model="ruleForm.endTime"
                style="width: 100%;" type="datetime" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                placeholder="考核填报截至日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="考核得分" prop="approvalNo">
              <el-input v-model.trim="ruleForm.approvalNo" placeholder="添加考核得分规则" style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="备注" prop="approvalName">
              <el-input v-model.trim="ruleForm.approvalName" type="textarea" placeholder="备注" :rows="4" maxlength="100" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="是否启用" prop="approvalName">
              <el-switch
                v-model="ruleForm.value"
                size="large"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="附件上传" prop="approvalNo">
              <show-photo :minio-file-name="ruleForm.instructionsFile" @delete="deleteFile" />
              <input ref="fileRef" style="display: none;" type="file" accept="application/msword,application/pdf" @change="onFileChange">
              <el-button v-if="!$route.path.includes('detail')" type="primary" @click="upload">
                上传
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
  </app-container>
</template>

  <style lang="scss" scoped>
      .isDetail {
        ::v-deep {
          .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
          .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
            content: "";
            display: none;
          }
        }
      }
  </style>