<template>
  <el-form
    ref="clinicalDataForm"
    v-loading="loading"
    :model="form"
    size="small"
    :rules="rules"
    label-width="110px"
  >
    <div class="base-dialog-body">
      <el-form-item label="临床数据名称" prop="ClinicalDataSetEnum">
        <!-- <el-input v-model="form.ClinicalDataSetName" /> -->
        <el-select v-model="form.ClinicalDataSetEnum" placeholder="请选择" style="width:100%;">
          <el-option
            v-for="(item,index) of $d.ClinicalDataType"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('trials:studyList:table:uploader')" prop="UploadRole">
        <el-select
          v-model="form.UploadRole"
          placeholder="请选择"
          style="width:100%;"
          @change="handleUploadRoleChange"
        >
          <el-option
            v-for="(item,index) of $d.ClinicalDataUploadRole"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="数据级别" prop="ClinicalDataLevel">
        <el-select
          v-model="form.ClinicalDataLevel"
          placeholder="请选择"
          style="width:100%;"
        >
          <el-option
            v-for="(item,index) of $d.ClinicalLevel"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="form.UploadRole === 0 && item.value=== 2"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="传输方式" prop="ClinicalUploadType">
        <el-select
          v-model="form.ClinicalUploadType"
          placeholder="请选择"
          style="width:100%;"
        >
          <el-option
            v-for="(item,index) of $d.ClinicalUploadType"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="form.UploadRole === 1 && item.value=== 0"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="$t('trials:auditRecord:table:criterion')"
        prop="CriterionEnumList"
      >
        <el-select
          v-model="form.CriterionEnumList"
          placeholder="请选择"
          multiple
          style="width:100%;"
        >
          <el-option
            v-for="(item,index) of $d.CriterionType"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.ClinicalUploadType === 1" label="模板: ">
        <div class="upload-container">
          <el-upload
            class="upload-demo"
            action
            accept=".doc,.docx"
            :before-upload="beforeUpload"
            :http-request="handleUploadFile"
            :on-preview="handlePreview"
            :on-remove="handleRemoveFile"
            :show-file-list="true"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
            :disabled="form.Type === ''"
          >
            <el-button size="small" type="primary">选择</el-button>
            <span
              slot="tip"
              style="margin-left:10px;"
              class="el-upload__tip"
            >
              (必须是doc/docx格式)
            </span>
          </el-upload>
        </div>
      </el-form-item>

      <el-form-item v-if="form.ClinicalUploadType === 1" label="英文模板: ">
        <div class="upload-container">
          <el-upload
            class="upload-demo"
            action
            accept=".doc,.docx"
            :before-upload="beforeUploadEnFile"
            :http-request="handleUploadEnFile"
            :on-preview="handlePreview"
            :on-remove="handleRemoveEnFile"
            :show-file-list="true"
            :file-list="enFileList"
            :limit="1"
            :on-exceed="handleExceed"
            :disabled="form.Type === ''"
          >
            <el-button size="small" type="primary">选择</el-button>
            <span
              slot="tip"
              style="margin-left:10px;"
              class="el-upload__tip"
            >
              (必须是doc/docx格式)
            </span>
          </el-upload>
        </div>
      </el-form-item>

      <el-form-item v-if="form.Id !== ''" label="是否启用">
        <el-switch v-model="form.IsEnable" />
      </el-form-item>
    </div>
    <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
      <el-form-item>
        <!-- 取消 -->
        <el-button
          :disabled="btnLoading"
          size="small"
          type="primary"
          @click="close"
        >
          {{ $t('common:button:cancel') }}
        </el-button>
        <!-- 保存 -->
        <el-button size="small" type="primary" :loading="btnLoading" @click="save">
          {{ $t('common:button:save') }}
        </el-button>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>
import { addOrUpdateClinicalDataSet, getSystemCriterionSelectList } from '@/api/dictionary'
import { uploadClinicalTemplate } from '@/api/trials'
export default {
  name: 'AddOrUpdateClinicalData',
  props: {
    data: {
      type: Object,
      default() { return {} }
    }
  },

  data() {
    return {
      form: {
        Id: '',
        ClinicalDataSetEnum: null,
        ClinicalDataSetName: '',
        // ClinicalDataSetNameEN: '',
        ClinicalDataLevel: null,
        ClinicalUploadType: null,
        UploadRole: null,
        FileName: '',
        Path: '',
        EnFileName: '',
        EnPath: '',
        IsEnable: true,
        CriterionEnumList: []
      },
      rules: {
        ClinicalDataSetEnum: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur', 'change'] }],
        ClinicalDataLevel: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }],
        ClinicalUploadType: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }],
        UploadRole: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }],
        CriterionEnumList: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }]
      },
      loading: false,
      btnLoading: false,
      fileList: [],
      enFileList: [],
      systemCriterionSelectList: []
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    initForm() {
      if (Object.keys(this.data).length > 0) {
        for (const k in this.form) {
          if (this.data.hasOwnProperty(k)) {
            this.form[k] = this.data[k]
          }
        }
        if (this.data.Path) {
          this.fileList = [
            {
              name: this.data.FileName,
              path: this.data.Path
            }
          ]
        }
        if (this.data.EnPath) {
          this.enFileList = [
            {
              name: this.data.EnFileName,
              path: this.data.EnPath
            }
          ]
        }
      }
    },
    save() {
      this.$refs.clinicalDataForm.validate(valid => {
        if (!valid) return
        this.btnLoading = true
        this.form.ClinicalDataSetName = this.$fd('ClinicalDataType', this.form.ClinicalDataSetEnum)
        // this.form.ClinicalDataSetName = this.$fd('ClinicalDataType', this.form.ClinicalDataSetEnum)
        addOrUpdateClinicalDataSet(this.form).then(res => {
          this.btnLoading = false
          this.$emit('getList')
          this.$emit('close')
          this.$message.success(this.$t('common:message:savedSuccessfully'))
        })
          .catch(() => {
            this.btnLoading = false
          })
      })
    },
    // 上传模板uploadClinicalTemplate
    async handleUploadFile(param) {
      this.loading = true
      var fileBlob = await this.fileToBlob(param.file)
      const res = await this.OSSclient.put(`/System/ClinicalDataTemplate/${param.file.name}`, fileBlob)
      this.form.FileName = res.name
      this.form.Path = this.$getObjectName(res.url)
      let file = { name: res.name, path: this.$getObjectName(res.url), url:this.$getObjectName(res.url) }
      this.fileList.push(file)
      this.loading = false
    },
    beforeUpload(file) {
      // 检测文件类型是否符合要求
      if (this.checkFileSuffix(file.name)) {
        this.fileList = []
        return true
      } else {
        this.$alert('(必须是doc/docx格式)')

        return false
      }
    },
    handleRemoveFile() {
      this.fileList = []
      this.form.Path = ''
      this.form.FileName = ''
    },
    handlePreview(file) {
      if (file.fullPath) {
        window.open(file.fullPath, '_blank')
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`只允许上传一个文件`)
    },
    beforeUploadEnFile(file) {
      // 检测文件类型是否符合要求
      if (this.checkFileSuffix(file.name)) {
        this.enFileList = []
        return true
      } else {
        this.$alert('(必须是doc/docx格式)')

        return false
      }
    },
    async handleUploadEnFile(param) {
      this.loading = true
      var fileBlob = await this.fileToBlob(param.file)
      const res = await this.OSSclient.put(`/System/ClinicalDataTemplate/${param.file.name}`, fileBlob)
      this.form.EnFileName = res.name
      this.form.EnPath = this.$getObjectName(res.url)
      let file = { name: res.name, path: this.$getObjectName(res.url), url:this.$getObjectName(res.url) }
      this.enFileList.push(file)
      this.loading = false
    },
    handleRemoveEnFile() {
      this.enFileList = []
      this.form.EnPath = ''
      this.form.EnFileName = ''
    },
    checkFileSuffix(fileName) {
      var typeArr = ['doc', 'docx']
      var extendName = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
      if (typeArr.indexOf(extendName) !== -1) {
        return true
      } else {
        return false
      }
    },
    handleUploadRoleChange(val) {
      if (val === 0 && this.form.ClinicalDataLevel === 2) {
        this.form.ClinicalDataLevel = null
      }
      if (val === 1 && this.form.ClinicalUploadType === 0) {
        this.form.ClinicalUploadType = null
      }
    },
    close() {
      this.$emit('close')
    }

  }
}
</script>
<style lang="scss" scoped>
.upload-container{
  ::v-deep .el-upload {
    width: 100%;
    text-align: left;
  }
}
</style>
