<template>
  <div class="index">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      label-width="80px"
      class="form"
      label-position="left"
    >
      <el-col :span="24" class="text">基本信息</el-col>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="账号" prop="account">
            <el-input clearable v-model="form.account" placeholder="请输入账号">
              <template #prefix>
                <el-icon>
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              type="password"
              show-password
              placeholder="请输入登录密码"
            >
              <template #prefix>
                <el-icon>
                  <Unlock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="确认密码" prop="refpassword">
            <el-input
              v-model="form.refpassword"
              type="password"
              show-password
              placeholder="请再次确认输入密码"
            >
              <template #prefix>
                <el-icon>
                  <Unlock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称" prop="nick_name">
            <el-input clearable v-model="form.nick_name" placeholder="请输入昵称">
              <template #prefix>
                <el-icon>
                  <Avatar />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="电子邮箱" prop="email">
            <el-input clearable v-model="form.email" placeholder="请填入正确的电子邮箱">
              <template #prefix>
                <el-icon>
                  <Message />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input clearable v-model="form.phone" placeholder="请输入手机号">
              <template #prefix>
                <el-icon>
                  <Iphone />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="24" class="text">专家信息</el-col>
      <el-row>
        <el-form-item label="头像" prop="info.icon">
          <custom-upload
            model="icon"
            :list="form.info.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="info.name">
            <el-input clearable v-model="form.info.name" placeholder="请输入专家姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生年月" prop="info.birth">
            <el-date-picker
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              v-model="form.info.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="info.cardType">
            <el-select clearable v-model="form.info.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="info.card">
            <el-input clearable v-model="form.info.card" placeholder="请输入证件号码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="擅长领域" prop="info.field">
            <el-select clearable v-model="form.info.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="info.direction">
            <el-input clearable v-model="form.info.direction" placeholder="请输入研究方向" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="最高学历" prop="info.education">
            <el-select clearable v-model="form.info.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="info.area">
            <el-cascader
              v-model="form.info.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="info.work">
            <el-input clearable v-model="form.info.work" placeholder="请输入工作单位" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否公开" prop="info.is_show">
            <el-radio-group v-model="form.info.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="info.brief">
          <el-input
            v-model="form.info.brief"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入简介"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24" class="remark">
        <span @click="toLogin">已有账号去登录</span>
        <span @click="toBack">返回首页</span>
      </el-col>
      <el-col :span="24" class="button">
        <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
      </el-col>
      <el-col :span="24" class="agree">
        <el-checkbox v-model="isAgree"></el-checkbox>
        <span style="margin: 0 0 0 5px">我已阅读并同意</span>
        <span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
      </el-col>
    </el-form>
  </div>
</template>
<script setup>
// 基础
const siteInfo = inject('siteInfo')
const cloneDeep = inject('cloneDeep')
const get = inject('get')
// 路由
const router = inject('router')
// 弹框
const dialog = inject('dialog')
// 用户协议
const isAgree = inject('isAgree')
// 表单
const ruleFormRef = inject('ruleFormRef')
// 字典表
const fieldList = inject('fieldList')
const educationList = inject('educationList')
const cityList = inject('cityList')
const isUseList = inject('isUseList')
const cardTypeList = inject('cardTypeList')
// 方法
const toLogin = inject('toLogin')
const toBack = inject('toBack')
// 接口
import { UsersStore } from '@/store/api/user/user'
import { ExpertStore } from '@/store/api/user/expert'
const store = UsersStore()
const expertStore = ExpertStore()
const form = ref({ role: ['User', 'Expert'], info: {} })
const validatePhoneNumber = (rule, value, callback) => {
  const reg = /^1[3-9]\d{9}$/
  if (!value) {
    return callback(new Error('手机号不能为空'))
  }
  if (!reg.test(value)) {
    return callback(new Error('请输入正确的手机号'))
  }
  callback()
}
const validatePassword = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入确认密码'))
  }
  if (form.value.password !== value) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}
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({
  nick_name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
  phone: [{ required: true, validator: validatePhoneNumber, trigger: 'blur' }],
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }],
  'info.name': [{ required: true, message: '请输入专家姓名', trigger: 'blur' }],
  'info.birth': [{ required: true, message: '请输入出生年月', trigger: 'blur' }],
  'info.cardType': [{ required: true, message: '请输入证件类型', trigger: 'blur' }],
  'info.card': [{ required: true, validator: validateCardNumber, trigger: 'blur' }],
  'info.direction': [{ required: true, message: '请输入研究方向', trigger: 'blur' }],
  'info.work': [{ required: true, message: '请输入工作单位', trigger: 'work' }],
  'info.education': [{ required: true, message: '请输入学历', trigger: 'blur' }],
  'info.field': [{ required: true, message: '请输入擅长领域', trigger: 'blur' }],
  'info.is_show': [{ required: true, message: '请选择是否公开', trigger: 'blur' }],
  'info.brief': [{ required: true, message: '请输入简介', trigger: 'blur' }],
  'info.area': [{ required: true, message: '请选择地区', trigger: 'blur' }]
})
// 上传图片
const onUpload = (e) => {
  const { model, value } = e
  form.value.info[model] = value
}
// 注册
const submitForm = async (formEl) => {
  if (!isAgree.value) {
    ElMessage({
      message: '请阅读并同意用户协议和隐私政策',
      type: 'warning'
    })
    return
  }
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = cloneDeep(form.value)
      const info = {
        role: get(data, 'role'),
        account: get(data, 'account'),
        password: get(data, 'password'),
        nick_name: get(data, 'nick_name'),
        email: get(data, 'email'),
        phone: get(data, 'phone')
      }
      const res = await store.create(info)
      if (res.errcode === 0) {
        const form = {
          ...{ user: get(res.data, '_id'), phone: get(data, 'phone') },
          ...get(data, 'info')
        }
        const arr = await expertStore.create(form)
        if (arr.errcode === 0) {
          ElMessage({
            message: '注册用户成功，审核中请稍后登录',
            type: 'success'
          })
          router.push({ path: '/login' })
        } else {
          ElMessage({ message: `${arr.errmsg}`, type: 'error' })
        }
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<style scoped lang="scss">
.index {
  height: calc(100vh - 40vh);
  margin: 10px 30px 0 30px;
  overflow-y: auto;
  .text {
    padding: 10px 0;
    font-family: PingFangSC-Semibold;
    font-size: 18px;
    color: #383b40;
    letter-spacing: 0;
    line-height: 18px;
    font-weight: 600;
  }

  .remark {
    display: flex;
    justify-content: space-between;

    span {
      cursor: pointer;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      letter-spacing: -0.09px;
      text-align: right;
      line-height: 32px;
    }

    span:hover {
      color: #2374ff;
    }
  }

  .button {
    padding: 10px 0;

    :deep(.el-button) {
      width: 100% !important;
      height: 44px !important;
      border: 0 !important;
      color: #f8f8f8 !important;
      font-size: 16px !important;
      text-align: center !important;
      line-height: 40px !important;
      cursor: pointer !important;
      font-family: PingFangSC-Regular !important;
      background-color: #1492ff !important;
    }
  }

  .agree {
    display: flex;
    align-items: center;
    padding: 0 0 10px 0;
    color: #999;
    font-size: 12px;

    span:last-child {
      color: #2374ff;
    }
  }
}

.index::-webkit-scrollbar {
  display: none;
}
</style>
