<template>
  <div class="form-container basic-form">
    <el-card class="box-card">
      <div style="width: 1000px">
        <!-- v-loading="loading" -->
        <el-form
          ref="basicInfoForm"
          v-loading="loading"
          :inline="true"
          :rules="rules"
          :model="basicInfo"
          class="demo-ruleForm"
          label-width="120px"
          size="small"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item
                v-if="basicInfo.ReviewerCode"
                :label="$t('system:reviewer:label:Id')"
              >
                <el-input
                  v-model="basicInfo.ReviewerCode"
                  disabled
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('system:reviewer:label:LastName')"
                prop="LastName"
              >
                <el-input
                  v-model="basicInfo.LastName"
                  :disabled="$route.query.ReviewStatus === '1'"
                  size="small"
                  :maxlength="400"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('system:reviewer:label:FirstName')"
                prop="FirstName"
              >
                <el-input
                  v-model="basicInfo.FirstName"
                  :disabled="$route.query.ReviewStatus === '1'"
                  size="small"
                  :maxlength="400"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('system:reviewer:label:NameCN')"
                prop="ChineseName"
              >
                <el-input
                  v-model="basicInfo.ChineseName"
                  :disabled="$route.query.ReviewStatus === '1'"
                  size="small"
                  :maxlength="400"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('system:reviewer:label:Gender')"
                prop="Sex"
              >
                <el-select
                  v-model="basicInfo.Sex"
                  prop="Sex"
                  placeholder="Please select gender"
                  size="small"
                  :disabled="$route.query.ReviewStatus === '1'"
                >
                  <el-option
                    v-for="(item, index) of genderOptions"
                    :key="index"
                    :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('system:reviewer:label:Phone')"
                prop="Phone"
              >
                <el-input
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="basicInfo.Phone"
                  size="small"
                  :maxlength="400"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('system:reviewer:label:Title')"
                prop="TitleIds"
              >
                <el-select
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="basicInfo.TitleIds[0]"
                  placeholder="Please select Title"
                  size="small"
                >
                  <!-- <el-option
                    v-for="item of dict.type.Title"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  /> -->
                  <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-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('system:reviewer:label:Email')"
                prop="EMail"
              >
                <el-input
                  v-model="basicInfo.EMail"
                  :disabled="$route.query.ReviewStatus === '1'"
                  size="small"
                  :maxlength="400"
                />
              </el-form-item>
            </el-col>
            <!--            <el-col :span="12">-->
            <!--              <el-form-item label="WeChat: " prop="WeChat">-->
            <!--                <el-input v-model="basicInfo.WeChat" :disabled="$route.query.ReviewStatus === '1'" size="small" />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :span="12">
              <!-- <el-form-item label="Payment Type: " prop="Nation">
                <el-radio-group v-model="basicInfo.Nation">
                  <el-radio :label="0">CN</el-radio>
                  <el-radio :label="1">US</el-radio>
                </el-radio-group>
              </el-form-item> -->

              <el-form-item
                :label="$t('system:reviewer:label:Country')"
                prop="Nation"
              >
                <el-select
                  :disabled="$route.query.ReviewStatus === '1'"
                  v-model="basicInfo.Nation"
                  size="small"
                  clearable
                  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>
          <!--          <el-row>-->
          <!--          </el-row>-->
          <el-row>
            <el-form-item style="margin-left: 120px">
              <el-button
                :disabled="$route.query.ReviewStatus === '1'"
                type="primary"
                :loading="isDisabled"
                size="small"
                @click="handleSave"
              >
                {{ $t('common:button:save') }}</el-button
              >
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getBasicInfo, addOrUpdateDoctorBasicInfo } from '@/api/reviewers'
import { changeURLStatic } from '@/utils/history.js'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
export default {
  props: {
    reviewerId: {
      type: String,
    },
    isSystem: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      basicInfo: {
        Id: '',
        ReviewerCode: '',
        FirstName: '',
        LastName: '',
        ChineseName: '',
        Sex: '',
        TitleIds: [],
        Phone: '',
        EMail: '',
        WeChat: '',
        Introduction: '',
        Nation: 0,
      },
      rules: {
        FirstName: [
          {
            required: true,
            message: 'Please enter FirstName',
            trigger: 'blur',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        LastName: [
          { required: true, message: 'Please enter LastName', 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: 'Please select gender', trigger: 'blur' },
        ],
        TitleIds: [
          { required: true, message: 'Please select Title', trigger: 'blur' },
        ],
        Phone: [
          {
            required: true,
            message: 'Please enter phone number',
            trigger: 'blur',
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        EMail: [
          {
            required: true,
            message: 'Please input the email address',
            trigger: 'blur',
          },
          {
            type: 'email',
            message: 'Please input the correct email address',
            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',
          },
        ],
      },
      isDisabled: false,
      loading: false,
      genderOptions: [
        { label: 'Male', value: 0 },
        { label: 'Female', value: 1 },
      ],
      dictionaryList: {},
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    handleSave() {
      this.$refs.basicInfoForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.isDisabled = true

          addOrUpdateDoctorBasicInfo(this.basicInfo)
            .then((res) => {
              this.isDisabled = false
              this.loading = false
              this.$message.success('Saved successfully')
              if (!this.id) {
                this.basicInfo.Id = res.Result.Id
                if (this.isSystem) {
                  changeURLStatic('Id', res.Result.Id)
                }
                if (!this.reviewerId) {
                  this.$emit('update:reviewerId', res.Result.Id)
                }
                this.basicInfo.ReviewerCode = res.Result.ReviewerCode
              }
            })
            .catch(() => {
              this.isDisabled = false
              this.loading = false
            })
        }
      })
    },
    async initForm() {
      await this.getDicData()

      const id = this.$route.query.Id || this.reviewerId
      if (id) {
        this.loading = true
        getBasicInfo(id)
          .then((res) => {
            // eslint-disable-next-line no-unused-vars
            const { TitleList, ...param } = res.Result
            this.basicInfo = param
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      }
    },
    getDicData() {
      getBasicDataSelects(['Title'])
        .then((res) => {
          this.dictionaryList = { ...res.Result }
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped>
.basic-form {
  .el-input--small {
    width: 220px !important;
  }
  .el-select--small {
    width: 220px !important;
  }
}
</style>
