<template>
  <div class="index">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      label-width="80px"
      class="form"
      label-position="left"
    >
      <el-row>
        <el-form-item label="专家头像" prop="icon">
          <custom-upload
            model="icon"
            :list="form.icon"
            :limit="1"
            url="/files/web/template_expert/upload"
            @change="onUpload"
            listType="picture-card"
          ></custom-upload>
        </el-form-item>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="专家姓名" prop="name">
            <el-input clearable v-model="form.name" placeholder="请输入专家姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生年月" prop="birth">
            <el-date-picker
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              v-model="form.birth"
              type="date"
              placeholder="请选择出生年月"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="证件类型" prop="cardType">
            <el-select clearable v-model="form.cardType" placeholder="请选择证件类型">
              <el-option
                v-for="(item, index) in cardTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号码" prop="card">
            <el-input clearable v-model="form.card" placeholder="请输入证件号码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="擅长领域" prop="field">
            <el-select clearable v-model="form.field" placeholder="请选择擅长领域">
              <el-option
                v-for="(item, index) in fieldList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="研究方向" prop="direction">
            <el-input clearable v-model="form.direction" placeholder="请输入研究方向" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="最高学历" prop="education">
            <el-select clearable v-model="form.education" placeholder="请选择最高学历">
              <el-option
                v-for="(item, index) in educationList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在地区" prop="area">
            <el-cascader
              v-model="form.area"
              :props="{ value: 'label', label: 'label' }"
              :options="cityList"
              clearable
              placeholder="请选择所在地区"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工作单位" prop="work">
            <el-input clearable v-model="form.work" placeholder="请输入工作单位" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否公开" prop="is_show">
            <el-radio-group v-model="form.is_show">
              <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{
                i.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-form-item label="简介" prop="brief">
          <el-input
            v-model="form.brief"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入简介"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24" class="button">
        <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
      </el-col>
    </el-form>
  </div>
</template>
<script setup>
// 基础
const $checkRes = inject('$checkRes')
const cloneDeep = inject('cloneDeep')
// 用户信息
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 表单
const ruleFormRef = inject('ruleFormRef')
// 字典表
const fieldList = inject('fieldList')
const educationList = inject('educationList')
const cityList = inject('cityList')
const isUseList = inject('isUseList')
const cardTypeList = inject('cardTypeList')
// 接口
import { ExpertStore } from '@/store/api/user/expert'
const expertStore = ExpertStore()
const form = ref({})
const validateCardNumber = (rule, value, callback) => {
  var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  if (!value) {
    return callback(new Error('证件号码不能为空'))
  }
  if (!reg.test(value)) {
    return callback(new Error('请输入正确的证件号码'))
  }
  callback()
}
const rules = reactive({
  name: [{ required: true, message: '请输入专家姓名', trigger: 'blur' }],
  birth: [{ required: true, message: '请输入出生年月', trigger: 'blur' }],
  cardType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
  card: [{ required: true, validator: validateCardNumber, trigger: 'change' }],
  direction: [{ required: true, message: '请输入研究方向', trigger: 'blur' }],
  work: [{ required: true, message: '请输入工作单位', trigger: 'blur' }],
  education: [{ required: true, message: '请输入学历', trigger: 'blur' }],
  field: [{ required: true, message: '请输入擅长领域', trigger: 'blur' }],
  is_show: [{ required: true, message: '请选择是否公开', trigger: 'blur' }],
  brief: [{ required: true, message: '请输入简介', trigger: 'blur' }],
  area: [{ required: true, message: '请选择地区', trigger: 'blur' }]
})
// 上传图片
const onUpload = (e) => {
  const { model, value } = e
  form.value[model] = value
}
// 保存
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = cloneDeep(form.value)
      data.status = '0'
      const res = await expertStore.update(data)
      if ($checkRes(res, true)) {
        search()
      } else ElMessage.error(res.message)
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 请求
onMounted(async () => {
  await search()
})
const search = async () => {
  if (user.value._id) {
    let res = await expertStore.query({ user: user.value._id })
    if (res.errcode == '0') form.value = res.data[0]
  }
}
</script>
<style scoped lang="scss">
.index {
  .button {
    text-align: center;
  }
}
</style>
