<template>
  <el-card>
      <div class="border-info text-center">

        <label>登录账号</label> 321

      </div>
    <div class="leftboderTT">登录密码 <span>(登录时需要验证，保护账户信息)</span></div>
  <div class="d-form-border">
    <el-form class="d-form" size="large"  label-width="120" style="max-width: 500px;margin: auto">
      <el-form-item label="密码" required>
        <el-input type="password" show-password v-model="form.password" placeholder="6-16位密码。区分大小写"/>
      </el-form-item>
      <el-form-item label="确认密码" required>
        <el-input type="password" show-password v-model="form.confirmPassword" @blur="vconfirmPassword" placeholder="再次输入密码"/>
      </el-form-item>
    </el-form>
  </div>
    <div class="leftboderTT">机构信息</div>
    <div class="d-form-border">
    <el-form class="d-form" size="large" :model="form"  ref="registerRef" :rules="registerRules" label-width="120" style="max-width: 500px;margin: auto">
      <el-form-item label="所属国家" required>
        <el-select filterable v-model="form.countryId">
          <el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" required prop="address">
        <el-cascader v-if="form.countryId == 240"
            v-model="regionArr"
            style="width: 100%;"
            :options="regionsList"
            :props="{ label:'text' }"
        />
        <el-input type="textarea" v-model="form.address" class="mt10" placeholder="请输入详细地址"/>
      </el-form-item>
      <el-form-item label="机构名称" required prop="teamName">
        <el-input type="text" v-model="form.teamName" placeholder="请输入内容"/>
      </el-form-item>
      <el-form-item label="联系人姓名" required prop="contactName">
        <el-input type="text" v-model="form.contactName" placeholder="请输入内容"/>
      </el-form-item>
      <el-form-item label="联系人电话" required prop="contactTel">
        <el-input v-model="form.contactTel" type="phone" placeholder="请输入内容"/>
      </el-form-item>
      <el-form-item label="联系人邮箱" required prop="contactEmail">
        <el-input v-model="form.contactEmail" type="email" placeholder="请输入内容"/>
      </el-form-item>
      <el-form-item prop="photo" required label="机构LOGO">
        <ImageUpload2
            v-model="form.photo" :crop-height="200" :crop-width="200" :limit="1"
            :is-show-tip="false"
        />
      </el-form-item>
      <el-form-item>
        <div @click="isAgree = !isAgree" class="flexAgree">
          <el-icon v-if="isAgree" color="#453DEA" size="20"><CircleCheckFilled /></el-icon>
          <el-icon v-else color="#999" size="20"><CircleCheck /></el-icon>
          <div>
            我已阅读并接受<a class="text-primary" @click.stop="showAgreeMent">《注册协议》</a>
            及<a class="text-primary" @click.stop="showAgreeMent">《个人信息保护政策》</a>
          </div>
        </div>
      </el-form-item>
    </el-form>
    </div>

    <div class="text-center">
<!--      <el-button class="primary-kx" @click="goStep1">上一步</el-button>-->
      <el-button type="primary" round class="btn-lineG w200px" @click.prevent="goStep3" :loading="loading">立即注册</el-button>
    </div>
  </el-card>
</template>

<script setup>
import {getCurrentInstance} from "@vue/runtime-core"
import {onMounted,toRefs,reactive} from "vue"
import * as match from "@/apiPc/match";
import {ElMessage} from "element-plus";
import {setToken} from "@/utils/auth";
const { proxy } = getCurrentInstance()
const emit = defineEmits(['submit','prev'])
const props = defineProps({

})
const data = reactive({
  form: {
    username:'eryewawa@163.com'
  },
  loading:false,
  countryList: [],
  regionsList: [],
  regionArr: [],
  isAgree:false
})
const {form,countryList,regionsList,isAgree,loading,regionArr} = toRefs(data)
const registerRules = ref(
{
  password:[
    { required: true, trigger: 'blur', message: '请输入您的密码' },
    { min: 6, max: 16, message: '用户密码长度必须介于 6 和 16 之间', trigger: 'blur' }
  ],
  confirmPassword: [{ required: true, trigger: 'blur', message: '请再次输入您的密码' },],
  countryId: [{ required: true, trigger: 'blur', message: '请选择所属国家' },],
  address: [{ required: true, trigger: 'blur', message: '请输入地址' },],
  teamName: [{ required: true, trigger: 'blur', message: '请输入' },],
  contactName: [{ required: true, trigger: 'blur', message: '请输入' },],
  contactTel: [{ required: true, trigger: 'blur', message: '请输入' },],
  contactEmail: [{ required: true, trigger: 'blur', message: '请输入' },],
  photo: [{ required: true, trigger: 'blur', message: '请上传' },],
})
const vconfirmPassword = () => {
  if (form.value.password !== form.value.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
  }
}
onMounted(()=>{
  getCountryList()
  getRegionsList()
})

function getCountryList() {
  match.countryList().then(res => {
    countryList.value = res.data
  })
}
function getRegionsList() {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
}
const goStep1 = () => {
  emit('prev')
}
const goStep3 = () => {
  proxy.$refs.registerRef.validate(valid => {
    if (valid) {
      if(!isAgree.value){
        ElMessage.error('请勾选接受')
        return
      }

      loading.value = true
      delete form.value.confirmPassword
      form.value.regionId = regionArr.value.pop()
      match.pcRegisterTeam(form.value).then(res=>{
        setToken(res.data.token)
        emit('submit')
      })
    }
  })


}
const showAgreeMent = () => {
  console.log('111')
}
onMounted(()=>{
  console.log(props)
})
</script>

<style scoped lang="scss">
.d-form-border{
  border: 1px solid #E5E5E5;margin: 20px 0;padding: 20px}
.leftboderTT{color: var(--el-color-primary);
  font-size: 16px;
  font-weight: 600;
  span{color: #929AA0;font-size: 14px;}
}
.flexAgree{display: flex;align-items: center;
  div{margin-left: 8px;font-size: 14px}
}
</style>