<template>
  <div>
    <div class="box">
      <el-card :body-style="{ padding: '0px' }" class="mt20">
        <div slot="header">
          <div class="bg-lineg father">{{ language == 0 ? '旅游服务下单' : 'Hotel booking order' }}
            <sapn class="son" @click="handleGo">{{ language == 0 ? '上一页' : 'Back' }}</sapn>
          </div>
        </div>
        <!--        {{room}}-->
        <el-row :gutter="20" class="pd20">
          <el-col :span="14">
            <div class="border-info">
              <el-row :gutter="20" align="middle" class="hote ">
                <el-col :span="language == 0?16:24">
                  <h3 class="esp flex">{{ scenicItem?.name }}
                    
                    <!--                    <el-tag class="ml20" effect="dark">{{ scenicItem?.rank || 0 }}A</el-tag>-->
                  </h3>
                  <div class="info">
                    <el-icon>
                      <Phone />
                    </el-icon>
                    <span class="mr10">{{ language == 0 ? '联系电话' : 'Contact Number' }}：{{
                      scenicItem?.contact
                    }}</span>
                  </div>
                  <div class="info">
                    <el-icon>
                      <Clock />
                    </el-icon>
                    <span class="mr10">{{ language == 0 ? '出发时间' : 'Meeting Time' }}：{{ scenicItem?.startTime }}
                      <!--                      ～ {{scenicItem?.workTime }}-->
                    </span>
                  </div>
                  
                  <div class="info esp">
                    <el-icon>
                      <MapLocation />
                    </el-icon>
                    <span class="mr10">{{ language == 0 ? '集合地点' : 'Meeting Point' }}：{{
                      scenicItem?.address
                    }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
            
            <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>
            <div class="border-rr mt20 pd20">
              <el-form
                ref="formRef" v-loading="loading" :label-width="language == 0 ?'120':'160'" :model="form"
                :rules="rules"
              >
                <!--                &lt;!&ndash;                :disabled-date="disabledDateRZ"&ndash;&gt;-->
                <!--                <el-form-item :label="language==0?'选择日期':'Date'" required>-->
                <!--                  <el-date-picker-->
                <!--                    v-model="rzRange"-->
                <!--                    :clearable="false"-->
                <!--                    :disabled-date="disabledDateRZ"-->
                <!--                    format="YYYY-MM-DD"-->
                <!--                    value-format="YYYY-MM-DD"-->
                <!--                    @change="dateChange"-->
                <!--                  />-->
                <!--                  -->
                <!--                  <div v-if="lform.scenicStart" class="tip">{{-->
                <!--                    language == 0 ? '可订日期' : 'Available date'-->
                <!--                  }}：{{ lform.scenicStart.slice(0, 10) }} ~ {{ lform.scenicEnd.slice(0, 10) }}-->
                <!--                  </div>-->
                <!--                  -->
                <!--                  &lt;!&ndash;                    :picker-options="pickerOptions"&ndash;&gt;-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-for="(n,i) in gateList" :key="i" :label="language==0? n.name:n.name" prop="count">-->
                <!--                  <el-input-number v-model="n.count" :max="n.leftNum" :min="0" @change="changeNum(n)" />-->
                <!--                  <el-popover placement="top-start">-->
                <!--                    <template #reference>-->
                <!--                      <el-icon class="ml20">-->
                <!--                        <Warning />-->
                <!--                      </el-icon>-->
                <!--                    </template>-->
                <!--                    <div v-html="n.details" />-->
                <!--                  </el-popover>-->
                <!--                  <div class="red ml20">-->
                <!--                    <span v-if="language == 0">单价: ¥{{ n.price }}</span>-->
                <!--                    <span v-else>€ {{ n.priceEn }} / Ticket</span>-->
                <!--                  </div>-->
                <!--                  <div class="red ml20">-->
                <!--                    <span v-if="language == 0">剩余票数:{{ n.leftNum }}</span>-->
                <!--                    <span v-else>{{ n.leftNum }} sheet remaining </span>-->
                <!--                  </div>-->
                <!--                -->
                <!--                </el-form-item>-->
                <!--                -->
                <div v-if="needPersonNum>0" class="fakeFormItem">
                  <label v-if="language == 0">需填写{{ needPersonNum }}位游客</label>
                  <label v-else>Need {{ needPersonNum }} visitors</label>
                  <div>
                    <label v-show="needPersonNum > hasPersonNum && language==0" class="text-warning">
                      还需填写{{ needPersonNum - hasPersonNum }}位游客
                    </label>
                  </div>
                </div>
                <div v-for="(n,i) in gateList" :key="i">
                  <div v-for="(p,j) in n.personArr" :key="j" class="fakeFormItem personIt">
                    <label>
                      <!--                      <el-icon @click="delPerson(n,j)">-->
                      <!--                        <Remove />-->
                      <!--                      </el-icon>-->
                      {{ n.name }}{{ j + 1 }}
                    </label>
                    <div v-if="p.name" class="mation">
                      <div>{{ p.name }}</div>
                      <span v-if="p.idcType==0">{{ language == 0 ? '身份证' : 'ID number' }}</span>
                      <span v-if="p.idcType==1">{{ language == 0 ? '护照' : 'Passport' }}</span>
                      <span v-if="p.idcType==2">{{ language == 0 ? '其他' : 'Other' }}</span>
                      ：{{ p.idCard }}
                    </div>
                    <el-icon color="#453DEA" @click="showAddPerson(n, j,p)">
                      <Edit />
                    </el-icon>
                  </div>
                </div>
                
                <el-form-item :label="language==0?'联系人':'Contact'" prop="contacts">
                  <el-input v-model="form.contacts" />
                </el-form-item>
                <el-form-item :label="language==0?'联系电话':'Contact phone'" prop="phone" required>
                  <el-input v-model="form.phone" />
                </el-form-item>
              
              </el-form>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
            <div class="border-rr mt20 pd20 ccitemBox">
              
              <div v-for="(c, index) in gateList" v-show="c.count>0" :key="index" class="ccitem">
                {{ c.name }}
                <span v-if="language==0">
                  {{ c.count }} * {{ '¥' }}{{ c.price }}
                </span>
                <span v-else>{{ c.count }} * {{ '€' }} {{ c.priceEn }}
                </span>
              </div>
              
              <label>{{ language == 0 ? '共计' : 'Total' }}
                <span class="fr bigMoney">
                  {{ language == 0 ? '¥' : '€' }} {{ money }}
                </span>
              </label>
            
            </div>
          </el-col>
        </el-row>
      </el-card>
      
      <el-card class="mt30">
        <el-row align="middle" justify="space-between">
          <el-col :span="12">
            <label>{{ language == 0 ? '共计金额' : 'Total' }}：
              <span class=" text-warning">  {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{
                money
              }}</span></span>
            </label>
          </el-col>
          <el-col :span="12" class="text-right">
            <el-button class=" w200px" round size="large" type="" @click="handleGo">
              {{ language == 0 ? '上一页' : 'Back' }}
            </el-button>
            <el-button class="btn-lineG w200px" round size="large" type="primary" @click="submit">
              {{ language == 0 ? '确认付款' : 'Book Now' }}
            </el-button>
          </el-col>
        </el-row>
      </el-card>
      <div style="height: 60px;" />
    </div>
    
    <choose-person ref="choosePersonRef" @add-person="addPerson" />
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { useStorage } from '@vueuse/core/index'
import {
  getBaseInfoByActiveId,
  getGateListByLasId,
  getScenicById,
  submitOrderScenic
} from '@/apiPc/booking'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'
import _ from 'lodash'
import ChoosePerson from './component/choosePerson.vue'

const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const loading = ref(false)
const needPersonNum = ref(0)
const hasPersonNum = ref(0)
const lform = ref({})
const scenicItem = ref({})
const form = ref({
  // contacts: user?.nickName || '',
  contacts: '',
  phone: user?.phonenumber || '',
  touristList: []
})
const rzRange = ref('')
const gateList = ref([])
const money = ref(0)
const choosePersonRef = ref([])
const ticketList = ref([])

const rules = ref({
  phone: {
    required: true,
    message: language.value == 0 ? '请输入联系电话' : 'Please enter a contact number',
    trigger: 'blur'
  },
  contacts: {
    required: true,
    message: language.value == 0 ? '请输入联人' : 'Please enter a contact',
    trigger: 'blur'
  }
})


onMounted(() => {
  money.value = 0
  rzRange.value = route.params.start
  gateList.value = ticketList.value = JSON.parse(decodeURIComponent(route.query.item))
  console.log(gateList.value)
  getScenic()
  countMoney()
  checkPersonNum()
  // changeNum()
  // initDays()
  // getGate()
})

function initDays() {
  // 可定日期范围
  getBaseInfoByActiveId(route.params.cptId).then(res => {
    lform.value = res.data
  })
}

function getTotal() {
  // get
}


function getScenic() {
  getScenicById(route.params.scenicId).then(res => {
    scenicItem.value = res.data
  })
}

function getGate() {
  gateList.value = []
  loading.value = true
  getGateListByLasId({
    lasId: route.query.lasId,
    scenicDate: rzRange.value
  }).then(res => {
    gateList.value = res.data
    _.each(gateList.value, item => {
      item.count = 0
      item.leftNum = item.num - item.orderCount
      item.personArr = []
    })
  }).finally(() => {
    loading.value = false
  })
}

function disabledDateRZ(date) {
  // 判读今天大与form.value.travelStart
  if (lform.value.scenicStart) {
    const today = dayjs().format('YYYY-MM-DD')
    if (lform.value.scenicStart < today) {
      return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(lform.value.scenicEnd).valueOf()))
    } else {
      return !((date.getTime() >= dayjs(lform.value.scenicStart).valueOf()) && (date.getTime() <= dayjs(lform.value.scenicEnd).valueOf()))
    }
  }
  // return true
}

function dateChange() {
  getGate()
}

const checkPersonNum = () => {
  needPersonNum.value = 0
  hasPersonNum.value = 0
  _.each(gateList.value, item => {
    needPersonNum.value += item.count
    _.each(item.personArr, person => {
      console.log(person)
      if (person.customerId) {
        hasPersonNum.value++
      }
    })
  })
}

function getCountInfo() {
  // get
}


function changeNum(e) {
  checkPersonNum()
  
  if (e.personArr.length < e.count) {
    e.personArr.push({
      customerId: '',
      name: '',
      idcType: '',
      idCard: ''
    })
  } else if (e.personArr.length > e.count) {
    e.personArr.splice(e.count)
  }
  
  countMoney()
}

const showAddPerson = (item, index, person) => {
  const customerIds = []
  _.each(gateList.value, (g) => {
    _.each(g.personArr, (p) => {
      if (p.customerId && p.customerId != person.customerId) {
        customerIds.push(p.customerId)
      }
    })
  })
  
  
  choosePersonRef.value.open({
    gateId: item.id,
    gateType: item.gateType,
    personIndex: index,
    customerId: person.customerId,
    hasCustomerIds: customerIds.join(',')
  })
}
const addPerson = (item) => {
  const gate = _.find(gateList.value, (g) => g.id == item.gateId)
  gate.personArr[item.personIndex] = {
    customerId: item.customerId,
    name: item.name,
    idcType: item.idcType,
    idCard: item.idCard
  }
  
  checkPersonNum()
}
const delPerson = (item, index) => {
  item.personArr.splice(index, 1)
  item.count--
  
  checkPersonNum()
  countMoney()
}

function countMoney() {
  money.value = 0
  _.each(gateList.value, (g) => {
    if (g.count > 0) {
      money.value += g.count * (language.value == 0 ? g.price : g.priceEn)
    }
  })
  money.value = (money.value).toFixed(2)
}

function submit() {
  if (!user) {
    useUserStore().setReLogin()
    return
  }
  if (!form.value.contacts) {
    ElMessage.warning(language.value == 0 ? '请填写联系人' : 'Please fill in the contact person.')
    return
  }
  if (!form.value.phone) {
    ElMessage.warning(language.value == 0 ? '请填写手机号' : 'Please fill in the phone number')
    return
  }
  if (needPersonNum.value != hasPersonNum.value) {
    ElMessage.warning(language.value == 0 ? '出行人数与票数不匹配' : 'The number of people travelling does not match the number of rooms')
    return
  }
  
  // 提交确认
  ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
    confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
    cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
    type: 'warning'
  }).then(() => {
    form.value.activeId = route.params.cptId
    form.value.asId = route.query.lasId
    form.value.orderName = scenicItem.value.name
    form.value.dcStart = rzRange.value
    
    const personArr = []
    _.each(gateList.value, (item) => {
      if (item.count > 0) {
        _.each(item.personArr, (person) => {
          personArr.push({
            activeId: route.params.cptId,
            asId: item.lasId,
            asgId: item.lasgId,
            asgcId: item.id,
            gateName: item.name,
            gateType: item.gateType,
            price: language.value == 0 ? item.price : item.priceEn,
            paymentType: language.value == 0 ? '1' : '3',
            customerId: person.customerId,
            name: person.name,
            idcType: person.idcType,
            idCard: person.idCard
          })
        })
      }
    })
    form.value.touristList = personArr
    
    submitOrderScenic(form.value).then(res => {
      if (res.data) {
        if (res.data.orderId == -400) {
          ElMessage.warning(language.value == 0 ? '剩余票数不足' : 'The remaining number of rooms is insufficient')
        } else if (res.data.orderId == -300) {
          ElMessage.warning(language.value == 0 ? '提交失败,请稍后再试' : 'Submission failed, please try again later')
        } else {
          // 去付钱
          router.push({
            name: 'bookingPay',
            query: {
              orderId: res.data.orderId,
              money: res.data.total,
              type: 'travel'
            }
          })
        }
      }
    })
  })
}

function handleGo() {
  router.go(-1)
}

</script>

<style lang="scss" scoped>
.bigMoney {
  font-size: 36px !important;
  font-family: 'DIN Alternate';
  font-weight: bold;
}

.bg-lineg {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
}

.leftboderTT {
  font-weight: 600;
  font-size: 16px;
  color: #453DEA;
}

.border-rr {
  border-radius: 5px;
  border: 1px solid #DCDFE6;
}

.room {
  font-weight: 400;
  font-size: 14px;
  color: #929AA0;
}

.ccitemBox {
  overflow: auto;
  
  label {
    margin: 10px 0;
    display: block;
    min-height: 30px;
    
    span {
      color: #FF8124;
      font-family: DIN Alternate;
      font-size: 24px;
    }
  }
}

.ccitem {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #666;
  margin: 5px 0 10px;
  
  label {
    font-size: 16px;
    color: #000;
  }
  
  span {
    font-size: 13px;
  }
}

.red {
  color: #FF8124;
}

.fakeFormItem {
  display: flex;
  padding: 10px 0;
  
  label {
    height: 32px;
    font-size: var(--el-form-label-font-size);
    width: 120px;
    color: var(--el-text-color-regular);
    padding: 0 12px 0 0;
    line-height: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  }
}

.tip {
  font-size: 14px;
  color: #666;
  padding: 0 10px;
}

.personIt {
  display: flex;
  align-items: center;
  
  .mation {
    width: 200px;
    font-size: 12px;
    
    div {
      font-size: 14px;
    }
  }
}

.father {
  position: relative;
  
}

.son {
  position: absolute;
  left: 10px;
  cursor: pointer;
}

</style>