<template>
  <div class="form-container">
    <el-card class="box-card">
      <div style="width:80%;">
        <el-form
          ref="employmentForm"
          v-loading="loading"
          :rules="employmentRules"
          :model="employmentForm"
          class="demo-ruleForm"
          label-width="150px"
        >

          <el-row>
            <el-col :span="14">
              <el-form-item label="Hospital: " prop="HospitalId">
                <el-select
                  v-model="employmentForm.HospitalId"
                  placeholder="select"
                  :disabled="$route.query.ReviewStatus === '1'"
                  style="width:100%;"
                  size="small"
                  @change="handleHospitalChange"
                >
                  <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-col>
          </el-row>

          <el-row>
            <el-col :span="14">
              <el-form-item label="Affiliated University: ">
                <el-input
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="UniversityAffiliated"
                  type="textarea"
                  autosize
                  disabled
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="City: ">
                <el-input  :disabled="$route.query.ReviewStatus === '1'" v-model="City" disabled size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="State/Province: ">
                <el-input :disabled="$route.query.ReviewStatus === '1'" v-model="Province" disabled size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="Country: ">
                <el-input :disabled="$route.query.ReviewStatus === '1'" v-model="Country" disabled size="small" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="14">
              <el-form-item label="Department: " prop="DepartmentId">
                <el-select
                  v-model="employmentForm.DepartmentId"
                  placeholder="select"
                  :disabled="$route.query.ReviewStatus === '1'"
                  style="width:100%;"
                  size="small"
                >
                  <!-- <el-option
                    v-for="(key,value) of dictionaryList.Department"
                    :key="key"
                    :label="key"
                    :value="value"
                  /> -->
                  <el-option
                    v-for="item of dictionaryList.Department"
                    :key="item.Id"
                    :label="item.Value"
                    :value="item.Id"
                  />
                  <el-option label="Other" :value="otherId" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item v-if="employmentForm.DepartmentId===otherId" class="other-item" prop="DepartmentOther">
                <el-input
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="employmentForm.DepartmentOther"
                  placeholder="Please specify (required)"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item v-if="employmentForm.DepartmentId===otherId" class="other-item" prop="DepartmentOtherCN">
                <el-input
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="employmentForm.DepartmentOtherCN"
                  placeholder="请用中文注明"
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="14">
              <el-form-item label="Rank: " prop="RankId">
                <el-select
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="employmentForm.RankId"
                  placeholder="select"
                  @change="RankChange"
                  style="width:100%;"
                  size="small"
                >
                  <!-- <el-option
                    v-for="(key,value) of dictionaryList.Rank"
                    :key="key"
                    :label="key"
                    :value="value"
                  /> -->
                  <el-option
                    v-for="item of $d.Rank"
                    :key="item.id"
                    :label="item.raw.Value"
                    :value="item.id"
                  />
<!--                  <el-option label="Other" :value="otherId" />-->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item v-if="$fd('Rank', employmentForm.RankId, 'id') === '其它' || $fd('Rank', employmentForm.RankId, 'id') === 'Other'" class="other-item" prop="RankOther">
                <el-input
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="employmentForm.RankOther"
                  placeholder="Please specify"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item v-if="$fd('Rank', employmentForm.RankId, 'id') === '其它' || $fd('Rank', employmentForm.RankId, 'id') === 'Other'" class="other-item" prop="RankOtherCN">
                <el-input
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="employmentForm.RankOtherCN"
                  placeholder="请用中文注明"
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="14">
              <el-form-item label="Physician: " prop="PhysicianId" >
                <el-select
                  v-model="employmentForm.PhysicianId"
                  placeholder="select"
                  :disabled="$route.query.ReviewStatus === '1'"
                  @change="PhysicianChange"
                  style="width:100%;"
                  size="small"
                >
                  <el-option
                    v-for="item of $d.PhysicianOriginal"
                    :key="item.id"
                    :label="item.raw.Value"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item v-if="$fd('PhysicianOriginal', employmentForm.PhysicianId, 'id') === '其它' || $fd('PhysicianOriginal', employmentForm.PhysicianId, 'id') === 'Other'" class="other-item" prop="Physician">
                <el-input
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="employmentForm.Physician"
                  placeholder="Please specify"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item v-if="$fd('PhysicianOriginal', employmentForm.PhysicianId, 'id') === '其它' || $fd('PhysicianOriginal', employmentForm.PhysicianId, 'id') === 'Other'" class="other-item" prop="PhysicianCN">
                <el-input
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="employmentForm.PhysicianCN"
                  placeholder="请用中文注明"
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="14">
              <el-form-item label="Position: " prop="PositionId">
                <el-select
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="employmentForm.PositionId"
                  placeholder="select"
                  style="width:100%;"
                  size="small"
                >
                  <!-- <el-option
                    v-for="(key,value) of dictionaryList.Position"
                    :key="key"
                    :label="key"
                    :value="value"
                  /> -->
                  <el-option
                    v-for="item of dictionaryList.Position"
                    :key="item.Id"
                    :label="item.Value"
                    :value="item.Id"
                  />
                  <el-option label="Other" :value="otherId" />
                  <el-option label="None" value="f30a074b-2b47-4a92-97ec-e15086d37883" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item v-if="employmentForm.PositionId===otherId" class="other-item" prop="PositionOther">
                <el-input
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="employmentForm.PositionOther"
                  placeholder="Please specify"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item v-if="employmentForm.PositionId===otherId" class="other-item" prop="PositionOtherCN">
                <el-input
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="employmentForm.PositionOtherCN"
                  placeholder="请用中文注明"
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary" :disabled="isDisabled || $route.query.ReviewStatus === '1'" size="small" @click="handleSave">Save</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getEmploymentInfo, updateEmploymentInfo } from '@/api/reviewers'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
import store from '@/store'
import { mapGetters } from 'vuex'
export default {
  name: 'Employment',
  data() {
    const RankIndication = (rule, value, callback) => {
      if (value === '其它' || value === 'Other') {
        if (!this.trialForm.IndicationOther) {
          return callback(new Error('请输入适应症'))
        }
      }
      callback()
    }
    const PhysicianIndication = (rule, value, callback) => {
      if (value === '其它' || value === 'Other') {
        if (!this.trialForm.IndicationOther) {
          return callback(new Error('请输入适应症'))
        }
      }
      callback()
    }
    return {
      employmentForm: {
        Id: this.$route.query.Id,
        DepartmentId: '',
        DepartmentOther: '',
        DepartmentOtherCN: '',
        RankId: '',
        RankOther: '',
        RankOtherCN: '',
        PositionId: '',
        PositionOther: '',
        PositionOtherCN: '',
        HospitalId: '',
        PhysicianId: '',
        Physician: '',
        PhysicianCN: '',
        PhysicianOriginal: null
      },
      UniversityAffiliated: '',
      City: '',
      Province: '',
      Country: '',
      employmentRules: {
        DepartmentId: [{ required: true, message: 'Please select department', trigger: 'blur' }],
        DepartmentOther: [
          { required: true, message: 'Please specify', trigger: 'blur' },
          { max: 50, message: 'The maximum length is 50' }
        ],
        DepartmentOtherCN: [{ max: 50, message: 'The maximum length is 50' }],
        RankId: [{ required: true, message: 'Please select rank', trigger: 'blur' }],
        RankOther: [{ required: true, message: 'Please select rank', trigger: 'blur' }, { max: 50, message: 'The maximum length is 50' }],
        RankOtherCN: [{ required: true, message: 'Please select rank', trigger: 'blur' }, { max: 50, message: 'The maximum length is 50' }],
        PhysicianId: [{ required: true, message: 'Please select Physician', trigger: 'blur' }],
        Physician: [{ required: true, message: 'Please select Physician', trigger: 'blur' }, { max: 50, message: 'The maximum length is 50' }],
        PhysicianCN: [{ required: true, message: 'Please select Physician', trigger: 'blur' }, { max: 50, message: 'The maximum length is 50' }],
        PositionId: [{ required: true, message: 'Please select position', trigger: 'blur' }],
        PositionOther: [{ max: 50, message: 'The maximum length is 50' }],
        PositionOtherCN: [{ max: 50, message: 'The maximum length is 50' }],
        HospitalId: [{ required: true, message: 'Please select hospital', trigger: 'blur' }]
      },
      isDisabled: false,
      selectId: '00000000-0000-0000-0000-000000000000',
      otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
      loading: false,
      dictionaryList: {}
    }
  },
  computed: {
    ...mapGetters(['hospitalList'])
  },
  mounted() {
    this.initEmployment()
  },
  methods: {
    RankChange(val) {
      var o = this.$d.Rank.find(v => {
        return v.id === val
      })
      if (o.label === '其它' || o.label === 'Other') {
        this.employmentForm.RankOther = ''
        this.employmentForm.RankOtherCN = ''
      } else {
        this.employmentForm.RankOther = o.raw.Value
        this.employmentForm.RankOtherCN = o.raw.ValueCN
      }
    },
    PhysicianChange(val) {
      var o = this.$d.PhysicianOriginal.find(v => {
        return v.id === val
      })
      if (o.label === '其它' || o.label === 'Other') {
        this.employmentForm.Physician = ''
        this.employmentForm.PhysicianCN = ''
      } else {
        this.employmentForm.Physician = o.raw.Value
        this.employmentForm.PhysicianCN = o.raw.ValueCN
      }
    },
    handleSave() {
      this.$refs.employmentForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.isDisabled = true
          const param = {}
          var o = this.$d.PhysicianOriginal.find(v => {
            return v.id === this.employmentForm.PhysicianId
          })
          param.Id = this.$route.query.Id
          param.DepartmentId = this.employmentForm.DepartmentId
          param.DepartmentOther = this.employmentForm.DepartmentId === this.otherId ? this.employmentForm.DepartmentOther : ''
          param.DepartmentOtherCN = this.employmentForm.DepartmentId === this.otherId ? this.employmentForm.DepartmentOtherCN : ''
          param.RankId = this.employmentForm.RankId
          param.RankOther = this.employmentForm.RankId === this.otherId ? this.employmentForm.RankOther : ''
          param.RankOtherCN = this.employmentForm.RankId === this.otherId ? this.employmentForm.RankOtherCN : ''
          param.PhysicianId = this.employmentForm.PhysicianId
          param.Physician = o.label !== '其它' && o.label !== 'Other' ? o.raw.Value : this.employmentForm.Physician
          param.PhysicianCN = o.label !== '其它' && o.label !== 'Other' ? o.raw.ValueCN : this.employmentForm.PhysicianCN
          param.PositionId = this.employmentForm.PositionId
          param.PositionOther = this.employmentForm.PositionId === this.otherId ? this.employmentForm.PositionOther : ''
          param.PositionOtherCN = this.employmentForm.PositionId === this.otherId ? this.employmentForm.PositionOtherCN : ''
          param.HospitalId = this.employmentForm.HospitalId

          updateEmploymentInfo(param).then(res => {
            this.isDisabled = false
            this.loading = false
            this.$message.success('Saved successfully')
            if (!this.id) {
              this.employmentForm.Id = res.Result
            }
          }).catch(() => {
            this.isDisabled = false
            this.loading = false
          })
        }
      })
    },
    initForm() {
      const id = this.$route.query.Id
      if (id) {
        this.loading = true
        getEmploymentInfo(id).then(res => {
          const { PhysicianId, Physician, PhysicianCN, DepartmentId, DepartmentOther, DepartmentOtherCN, RankId, RankOther, RankOtherCN, PositionId, PositionOther, PositionOtherCN, HospitalId } = res.Result
          this.employmentForm.Id = id
          this.employmentForm.DepartmentId = DepartmentId === this.selectId ? '' : DepartmentId
          this.employmentForm.DepartmentOther = DepartmentOther
          this.employmentForm.DepartmentOtherCN = DepartmentOtherCN
          this.employmentForm.RankId = RankId === this.selectId ? '' : RankId
          this.employmentForm.RankOther = RankOther
          this.employmentForm.RankOtherCN = RankOtherCN
          this.employmentForm.PositionId = PositionId === this.selectId ? '' : PositionId
          this.employmentForm.PositionOther = PositionOther
          this.employmentForm.PhysicianId = PhysicianId
          this.employmentForm.Physician = Physician
          this.employmentForm.PhysicianCN = PhysicianCN
          this.employmentForm.PositionOtherCN = PositionOtherCN
          this.employmentForm.HospitalId = HospitalId === this.selectId ? '' : HospitalId
          this.handleHospitalChange(this.employmentForm.HospitalId)
          this.loading = false
        }).catch(() => { this.loading = false })
      }
    },
    handleHospitalChange(value) {
      const item = this.hospitalList.filter(item => item.Id === value)
      if (item.length) {
        this.UniversityAffiliated = item[0].UniversityAffiliated
        this.City = item[0].City
        this.Province = item[0].Province
        this.Country = item[0].Country
      }
    },
    async initEmployment() {
      await this.getDicData()
      await store.dispatch('global/getHospital')
      this.initForm()
    },
    getDicData() {
      getBasicDataSelects(['Department', 'Rank', 'Position']).then(res => {
        this.dictionaryList = { ...res.Result }
      })
    }
  }
}
</script>
<style lang="scss">
.other-item .el-form-item__content{
  margin-left: 80px !important;
}
</style>
