<template>
  <div class="groupBox">
    <!-- 团队信息 -->
    <br>
    <el-form ref="rulesForm" :model="form" label-width="100px" :rules="rules">
      <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" @click="submit">提交，下一步</el-button>
    </div>

  </div>
</template>

<script setup>
import {
  getMyOwnMemberInfo,
  createMyMember,
  regionsList
} from '@/api/system/userInfo.js'
import { setToken } from '@/utils/auth'
import { ref, reactive, toRefs } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
import { useRouter } from 'vue-router'
const options = ref([])
const { proxy } = getCurrentInstance()
const emit = defineEmits(['nextFn'])
const router = useRouter()
const authenticationStatusa = ref()
const type = ref()
const defaultProps = {
  children: 'children',
  label: 'text',
  checkStrictly: true
}

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)

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 changeAddress(value) {
  form.value.siteProvinceId = value?.[0]?.toString()
  form.value.siteCityId = value?.[1]?.toString()
  form.value.siteRegionId = value?.[2]?.toString()
}

function submit() {
  proxy.$refs['rulesForm'].validate(async(valid) => {
    if (valid) {
      const res = await createMyMember({
        baseName: 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) { setToken(res.data.token) }
        emit('nextFn')
        initData()

        proxy.$modal.msgSuccess('操作成功')
      } else {
        proxy.$modal.msgError('操作失败！')
      }
    } else {
      proxy.$modal.msgError('请完善信息！')
    }
  })
}
</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;
      }
    }
  }
</style>