<template>
  <div class="groupBox">
    <!-- 团队信息 -->
    <br>
    <el-form ref="rulesForm" :model="form" label-width="100px" :rules="rules" :disabled="authenticationStatusa==1||authenticationStatusa==2">
      <el-form-item label="单位名称" prop="baseName">
        <el-input v-model="form.baseName" :disabled="type" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="单位类型" prop="type">
        <el-select
          v-model="form.type" :disabled="type"
          placeholder="请选择"
          style="width: 100%;"
        >
          <el-option label="企业" value="1" />
          <el-option label="国家组织" value="2" />
          <el-option label="社会组织" value="3" />
          <el-option label="其他" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="联系人" prop="contact">
        <el-input v-model="form.contact" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="form.phone" style="width: 100%;" />
      </el-form-item>
      <!--      <el-form-item label="所属省份" prop="belongProvinceId">-->
      <!--        <el-select-->
      <!--          v-model="form.belongProvinceId"-->
      <!--          placeholder="请选择"-->
      <!--          style="width: 100%"-->
      <!--        >-->
      <!--          <el-option v-for=" item in options " :key="item.value" :label="item.text" :value="item.value" />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="地址" prop="coordinates1">-->
      <!--        <el-cascader-->
      <!--          ref="cascaderA"-->
      <!--          v-model="form.coordinates1"-->
      <!--          placeholder="请选择"-->
      <!--          :options="options"-->
      <!--          :props="defaultProps"-->
      <!--          filterable-->
      <!--          style="width: 100%"-->
      <!--          @change="changeAddress"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="详细地址" prop="siteAddress">-->
      <!--        <el-input v-model="form.siteAddress" style="width: 100%" />-->
      <!--      </el-form-item>-->
      <el-form-item label="机构介绍" prop="introduce">
        <el-input
          v-model="form.introduce"
          type="textarea"
          :rows="6"
          style="width: 100%;"
        />
      </el-form-item>
    </el-form>
    <br>
    <div class="dialog-footer text-center">
      <el-button type="primary" round class="btn" @click="submit">下一步</el-button>
    </div>

  </div>
</template>

<script setup>
import {
  getMyOwnMemberInfo,
  createMyMember,
  regionsList,
  checkMember
} from '@/api/system/userInfo.js'
import { setToken } from '@/utils/auth'
import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
const options = ref([])
const { proxy } = getCurrentInstance()
const emit = defineEmits(['handelNext'])
const authenticationStatusa = ref()
const type = ref()

const data = reactive({
  form: {
    coordinates1: []
  },
  rules: {
    baseName: [{ required: true, trigger: 'blur', message: '请输入单位名称' }],
    type: [{ required: true, trigger: 'change', message: '请输入单位类型' }],
    phone: [
      {
        required: true,
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur'
      }
    ],
    contact: [{ required: true, trigger: 'change', message: '请输入联系人' }],
    siteAddress: [{ required: true, trigger: 'change', message: '请输入所在地' }],
    belongProvinceId: [{ required: true, trigger: 'change', message: '请选着所属省份' }],
    introduce: [
      { required: true, trigger: 'change', message: '请输入机构简介' }
    ],
    coordinates1: [
      { required: true, trigger: 'change', message: '请输入详细地址' }
    ]
  }
})
const { form, rules } = toRefs(data)

onMounted(() => {
  initData()
})

async function initData() {
  const res1 = await regionsList()
  options.value = res1.data
  const res = await getMyOwnMemberInfo()
  if (res.data.authenticationStatus == 2) {
    // router.push('/index')
    window.location.href = '/'
  }
  console.log(res)
  // 认证信息
  if (res.data.authenticationStatus == 1 || res.data.authenticationStatus == 2 || res.data.authenticationStatus == 5) {
    type.value = true
  } else {
    type.value = false
  }
  if (!res.data.memberInfo) res.data.memberInfo = {}
  form.value = res.data.memberInfo
  // form.value.coordinates1 = []
  authenticationStatusa.value = res.data.authenticationStatus
  // if (form.value.siteProvinceId)form.value.coordinates1.push(form.value.siteProvinceId)
  // if (form.value.siteCityId) form.value.coordinates1.push(form.value.siteCityId)
  // if (form.value.siteRegionId) form.value.coordinates1.push(form.value.siteRegionId)
 
  console.log(form.value)
}

function submit() {
  proxy.$refs['rulesForm'].validate(async(valid) => {
    // if (authenticationStatusa.value != 1 && authenticationStatusa.value != 2) await handelCheckMember()
    if (valid) {
      const res = await createMyMember({
        baseName: form.value.baseName,
        name: form.value.baseName,
        type: form.value.type,
        contact: form.value.contact,
        phone: form.value.phone,
        // coordinates: [...form.value.coordinates1]?.join(),
        // siteAddress: form.value.siteAddress,
        introduce: form.value.introduce,
        memId: form.value.memId,
        siteProvinceId: form.value.siteProvinceId,
        siteCityId: form.value.siteCityId,
        siteRegionId: form.value.siteRegionId
        // belongProvinceId: form.value.belongProvinceId
      })
      if ((res.code = 200)) {
        if (res.data.token) {
          await setToken(res.data.token)
          await initData()
          emit('handelNext', 2)
        } else {
          emit('handelNext', 2)
          await initData()
        }
        

        proxy.$modal.msgSuccess('操作成功')
      } else {
        proxy.$modal.msgError('操作失败！')
      }
    } else {
      proxy.$modal.msgError('请完善信息！')
    }
  })
}


// 校验单位名称重复
function handelCheckMember() {
  return new Promise(async(resolve, reject) => {
    const res = await checkMember({
      baseName: form.value.baseName,
      type: form.value.type,
      contact: form.value.contact,
      phone: form.value.phone,
      introduce: form.value.introduce,
      memId: form.value.memId,
      siteProvinceId: form.value.siteProvinceId,
      siteCityId: form.value.siteCityId,
      siteRegionId: form.value.siteRegionId
    })
    if (res.data) {
      return resolve(res.data)
    } else {
      await proxy.$modal.confirm('机构名称在系统中存在，可用原账户登录，用户也可以继续注册，是否继续注册？').then(() => {
        return resolve(res.data)
      }).catch(e => {
        return reject(e)
      })
    }
  })
}

</script>

<style lang="scss" scoped>
  .groupBox{
    width: 900px;
    padding: 20px;
  }
  .textBox{
    span{
      margin-left: 120px;
    }
    h3{
      margin-bottom: 40px;
      font-size: 16px;
      div{
        text-align: right;
      }
    }
  }
  
  .btn{
    width:200px;
    height: 38px;
  }
</style>