<script name="reviewCommentsDialog" setup>
import { ref, onMounted } from 'vue'
import { fileFormatVerification, handleFileSuccess, handleFileError, handleFilePreview, fileTypes, fileDesc } from '@/utils/uploadAction.js'
import store from '@/store'
const
  uploadUrl = store.dictStore.uploadUrl,
  props = defineProps({
    templateData: Object
  }),
  formRef = ref(),
  form = ref({
    templates: [],
    attachments: []
  }),
  rules = {
    otherAdvice: [{ required: true, message: '请输入意见', trigger: 'blur' }],
    reviewResult: [{ required: true, message: '请选择评审结果', trigger: 'blur' }]
  },
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  }
onMounted(async () => {
  form.value.templates = props.templateData.templates.map(i => {
    return {
      optionSerialNo: undefined,
      otherAdvice: '',
      questionSerialNo: i.serialNo
    }
  })
  form.value.templateId = props.templateData.templateId
})
defineExpose({ validForm, form })
</script>

<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="auto"
    label-suffix=":"
    label-position="top"
    class="reviewForm"
  >
    <el-row>
      <template v-if="form.templates?.length">
        <el-col
          v-for="(item,index) in templateData.templates"
          :key="index"
          :span="24"
        >
          <el-form-item
            :label="item.title"
            :prop="`templates[${index}].optionSerialNo`"
            :rules="[{required:true,message:'请选择'}]"
          >
            <el-checkbox-group v-if="item.optionType===2" v-model="form.templates[index].optionSerialNo">
              <el-checkbox
                v-for="(option,key) in item.options"
                :key="key"
                :label="option.serialNo"
              >{{ option.option }}</el-checkbox>
            </el-checkbox-group>
            <el-radio-group
              v-else
              v-model="form.templates[index].optionSerialNo"
              class="myWrap"
            >
              <el-radio
                v-for="(option,key) in item.options"
                :key="key"
                :label="option.serialNo"
              >{{ option.option }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :prop="`templates[${index}].otherAdvice`"
          >
            <el-input
              v-model="form.templates[index].otherAdvice"
              :rows="2"
              type="textarea"
              :placeholder="`请输入${item.title}的其他意见或建议`"
            />
          </el-form-item>
        </el-col>
      </template>
      <el-col :span="24">
        <el-form-item
          label="其他意见或建议"
          prop="otherAdvice"
        >
          <el-input
            v-model="form.otherAdvice"
            :rows="2"
            maxlength="200"
            type="textarea"
            show-word-limit
            placeholder="请输入其他意见或建议"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="附件"
          prop="attachments"
        >
          <el-upload
            v-model:file-list="form.attachments"
            class="w-full"
            :action="uploadUrl"
            :on-success="res => handleFileSuccess(res, form.attachments,true)"
            :on-error="handleFileError"
            :before-upload="file=>fileFormatVerification(file, {types: fileTypes})"
            :accept="fileTypes.map(i=>`.${i}`).join(',')"
            :limit="1"
            :on-preview="handleFilePreview"
          >
            <el-button type="primary" class="mr-4">上传附件</el-button>
            <template #tip>
              <div class="el-upload__tip">支持{{ fileDesc }}文件</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="24" class="result">
        <el-form-item
          label="评审结果"
          prop="reviewResult"
          class="mb-0"
        >
          <el-radio-group
            v-model="form.reviewResult"
            class="ml-4"
          >
            <el-radio :label="1">评审通过</el-radio>
            <el-radio :label="2">通过需调整</el-radio>
            <el-radio :label="3">修改方案后重新评审</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<style lang="less">
.reviewForm{
  .result{
    background: rgba(0,87,255,0.06);
    border-radius: 4px;
    border: 1px solid #0057FF;
    padding:24px 24px 0;
  }
}
</style>
