<template>
  <div class="specialty">
    <el-button
      type="text"
      class="editBtn"
      @click.stop="openEdit"
      :disabled="!reviewerId"
    >
      {{ $t('common:button:edit') }}
    </el-button>
    <template v-if="true">
      <el-form class="demo-form-inline">
        <el-form-item :label="$t('curriculumVitae:specialty:specialty')">
          <span v-if="isEN">
            {{ DATA.Speciality || DATA.SpecialityOther }}
          </span>
          <span v-else>{{ DATA.SpecialityCN || DATA.SpecialityOtherCN }}</span>
        </el-form-item>
        <el-form-item :label="$t('curriculumVitae:specialty:submajor')">
          <template v-if="isEN">
            <el-tag
              type="info"
              v-for="item in DATA.SubspecialityOther
                ? [...DATA.SubspecialityList, DATA.SubspecialityOther]
                : DATA.SubspecialityList"
              :key="item"
            >
              {{ item }}
            </el-tag>
          </template>
          <template v-else>
            <el-tag
              type="info"
              v-for="item in DATA.SubspecialityOtherCN
                ? [...DATA.SubspecialityCNList, DATA.SubspecialityOtherCN]
                : DATA.SubspecialityCNList"
              :key="item"
            >
              {{ item }}
            </el-tag>
          </template>
        </el-form-item>
        <el-form-item :label="$t('curriculumVitae:specialty:equipment')">
          <template v-if="isEN">
            <el-tag
              type="info"
              v-for="item in DATA.ReadingTypeOther
                ? [...DATA.ReadingTypeList, DATA.ReadingTypeOther]
                : DATA.ReadingTypeList"
              :key="item"
            >
              {{ item }}
            </el-tag>
          </template>
          <template v-else>
            <el-tag
              type="info"
              v-for="item in DATA.ReadingTypeOtherCN
                ? [...DATA.ReadingTypeCNList, DATA.ReadingTypeOtherCN]
                : DATA.ReadingTypeCNList"
              :key="item"
            >
              {{ item }}
            </el-tag>
          </template>
        </el-form-item>
      </el-form>
    </template>
    <div class="noData" v-else>{{ $t('curriculumVitae:noData') }}</div>
    <base-model :config="model_cfg">
      <template slot="dialog-body">
        <el-form
          ref="specialtyFrom"
          v-loading="loading"
          :model="form"
          :rules="rules"
          label-width="170px"
          size="small"
        >
          <el-form-item
            :label="$t('curriculumVitae:specialty:form:specialty')"
            prop="SpecialityId"
          >
            <el-select v-model="form.SpecialityId" placeholder="">
              <el-option
                v-for="item of dictionaryList.Department"
                :key="item.Id"
                :label="item.Value"
                :value="item.Id"
              />
              <el-option
                :label="$t('curriculumVitae:selectLabel:Other')"
                :value="otherId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="form.SpecialityId == otherId && isEN"
            class="other-item"
            prop="SpecialityOther"
          >
            <el-input
              v-model="form.SpecialityOther"
              :placeholder="
                $t('curriculumVitae:specialty:placeholder:SpecialityOther')
              "
              size="small"
              :maxlength="400"
            />
          </el-form-item>
          <el-form-item
            v-if="form.SpecialityId == otherId && !isEN"
            prop="SpecialityOtherCN"
            class="other-item"
          >
            <el-input
              v-model="form.SpecialityOtherCN"
              :placeholder="
                $t('curriculumVitae:specialty:placeholder:SpecialityOtherCN')
              "
              size="small"
              :maxlength="400"
            />
          </el-form-item>
          <el-form-item
            :label="$t('curriculumVitae:specialty:form:submajor')"
            prop="SubspecialityIds"
          >
            <el-select
              v-model="form.SubspecialityIds"
              multiple
              placeholder=""
              @change="(a) => selectOther(a, 'Subspeciality')"
            >
              <el-option
                v-for="item of Subspeciality"
                :key="item.Id"
                :label="item.Value"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="
              form.SubspecialityIds &&
              form.SubspecialityIds.indexOf(otherId) > -1 &&
              isEN
            "
            class="other-item"
            prop="SubspecialityOther"
          >
            <el-input
              v-model="form.SubspecialityOther"
              :placeholder="
                $t('curriculumVitae:specialty:placeholder:SubspecialityOther')
              "
              size="small"
              :maxlength="400"
            />
          </el-form-item>
          <el-form-item
            v-if="
              form.SubspecialityIds &&
              form.SubspecialityIds.indexOf(otherId) > -1 &&
              !isEN
            "
            class="other-item"
            prop="SubspecialityOtherCN"
          >
            <el-input
              v-model="form.SubspecialityOtherCN"
              :placeholder="
                $t('curriculumVitae:specialty:placeholder:SubspecialityOtherCN')
              "
              size="small"
              :maxlength="400"
            />
          </el-form-item>
          <el-form-item
            :label="$t('curriculumVitae:specialty:form:equipment')"
            prop="ReadingTypeIds"
          >
            <el-select
              v-model="form.ReadingTypeIds"
              multiple
              placeholder=""
              @change="(a) => selectOther(a, 'ReadingType')"
            >
              <el-option
                v-for="item of ReadingType"
                :key="item.Id"
                :label="item.Value"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="
              form.ReadingTypeIds &&
              form.ReadingTypeIds.indexOf(otherId) > -1 &&
              isEN
            "
            prop="ReadingTypeOther"
            class="other-item"
          >
            <el-input
              v-model="form.ReadingTypeOther"
              :placeholder="
                $t('curriculumVitae:specialty:placeholder:ReadingTypeOther')
              "
              size="small"
              :maxlength="400"
            />
          </el-form-item>
          <el-form-item
            v-if="
              form.ReadingTypeIds &&
              form.ReadingTypeIds.indexOf(otherId) > -1 &&
              !isEN
            "
            prop="ReadingTypeOtherCN"
            class="other-item"
          >
            <el-input
              v-model="form.ReadingTypeOtherCN"
              :placeholder="
                $t('curriculumVitae:specialty:placeholder:ReadingTypeOtherCN')
              "
              size="small"
              :maxlength="400"
            />
          </el-form-item>
        </el-form>
      </template>
      <template slot="dialog-footer">
        <el-button size="small" type="primary" @click="handleCancle">
          {{ $t('common:button:cancel') }}
        </el-button>
        <el-button
          size="small"
          type="primary"
          @click="handleSave"
          :loading="loading"
        >
          {{ $t('common:button:save') }}
        </el-button>
      </template>
    </base-model>
  </div>
</template>
<script>
import BaseModel from '@/components/BaseModel'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
import { updateSpecialtyInfo } from '@/api/reviewers'
const defaultForm = () => {
  return {
    ReadingTypeIds: [],
    ReadingTypeOther: '',
    ReadingTypeOtherCN: '',
    SubspecialityIds: [],
    SubspecialityOther: '',
    SubspecialityOtherCN: '',
    SpecialityId: '',
    SpecialityOther: '',
    SpecialityOtherCN: '',
  }
}
export default {
  name: 'specialty',
  components: { BaseModel },
  props: {
    DATA: {
      type: Object,
      required: true,
      default: () => {
        return {
          ReadingTypeCNList: [],
          ReadingTypeIds: [],
          ReadingTypeList: [],
          SubspecialityCNList: [],
          SubspecialityIds: [],
          SubspecialityList: [],
        }
      },
    },
    reviewerId: {
      type: String,
      default: '',
    },
    isEN: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      model_cfg: {
        visible: false,
        showClose: true,
        width: '600px',
        title: this.$t('curriculumVitae:specialty:form:title'),
        appendToBody: true,
      },
      form: defaultForm(),
      rules: {
        SpecialityId: [
          {
            required: true,
            message: this.$t('common:ruleMessage:select'),
            trigger: 'blur',
          },
        ],
        SpecialityOther: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        SpecialityOtherCN: [
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        ReadingTypeIds: [
          {
            required: true,
            message: this.$t('common:ruleMessage:select'),
            trigger: 'blur',
          },
        ],
        ReadingTypeOther: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        ReadingTypeOtherCN: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        SubspecialityIds: [
          {
            required: true,
            message: this.$t('common:ruleMessage:select'),
            trigger: 'blur',
          },
        ],
        SubspecialityOther: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        SubspecialityOtherCN: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
      },
      loading: false,
      otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
      dictionaryList: {
        Subspeciality: [],
        Department: [],
        ReadingType: [],
      },
    }
  },
  mounted() {
    this.getDicData()
  },
  computed: {
    Subspeciality() {
      return [
        ...this.dictionaryList.Subspeciality,
        {
          Id: this.otherId,
          Value: this.$t('curriculumVitae:selectLabel:Other'),
        },
      ]
    },
    ReadingType() {
      return [
        ...this.dictionaryList.ReadingType,
        {
          Id: this.otherId,
          Value: this.$t('curriculumVitae:selectLabel:Other'),
        },
      ]
    },
  },
  methods: {
    openEdit() {
      this.form = defaultForm()
      Object.keys(this.form).forEach((key) => {
        if (this.DATA[key]) {
          this.form[key] = this.DATA[key]
        }
      })
      if (
        (this.form.ReadingTypeOther || this.form.ReadingTypeOtherCN) &&
        !this.form.ReadingTypeIds.includes(this.otherId)
      ) {
        this.form.ReadingTypeIds.push(this.otherId)
      }
      if (
        (this.form.SubspecialityOther || this.form.SubspecialityOtherCN) &&
        !this.form.SubspecialityIds.includes(this.otherId)
      ) {
        this.form.SubspecialityIds.push(this.otherId)
      }
      this.model_cfg.visible = true
    },
    handleCancle() {
      this.form = defaultForm()
      this.model_cfg.visible = false
    },
    async handleSave() {
      try {
        let validate = await this.$refs.specialtyFrom.validate()
        if (!validate) return false
        if (this.reviewerId) {
          this.form.Id = this.reviewerId
        }
        this.loading = true
        let res = await updateSpecialtyInfo(this.form)
        this.loading = false
        if (res.IsSuccess) {
          this.$emit('getInfo')
          this.model_cfg.visible = false
        }
      } catch (err) {
        this.loading = false
        console.log(err)
      }
    },
    getDicData() {
      getBasicDataSelects(['Department', 'Subspeciality', 'ReadingType']).then(
        (res) => {
          this.dictionaryList = { ...res.Result }
        }
      )
    },
    selectOther(arr, key) {
      if (arr.length <= 0 || !arr.includes(this.otherId)) {
        this.form[`${key}Other`] = null
        this.form[`${key}OtherCN`] = null
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.specialty {
  position: relative;
  min-height: 100px;
  .editBtn {
    position: absolute;
    right: 0;
    top: 0px;
    z-index: 99;
  }
}
::v-deep .el-tag {
  margin-right: 10px;
  &:last-child {
    margin-right: 0;
  }
}
.el-select {
  width: 100%;
}
</style>