<template>
  <div class="info">
    <el-button type="text" class="editBtn" @click.stop="openEdit">
      {{ $t('common:button:edit') }}
    </el-button>
    <template v-if="DATA.FirstName && DATA.LastName">
      <div class="userInfo">
        <span>{{
          isEN ? DATA.LastName + ' / ' + DATA.FirstName : DATA.ChineseName
        }}</span>
        <span>{{ $fd('Sex', DATA.Sex) }}</span>
        <span v-if="isEN">
          {{
            Array.isArray(DATA.TitleList) && DATA.TitleList.length > 0
              ? DATA.TitleList.join(', ')
              : ''
          }}
        </span>
        <span v-else>
          {{
            Array.isArray(DATA.TitleCNList) && DATA.TitleCNList.length > 0
              ? DATA.TitleCNList.join(', ')
              : ''
          }}
        </span>
        <span v-if="isEN">{{ DATA.HospitalName }}</span>
        <span v-else>{{ DATA.HospitalNameCN }}</span>
      </div>
      <div class="userTitle">
        <span
          class="el-icon-first-aid-kit"
          v-if="DATA.Department || DATA.DepartmentCN"
        >
          <span v-if="isEN">{{ DATA.Department }}</span>
          <span v-else>{{ DATA.DepartmentCN }}</span>
        </span>
        <span class="el-icon-first-aid-kit" v-else>
          <span v-if="isEN">{{ DATA.DepartmentOther }}</span>
          <span v-else>{{ DATA.DepartmentOtherCN }}</span>
        </span>
        <span class="el-icon-user" v-if="DATA.RankOther || DATA.RankOtherCN">
          <span v-if="isEN">{{ DATA.RankOther }}</span>
          <span v-else>{{ DATA.RankOtherCN }}</span>
        </span>
        <span class="el-icon-user" v-else-if="DATA.Rank || DATA.RankCN">
          <span v-if="isEN">{{ DATA.Rank }}</span>
          <span v-else>{{ DATA.RankCN }}</span>
        </span>
      </div>
      <div class="userTel">
        <span class="el-icon-phone-outline">
          {{ DATA.Phone }}
        </span>
        <span class="el-icon-message">{{ DATA.EMail }}</span>
        <span class="el-icon-chat-dot-round" v-if="DATA.WeChat">{{
          DATA.WeChat
        }}</span>
      </div>
      <div style="display: flex; font-size: 14px">
        <span style="display: inline-block; width: 70px; color: #606266">{{
          $t('curriculumVitae:info:meessage:partTimeJob')
        }}</span>
        <span
          class="break-word"
          style="
            white-space: pre-wrap;
            width: calc(100% - 80px);
            word-wrap: break-word;
          "
          v-html="isEN ? DATA.WorkPartTimeEn : DATA.WorkPartTime"
        ></span>
      </div>
    </template>
    <div class="noData" v-else>{{ $t('curriculumVitae:noData') }}</div>
    <base-model :config="model_cfg">
      <template slot="dialog-body">
        <el-form
          ref="infoFrom"
          v-loading="loading"
          :model="form"
          :rules="rules"
          label-width="100px"
          size="small"
        >
          <div class="form_title">
            {{ $t('curriculumVitae:info:form:infoTitle') }}
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('curriculumVitae:info:form:surname')"
                prop="FirstName"
              >
                <el-input
                  v-model="form.FirstName"
                  clearable
                  :maxlength="400"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('curriculumVitae:info:form:name')"
                prop="LastName"
              >
                <el-input
                  v-model="form.LastName"
                  clearable
                  :maxlength="400"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" v-if="!isEN">
              <el-form-item
                :label="$t('curriculumVitae:info:form:userNameCN')"
                prop="ChineseName"
              >
                <el-input
                  v-model="form.ChineseName"
                  clearable
                  :maxlength="400"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('curriculumVitae:info:form:sex')"
                prop="Sex"
              >
                <el-select v-model="form.Sex" clearable placeholder="">
                  <el-option
                    v-for="item in $d.Sex"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('curriculumVitae:info:form:education')"
                prop="TitleIds"
              >
                <el-select v-model="form.TitleIds[0]" clearable placeholder="">
                  <el-option
                    v-for="item of dictionaryList.Title"
                    :key="item.Id"
                    :label="item.Value"
                    :value="item.Id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('curriculumVitae:info:form:phone')"
                prop="Phone"
              >
                <el-input
                  v-model="form.Phone"
                  clearable
                  :maxlength="400"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('curriculumVitae:info:form:email')"
                prop="EMail"
              >
                <el-input
                  v-model="form.EMail"
                  clearable
                  :disabled="DATA.IsHaveAccount"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('curriculumVitae:info:form:wechat')"
                prop="WeChat"
              >
                <el-input
                  v-model="form.WeChat"
                  clearable
                  :maxlength="400"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('curriculumVitae:info:form:country')"
                prop="Nation"
              >
                <el-select v-model="form.Nation" size="small" class="mr">
                  <el-option
                    v-for="item of $d.AttendedReviewerType"
                    :value="item.value"
                    :label="item.label"
                    :key="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="form_title">
            {{ $t('curriculumVitae:info:form:workTitle') }}
          </div>
          <el-form-item
            :label="$t('curriculumVitae:info:form:hospital')"
            prop="HospitalName"
            v-if="isEN"
          >
            <el-autocomplete
              clearable
              class="inline-input"
              style="width: 100%"
              v-model="form.HospitalName"
              :fetch-suggestions="querySearch"
              @select="handleSelect"
              placeholder=""
              @change="handleChange"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item
            :label="$t('curriculumVitae:info:form:hospital')"
            prop="HospitalNameCN"
            v-else
          >
            <el-autocomplete
              clearable
              class="inline-input"
              style="width: 100%"
              v-model="form.HospitalNameCN"
              :fetch-suggestions="querySearch"
              @select="handleSelect"
              placeholder=""
              @change="handleChange"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item
            :label="$t('curriculumVitae:info:form:AffiliatedUniversity')"
            prop="UniversityAffiliated"
            v-if="isEN"
          >
            <el-input
              v-model="form.UniversityAffiliated"
              type="textarea"
              autosize
              size="small"
              :maxlength="4000"
            />
          </el-form-item>
          <el-form-item
            :label="$t('curriculumVitae:info:form:AffiliatedUniversity')"
            prop="UniversityAffiliated"
            v-else
          >
            <el-input
              v-model="form.UniversityAffiliatedCN"
              type="textarea"
              autosize
              size="small"
              :maxlength="4000"
            />
          </el-form-item>
          <el-form-item
            :label="$t('curriculumVitae:info:form:City')"
            v-if="isEN"
          >
            <el-input v-model="form.City" size="small" />
          </el-form-item>
          <el-form-item :label="$t('curriculumVitae:info:form:City')" v-else>
            <el-input v-model="form.CityCN" size="small" />
          </el-form-item>
          <el-form-item
            :label="$t('curriculumVitae:info:form:department')"
            prop="DepartmentId"
          >
            <el-select v-model="form.DepartmentId" clearable 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.DepartmentId === otherId && isEN"
            class="other-item"
            prop="DepartmentOther"
          >
            <el-input
              v-model="form.DepartmentOther"
              :placeholder="
                $t('curriculumVitae:info:form:placeholder:DepartmentOther')
              "
              size="small"
              :maxlength="400"
            />
          </el-form-item>
          <el-form-item
            v-if="form.DepartmentId === otherId && !isEN"
            class="other-item"
            prop="DepartmentOtherCN"
          >
            <el-input
              v-model="form.DepartmentOtherCN"
              :placeholder="
                $t('curriculumVitae:info:form:placeholder:DepartmentOtherCN')
              "
              size="small"
              :maxlength="400"
            />
          </el-form-item>
          <el-form-item
            :label="$t('curriculumVitae:info:form:physician')"
            prop="RankId"
          >
            <el-select v-model="form.RankId" clearable placeholder="" @change="()=>{
              if($fd('Rank', form.RankId, 'id') !==
                $t('curriculumVitae:selectLabel:Other')){
                  form.RankOther = null
                  form.RankOtherCN = null
                }
            }">
              <el-option
                v-for="item in $d.Rank"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="
              $fd('Rank', form.RankId, 'id') ===
                $t('curriculumVitae:selectLabel:Other') && isEN
            "
            class="other-item"
            prop="RankOther"
          >
            <el-input
              v-model="form.RankOther"
              :placeholder="
                $t('curriculumVitae:info:form:placeholder:RankOther')
              "
              size="small"
              :maxlength="400"
            />
          </el-form-item>
          <el-form-item
            v-if="
              $fd('Rank', form.RankId, 'id') ===
                $t('curriculumVitae:selectLabel:Other') && !isEN
            "
            class="other-item"
            prop="RankOtherCN"
          >
            <el-input
              v-model="form.RankOtherCN"
              :placeholder="
                $t('curriculumVitae:info:form:placeholder:RankOtherCN')
              "
              size="small"
              :maxlength="400"
            />
          </el-form-item>
          <el-form-item
            :label="$t('curriculumVitae:info:form:partTimeJob')"
            prop="WorkPartTime"
            v-if="!isEN"
          >
            <el-input
              :placeholder="
                $t('curriculumVitae:info:form:placeholder:partTimeJob')
              "
              v-model="form.WorkPartTime"
              type="textarea"
              :rows="10"
              clearable
              :maxlength="4000"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('curriculumVitae:info:form:partTimeJob')"
            prop="WorkPartTimeEn"
            v-else
          >
            <el-input
              :placeholder="
                $t('curriculumVitae:info:form:placeholder:partTimeJobEN')
              "
              v-model="form.WorkPartTimeEn"
              type="textarea"
              :rows="10"
              :maxlength="4000"
              clearable
            ></el-input>
          </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 { addOrUpdateDoctorBasicInfoAndEmployment } from '@/api/reviewers'
import store from '@/store'
import { mapGetters } from 'vuex'
const defaultForm = () => {
  return {
    FirstName: '',
    LastName: '',
    ChineseName: '',
    Sex: '',
    TitleIds: [],
    Phone: '',
    EMail: '',
    WeChat: '',
    Nation: 0,

    DepartmentId: '',
    DepartmentOther: '',
    DepartmentOtherCN: '',
    RankId: '',
    RankOther: '',
    RankOtherCN: '',
    HospitalId: '',
    HospitalName: null,
    HospitalNameCN: null,
    WorkPartTime: null,
    WorkPartTimeEn: null,
    UniversityAffiliated: null,
    UniversityAffiliatedCN: null,
    City: null,
    CityCN: null,
  }
}
export default {
  name: 'info',
  components: { BaseModel },
  props: {
    DATA: {
      type: Object,
      required: true,
      default: () => {
        return {}
      },
    },
    reviewerId: {
      type: String,
      default: '',
    },
    isEN: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      model_cfg: {
        visible: false,
        showClose: true,
        width: '800px',
        title: this.$t('curriculumVitae:info:form:title'),
        appendToBody: true,
        top: '8vh',
        bodyStyle: `min-height: 100px; max-height: 650px;overflow-y: auto;padding: 10px;border: 1px solid #e0e0e0;`,
      },
      form: defaultForm(),
      rules: {
        FirstName: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        LastName: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        ChineseName: [
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        Sex: [
          {
            required: true,
            message: this.$t('common:ruleMessage:select'),
            trigger: 'blur',
          },
        ],
        TitleIds: [
          {
            required: true,
            message: this.$t('common:ruleMessage:select'),
            trigger: 'blur',
          },
        ],
        Phone: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          { max: 20, min: 7, message: 'The length is 7 to 20' },
        ],
        EMail: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            // type: 'email',
            pattern: new RegExp(this.$reg().EmailRegexStr),
            message: this.$t('rules:email'),
            trigger: 'blur,change',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        WeChat: [
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        Nation: [
          {
            required: true,
            message: this.$t('common:ruleMessage:select'),
            trigger: 'blur',
          },
        ],
        DepartmentId: [
          {
            required: true,
            message: this.$t('common:ruleMessage:select'),
            trigger: 'blur',
          },
        ],
        DepartmentOther: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
          ,
        ],
        DepartmentOtherCN: [
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        RankId: [
          {
            required: true,
            message: this.$t('common:ruleMessage:select'),
            trigger: 'blur',
          },
        ],
        RankOther: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        RankOtherCN: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        HospitalName: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: ['blur', 'change'],
          },
        ],
        HospitalNameCN: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: ['blur', 'change'],
          },
        ],
        UniversityAffiliated: [
          {
            max: 4000,
            message: this.$t('form:rules:maxLength:4000'),
            trigger: 'blur',
          },
        ],
        WorkPartTime: [
          {
            max: 4000,
            message: this.$t('form:rules:maxLength:4000'),
            trigger: 'blur',
          },
        ],
        WorkPartTimeEn: [
          {
            max: 4000,
            message: this.$t('form:rules:maxLength:4000'),
            trigger: 'blur',
          },
        ],
      },
      loading: false,
      dictionaryList: {},
      otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
      hospitalSelectList: [],
    }
  },
  computed: {
    ...mapGetters(['hospitalList']),
  },
  watch: {
    hospitalList: {
      handler() {
        if (!Array.isArray(this.hospitalList) || this.hospitalList.length <= 0)
          return false
        this.hospitalSelectList = []
        this.hospitalList.forEach((item) => {
          if (this.isEN) {
            this.hospitalSelectList.push({
              value: item.HospitalName,
              ...item,
            })
          } else {
            this.hospitalSelectList.push({
              value: item.HospitalNameCN,
              ...item,
            })
          }
        })
      },
      deep: true,
    },
  },
  mounted() {
    this.getDicData()
    store.dispatch('global/getHospital')
  },
  methods: {
    handleChange(v) {
      if (v) return
      this.form.UniversityAffiliated = null
      this.form.City = null
      this.form.UniversityAffiliatedCN = null
      this.form.CityCN = null
    },
    querySearch(queryString, cb) {
      var hospitalList = this.hospitalSelectList
      var results = queryString
        ? hospitalList.filter(this.createFilter(queryString))
        : hospitalList
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (hospitalList) => {
        if (this.isEN) {
          return (
            hospitalList.HospitalName.toLowerCase().indexOf(
              queryString.toLowerCase()
            ) >= 0
          )
        } else {
          return (
            hospitalList.HospitalNameCN.toLowerCase().indexOf(
              queryString.toLowerCase()
            ) >= 0
          )
        }
      }
    },
    openEdit() {
      this.form = defaultForm()
      Object.keys(this.form).forEach((key) => {
        if (this.DATA[key] || this.DATA[key] == 0) {
          this.form[key] = this.DATA[key]
        }
      })
      this.model_cfg.visible = true
    },
    handleCancle() {
      this.form = defaultForm()
      this.model_cfg.visible = false
    },
    async handleSave() {
      try {
        let validate = await this.$refs.infoFrom.validate()
        if (!validate) return false
        if (this.reviewerId) {
          this.form.Id = this.reviewerId
        }
        // console.log(this.form)
        let data = Object.assign({}, this.form)
        // if (!this.hospitalList.find((item) => item.Id === data.HospitalId)) {
        //   data.HospitalName = data.HospitalId
        //   data.HospitalId = null
        // }
        this.loading = true
        let res = await addOrUpdateDoctorBasicInfoAndEmployment(data)
        this.loading = false
        if (res.IsSuccess) {
          this.$emit('update:reviewerId', res.Result.Id)
          sessionStorage.setItem('reviewerId', res.Result.Id)
          this.$emit('getInfo')
          this.model_cfg.visible = false
        }
      } catch (err) {
        this.loading = false
        console.log(err)
      }
    },
    getDicData() {
      getBasicDataSelects(['Title', 'Department', 'Rank', 'Position'])
        .then((res) => {
          this.dictionaryList = { ...res.Result }
        })
        .catch(() => {})
    },
    handleSelect(value) {
      const item = value
      if (item) {
        this.form.UniversityAffiliated = item.UniversityAffiliated
        this.form.City = item.City
        this.form.UniversityAffiliatedCN = item.UniversityAffiliatedCN
        this.form.CityCN = item.CityCN
      } else {
        this.form.UniversityAffiliated = null
        this.form.City = null
        this.form.UniversityAffiliatedCN = null
        this.form.CityCN = null
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.info {
  position: relative;
  min-height: 100px;
  .editBtn {
    position: absolute;
    right: 0;
    top: 0px;
  }
  .userInfo,
  .userTitle,
  .userTel {
    line-height: 30px;
    margin-bottom: 15px;
    span {
      margin-right: 20px;
      &:last-child {
        margin: 0;
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  .userTitle,
  .userTel {
    span {
      display: inline-block;
      min-width: 80px;
      border-right: 1px solid #ddd;
      padding-right: 10px;
      &::before {
        margin-right: 5px;
      }
      &:last-child {
        border: none;
      }
    }
  }
}
.el-select {
  width: 100%;
}
::v-deep .el-dialog__body {
  padding-top: 0 !important;
}
.form_title {
  margin: 10px 0;
  display: flex;
  align-items: center;
  &::after {
    margin-left: 20px;
    display: block;
    content: '';
    border-top: 1px solid #eee;
    flex: 1;
  }
}
.noData {
  line-height: 100px;
}
</style>