<template>
  <div class="form-container" style="width:80%;">
    <el-form ref="researchForm" v-loading="loading" label-width="140px" :model="researchForm" size="small">
      <el-form-item label="Field of Research: ">
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-input :maxLength="$inputMax" :disabled="$route.query.ReviewStatus === '1'" v-model="researchForm.Research" type="textarea" rows="5" placeholder="请注明 in English" size="small" />
          </el-col>
          <el-col :span="11">
            <el-input :maxLength="$inputMax" :disabled="$route.query.ReviewStatus === '1'" v-model="researchForm.ResearchCN" type="textarea" rows="5" placeholder="请用中文注明" size="small" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="Grants: ">
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-input :maxLength="$inputMax" :disabled="$route.query.ReviewStatus === '1'" v-model="researchForm.Grants" type="textarea" rows="5" placeholder="请注明 in English" size="small" />
          </el-col>
          <el-col :span="11">
            <el-input :maxLength="$inputMax" :disabled="$route.query.ReviewStatus === '1'" v-model="researchForm.GrantsCN" type="textarea" rows="5" placeholder="请用中文注明" size="small" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="Publications: ">
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-input :maxLength="$inputMax" :disabled="$route.query.ReviewStatus === '1'" v-model="researchForm.Publications" type="textarea" rows="5" placeholder="请注明 in English" size="small" />
          </el-col>
          <el-col :span="11">
            <!-- <el-input :maxLength="$inputMax" v-model="researchForm.PublicationsCN" type="textarea" rows="5" placeholder="请用中文注明" size="small" /> -->
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="Awards & Honors: ">
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-input :maxLength="$inputMax" :disabled="$route.query.ReviewStatus === '1'" v-model="researchForm.AwardsHonors" type="textarea" rows="5" placeholder="请注明 in English" size="small" />
          </el-col>
          <el-col :span="11">
            <el-input :maxLength="$inputMax" :disabled="$route.query.ReviewStatus === '1'" v-model="researchForm.AwardsHonorsCN" type="textarea" rows="5" placeholder="请用中文注明" size="small" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="$route.query.ReviewStatus === '1'" type="primary" :loading="isDisabled" @click="handleSave">Save</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getResearchPublication, addOrUpdateResearchPublication } from '@/api/reviewers'
export default {
  name: 'ResearchPublication',
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      researchForm: {
        Research: '',
        ResearchCN: '',
        Grants: '',
        GrantsCN: '',
        Publications: '',
        AwardsHonors: '',
        AwardsHonorsCN: ''
      },
      loading: false,
      isDisabled: false
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    initForm() {
      const id = this.$route.query.Id
      if (id) {
        getResearchPublication(id).then(res => {
          if (res.Result) {
            this.researchForm.Research = res.Result.Research
            this.researchForm.ResearchCN = res.Result.ResearchCN
            this.researchForm.Grants = res.Result.Grants
            this.researchForm.GrantsCN = res.Result.GrantsCN
            this.researchForm.Publications = res.Result.Publications
            this.researchForm.AwardsHonors = res.Result.AwardsHonors
            this.researchForm.AwardsHonorsCN = res.Result.AwardsHonorsCN
            this.researchForm.Id = res.Result.Id
          }
        })
      }
    },
    handleSave() {
      this.loading = true
      this.isDisabled = true
      this.researchForm.DoctorId = this.$route.query.Id
      addOrUpdateResearchPublication(this.researchForm).then(res => {
        this.loading = false
        this.isDisabled = false
        this.$message.success('Saved successfully')
        if (!this.researchForm.Id) {
          this.researchForm.Id = res.Result
        }
      }).catch(() => {
        this.loading = false
        this.isDisabled = false
      })
    }
  }
}
</script>
