<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="$t('system:reviewer: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
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="specialtyForm.SpecialityOther"
                  placeholder="Please specify (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
                  :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="$t('system:reviewer: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
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="specialtyForm.SubspecialityOther"
                  placeholder="Please specify (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
                  :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="$t('system:reviewer: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
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="specialtyForm.ReadingTypeOther"
                  placeholder="Please specify (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
                  :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"
            >
              {{ $t('common:button: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',
  props: {
    reviewerId: {
      type: String,
    },
  },
  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: 'Please specify', trigger: 'blur' },
          { max: 50, message: 'The maximum length is 50' },
        ],
        SpecialityOtherCN: [{ max: 50, message: 'The maximum length is 50' }],
        ReadingTypeIds: [
          {
            required: true,
            message: 'Please select clinical reading type',
            trigger: 'blur',
          },
        ],
        ReadingTypeOther: [
          { required: true, message: 'Please specify', trigger: 'blur' },
          { max: 50, message: 'The maximum length is 50' },
        ],
        ReadingTypeOtherCN: [{ max: 50, message: 'The maximum length is 50' }],
        SubspecialityIds: [
          {
            required: true,
            message: 'Please select subspecialty',
            trigger: 'blur',
          },
        ],
        SubspecialityOther: [
          { required: true, message: 'Please specify', trigger: 'blur' },
          { max: 50, message: 'The maximum length is 50' },
        ],
        SubspecialityOtherCN: [
          { max: 50, message: 'The maximum length is 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 || this.reviewerId
          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 || this.reviewerId
      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>
