<template>
  <el-dialog
      v-model="show" :title="title" width="600px" append-to-body close-icon="CircleClose" center
      :close-on-click-modal="false" class="pcloginpop"
      destroy-on-close
  >
    <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: 300px;margin: auto"><br/>
              培训地点：无锡君来世尊酒店<br/>
              详细地址：江苏省 无锡市 滨湖区 和风路111号<br/>
              报到时间：2024年7月14日13:30 -17:00<br/>
              联系人：蒋璐<br/>
              联系电话：15961580050<br/>
            </div>
          <div v-else style="width: 400px;margin: auto"><br/>
            Training Camp venue：Worldhotel Grand Juna Wuxi<br/>
            Address：No.111 Hefeng Road, Binhu District, Wuxi, Jiangsu<br/>
            Check-in：From 13:30 to 17:00 on July 14, 2024.<br/>
            Contact Person：Dean Ding<br/>
            Tel: +86 19951486130<br/>
          </div>
        </div>
        <div class="text-center">
          <el-button type="primary" v-if="courseList.length>0" class="btn-lineG" round @click="setActive(1)">{{ language == 0 ? '下一步' : 'NEXT' }}</el-button>
          <el-button  type="primary" class="btn-lineG" round v-else  @click="close">{{language==0?'暂无可报课程':'No courses available for reporting'}}</el-button>
        </div>
      </div>
      <div v-if="activeStep==1">
        <el-form :model="form" :rules="rules" ref="iformRef" label-position="right" :label-width="language==0?'80px':'150px'">
          <el-form-item :label="language==0?'姓名':'Name'" required prop="name">
            <el-input v-model="form.name"/>
          </el-form-item>
          <el-form-item :label="language==0?'性别':'Gender'" required prop="gender">
            <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'" required prop="nationality">
            <el-select filterable v-model="form.nationality" 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'" required prop="birth">
            <el-date-picker
                v-model="form.birth"
                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?'邮箱':'Email'" required prop="email">
            <el-input v-model="form.email" type="email"/>
          </el-form-item>
          <el-form-item :label="language==0?'证件号':'ID No.'" required prop="passportNo">
            <el-input v-model="form.passportNo" @blur="checkCard"/>
          </el-form-item>
          <el-form-item :label="language==0?'有效证件':'Passport Copy'" required prop="passportCopy">
            <image-upload v-model="form.passportCopy" :limit="1" :is-show-tip="false"
                          :button-text="language==0?'上传':'Upload'"/>
          </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 type="textarea" v-model="form.remark" rows="3"/>
          </el-form-item>

          <div class="text-center">
            <el-button size="large" @click="setActive(0)" round plain type="primary">{{ language == 0 ? '上一步' : 'PREV' }}</el-button>
            <el-button type="primary" size="large" @click="checkApplyCourse(2)" round class="btn-lineG">
              {{ language == 0 ? '下一步' : 'NEXT' }}
            </el-button>
          </div>
        </el-form>
      </div>
      <div v-if="activeStep==2">
        <div class="text-center pd20" v-if="showR">
          <img class="mauto" src="@/assets/dance/ok.png"/>
          <h2 class="text-center">{{ language == 0 ? '申请已提交' : 'Submitted successfully' }}</h2>
          <h4 class="text-center" v-if="language == 0">
            我们已收到您的申请，并将尽快处理。请耐心等待。
          </h4>
          <h4 v-else>
            Your application has been received,<br/>
            and we will process it as soon as possible.
            <br/>
            Please be patient while waiting.
          </h4>
        </div>
        <div v-else>
          <div class="tip text-danger mb20" v-if="language==0">*选择参加的课程（最少一项，最多两项）</div>
          <div class="tip text-danger mb20" v-else>*Select the courses to enroll in (at least one, no more than two)</div>
          <el-checkbox-group size="large" v-model="form.courseId" @change="courseChange">
            <div v-for="c in courseList" class="mb20">
              <el-checkbox :value="c.id" border class="w100" :disabled="(form.courseId?.length>=2&&form.courseId.indexOf(c.id)==-1)||disChoose||(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)">
                {{language == 0 ?c.name:c.nameEn}}
                <el-tag class="ml20" v-if="(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)" type="danger" effect="dark">{{language == 0 ?'已报满':'Already full'}}</el-tag>
              </el-checkbox>
            </div>
          </el-checkbox-group>


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

        </div>

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

</template>

<script setup>
import {useStorage} from "@vueuse/core/index";
import {getCurrentInstance, watch} 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";

const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
const form = ref({
  gender:'0'
})
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 cptId = ref('')
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'},],
      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?'亚洲青少年体育舞蹈公益课':'Asian Youth DanceSport Training Camp'
  cptId.value = params.cptId
  getCourse()
}
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'
  masterClassList({cptId:cptId.value}).then(res=>{
    courseList.value = res.data
  })
}
function setActive(n) {
  activeStep.value = n
}
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
  })
}

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 = {
    gender: '0'
  }
}
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>