<template>
  <div>
    <div class="box">
      <el-card :body-style="{ padding: '0px' }" class="mt20">
        <div slot="header">
          <div class="bg-lineg">{{ language == 0 ? '旅游服务下单' : 'Hotel booking order' }}</div>
        </div>
        <!--        {{room}}-->
        <el-row class="pd20" :gutter="20">
          <el-col :span="14">
            <div class="border-info">
              <el-row class="hotel" align="middle" :gutter="20">
                <!--          <el-col :span="6">-->
                <!--            <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
                <!--          </el-col>-->
                <el-col :span="language == 0?16:24">
                  <h3 class="esp flex">{{ scenicItem?.name }}

                    <el-tag effect="dark" class="ml20">{{ scenicItem?.rank||0 }}A</el-tag>
                  </h3>
                  <div class="info">
                    <el-icon>
                      <Clock />
                    </el-icon>
                    <span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ scenicItem?.startTime }} ～ {{ scenicItem?.workTime }}</span>
                  </div>
                  <div class="info">
                    <el-icon>
                      <Phone />
                    </el-icon>
                    <span class="mr10">{{ language == 0 ? '联系方式' : 'Contact' }}：{{ scenicItem?.contact }}</span>
                  </div>
                  <div class="info esp">
                    <el-icon>
                      <MapLocation />
                    </el-icon>
                    <span>{{ 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" :model="form" :label-width="language == 0 ?'120':'160'" :rules="rules">
                <!--                :disabled-date="disabledDateRZ"-->
                <el-form-item :label="language==0?'选择日期':'Date'" required>
                  <el-date-picker
                    v-model="rzRange"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :disabled-date="disabledDateRZ"
                    :clearable="false"
                    @change="dateChange"
                  />

                  <div v-if="lform.scenicStart" class="tip">{{ language==0?'可订日期':'Available date' }}：{{ lform.scenicStart.slice(0, 10) }} ~ {{ lform.scenicEnd.slice(0, 10) }}</div>

                  <!--                    :picker-options="pickerOptions"-->
                </el-form-item>
                <el-form-item v-for="(n,i) in gateList" :key="i" :label="language==0? n.name:'Rooms'" prop="count">
                  <el-input-number v-model="n.count" :min="0" :max="n.leftNum" @change="changeNum(n)" />
                  <div class="red ml20">
                    <span v-if="language == 0">单价:{{ n.price }}</span>
                    <span v-else>{{ n.priceEn }}</span>
                  </div>
                  <div class="red ml20">
                    <span v-if="language == 0">剩余票数:{{ n.leftNum }}</span>
                    <span v-else>{{ n.leftNum }} Remaining rooms</span>
                  </div>
                </el-form-item>

                <div v-if="needPersonNum>0" class="fakeFormItem">
                  <label>需填写{{ needPersonNum }}位游客</label>
                  <div>
                    <label class="text-warning" v-show="needPersonNum > hasPersonNum">还需填写{{ 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>
                      身份证：{{ p.idCard }}
                    </div>
                    <el-icon @click="showAddPerson(n, j,p)"><Edit /></el-icon>
                  </div>
                </div>

                <el-form-item :label="language==0?'联系人':'Contact'" required prop="contacts">
                  <el-input v-model="form.contacts" />
                </el-form-item>
                <el-form-item :label="language==0?'联系手机':'Contact phone'" required prop="phone">
                  <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 justify="space-between" align="middle">
          <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 type="primary" class="btn-lineG w200px" size="large" round @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 || '',
  phone: user?.phonenumber || '',
  touristList: []
})
const rzRange = ref('')
const gateList = ref([])
const money = ref(0)
const choosePersonRef = ref([])
const rules = ref({
  phone: { required: true, message: language.value == 0 ? '请输入联系电话' : 'Please enter a contact number', trigger: 'blur' }
})

onMounted(() => {
  money.value = 0
  rzRange.value = route.params.start

  getScenic()
  initDays()
  getGate()
})
function initDays() {
  // 可定日期范围
  getBaseInfoByActiveId(route.params.cptId).then(res => {
    lform.value = res.data
  })
}
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 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.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.roomNum == -100) {
          ElMessage.warning(language.value == 0 ? '剩余票数不足' : 'The remaining number of rooms is insufficient')
        } else {
          // 去付钱
          router.push({
            name: 'bookingPay',
            query: {
              orderId: res.data.orderId,
              money: res.data.total,
              type: 'travel'
            }
          })
        }
      }
    })
  })
}

</script>

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