<template>
  <div class="form-container">
    <el-card class="box-card">
      <div style="width:80%;">
        <el-form
          ref="specialtyForm"
          v-loading="loading"
          :rules="specialtyRules"
          :model="specialtyForm"
          class="demo-ruleForm"
          label-width="150px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="Specialty: " prop="SpecialityId">
                <el-select
                  v-model="specialtyForm.SpecialityId"
                  :disabled="$route.query.ReviewStatus === '1'"
                  placeholder="Please select"
                  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="6">
              <el-form-item v-if="specialtyForm.SpecialityId==otherId" class="other-item" prop="SpecialityOther">
                <el-input :maxLength="$inputMax"
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="specialtyForm.SpecialityOther"
                  placeholder="请注明 (required)"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item v-if="specialtyForm.SpecialityId==otherId" prop="SpecialityOtherCN" class="other-item">
                <el-input :maxLength="$inputMax"
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="specialtyForm.SpecialityOtherCN"
                  placeholder="请用中文注明"
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="Subspeciality: " prop="SubspecialityIds">
                <el-select
                  v-model="specialtyForm.SubspecialityIds"
                  :disabled="$route.query.ReviewStatus === '1'"
                  placeholder="select"
                  multiple
                  style="width:100%;"
                  size="small"
                >
                  <!-- <el-option
                    v-for="(key,value) of dictionaryList.Subspeciality"
                    :key="key"
                    :label="key"
                    :value="value"
                  /> -->
                  <el-option
                    v-for="item of dictionaryList.Subspeciality"
                    :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="6">
              <el-form-item
                v-if="specialtyForm.SubspecialityIds && specialtyForm.SubspecialityIds.indexOf(otherId)>-1"
                class="other-item"
                prop="SubspecialityOther"
              >
                <el-input :maxLength="$inputMax"
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="specialtyForm.SubspecialityOther"
                  placeholder="请注明 (required)"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                v-if="specialtyForm.SubspecialityIds && specialtyForm.SubspecialityIds.indexOf(otherId)>-1"
                class="other-item"
                prop="SubspecialityOtherCN"
              >
                <el-input :maxLength="$inputMax"
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="specialtyForm.SubspecialityOtherCN"
                  placeholder="请用中文注明"
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="Modality: " prop="ReadingTypeIds">
                <el-select
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="specialtyForm.ReadingTypeIds"
                  placeholder="Please select"
                  style="width:100%;"
                  multiple
                  size="small"
                >
                  <!-- <el-option
                    v-for="(key,value) of dictionaryList.ReadingType"
                    :key="key"
                    :label="key"
                    :value="value"
                  /> -->
                  <el-option
                    v-for="item of dictionaryList.ReadingType"
                    :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="6">
              <el-form-item
                v-if="specialtyForm.ReadingTypeIds && specialtyForm.ReadingTypeIds.indexOf(otherId)>-1"
                prop="ReadingTypeOther"
                class="other-item"
              >
                <el-input :maxLength="$inputMax"
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="specialtyForm.ReadingTypeOther"
                  placeholder="请注明 (required)"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                v-if="specialtyForm.ReadingTypeIds && specialtyForm.ReadingTypeIds.indexOf(otherId)>-1"
                prop="ReadingTypeOtherCN"
                class="other-item"
              >
                <el-input :maxLength="$inputMax"
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="specialtyForm.ReadingTypeOtherCN"
                  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 { getSpecialtyInfo, updateSpecialtyInfo } from '@/api/reviewers'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
export default {
  name: 'Specialty',
  data() {
    return {
      specialtyForm: {
        ReadingTypeIds: [],
        ReadingTypeOther: '',
        ReadingTypeOtherCN: '',
        SubspecialityIds: [],
        SubspecialityOther: '',
        SubspecialityOtherCN: '',
        SpecialityId: '',
        SpecialityOther: '',
        SpecialityOtherCN: ''
      },
      specialtyRules: {
        SpecialityId: [{ required: true, message: 'Please select speciality', trigger: 'blur' }],
        SpecialityOther: [
          { required: true, message: '请注明', trigger: 'blur' },
          { max: 50, message: '最大长度为 50' }
        ],
        SpecialityOtherCN: [{ max: 50, message: '最大长度为 50' }],
        ReadingTypeIds: [{ required: true, message: 'Please select clinical reading type', trigger: 'blur' }],
        ReadingTypeOther: [
          { required: true, message: '请注明', trigger: 'blur' },
          { max: 50, message: '最大长度为 50' }
        ],
        ReadingTypeOtherCN: [
          { max: 50, message: '最大长度为 50' }
        ],
        SubspecialityIds: [{ required: true, message: 'Please select subspecialty', trigger: 'blur' }],
        SubspecialityOther: [
          { required: true, message: '请注明', trigger: 'blur' },
          { max: 50, message: '最大长度为 50' }
        ],
        SubspecialityOtherCN: [
          { max: 50, message: '最大长度为 50' }
        ]
      },
      selectId: '00000000-0000-0000-0000-000000000000',
      otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
      isDisabled: false,
      loading: false,
      dictionaryList: {}
    }
  },
  mounted() {
    this.initSpecialty()
  },
  methods: {
    handleSave() {
      this.$refs.specialtyForm.validate(valid => {
        if (valid) {
          this.isDisabled = true
          const params = {}
          params.ReadingTypeIds = this.specialtyForm.ReadingTypeIds
          params.ReadingTypeOther = params.ReadingTypeIds.indexOf(this.otherId) > -1 ? this.specialtyForm.ReadingTypeOther : ''
          params.ReadingTypeOtherCN = params.ReadingTypeIds.indexOf(this.otherId) > -1 ? this.specialtyForm.ReadingTypeOtherCN : ''
          params.SubspecialityIds = this.specialtyForm.SubspecialityIds
          params.SubspecialityOther = params.SubspecialityIds.indexOf(this.otherId) > -1 ? this.specialtyForm.SubspecialityOther : ''
          params.SubspecialityOtherCN = params.SubspecialityIds.indexOf(this.otherId) > -1 ? this.specialtyForm.SubspecialityOtherCN : ''
          params.SpecialityId = this.specialtyForm.SpecialityId
          params.SpecialityOther = params.SpecialityId === this.otherId ? this.specialtyForm.SpecialityOther : ''
          params.SpecialityOtherCN = params.SpecialityId === this.otherId ? this.specialtyForm.SpecialityOtherCN : ''
          params.Id = this.$route.query.Id
          updateSpecialtyInfo(params).then(res => {
            this.isDisabled = false
            this.$message.success('Saved successfully')
            this.specialtyForm.Id = res.Result
          })
            .catch(() => {
              this.isDisabled = false
            })
        }
      })
    },
    initForm() {
      this.loading = true
      const id = this.$route.query.Id
      if (id) {
        getSpecialtyInfo(id).then(res => {
          this.specialtyForm.ReadingTypeIds = res.Result.ReadingTypeIds.length > 0 ? res.Result.ReadingTypeIds : []
          this.specialtyForm.ReadingTypeOther = res.Result.ReadingTypeOther
          this.specialtyForm.ReadingTypeOtherCN = res.Result.ReadingTypeOtherCN
          this.specialtyForm.SubspecialityIds = res.Result.SubspecialityIds
          this.specialtyForm.SubspecialityOther = res.Result.SubspecialityOther
          this.specialtyForm.SubspecialityOtherCN = res.Result.SubspecialityOtherCN
          this.specialtyForm.SpecialityId = res.Result.SpecialityId === this.selectId ? '' : res.Result.SpecialityId
          this.specialtyForm.SpecialityOther = res.Result.SpecialityOther
          this.specialtyForm.SpecialityOtherCN = res.Result.SpecialityOtherCN
          this.loading = false
        }).catch(() => { this.loading = false })
      }
    },
    async initSpecialty() {
      await this.getDicData()
      this.initForm()
    },
    getDicData() {
      getBasicDataSelects(['Department', 'Subspeciality', 'ReadingType']).then(res => {
        this.dictionaryList = { ...res.Result }
      })
    }
  }
}
</script>
<style lang="scss">
.other-item .el-form-item__content{
  margin-left: 80px !important;
}
</style>
