<template>
  <div v-loading="loading" class="form-container">
    <div class="title-wrapper">
      <p>Education (in chronological order)</p>
      <el-button class="add" :disabled="$route.query.ReviewStatus === '1'" size="small" @click="handleAddEducation">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="Start"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column
        prop="EndDateStr"
        label="End"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column prop="Degree" label="Degree" min-width="70" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.DegreeCN?`${scope.row.Degree} / ${scope.row.DegreeCN}`:scope.row.Degree }}
        </template>
      </el-table-column>
      <el-table-column prop="Major" label="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="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="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="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="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="Operation" min-width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleEducationEdit(scope.row)">Edit</el-button>
          <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleEducationDelete(scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="title-wrapper" style="margin-top:40px;">
      <p>Postgraduate Training (in chronological order)</p>
      <el-button class="add" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleAddPostgraduate">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="Start"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column
        prop="EndDateStr"
        label="End"
        min-width="55"
        show-overflow-tooltip
      />
      <el-table-column prop="Training" label="Training" min-width="70" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.TrainingCN?`${scope.row.Training} / ${scope.row.TrainingCN}`:scope.row.Training }}
        </template>
      </el-table-column>
      <el-table-column
        prop="Major"
        label="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="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="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="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="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="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="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"
    >
      <el-form v-if="educationDialogVisible" ref="educationForm" size="small" label-width="120px" :model="educationForm" :rules="educationRules">
        <el-form-item label="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="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="Degree" prop="Degree">
          <el-select v-model="educationForm.Degree" placeholder="Please select" size="small">
            <el-option
              v-for="item in degreeOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="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="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="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="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="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">Save</el-button>
      </span>
    </el-dialog>

    <el-dialog
      v-if="postgraduateDialogVisible"
      :title="postgraduateDialogTitle"
      :visible.sync="postgraduateDialogVisible"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form v-if="postgraduateDialogVisible" ref="postgraduateForm" size="small" label-width="190px" :model="postgraduateForm" :rules="postgraduateRules">
        <el-form-item label="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="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="Training" prop="Training">
          <el-select v-model="postgraduateForm.Training" placeholder="Please select" size="small">
            <el-option
              v-for="item in TrainingOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="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="Hospital" prop="Hospital">
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-input v-model="postgraduateForm.Hospital" placeholder="Please specify in English" size="small" />
            </el-col>
            <el-col :span="11">
              <el-input v-model="postgraduateForm.HospitalCN" placeholder="请用中文注明" size="small" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="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="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="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="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">Save</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getEducation, addOrUpdateEducationInfo, deleteEducationInfo, addOrUpdatePostgraduateInfo, deletePostgraduateInfo } from '@/api/reviewers'
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: ''
  }
}
export default {
  name: 'EducationTraining',
  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' },
          { max: 100, message: 'The maximum length is 100' }
        ],
        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' },
          { max: 100, message: 'The maximum length is 100' }
        ],
        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
    }
  },
  mounted() {
    this.initPage()
  },
  methods: {
    initPage() {
      const id = this.$route.query.Id
      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
    },

    handleEducationSave() {
      this.$refs.educationForm.validate(valid => {
        if (valid) {
          this.isDisabled = true
          this.educationForm.DoctorId = this.$route.query.Id

          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,
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel'
      })
        .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
    },
    handlePostgraduateSave() {
      this.$refs.postgraduateForm.validate(valid => {
        if (valid) {
          this.isDisabled = true
          this.postgraduateForm.DoctorId = this.$route.query.Id

          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,
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel'
      })
        .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>

