<template>
  <el-card>
    <div class="flexCenter">
      <div class="border-info text-center inline">
        <label>{{ language == 0 ? '登录账号' : 'Account' }}</label> {{ accont }}
      </div>
    </div>
    <div v-if="!user" class="leftboderTT">{{ language == 0 ? '登录密码' : 'Password' }}
      <span v-if="language==0">(登录时需要验证，保护账户信息)</span></div>
    <div v-if="!user" class="d-form-border">
      <el-form
        :label-position="language==0?'left':'top'" class="d-form" label-width="120"
        size="large" style="max-width: 500px;margin: auto"
      >
        <el-form-item :label="language==0?'密码':'Password'" required>
          <el-input
            v-model="form.password" :placeholder="language==0?'6-16位密码。区分大小写':''" show-password
            type="password"
          />
        </el-form-item>
        <el-form-item :label="language==0?'确认密码':'Confirm Password'" required>
          <el-input
            v-model="form.confirmPassword" :placeholder="language==0?'再次输入密码':''" show-password type="password"
            @blur="vconfirmPassword"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="leftboderTT">{{ language == 0 ? '机构信息' : 'Institutional information' }}</div>
    <div class="d-form-border">
      <el-form
        ref="registerRef" :label-position="language==0?'left':'top'" :model="form"
        :rules="form.is=='0'?registerRules:registerRulesEn"
        class="d-form" label-width="120"
        size="large"
        style="max-width: 500px;margin: auto"
      >
        <el-form-item v-show="language==0" :label="language==0?'是否国家队':'National Team'" required>
          <el-select v-model="form.is" filterable @change="changeIs">
            <el-option :label="language==0?'是':'Yes'" value="1" />
            <el-option :label="language==0?'否':'No'" value="0" />
          </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'" prop="countryId" required>
          <el-select v-model="form.countryId" :disabled="language==0&&form.is=='0'" filterable>
            <!--            <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,inx) in countryList" :key="inx" :label="item.noc||item.enName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'详细地址':'Address'" :required="form.is=='0'" prop="address">
          <el-cascader
            v-if="form.countryId == 240"
            v-model="regionArr"
            :options="regionsList"
            :props="{ label:'text' }"
            style="width: 100%;"
          />
          <el-input v-model="form.address" class="mt10" type="textarea" />
        </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
              v-show="group&&group.type==4"
              :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 v-model="form.teamName" :placeholder="language==0?'请输入内容':''" type="text" />
        </el-form-item>
        <el-form-item
          v-if="form.is=='0'" :label="language==0?'专业/业余':'Professional/Amateur'" prop="majorFlag"
          required
        >
          <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'" prop="contactName" required>
          <el-input v-model="form.contactName" :placeholder="language==0?'请输入内容':''" type="text" />
        </el-form-item>
        <el-form-item :label="language==0?'联系人电话':'Contact Phone'" prop="contactTel" required>
          <el-input v-model="form.contactTel" :placeholder="language==0?'请输入内容':''" type="phone" />
        </el-form-item>
        <el-form-item :label="language==0?'联系人邮箱':'Contact Email'" prop="contactEmail" required>
          <el-input v-model="form.contactEmail" :placeholder="language==0?'请输入内容':''" type="email" />
        </el-form-item>
        <el-form-item
          :label="language==0?'机构LOGO':'Organizational photos'" :required="form.is=='0'"
          prop="photo"
        >
          <ImageUpload2
            v-model="form.photo" :crop-height="200" :crop-width="200" :is-show-tip="false"
            :limit="1"
          />
        </el-form-item>
        <el-form-item>
          <div class="flexAgree" @click="isAgree = !isAgree">
            <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="showPolicy">《个人信息保护政策》</a>
            </div>
            <div v-else style="white-space: nowrap">
              I have read and agree to the User
              <a class="text-primary" @click.stop="showAgreeMent">Agreement</a>
              and
              <a class="text-primary" @click.stop="showPolicy"> Privacy 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
        v-if="user&&user.utype=='3'" :loading="loading" class="btn-lineG w200px" round type="primary"
        @click.prevent="upgrade"
      >
        {{ language == 0 ? '升级账号' : 'Submit' }}
      </el-button>
      <el-button
        v-else :loading="loading" class="btn-lineG w200px" round type="primary"
        @click.prevent="goStep3"
      >
        {{ language == 0 ? '立即注册' : 'Register Now!' }}
      </el-button>
    </div>
  </el-card>
</template>

<script setup>
import { getCurrentInstance } from '@vue/runtime-core'
import { onMounted, toRefs, reactive, ref } 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 { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import { upgradeTeam } from '@/apiPc/common'

const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const emit = defineEmits(['submit', 'prev'])
const language = useStorage('language', 0)
const userStore = useUserStore()
const user = useUserStore().user
const group = useUserStore().group || {}
console.log(group)
const props = defineProps({
  accont: {
    type: String,
    required: true
  }
})
const data = reactive({
  form: {
    is: ''
  },
  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')
  }
}
const matchId = ref('')
onMounted(() => {
  if (route.query.matchId) {
    matchId.value = route.query.matchId
  }
  if (language.value == 1) {
    form.value.type = '4'
  }
  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 upgrade = () => {
  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
      }
      loading.value = true
      form.value.regionId = regionArr.value.pop()
      form.value.userId = user.userId
      console.log('upgrade')
      upgradeTeam(form.value).then(res => {
        loading.value = false
        console.log(matchId.value, res.data)
        if (res.data) {
          userStore.getInfo().then(() => {
            router.push({
              name: 'matchDetail',
              params: {
                id: matchId.value
              }
            })
          })
        } else {
          ElMessage.success(language.value == 0 ? '升级成功' : 'Upgrade successful')
          router.push({ name: 'home' })
        }
      }).catch(() => {
        loading.value = false
      })
    }
  })
}
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 {
    if (language.value == '0') {
      form.value.countryId = 240
    }
    form.value.type = ''
  }
}
</script>

<style lang="scss" scoped>
.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>