<template>
  <el-card>
    <div class="flexCenter">
      <div class="border-info text-center inline">
        <label>{{ language == 0 ? '登录账号' : 'Account' }}</label> {{ accont }}
      </div>
    </div>
    <div class="leftboderTT">{{ language == 0 ? '登录密码' : 'Password' }} <span
        v-if="language==0">(登录时需要验证，保护账户信息)</span></div>
    <div class="d-form-border">
      <el-form class="d-form" size="large" label-width="120"
               :label-position="language==0?'left':'top'" style="max-width: 500px;margin: auto">
        <el-form-item :label="language==0?'密码':'Password'" required>
          <el-input type="password" show-password v-model="form.password"
                    :placeholder="language==0?'6-16位密码。区分大小写':''"/>
        </el-form-item>
        <el-form-item :label="language==0?'确认密码':'Confirm Password'" required>
          <el-input type="password" show-password v-model="form.confirmPassword" @blur="vconfirmPassword"
                    :placeholder="language==0?'再次输入密码':''"/>
        </el-form-item>
      </el-form>
    </div>
    <div class="leftboderTT">{{ language == 0 ? '机构信息' : 'Institutional information' }}</div>
    <div class="d-form-border">
      <el-form class="d-form" size="large" :model="form" ref="registerRef"
               :rules="registerRules" label-width="120" :label-position="language==0?'left':'top'"
               style="max-width: 500px;margin: auto">
        <el-form-item :label="language==0?'所属国家':'Nationality'" required>
          <el-select filterable v-model="form.countryId">
            <el-option v-for="item in countryList" :key="item.id" :label="language==0?item.name:item.enName" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'详细地址':'Address'" 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"/>
        </el-form-item>
        <el-form-item :label="language==0?'机构名称':'Institution name'" required prop="teamName">
          <el-input type="text" v-model="form.teamName" :placeholder="language==0?'请输入内容':''"/>
        </el-form-item>
        <el-form-item :label="language==0?'专业/业余':'Professional/Amateur'" required prop="majorFlag">
          <el-select v-model="form.majorFlag">
            <el-option :label="language==0?'专业':'Professional'" value="1" />
            <el-option :label="language==0?'业余':'Amateur'" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'团体类型':'Group type'" prop="type" required>
          <el-select v-model="form.type" :placeholder="language==0?'请选择团体类型':''" style="width: 100%;">
            <el-option :label="language==0?'普通院校':'School'" value="0" />
            <el-option :label="language==0?'专业舞蹈学校':'Professional dance school'" value="1" />
            <el-option :label="language==0?'培训机构/俱乐部':'Company/Club'" value="2" />
            <el-option :label="language==0?'地方协会':'Local Association'" value="3" />
            <el-option :label="language==0?'国家协会':'National Association'" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'联系人姓名':'Contact Name'" required prop="contactName">
          <el-input type="text" v-model="form.contactName" :placeholder="language==0?'请输入内容':''"/>
        </el-form-item>
        <el-form-item :label="language==0?'联系人电话':'Contact Phone'" required prop="contactTel">
          <el-input v-model="form.contactTel" type="phone" :placeholder="language==0?'请输入内容':''"/>
        </el-form-item>
        <el-form-item :label="language==0?'联系人邮箱':'Contact Email'" required prop="contactEmail">
          <el-input v-model="form.contactEmail" type="email" :placeholder="language==0?'请输入内容':''"/>
        </el-form-item>
        <el-form-item prop="photo" required :label="language==0?'机构LOGO':'Organizational photos'">
          <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 v-if="language==0">
              我已阅读并接受<a class="text-primary" @click.stop="showAgreeMent">《注册协议》</a>
              及<a class="text-primary" @click.stop="showAgreeMent">《个人信息保护政策》</a>
            </div>
            <div v-else style="white-space: nowrap">
              I have read and accepted the Registration
              <a class="text-primary" @click.stop="showAgreeMent">Agreement</a>
              and
              <a class="text-primary" @click.stop="showAgreeMent">Personal Information Protection Policy
              </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">
        {{ language == 0 ? '立即注册' : 'Register Now!' }}
      </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";
import {useStorage} from "@vueuse/core/index";

const {proxy} = getCurrentInstance()
const emit = defineEmits(['submit', 'prev'])
const language= useStorage('language',0)
const props = defineProps({
  accont: {
    type: String,
    required: true
  }
})
const data = reactive({
  form: {},
  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()
      form.value.username= props.accont
      match.pcRegisterTeam(form.value).then(res => {
        setToken(res.data.token)
        loading.value = false
        emit('submit')
      }).catch(()=>{
        loading.value = false
      })
    }
  })


}
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>