<template>
  <el-dialog
      v-model="show" :close-on-click-modal="false" :title="title" append-to-body center
      class="pcloginpop"
      close-icon="CircleClose" destroy-on-close
      :width="isMobile ? '90%' : '600px'"
  >
    <div class="boxInvitation pd20">
      <el-steps :active="activeStep" align-center class="mb20">
        <el-step :title="language==0?'报名须知':'Notice'"/>
        <el-step :title="language==0?'填写信息':'Information'"/>
        <el-step :title="language==0?'选择课程':'Courses'"/>
      </el-steps>
      <div v-if="activeStep==0">
        <div class="mb60 xzRich" style="max-height: 50vh;overflow: auto">
          <div v-if="language==0" style="width: 400px;margin: auto"><br>
            培训地点：南京国际博览会议中心<br>
            详细地址：江苏省南京市建邺区江东中路300号南京国际博览会议中心302、303、402、403。<br>
            上课时间：2026年7月13日-7月14日<br>
            报到时间：2026年7月12日 14:00- 18:00<br>
            联系人：祝老师<br>
            联系电话：010-67183764<br>
            报名截止日期:<span style="text-decoration: underline">2026-07-10</span><br>
          </div>
          <div v-else style="width: 400px;margin: auto;text-transform: capitalize"><br>
            <!--            The age limit for Youth Session: Born between 1st Jan, 2006 and 31st Dec., 2009.<br/>-->
            <!--            The age limit for Juvenile Session: Born after 1 Jan., 2010.<br/>-->
            Training Camp Venue：Nanjing International Exhibition and Convention Center<br>
            Address：No. 300 Jiangdong Zhong Road, Jianye District, Nanjing City, Jiangsu Province. Nanjing International
            Exhibition and Conference Center, Room 302, 303, 402, 403.<br>
            Schooltime:July 13th - July 14th, 2026.<br>
            Check-in：July 12, 2026 14:00 - 18:00<br>
            Contact Person：Mr.Zhu<br>
            Tel：+86 010-67183764<br>
            Registration Deadline：<span style="text-decoration: underline">2026-07-10</span><br>

            <div>
              <el-image
                  src="/img/schedule.png"
                  :preview-src-list="['/img/schedule.png']"
                  show-progress/>
            </div>
          </div>
        </div>
        <div v-loading="loading" class="text-center">
          <el-button v-if="courseList.length>0" class="btn-lineG" round type="primary" @click="setActive(1)">
            <span v-if="dayjs().format('YYYY-MM-DD')>'2026-07-10'">
              {{ language == 0 ? '报名已结束' : 'Registration has ended' }}
            </span>
            <span v-else>{{ language == 0 ? '下一步' : 'NEXT' }}</span>
          </el-button>
          <el-button v-else class="btn-lineG" round type="primary" @click="close">
            {{ language == 0 ? '暂无可报课程' : 'No courses available for reporting' }}
          </el-button>
        </div>
      </div>
      <div v-if="activeStep==1">
        <el-form
            ref="iformRef" :label-width="language==0?'80px':'160px'" :model="form" :rules="rules"
            label-position="right"
        >
          <el-form-item :label="language==0?'姓名':'Name'" prop="name" required>
            <el-input v-model="form.name"/>
          </el-form-item>
          <el-form-item :label="language==0?'性别':'Gender'" prop="gender" required>
            <el-radio-group v-model="form.gender">
              <el-radio value="0">{{ language == 0 ? '女' : 'female' }}</el-radio>
              <el-radio value="1">{{ language == 0 ? '男' : 'male' }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="language==0?'国籍':'Nationality'" prop="nationality" required>
            <el-select v-model="form.nationality" filterable style="width: 100%;">
              <el-option
                  v-for="item in countrys" :key="item.id" :label="language==0?item.name:item.enName"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="language==0?'出生日期':'Date of Birth'" prop="birth" required>
            <el-date-picker
                v-model="form.birth"
                format="YYYY-MM-DD" placeholder="YYYY-MM-DD"
                style="width: 100%;" type="date" value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item :label="language==0?'手机号':'Phone number'" prop="phone" required>
            <el-input v-model="form.phone"/>
          </el-form-item>
          <el-form-item :label="language==0?'邮箱':'Email'" prop="email" required>
            <el-input v-model="form.email" type="email"/>
          </el-form-item>
          <el-form-item :label="language==0?'证件号':'National license No.'" prop="passportNo" required>
            <el-input v-model="form.passportNo" @blur="checkCard"/>
          </el-form-item>
          <el-form-item :label="language==0?'有效证件':'Passport Copy'" prop="passportCopy" required>
            <image-upload
                v-model="form.passportCopy" :button-text="language==0?'上传':'Upload'" :is-show-tip="false"
                :limit="1"
            />
          </el-form-item>
          <!--          <el-form-item :label="language==0?'抵达日期':'Date of Arrival'" required prop="arrival">-->
          <!--            <el-date-picker-->
          <!--                v-model="form.arrival" placeholder="YYYY-MM-DD"-->
          <!--                style="width: 100%;"-->
          <!--                type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"-->
          <!--            />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item :label="language==0?'出发日期':'Date of Departure'" required prop="departure">-->
          <!--            <el-date-picker-->
          <!--                v-model="form.departure"-->
          <!--                style="width: 100%;" placeholder="YYYY-MM-DD"-->
          <!--                type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"-->
          <!--            />-->
          <!--          </el-form-item>-->
          <el-form-item :label="language==0?'备注':'Remark '">
            <el-input v-model="form.remark" rows="3" type="textarea"/>
          </el-form-item>

          <div class="text-center">
            <el-button plain round size="large" type="primary" @click="setActive(0)">
              {{ language == 0 ? '上一步' : 'PREV' }}
            </el-button>
            <el-button class="btn-lineG" round size="large" type="primary" @click="checkApplyCourse(2)">
              {{ language == 0 ? '下一步' : 'NEXT' }}
            </el-button>
          </div>
        </el-form>
      </div>
      <div v-if="activeStep==2">
        <div v-if="showR" class="text-center pd20">
          <img class="mauto" src="@/assets/dance/ok.png">
          <h2 class="text-center">{{ language == 0 ? '申请已提交' : 'Submitted successfully' }}</h2>
          <h4 v-if="language == 0" class="text-center">
            我们已收到您的申请，请在7月14日到南京报到。
          </h4>
          <h4 v-else>
            Your application has been received,
            <br>
            Please report to Nanjing on July 14th.
          </h4>
        </div>
        <div v-else>
          <div v-if="language==0" class="tip text-danger mb20">*选择参加的课程（最少一项，最多两项）</div>
          <div v-else class="tip text-danger mb20">*Select the courses to enroll in (at least one, no more than two)
          </div>
          <el-checkbox-group v-model="form.courseId" size="large" @change="courseChange">
            <div v-for="c in courseList" class="mb20">
              <el-checkbox
                  :disabled="(form.courseId?.length>=2&&form.courseId.indexOf(c.id)==-1)||disChoose||(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)"
                  :value="c.id" border
                  class="w100"
              >
                <div v-if="language==0" style="display: flex">
                  <div> {{ c.name }}{{ c.name.indexOf('青年') > -1 ? '(年龄在15岁~18岁)' : '(年龄在14岁以下)' }}</div>
                </div>
                <div v-else>
                  <div>
                    {{
                      c.nameEn
                    }}{{ c.nameEn.indexOf('Youth') > -1 ? '(Between the age 15 and 18)' : '(Under the age of 14)' }}
                  </div>
                </div>

                <el-tag
                    v-if="(c.viewStateCn == 0)||(c.viewStateEn == 0)"
                    class="ml20"
                    effect="dark" type="danger"
                >{{ language == 0 ? '已报满' : 'Already full' }}
                </el-tag>
              </el-checkbox>
            </div>
          </el-checkbox-group>


          <div class="text-center">
            <el-button plain round size="large" type="primary" @click="setActive(1)">
              {{ language == 0 ? '上一步' : 'PREV' }}
            </el-button>
            <el-button
                v-if="!disChoose" class="btn-lineG w200px" round size="large" type="primary"
                @click="submit"
            >
              {{ language == 0 ? '提交' : 'SUBMIT' }}
            </el-button>

          </div>

        </div>
      </div>
    </div>
  </el-dialog>

</template>

<script setup>
import {useStorage} from '@vueuse/core/index'
import {getCurrentInstance, watch, onMounted, ref} from 'vue'
import {nextTick} from '@vue/runtime-core'
import {ElMessage, ElMessageBox} from 'element-plus'
import {addInvitation, countryList} from '@/apiPc/match'
import ImageUpload from '@/components/ImageUpload'
import {masterClassList, getByCard, submitMasterApply, getMasterApply, delByCard} from '@/apiPc/common'
import dayjs from 'dayjs'

const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
const form = ref({})
const show = ref(false)
const showR = ref(false)
const disChoose = ref(false)
const title = ref('')
const activeStep = ref(0)
const countrys = ref([])
const courseList = ref([])
const loading = ref(false)
const cptId = ref('')
const isMobile = ref(false)
const rules = ref(
    {
      nationality: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'}],
      name: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'}],
      phone: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'}],
      gender: [{required: true, trigger: 'blur', message: language.value == 0 ? '请选择' : 'Please choose'}],
      email: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'}],
      birth: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'}],
      passportNo: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'}],
      passportCopy: [{required: true, trigger: 'blur', message: language.value == 0 ? '请上传' : 'Please Upload'}],
      arrival: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'}],
      departure: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'}]
    })
const open = (params) => {
  console.log(params)
  show.value = true
  title.value = language.value == 0 ? '2026年亚洲青少年体育舞蹈公益课' : '2026 Asian Youth Sports Dance Charity Class'
  cptId.value = params.cptId
  form.value = {
    gender: '0'
  }
  getCourse()
}
const checkMobile = () => {
  isMobile.value = window.innerWidth < 768
}
onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})
defineExpose({open})
// watch(show, (value) => {
//   if (!value) {
//     form.value = {
//       sex: '0'
//     }
//     if (language.value == 0) {
//       form.value.countryId = 240
//     }
//   }
//   nextTick(() => {
//     // proxy.$refs['dialogRef'].clearValidate()
//   })
// })

function getCourse() {
  // '1777256058082189313'
  loading.value = true
  masterClassList({cptId: cptId.value}).then(res => {
    courseList.value = res.data
    loading.value = false
  })
}

function setActive(n) {
  if (n == 1 && dayjs().format('YYYY-MM-DD') > '2026-06-30') {
    ElMessage.error(language.value == 0 ? '报名已结束' : 'The application has ended')
    return
  }
  activeStep.value = n
  // 在移动设备上，切换步骤时滚动到顶部
  if (isMobile.value) {
    window.scrollTo({top: 0, behavior: 'smooth'})
  }
}

function courseChange(e) {
  console.log('已选', e)
}

function checkApplyCourse(n) {
  getMasterApply({card: form.value.passportNo}).then(res => {
    if (res.data?.length > 0) {
      form.value.courseId = []
      for (var n of res.data) {
        form.value.courseId.push(n.itemId)
      }
      ElMessageBox.confirm(
          language.value == 0 ? '您已提交过信息，是否更新？' : 'You have submitted the information, do you want to update?',
          language.value == 0 ? '提示' : 'Tips', {
            confirmButtonText: language.value == 0 ? '是' : 'Confirm',
            cancelButtonText: language.value == 0 ? '否' : 'Cancel',
            type: 'warning'
          }).then(() => {
        // 删除原记录
        delByCard(form.value.passportNo).then(res => {
          form.value.courseId = []
          disChoose.value = false
          to2()
        })
      }).catch(() => {
        disChoose.value = true
        to2()
      })
    } else {
      to2()
    }
  })
}

function to2() {
  proxy.$refs.iformRef.validate(valid => {
    if (form.value.email.indexOf('@') == -1) {
      if (language.value == 0) {
        ElMessage.warning('请填写正确的邮箱')
      } else {
        ElMessage.warning('Please fill in the correct email')
      }
      return
    }
    if (valid) {
      setActive(2)
    }
  })
}


function checkCard() {
  getByCard({card: form.value.passportNo}).then(res => {
    if (res.data) {
      form.value = res.data
    } else {
      form.value.courseId = []
    }
  })
}

getCountryList()

function getCountryList() {
  countryList().then(res => {
    countrys.value = res.data
  })

  console.log(countrys.value)
}

const submit = () => {
  if (form.value.courseId.length == 0) {
    if (language.value == 0) {
      ElMessage.warning('请至少选择一门课程')
    } else {
      ElMessage.warning('Please select at least one course')
    }
    return
  }
  ElMessageBox.confirm(
      language.value == 0 ? '确认提交吗？' : 'Are you sure to submit?',
      language.value == 0 ? '提示' : 'Tips', {
        confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
        cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
        type: 'warning'
      }).then(() => {
    // form.value.cptId = cptId.value
    if (Array.isArray(form.value.passportCopy)) {
      form.value.passportCopy = form.value.passportCopy[0].url
    }
    // form.value.courseId = form.value.courseId.toString()
    form.value.itemIds = form.value.courseId.toString()
    delete form.value.courseId
    submitMasterApply(form.value).then((res) => {
      ElMessage.success(language.value == 0 ? '提交成功' : 'Successfully!')
      showR.value = true
    }).catch(() => {

    })
  })
}
const conti = () => {
  showR.value = false
  form.value = {}
}
const close = () => {
  show.value = false
}
</script>

<style scoped>
.xzRich {
  line-height: 2;
  font-size: 14px;
}

.boxInvitation {
  width: 90%;
  margin: auto
}

h4 {
  font-size: 15px;
  line-height: 1.6;
}
</style>