<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="800px"
  >
    <div class="boxInvitation pd20" >
      <div v-if="!showR" >
        <el-form ref="iformRef" :label-width="language==0?'120px':'240px'" :model="form" :rules="rules"
                 label-position="right">
          <el-form-item :label="language==0?'服务类型':'Service Type (Pick-Up/Drop-Off)'" prop="type" required>
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="1">{{ language == 0 ? '接机' : 'airport pickup' }}</el-checkbox>
              <el-checkbox label="2">{{ language == 0 ? '送机' : 'airport drop-off' }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <div v-if="form.type?.some(v=>v==1)">
            <h3 style="text-align: center">{{ language == 0 ? '接机' : 'airport pickup' }}</h3>

            <el-form-item :label="language==0?'抵达人员身份':'Role of Person-Arrival'" prop="pickUpBo.standing" required>
              <el-checkbox-group v-model="form.pickUpBo.standing">
                <el-checkbox :label="language==0?'运动员':'Athlete'" name="1"/>
                <el-checkbox :label="language==0?'随队人员':'Accompanying Person'" name="2"/>
                <el-checkbox :label="language==0?'官员':'Official'" name="3"/>
                <el-checkbox :label="language==0?'其他':'Others'" name="4"/>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item :label="language==0?'国家/地区':'Country/Region'" prop="pickUpBo.nationalitys" required>
              <el-select v-model="form.pickUpBo.nationalitys" filterable multiple style="width: 100%;">
                <el-option v-for="item in countrys"
                           :key="item.id"
                           :label="language==0?item.name:item.enName"
                           :value="language==0?item.name :item.enName"/>
              </el-select>
            </el-form-item>
            <el-form-item :label="language==0?'联系人':'Contact Person'" prop="pickUpBo.name" required>
              <el-input v-model="form.pickUpBo.name"/>
            </el-form-item>
            <el-form-item :label="language==0?'联系电话':'Contact Phone Number'" prop="pickUpBo.phone" required>
              <el-input v-model="form.pickUpBo.phone"/>
            </el-form-item>
            <el-form-item :label="language==0?'人数':'Number of People'" prop="pickUpBo.counts" required>
              <el-input-number v-model="form.pickUpBo.counts"/>
            </el-form-item>
            <el-form-item :label="language==0?'抵达日期':'Flight/Train Arrival Date'" prop="pickUpBo.arrivalDate"
                          required>
              <el-date-picker
                v-model="form.pickUpBo.arrivalDate" 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?'抵达时间':'Flight/Train Arrival Time'" prop="pickUpBo.arrivaTime"
                          required>
              <!--              <el-date-picker-->
              <!--                v-model="form.pickUpBo.arrivaTime"-->
              <!--                format="YYYY-MM-DD" placeholder="YYYY-MM-DD"-->
              <!--                style="width: 100%;" type="date" value-format="YYYY-MM-DD"-->
              <!--              />-->
              <el-time-picker v-model="form.pickUpBo.arrivaTime" placeholder="HH:mm:ss" value-format="HH:mm:ss" format="HH:mm:ss" style="width: 100%;"/>
            </el-form-item>

            <el-form-item :label="language==0?'航班/车次':'Flight/Train Number'" prop="pickUpBo.flight" required>
              <el-input v-model="form.pickUpBo.flight"/>
            </el-form-item>
            <el-form-item :label="language==0?'机场/火车站':'Airport/Train Station'" prop="pickUpBo.stationName"
                          required>
              <el-input v-model="form.pickUpBo.stationName"/>
            </el-form-item>
            <el-form-item :label="language==0?'航站楼':'Air Terminal'" prop="pickUpBo.terminal" required>
              <el-input v-model="form.pickUpBo.terminal"/>
            </el-form-item>
            <el-form-item :label="language==0?'送达酒店':'Destination Hotel'" prop="pickUpBo.hotle" required>
              <el-input v-model="form.pickUpBo.hotle"/>
            </el-form-item>
            <el-form-item :label="language==0?'行程单':'Round-Trip Itinerary'" prop="pickUpBo.itinerary" required>
              <image-upload v-model="form.pickUpBo.itinerary" :button-text="language==0?'上传':'Upload'"
                            :is-show-tip="false"
                            :limit="1"/>
            </el-form-item>
          </div>

          <div v-if="form.type?.some(v=>v==2)">
            <h3 style="text-align: center">{{ language == 0 ? '送机' : 'airport drop-off' }}</h3>
            <el-form-item
              :label="language==0?'离会人员身份':'Role of Person-Departure'"
              prop="downOffBo.standing" required>
<!--              <el-input v-model="form.downOffBo.standing"/>-->
              <el-checkbox-group v-model="form.downOffBo.standing">
                <el-checkbox :label="language==0?'运动员':'Athlete'" name="1"/>
                <el-checkbox :label="language==0?'随队人员':'Accompanying Person'" name="2"/>
                <el-checkbox :label="language==0?'官员':'Official'" name="3"/>
                <el-checkbox :label="language==0?'其他':'Others'" name="4"/>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item :label="language==0?'国家/地区':'Country/Region'" prop="downOffBo.nationalitys" required >
              <el-select v-model="form.downOffBo.nationalitys" filterable multiple style="width: 100%;">
                <el-option v-for="item in countrys"
                           :key="item.id"
                           :label="language==0?item.name:item.enName"
                           :value="language==0?item.name:item.enName"/>
              </el-select>
            </el-form-item>
            <el-form-item :label="language==0?'联系人':'Contact Person'" prop="downOffBo.name" required>
              <el-input v-model="form.downOffBo.name"/>
            </el-form-item>
            <el-form-item :label="language==0?'联系电话':'Contact Phone Number'" prop="downOffBo.phone" required>
              <el-input v-model="form.downOffBo.phone"/>
            </el-form-item>
            <el-form-item :label="language==0?'人数':'Number of People'" prop="downOffBo.counts" required>
              <el-input-number v-model="form.downOffBo.counts"/>
            </el-form-item>
            <el-form-item :label="language==0?'离开日期':'Departure Date from Hotel'" prop="downOffBo.arrivalDate"
                          required>
              <el-date-picker
                v-model="form.downOffBo.arrivalDate" 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?'离开时间':'Departure Time from Hotel'" prop="downOffBo.arrivaTime"  required>
              <!--              <el-date-picker-->
              <!--                v-model="form.downOffBo.rrivaTime"-->
              <!--                format="YYYY-MM-DD" placeholder="YYYY-MM-DD"-->
              <!--                style="width: 100%;" type="date" value-format="YYYY-MM-DD"-->
              <!--              />-->
              <el-time-picker v-model="form.downOffBo.arrivaTime" placeholder="HH:mm:ss" value-format="HH:mm:ss" format="HH:mm:ss" style="width: 100%;"/>
            </el-form-item>

            <el-form-item :label="language==0?'航班/车次':'Flight/Train Number'" prop="downOffBo.flight" required>
              <el-input v-model="form.downOffBo.flight"/>
            </el-form-item>
            <el-form-item :label="language==0?'机场/火车站':'Airport/Train Station'" prop="downOffBo.stationName"
                          required>
              <el-input v-model="form.downOffBo.stationName"/>
            </el-form-item>
            <el-form-item :label="language==0?'航站楼':'Air Terminal'" prop="downOffBo.terminal" required>
              <el-input v-model="form.downOffBo.terminal"/>
            </el-form-item>
            <el-form-item :label="language==0?'出发酒店':'Departure Hotel'" prop="downOffBo.hotle" required>
              <el-input v-model="form.downOffBo.hotle"/>
            </el-form-item>
            <el-form-item :label="language==0?'行程单':'Round-Trip Itinerary'" prop="downOffBo.itinerary" required>
              <image-upload v-model="form.downOffBo.itinerary" :button-text="language==0?'上传':'Upload'"
                            :is-show-tip="false"
                            :limit="1"/>
            </el-form-item>
          </div>

          <div class="text-center">
            <el-button class="btn-lineG" round size="large" type="primary" @click="submitForm()">
              {{ language == 0 ? '提交' : 'submit' }}
            </el-button>
          </div>
        </el-form>
      </div>
      <div >
        <div v-if="showR" class="text-center pd20">
          <img class="mauto" src="@/assets/dance/ok.png"/>
          <h2 class="text-center">{{ language == 0 ? '境外及港澳台选手接送信息登记已提交' : 'Request Form for Overseas, HKT, Mau, China and TPE Athletes Arrival and Departure' }}</h2>
          <h4 v-if="language == 0" class="text-center">
            我们已收到您的申请
          </h4>
          <h4 v-else>
            Your application has been received
            <!--            <br/>-->
            <!--            Please register in Wuxi on July 14.-->
          </h4>
        </div>
      </div>
    </div>
  </el-dialog>

</template>

<script setup>
import {useStorage} from "@vueuse/core/index";
import {getCurrentInstance, watch, 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,addPickup} from "@/apiPc/common";
const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
const form = ref({
  pickUpBo: {
    serviceType:1
  },
  downOffBo: {
    serviceType:2
  },
  type: ['1']
})
const show = ref(false)
const showR = ref(false)
const title = ref('')
const activeStep = ref(0)
const countrys = ref([])
const courseList = ref([])
const cptId = ref('')
const rules = ref(
  {
    type: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},],
    'pickUpBo.standing': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请选择' : 'Please choose'
    },],
    'pickUpBo.nationalitys': [{
      required: true,
      trigger: 'blur',
      message: language.value == 0 ? '请选择' : 'Please choose'
    },],
    'pickUpBo.name': [{required: true, trigger: 'change', message: language.value == 0 ? '请输入' : 'Please enter'},],
    'pickUpBo.phone': [{required: true, trigger: 'change', message: language.value == 0 ? '请输入' : 'Please enter'},],
    'pickUpBo.counts': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请输入' : 'Please enter'
    },],
    'pickUpBo.arrivalDate': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请选择' : 'Please choose'
    },],
    'pickUpBo.arrivaTime': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请选择' : 'Please choose'
    },],
    'pickUpBo.flight': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请输入' : 'Please enter'
    },],
    'pickUpBo.stationName': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请输入' : 'Please enter'
    },],
    'pickUpBo.terminal': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请输入' : 'Please enter'
    },],
    'pickUpBo.hotle': [{required: true, trigger: 'change', message: language.value == 0 ? '请输入' : 'Please enter'},],
    'pickUpBo.itinerary': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请选择' : 'Please choose'
    },],
    'downOffBo.nationalitys': [{
      required: true,
      trigger: 'blur',
      message: language.value == 0 ? '请选择' : 'Please choose'
    },],
    'downOffBo.standing': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请选择' : 'Please choose'
    },],
    'downOffBo.name': [{required: true, trigger: 'change', message: language.value == 0 ? '请输入' : 'Please enter'},],
    'downOffBo.phone': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请输入' : 'Please enter'
    },],
    'downOffBo.counts': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请选择' : 'Please choose'
    },],
    'downOffBo.arrivalDate': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请选择' : 'Please choose'
    },],
    'downOffBo.arrivaTime': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请选择' : 'Please choose'
    },],
    'downOffBo.flight': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请输入' : 'Please enter'
    },],
    'downOffBo.stationName': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请输入' : 'Please enter'
    },],
    'downOffBo.terminal': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请输入' : 'Please enter'
    },],
    'downOffBo.hotle': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请输入' : 'Please enter'
    },],
    'downOffBo.itinerary': [{
      required: true,
      trigger: 'change',
      message: language.value == 0 ? '请选择' : 'Please choose'
    },],

  })
const open = (params) => {
  show.value = true
  showR.value=false
  form.value={
    pickUpBo: {
      serviceType:1
    },
    downOffBo: {
      serviceType:2
    },
    type: ['1'],
  }
  title.value = language.value == 0 ? '境外及港澳台选手接送信息登记已提交' : 'Request Form for Overseas, HKT, Mau, China and TPE Athletes Arrival and Departure'
  cptId.value = params.cptId
  getCourse()
  // proxy.$refs['iformRef']
}
defineExpose({open})
watch(show, (value) => {
  if (!value) {
    form.value = {
      sex: '0'
    }
    if (language.value == 0) {
      form.value.countryId = 240
    }
  }
})

function getCourse() {
  masterClassList({cptId: cptId.value}).then(res => {
    courseList.value = res.data
  })
}

function setActive(n) {
  activeStep.value = n
}

function submitForm() {
  proxy.$refs['iformRef'].validate(async valid => {
      if (valid) {
        form.value.pickUpBo.cptId=cptId.value
        form.value.downOffBo.cptId=cptId.value
        // form.value.pickUpBo.serviceType=1
        // form.value.downOffBo.serviceType=2
        console.log(form.value)
        let forms=JSON.parse(JSON.stringify(form.value))
        forms.pickUpBo.nationalitys=forms.pickUpBo.nationalitys?.join(',')
        forms.pickUpBo.standing=forms.pickUpBo.standing?.join(',')
        forms.downOffBo.nationalitys=forms.downOffBo.nationalitys?.join(',')
        forms.downOffBo.standing=forms.downOffBo.standing?.join(',')
        forms.type=null
        if(!form.value.type.includes('1')) forms.pickUpBo={}
        if(!form.value.type.includes('2')) forms.downOffBo={}
        const res=await  addPickup(forms)
        if (res.code==200) {
          proxy.$modal.msgSuccess('操作成功！')
          showR.value=true
          // show.value=false
        }
      } else {
        proxy.$modal.msgError(language.value==0?'请完善信息！':'Please complete the information!')
      }
    }
  )
}

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

getCountryList()

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

</script>

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

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

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