<template>
  <el-form
    ref="verificationForm"
    v-loading="loading"
    :model="form"
    size="small"
    :rules="rules"
    label-width="150px"
    :inline="true"
  >
    <!-- 文件列表 -->
    <el-divider content-position="left">{{ $t('trials:readingPeriod:verify:title:fileList') }}</el-divider>
    <div style="text-align: right">
      <!-- 预览 -->
      <el-button
        type="primary"
        style="margin-bottom: 10px"
        icon="el-icon-view"
        size="mini"
        @click="handlePreview"
      >
        {{ $t('trials:readingPeriod:verify:title:preview') }}
      </el-button>
    </div>

    <el-table
      ref="filesTable"
      :data="fileList"
      class="dicomFiles-table"
      height="200"
      style="width:100%"
      border
    >
      <el-table-column type="index" width="40" />
      <el-table-column
        prop="FileName"
        :label="$t('trials:uploadClinicalData:table:fileName')"
        min-width="190"
        show-overflow-tooltip
      />
    </el-table>
    <!-- 核查结果 -->
    <el-divider content-position="left">{{ $t('trials:readingPeriod:verify:title:result') }}</el-divider>
    <div>
      <!-- 临床信息是否完整 -->
      <el-form-item :label="$t('trials:readingPeriod:verify:title:isComplete')" prop="IsComplete">
        <el-radio-group v-model="form.IsComplete">
          <el-radio :label="true">{{ $fd('YesOrNo', true) }}</el-radio>
          <el-radio v-if="data.ClinicalUploadType === 1" :label="false">N/A</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
    <div>
      <!-- 临床信息是否盲化 -->
      <el-form-item :label="$t('trials:readingPeriod:verify:title:isBlind')" prop="IsBlind">
        <el-radio-group v-model="form.IsBlind">
          <el-radio :label="true">{{ $fd('YesOrNo', true) }}</el-radio>
          <el-radio v-if="data.ClinicalUploadType === 1" :label="false">N/A</el-radio>
        </el-radio-group>
      </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 { getTrialClinicalDataSelect } from '@/api/trials'
import { PMClinicalDataConfirm } from '@/api/trials/subject'
export default {
  name: 'AddOrUpdateClinicalData',
  props: {
    data: {
      type: Object,
      default() { return {} }
    }
  },

  data() {
    return {
      form: {
        Id: null,
        FileList: [],
        IsBlind: null,
        IsComplete: null
      },
      rules: {
        IsBlind: [{ required: true, message: this.$t('common:ruleMessage:select') }],
        IsComplete: [{ required: true, message: this.$t('common:ruleMessage:select') }]
      },
      loading: false,
      btnLoading: false,
      clinicalDatas: [],
      fileList: []
    }
  },
  async mounted() {
    await this.getClinicalDatas()
    if (Object.keys(this.data).length > 0) {
      for (const k in this.form) {
        this.form[k] = this.data[k]
      }
      console.log(this.form)
      this.handleClinicalDataSetChange(this.form.ClinicalDataTrialSetId)
      this.fileList = this.form.FileList.concat()
    }
  },
  methods: {
    PMClinicalDataConfirm() {
      this.loading = true
      this.btnLoading = true
      // PMClinicalDataConfirm(this.form).then(res => {
      //   // this.$message.success('保存成功')
      //   this.loading = false
      //   this.btnLoading = false
      this.$emit('getList')
      this.$emit('sign', this.form)
      this.loading = false
      this.btnLoading = false
        // this.$emit('close')
      // }).catch(() => {
      //   this.loading = false
      //   this.btnLoading = false
      // })
    },
    handleClinicalDataSetChange(v) {
      var index = this.clinicalDatas.findIndex(item => item.Id === v)
      if (index > -1) {
        this.currentTpl.id = this.clinicalDatas[index].Id
        this.currentTpl.isExist = !!this.clinicalDatas[index].FileName
      }
    },
    getClinicalDatas() {
      return new Promise((resolve, reject) => {
        this.loading = true
        var param = {
          trialId: this.data.TrialId,
          IsVisit: this.data.IsVisit,
          ReadingId: this.data.ReadingId,
          SubjectId: this.data.SubjectId,
          ReadingClinicalDataId: this.data.Id ? this.data.Id : '',
          IsBaseLine: this.data.IsBaseLine
        }
        getTrialClinicalDataSelect(param).then(res => {
          this.clinicalDatas = res.Result
          this.loading = false
          resolve()
        }).catch(() => {
          this.loading = false
          reject()
        })
      })
    },
    save() {
      this.$refs.verificationForm.validate(valid => {
        if (!valid) return
        this.PMClinicalDataConfirm()
      })
    },
    handlePreview() {
      this.$emit('handlePreview', this.data.Id)
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
