<template>
  <div id="c-form">
    <el-row>
      <el-col :span="24" class="main" v-loading="loading">
        <el-col :span="24" class="one">
          <el-steps :active="steps_active" align-center>
            <el-step title="基本信息" />
            <el-step title="详细信息" />
          </el-steps>
        </el-col>
        <el-col :span="24" class="two">
          <template v-if="steps_active == 1">
            <cForm :span="24" :fields="fields" :form="form" :rules="rules" :isSave="false" label-width="auto">
              <template #code>
                <el-option v-for="i in codeList" :key="i.value" :label="i.label" :value="i.value"></el-option>
              </template>
              <template #type>
                <el-option v-for="i in typeList" :key="i.label" :label="i.label" :value="i.value"></el-option>
              </template>
              <template #area>
                <el-option v-for="i in areaList" :key="i.value" :label="i.label" :value="i.value"></el-option>
              </template>
              <template v-slot:submit>
                <el-button>提交</el-button>
              </template>
            </cForm>
            <el-col :span="24" class="btn">
              <el-button type="primary" @click="toSteps(2)">下一步</el-button>
              <el-button type="danger" @click="toLogin">返回登录</el-button>
            </el-col>
          </template>
          <template v-else-if="steps_active == 2">
            <cForm :span="24" :fields="otherfields" :form="otherform" :rules="rules" label-width="auto">
              <template v-slot:submit>
                <el-button type="primary" @click="toSteps(1)">上一步</el-button>
                <el-button type="success" @click="toSave">提交注册</el-button>
                <el-button type="danger" @click="toLogin">返回登录</el-button>
              </template>
            </cForm>
          </template>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
// reactive,
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormRules } from 'element-plus';
// 接口
import { PersonalStore } from '@common/src/stores/admins/personal'; // 个人
import { CompanyStore } from '@common/src/stores/admins/company'; // 企业
import { DictDataStore } from '@common/src/stores/system/dictData';
import type { IQueryResult } from '@/util/types.util';
import router from '@/router';
const personalAxios = PersonalStore();
const companyAxios = CompanyStore();
const dictAxios = DictDataStore();

// 加载中
const loading: Ref<any> = ref(false);
// 进度
const steps_active: Ref<any> = ref(1);
// 表单
let form: Ref<any> = ref({});
let fields: Ref<any[]> = ref([
  { label: '用户类型', model: 'type', type: 'select' },
  { label: '邀请码', model: 'code', type: 'select' },
  { label: '登录账号', model: 'account' },
  { label: '登录密码', model: 'password', type: 'password' },
  { label: '用户名', model: 'name' },
  { label: '手机号', model: 'phone' },
  { label: '电子邮箱', model: 'email' },
  { label: '联系地址', model: 'address' },
  { label: '办公电话', model: 'work_phone' },
  { label: '所属行业', model: 'industry' },
  { label: '所属辖区', model: 'area', type: 'select' }
]);
let otherform: Ref<any> = ref({});
let otherfields: Ref<any[]> = ref([]);
const rules = reactive<FormRules>({
  type: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
  code: [{ required: true, message: '请选择邀请码', trigger: 'change' }],
  account: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
  name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  phone: [{ required: false, message: '请输入手机号', trigger: 'blur' }],
  email: [{ required: false, message: '请输入电子邮箱', trigger: 'blur' }],
  address: [{ required: false, message: '请输入联系地址', trigger: 'blur' }],
  work_phone: [{ required: false, message: '请输入办公电话', trigger: 'blur' }],
  profindustryession: [{ required: false, message: '请输入所属行业', trigger: 'blur' }],
  juris: [{ required: false, message: '请选择所属辖区', trigger: 'change' }]
});

// 字典表
const typeList: Ref<any> = ref([
  { label: '个人用户', value: '4' },
  { label: '企业用户', value: '5' }
]);
const areaList: Ref<any> = ref([]);
const codeList: Ref<any> = ref([]);
// 请求
onMounted(async () => {
  loading.value = true;
  await searchOther();
  loading.value = false;
});
// 下一步
const toSteps = async (e) => {
  if (e == 2) {
    if (!form.value.type) {
      ElMessage({ message: '请选择用户类型', type: 'error' });
      return;
    }
    if (!form.value.code) {
      ElMessage({ message: '请选择邀请码', type: 'error' });
      return;
    }
    if (!form.value.account) {
      ElMessage({ message: '请输入账号', type: 'error' });
      return;
    }
    if (!form.value.password) {
      ElMessage({ message: '请输入账号', type: 'error' });
      return;
    }
    if (!form.value.name) {
      ElMessage({ message: '请输入用户名', type: 'error' });
      return;
    }
    // 下一步，根据用户类型不同，赋值不同的otherFields
    let list: any = [];
    if (form.value.type == '4') {
      list = [
        { label: '身份证号', model: 'card' },
        { label: '职务职称', model: 'zwzc' },
        { label: '所在院系', model: 'school' },
        { label: '所学专业', model: 'major' }
      ];
    } else if (form.value.type == '5') {
      list = [
        { label: '机构代码', model: 'institution_code' },
        { label: '注册类型', model: 'companytype' },
        { label: '注册时间', model: 'companydate', type: 'date' },
        { label: '注册资金', model: 'companycapital' },
        { label: '企业法人', model: 'companyperson' },
        { label: '上年度企业总收入', model: 'sndqyzsr' },
        { label: '上年度研发费用', model: 'sndyffy' },
        { label: '企业总人数', model: 'companytotal' },
        { label: '专&兼职研发人数', model: 'zjzyfrs' },
        { label: '企业简介', model: 'companybrief', type: 'textarea' },
        { label: '主要产品', model: 'mainproduct', type: 'textarea' },
        { label: '企业资质&荣誉', model: 'qualifications', type: 'textarea' }
      ];
    }
    otherfields.value = list;
  }
  steps_active.value = e;
};
// 提交保存
const toSave = async () => {
  let object = { ...form.value, ...otherform.value };
  let res: IQueryResult;
  if (object.type == '4') res = await personalAxios.create(object);
  else if (object.type == '5') res = await companyAxios.create(object);
  if (res.errcode == '0') {
    ElMessage({ message: '注册成功', type: 'success' });
    toLogin();
  } else {
    ElMessage({ message: `${res.errmsg}`, type: 'error' });
  }
};
// 查询其他信息
const searchOther = async () => {
  let res: IQueryResult;
  // 辖区
  res = await dictAxios.query({ type: 'jl_area' });
  if (res.errcode == '0') areaList.value = res.data;
  // 邀请码
  res = await dictAxios.query({ type: 'account_code' });
  if (res.errcode == '0') {
    let list = res.data as any;
    list = list.filter((i) => i.value != 'CJGLY');
    codeList.value = list;
  }
};
// 返回登录
const toLogin = () => {
  router.push({ path: '/login' });
};
</script>
<style scoped lang="scss">
.main {
  .one {
    margin: 10px 0;
  }
  .two {
    .btn {
      text-align: center;
    }
  }
}
</style>
