<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="form.is=='0'?registerRules:registerRulesEn" label-width="120" :label-position="language==0?'left':'top'"
               style="max-width: 500px;margin: auto">
        <el-form-item :label="language==0?'是否国家队':'National Team'" required v-show="language==0">
          <el-select filterable v-model="form.is" @change="changeIs">
            <el-option :label="language==0?'是':'Yes'" value="1"></el-option>
            <el-option :label="language==0?'否':'No'" value="0"></el-option>
          </el-select>
          <div class="tip">
            {{ language==0?'注册完成后，该属性不可变更':'After registration, this attribute cannot be changed' }}
          </div>
        </el-form-item>
        <el-form-item :label="language==0?'代表国家/地区':'Representing'" required prop="countryId">
          <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-option v-for="item in countryList" :key="item.id" :label="item.noc||item.enName" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'详细地址':'Address'" prop="address" :required="form.is=='0'">
          <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 v-if="form.is=='0'" :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 :disabled="form.is=='0'" :label="language==0?'国家协会':'National Association'" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'团体名称':'Team Name'" :required="form.is=='0'" prop="teamName">
          <el-input type="text" v-model="form.teamName" :placeholder="language==0?'请输入内容':''"/>
        </el-form-item>
        <el-form-item v-if="form.is=='0'" :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?'联系人姓名':'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" :label="language==0?'机构LOGO':'Organizational photos'"
                      :required="form.is=='0'">
          <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="showPolicy">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";
import {useRouter} from "vue-router";
const router = useRouter()
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: {
    is: '0'
  },
  loading: false,
  countryList: [],
  regionsList: [],
  regionArr: [],
  isAgree: false
})
const {form, countryList, regionsList, isAgree, loading, regionArr} = toRefs(data)
const registerRulesEn = ref(
    {
      password: [
        {required: true, trigger: 'blur', message: '请输入您的密码'},
        {min: 6, max: 16, message: '用户密码长度必须介于 6 和 16 之间', trigger: 'blur'}
      ],
      confirmPassword: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
      countryId: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
      // address: [{required: true, trigger: 'blur', message: '请输入地址'},],
      // teamName: [{required: true, trigger: 'blur'},],
      contactName: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
      contactTel: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
      contactEmail: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
      // photo: [{required: true, trigger: 'blur', message: '请上传'},],
    })
const registerRules = ref(
    {
      password: [
        {required: true, trigger: 'blur', message: '请输入您的密码'},
        {min: 6, max: 16, message: '用户密码长度必须介于 6 和 16 之间', trigger: 'blur'}
      ],
      confirmPassword: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
      countryId: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
      address: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
      teamName: [{required: true, trigger: 'blur',message: language.value == 0 ? '请输入':'Please enter'},],
      contactName: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
      contactTel: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
      contactEmail: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
      photo: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
      type: [{required: true, trigger: 'blur', message: language.value == 0 ? '请选择':'Please enter'},],
      majorFlag: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
    })
const vconfirmPassword = () => {
  if (form.value.password !== form.value.confirmPassword) {
    ElMessage.warning(language.value == 0 ? '两次输入的密码不一致' :'The two passwords entered are inconsistent')
  }
}
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(language.value==0){
        var pattern = /^1[3456789]\d{9}$/
        if (!pattern.test(form.value.contactTel)) {
          ElMessage.warning(language.value == 0 ?'请输入正确的手机号':'Please enter the correct mobile phone number')
          return
        }
      }


      if (!isAgree.value) {
        ElMessage.warning(language.value == 0?'请勾选接受':'Please check the acceptance')
        return
      }
      if (!form.value.password) {
        ElMessage.warning(language.value == 0?'请输入密码':'Please enter password')
        return
      }
      if (!form.value.confirmPassword) {
        ElMessage.warning(language.value == 0?'请再次输入密码':'Please enter password')
        return
      }
      loading.value = true
      delete form.value.confirmPassword
      form.value.regionId = regionArr.value.pop()
      form.value.username= props.accont
      console.log('pass')
      match.pcRegisterTeam(form.value).then(res => {
        setToken(res.data.token)
        loading.value = false
        emit('submit')
      }).catch(()=>{
        loading.value = false
      })
    }
  })


}
const showAgreeMent = () => {
  const routeLocation = router.resolve({
    name: 'userAgreement',
  })
  window.open(routeLocation.href, '_blank')
}
const showPolicy = () => {
  const routeLocation = router.resolve({
    name: 'policy',
  })
  window.open(routeLocation.href, '_blank')
}
onMounted(() => {
  console.log(props)
  if(props.accont.indexOf('@')>-1){
    form.value.contactEmail=props.accont
  }
  if(language.value==1){
    form.value.type = '4'
    form.value.is = '1'
  } else {
    form.value.countryId = 240
  }
})
const changeIs = (e) => {
  console.log(e)
  if(e == 1){
    form.value.type = '4'
  } else {
    form.value.type = ''
  }
}
</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
  }
}
.tip {
  line-height: 1.6;
  font-size: 12px;
  margin-top: 6px;
  color: #666;
}
</style>