<template>
  <div v-loading="loading" class="form-container">
    <div class="title-wrapper">
      <p>{{ $t('system:reviewer:title:Education') }}</p>
      <el-button
        class="add"
        :disabled="$route.query.ReviewStatus === '1'"
        size="small"
        @click="handleAddEducation"
      >
        {{ $t('common:button:add') }}</el-button
      >
    </div>
    <el-table
      ref="educationTbl"
      :data="educationList"
      border
      class="table"
      size="small"
    >
      <el-table-column type="index" width="30" />
      <el-table-column
        prop="BeginDateStr"
        :label="$t('system:EducationTraining:table:Start')"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column
        prop="EndDateStr"
        :label="$t('system:EducationTraining:table:End')"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column
        prop="Degree"
        :label="$t('system:EducationTraining:table:Degree')"
        min-width="70"
        show-overflow-tooltip
      >
        <template
          slot-scope="scope"
          v-if="$fd('Degree', Number(scope.row.Degree))"
        >
          {{ $fd('Degree', Number(scope.row.Degree)) }}
        </template>
        <template slot-scope="scope" v-else>
          {{
            scope.row.DegreeCN
              ? `${scope.row.Degree} / ${scope.row.DegreeCN}`
              : scope.row.Degree
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="Major"
        :label="$t('system:EducationTraining:table:Major')"
        min-width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.MajorCN
              ? `${scope.row.Major} / ${scope.row.MajorCN}`
              : scope.row.Major
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="Organization"
        :label="$t('system:EducationTraining:table:Institution')"
        min-width="150"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.OrganizationCN
              ? `${scope.row.Organization} / ${scope.row.OrganizationCN}`
              : scope.row.Organization
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="City"
        :label="$t('system:EducationTraining:table:City')"
        min-width="90"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.CityCN
              ? `${scope.row.City} / ${scope.row.CityCN}`
              : scope.row.City
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="Province"
        :label="$t('system:EducationTraining:table:State/Province')"
        min-width="90"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.ProvinceCN
              ? `${scope.row.Province} / ${scope.row.ProvinceCN}`
              : scope.row.Province
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="Country"
        :label="$t('system:EducationTraining:table:Country')"
        min-width="80"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.CountryCN
              ? `${scope.row.Country} / ${scope.row.CountryCN}`
              : scope.row.Country
          }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('system:EducationTraining:table:Operation')"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            :disabled="$route.query.ReviewStatus === '1'"
            @click="handleEducationEdit(scope.row)"
          >
            {{ $t('common:button:edit') }}</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="$route.query.ReviewStatus === '1'"
            @click="handleEducationDelete(scope.row)"
          >
            {{ $t('common:button:delete') }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="title-wrapper" style="margin-top: 40px">
      <p>{{ $t('system:reviewer:title:Postgraduate') }}</p>
      <el-button
        class="add"
        size="small"
        :disabled="$route.query.ReviewStatus === '1'"
        @click="handleAddPostgraduate"
      >
        {{ $t('common:button:add') }}</el-button
      >
    </div>
    <el-table
      ref="postgraduateTbl"
      :data="postgraduateList"
      border
      class="table"
      size="small"
    >
      <el-table-column type="index" width="30" />
      <el-table-column
        prop="BeginDateStr"
        :label="$t('system:EducationTraining:table:Start')"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column
        prop="EndDateStr"
        :label="$t('system:EducationTraining:table:End')"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column
        prop="Training"
        :label="$t('system:EducationTraining:table:Training')"
        min-width="70"
        show-overflow-tooltip
      >
        <template
          slot-scope="scope"
          v-if="$fd('Training', Number(scope.row.Training))"
        >
          {{ $fd('Training', Number(scope.row.Training)) }}
        </template>
        <template slot-scope="scope" v-else>
          {{
            scope.row.TrainingCN
              ? `${scope.row.Training} / ${scope.row.TrainingCN}`
              : scope.row.Training
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="Major"
        :label="$t('system:EducationTraining:table:Specialty/Research Field')"
        min-width="155"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.MajorCN
              ? `${scope.row.Major} / ${scope.row.MajorCN}`
              : scope.row.Major
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="Hospital"
        :label="$t('system:EducationTraining:table:Hospital')"
        min-width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.HospitalCN
              ? `${scope.row.Hospital} / ${scope.row.HospitalCN}`
              : scope.row.Hospital
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="School"
        :label="$t('system:EducationTraining:table:University')"
        min-width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.SchoolCN
              ? `${scope.row.School} / ${scope.row.SchoolCN}`
              : scope.row.School
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="City"
        :label="$t('system:EducationTraining:table:City')"
        min-width="100"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.CityCN
              ? `${scope.row.City} / ${scope.row.CityCN}`
              : scope.row.City
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="Province"
        :label="$t('system:EducationTraining:table:State/Province')"
        min-width="100"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.ProvinceCN
              ? `${scope.row.Province} / ${scope.row.ProvinceCN}`
              : scope.row.Province
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="Country"
        :label="$t('system:EducationTraining:table:Country')"
        min-width="90"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.CountryCN
              ? `${scope.row.Country} / ${scope.row.CountryCN}`
              : scope.row.Country
          }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('system:EducationTraining:table:Operation')"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            :disabled="$route.query.ReviewStatus === '1'"
            @click="handlePostgraduateEdit(scope.row)"
            >Edit</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="$route.query.ReviewStatus === '1'"
            @click="handlePostgraduateDelete(scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-if="educationDialogVisible"
      :title="educationDialogTitle"
      :visible.sync="educationDialogVisible"
      width="40%"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form
        v-if="educationDialogVisible"
        ref="educationForm"
        size="small"
        label-width="120px"
        :model="educationForm"
        :rules="educationRules"
      >
        <el-form-item
          :label="$t('system:EducationTraining:table:Start')"
          prop="BeginDate"
        >
          <el-date-picker
            v-model="educationForm.BeginDate"
            type="month"
            placeholder="select date"
            value-format="yyyy-MM"
            format="yyyy-MM"
            size="small"
            :picker-options="beginPickerOption"
          />
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:End')"
          prop="EndDate"
        >
          <el-date-picker
            v-model="educationForm.EndDate"
            type="month"
            placeholder="select date"
            value-format="yyyy-MM"
            format="yyyy-MM"
            size="small"
            :picker-options="endpickerOption"
          />
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:Degree')"
          prop="Degree"
        >
          <el-select v-model="educationForm.Degree" size="small">
            <el-option
              v-for="item in $d.Degree"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          :label="$t('system:EducationTraining:table:Major')"
          prop="Major"
        >
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-input
                v-model="educationForm.Major"
                placeholder="Please specify in English"
                size="small"
              />
            </el-col>
            <el-col :span="11">
              <el-input
                v-model="educationForm.MajorCN"
                placeholder="请用中文注明"
                size="small"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:Institution')"
          prop="Organization"
        >
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-input
                v-model="educationForm.Organization"
                placeholder="Please specify in English"
                size="small"
              />
            </el-col>
            <el-col :span="11">
              <el-input
                v-model="educationForm.OrganizationCN"
                placeholder="请用中文注明"
                size="small"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:City')"
          prop="City"
        >
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-input
                v-model="educationForm.City"
                placeholder="Please specify in English"
                size="small"
              />
            </el-col>
            <el-col :span="11">
              <el-input
                v-model="educationForm.CityCN"
                placeholder="请用中文注明"
                size="small"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:State/Province')"
          prop="Province"
        >
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-input
                v-model="educationForm.Province"
                placeholder="Please specify in English"
                size="small"
              />
            </el-col>
            <el-col :span="11">
              <el-input
                v-model="educationForm.ProvinceCN"
                placeholder="请用中文注明"
                size="small"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:Country')"
          prop="Country"
        >
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-input
                v-model="educationForm.Country"
                placeholder="Please specify in English"
                size="small"
              />
            </el-col>
            <el-col :span="11">
              <el-input
                v-model="educationForm.CountryCN"
                placeholder="请用中文注明"
                size="small"
              />
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          :loading="isDisabled"
          @click="handleEducationSave"
          >{{ $t('common:button:save') }}</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      v-if="postgraduateDialogVisible"
      :title="postgraduateDialogTitle"
      :visible.sync="postgraduateDialogVisible"
      width="40%"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form
        v-if="postgraduateDialogVisible"
        ref="postgraduateForm"
        size="small"
        label-width="190px"
        :model="postgraduateForm"
        :rules="postgraduateRules"
      >
        <el-form-item
          :label="$t('system:EducationTraining:table:Start')"
          prop="BeginDate"
        >
          <el-date-picker
            v-model="postgraduateForm.BeginDate"
            type="month"
            placeholder="select date"
            value-format="yyyy-MM"
            format="yyyy-MM"
            :picker-options="postgraduateBeginPickerOption"
            size="small"
          />
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:End')"
          prop="EndDate"
        >
          <el-date-picker
            v-model="postgraduateForm.EndDate"
            type="month"
            placeholder="select date"
            value-format="yyyy-MM"
            format="yyyy-MM"
            :picker-options="postgraduateEndpickerOption"
            size="small"
          />
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:Training')"
          prop="Training"
        >
          <el-select
            v-model="postgraduateForm.Training"
            clearable
            placeholder=""
          >
            <el-option
              v-for="item in $d.Training"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:Specialty/Research Field')"
          prop="Major"
        >
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-input
                v-model="postgraduateForm.Major"
                placeholder="Please specify in English"
                size="small"
              />
            </el-col>
            <el-col :span="11">
              <el-input
                v-model="postgraduateForm.MajorCN"
                placeholder="请用中文注明"
                size="small"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:Hospital')"
          prop="Hospital"
        >
          <el-select
            v-model="postgraduateForm.HospitalId"
            filterable
            placeholder=""
          >
            <el-option
              v-for="(item, index) in hospitalList"
              :key="index"
              :label="item.HospitalName"
              :value="item.Id"
            >
              <span>
                {{ item.HospitalName }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:University')"
          prop="School"
        >
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-input
                v-model="postgraduateForm.School"
                placeholder="Please specify in English"
                size="small"
              />
            </el-col>
            <el-col :span="11">
              <el-input
                v-model="postgraduateForm.SchoolCN"
                placeholder="请用中文注明"
                size="small"
              />
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item
          :label="$t('system:EducationTraining:table:City')"
          prop="City"
        >
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-input
                v-model="postgraduateForm.City"
                placeholder="Please specify in English"
                size="small"
              />
            </el-col>
            <el-col :span="11">
              <el-input
                v-model="postgraduateForm.CityCN"
                placeholder="请用中文注明"
                size="small"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:State/Province')"
          prop="Province"
        >
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-input
                v-model="postgraduateForm.Province"
                placeholder="Please specify in English"
                size="small"
              />
            </el-col>
            <el-col :span="11">
              <el-input
                v-model="postgraduateForm.ProvinceCN"
                placeholder="请用中文注明"
                size="small"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          :label="$t('system:EducationTraining:table:Country')"
          prop="Country"
        >
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-input
                v-model="postgraduateForm.Country"
                placeholder="Please specify in English"
                size="small"
              />
            </el-col>
            <el-col :span="11">
              <el-input
                v-model="postgraduateForm.CountryCN"
                placeholder="请用中文注明"
                size="small"
              />
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          :loading="isDisabled"
          @click="handlePostgraduateSave"
          >{{ $t('common:button:save') }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getEducation,
  addOrUpdateEducationInfo,
  deleteEducationInfo,
  addOrUpdatePostgraduateInfo,
  deletePostgraduateInfo,
} from '@/api/reviewers'
import store from '@/store'
import { mapGetters } from 'vuex'
const getEducationDefault = () => {
  return {
    Id: '',
    DoctorId: '',
    BeginDate: '',
    EndDate: '',
    Degree: '',
    Major: '',
    MajorCN: '',
    Organization: '',
    OrganizationCN: '',
    City: '',
    CityCN: '',
    Province: '',
    ProvinceCN: '',
    Country: '',
    CountryCN: '',
  }
}
const getPostgraduateDefault = () => {
  return {
    Id: '',
    DoctorId: '',
    BeginDate: '',
    EndDate: '',
    Training: '',
    Major: '',
    MajorCN: '',
    Hospital: '',
    HospitalCN: '',
    School: '',
    SchoolCN: '',
    City: '',
    CityCN: '',
    Province: '',
    ProvinceCN: '',
    Country: '',
    CountryCN: '',
    HospitalId: null,
  }
}
export default {
  name: 'EducationTraining',
  props: {
    reviewerId: {
      type: String,
    },
  },
  data() {
    return {
      educationList: [],
      postgraduateList: [],
      educationDialogTitle: '',
      educationForm: getEducationDefault(),
      educationRules: {
        BeginDate: [
          {
            required: true,
            message: 'Please select a start date',
            trigger: 'blur',
          },
        ],
        EndDate: [
          {
            required: true,
            message: 'Please select a valid date',
            trigger: 'blur',
          },
        ],
        Degree: [
          {
            required: true,
            message: 'Please enter the degree',
            trigger: 'blur',
          },
        ],
        Major: [
          {
            required: true,
            message: 'Please enter the major',
            trigger: 'blur',
          },
          { max: 100, message: 'The maximum length is 100' },
        ],
        Organization: [
          {
            required: true,
            message: 'Please enter the institution',
            trigger: 'blur',
          },
          { max: 100, message: 'The maximum length is 100' },
        ],
        City: [
          { required: true, message: 'Please enter the city', trigger: 'blur' },
          { max: 50, message: 'The maximum length is 50' },
        ],
        Province: [
          {
            required: true,
            message: 'Please enter the state/province',
            trigger: 'blur',
          },
          { max: 50, message: 'The maximum length is 50' },
        ],
        Country: [
          {
            required: true,
            message: 'Please enter the country',
            trigger: 'blur',
          },
          { max: 50, message: 'The maximum length is 50' },
        ],
      },
      educationDialogVisible: false,
      degreeOptions: [
        { value: 'Bachelor' },
        { value: 'Master' },
        { value: 'Doctorate' },
      ],
      TrainingOptions: [
        { value: 'Residency' },
        { value: 'Fellowship' },
        { value: 'Post-Doc' },
        { value: 'Visiting Scholar' },
      ],
      beginPickerOption: {
        disabledDate: (time) => {
          if (this.educationForm.EndDate) {
            return (
              time.getTime() > new Date(this.educationForm.EndDate).getTime()
            )
          } else {
            return time.getTime() > Date.now()
          }
        },
      },
      endpickerOption: {
        disabledDate: (time) => {
          if (this.educationForm.BeginDate) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() <= new Date(this.educationForm.BeginDate).getTime()
            )
          } else {
            return time.getTime() > Date.now()
          }
        },
      },
      postgraduateDialogTitle: '',
      postgraduateDialogVisible: false,
      postgraduateForm: getPostgraduateDefault(),
      postgraduateRules: {
        BeginDate: [
          {
            required: true,
            message: 'Please select a start date',
            trigger: 'blur',
          },
        ],
        EndDate: [
          {
            required: true,
            message: 'Please select a valid date',
            trigger: 'blur',
          },
        ],
        Training: [
          {
            required: true,
            message: 'Please enter the degree',
            trigger: 'blur',
          },
        ],
        Major: [
          {
            required: true,
            message: 'Please enter the major',
            trigger: 'blur',
          },
          { max: 100, message: 'The maximum length is 100' },
        ],
        City: [
          { required: true, message: 'Please enter the city', trigger: 'blur' },
          { max: 50, message: 'The maximum length is 50' },
        ],
        Province: [
          {
            required: true,
            message: 'Please enter the state/province',
            trigger: 'blur',
          },
          { max: 50, message: 'The maximum length is 50' },
        ],
        Country: [
          {
            required: true,
            message: 'Please enter the country',
            trigger: 'blur',
          },
          { max: 50, message: 'The maximum length is 50' },
        ],
      },
      postgraduateBeginPickerOption: {
        disabledDate: (time) => {
          if (this.postgraduateForm.EndDate) {
            return (
              time.getTime() > new Date(this.postgraduateForm.EndDate).getTime()
            )
          } else {
            return time.getTime() > Date.now()
          }
        },
      },
      postgraduateEndpickerOption: {
        disabledDate: (time) => {
          if (this.postgraduateForm.BeginDate) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() <=
                new Date(this.postgraduateForm.BeginDate).getTime()
            )
          } else {
            return time.getTime() > Date.now()
          }
        },
      },
      isDisabled: false,
      loading: false,
    }
  },
  computed: {
    ...mapGetters(['hospitalList']),
  },
  mounted() {
    this.initPage()
    store.dispatch('global/getHospital')
  },
  methods: {
    initPage() {
      const id = this.$route.query.Id || this.reviewerId
      if (id) {
        this.loading = true
        getEducation(id)
          .then((res) => {
            this.educationList = res.Result.EducationList
            this.postgraduateList = res.Result.PostgraduateList
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      }
    },
    handleAddEducation() {
      this.educationDialogTitle = 'New'
      this.educationDialogVisible = true
      Object.assign(this.educationForm, getEducationDefault())
    },
    handleEducationEdit(row) {
      // eslint-disable-next-line no-unused-vars
      const { BeginDateStr, EndDateStr, ...param } = row
      this.educationDialogTitle = 'Edit'
      this.educationDialogVisible = true
      this.educationForm = param
      this.educationForm.Degree = Number(this.educationForm.Degree)
    },

    handleEducationSave() {
      this.$refs.educationForm.validate((valid) => {
        if (valid) {
          this.isDisabled = true
          this.educationForm.DoctorId = this.$route.query.Id || this.reviewerId
          if (this.educationForm.Degree === 'Bachelor') {
            this.educationForm.DegreeCN = '学士'
          } else if (this.educationForm.Degree === 'Master') {
            this.educationForm.DegreeCN = '硕士'
          } else if (this.educationForm.Degree === 'Doctorate') {
            this.educationForm.DegreeCN = '博士'
          }
          addOrUpdateEducationInfo(this.educationForm)
            .then((res) => {
              this.isDisabled = false
              this.educationDialogVisible = false
              this.initPage()
              if (this.educationForm.Id) {
                this.$message({
                  message: 'Updated successfully',
                  type: 'success',
                })
              } else {
                this.$message({
                  message: 'Addedd successfully',
                  type: 'success',
                })
              }

              this.$refs['educationForm'].resetFields()
            })
            .catch(() => {
              this.isDisabled = false
            })
        }
      })
    },
    handleEducationDelete(row) {
      this.$confirm('Confirm to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
      })
        .then(() => {
          deleteEducationInfo(row.Id).then((res) => {
            this.educationList.splice(
              this.educationList.findIndex((item) => item.Id === row.Id),
              1
            )
            this.$message.success('Deleted successfully !')
          })
        })
        .catch((action) => {})
    },

    handleAddPostgraduate() {
      this.postgraduateDialogTitle = 'New'
      this.postgraduateDialogVisible = true
      Object.assign(this.postgraduateForm, getPostgraduateDefault())
    },
    handlePostgraduateEdit(row) {
      // eslint-disable-next-line no-unused-vars
      const { BeginDateStr, EndDateStr, ...param } = row
      this.postgraduateDialogTitle = 'Edit'
      this.postgraduateDialogVisible = true
      this.postgraduateForm = param
      this.postgraduateForm.Training = Number(this.postgraduateForm.Training)
    },
    handlePostgraduateSave() {
      this.$refs.postgraduateForm.validate((valid) => {
        if (valid) {
          this.isDisabled = true
          this.postgraduateForm.DoctorId =
            this.$route.query.Id || this.reviewerId

          if (this.postgraduateForm.Training === 'Residency') {
            this.postgraduateForm.TrainingCN = '规培'
          } else if (this.postgraduateForm.Training === 'Fellowship') {
            this.postgraduateForm.TrainingCN = '专科培训'
          } else if (this.postgraduateForm.Training === 'Post-Doc') {
            this.postgraduateForm.TrainingCN = '博士后'
          } else if (this.postgraduateForm.Training === 'Visiting Scholar') {
            this.postgraduateForm.TrainingCN = '访问学者'
          }
          addOrUpdatePostgraduateInfo(this.postgraduateForm)
            .then((res) => {
              this.isDisabled = false
              this.postgraduateDialogVisible = false
              this.initPage()
              if (this.postgraduateForm.Id) {
                this.$message({
                  message: 'Updated successfully',
                  type: 'success',
                })
              } else {
                this.$message({
                  message: 'Addedd successfully',
                  type: 'success',
                })
              }

              this.$refs['postgraduateForm'].resetFields()
            })
            .catch((err) => {
              this.isDisabled = false
              console.log(err)
            })
        }
      })
    },
    handlePostgraduateDelete(row) {
      this.$confirm('Confirm to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
      })
        .then(() => {
          deletePostgraduateInfo(row.Id).then((res) => {
            this.postgraduateList.splice(
              this.postgraduateList.findIndex((item) => item.Id === row.Id),
              1
            )
            this.$message.success('Deleted successfully !')
          })
        })
        .catch((action) => {})
    },
  },
}
</script>

