<template>
  <div>
    <div class="box">
      <el-card :body-style="{ padding: '0px' }" class="mt20">
        <template #header>
          <div class="bg-lineg uppercase">{{
            language == 0 ? '车辆预约下单' : 'TRANSPORTATION RESERVATION order'
          }}
          </div>
        </template>
        <el-row :gutter="20" class="pd20">
          <el-col :lg="14" :md="14" :xl="14" :xs="24" style="margin-bottom: 20px;">
            <div class="border-info">
              <div class="flex aic">
                <h3 class="esp">{{ item.checkIn }}</h3>
                <img class="w40px mlr20 " src="@/assets/booking/wf.png" style="height: 40px;">
                <h3 class="esp">{{ item.checkOut }}</h3>
              </div>
            </div>
            
            <div class="leftboderTT">
              {{ language == 0 ? '预约信息' : 'Reservation information' }}
            </div>
            <div class="border-rr mt20 pd20">
              <el-form ref="formRef" :label-width="120" :model="form" :rules="rules">
                <el-form-item :label="language==0?'人数':'Person Count'" prop="pickUpBo.count">
                  <el-input-number v-model="form.pickUpBo.count" type="text" @change="changecarNum" />
                </el-form-item>
                <el-form-item :label="language==0?'用车日期':'Date'" prop="date1">
                  <el-date-picker
                    v-model="form.date1"
                    :disabled-date="disabledDate"
                    :placeholder="language==0?'选择日期':'Select date'"
                    format="YYYY-MM-DD" type="date"
                    value-format="YYYY-MM-DD"
                    @focus="handelTime"
                  />
                </el-form-item>
                <el-form-item :label="language==0?'用车时间':'Time'" prop="lvcId">
                  <!--                  <el-time-picker v-model="revTime1" format="HH:mm" value-format="HH:mm" @change="bindTimeChange" />-->
                  
                  <el-select v-model="form.lvcId">
                    <el-option v-for="v in timeList" :key="v.id" :label="`${v.nameStart}~${v.nameEnd}`" :value="v.id" />
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-for="(v,i) in form.list" :key="i" :label="`${language==0?`乘坐人${i+1}`:`Contacts${i+1}`}`"
                  :prop="`list.${i}.name`"
                  :rules="rules.name"
                >
                  <el-input v-model="v.name" type="text" />
                </el-form-item>
                <el-form-item :label="language==0?'联系人':'Contacts'" prop="pickUpBo.contacts">
                  <el-input v-model="form.pickUpBo.contacts" type="text" />
                </el-form-item>
                <el-form-item :label="language==0?'联系电话':'Phone'" prop="pickUpBo.phone">
                  <el-input v-model="form.pickUpBo.phone" type="text" />
                </el-form-item>
                <el-form-item :label="language==0?'航班/火车班次:':'Flight/Train No'" prop="pickUpBo.no">
                  <el-input v-model="form.pickUpBo.no" type="text" />
                </el-form-item>
                <!--                <el-form-item :label="language==0?'接机/接站地点':'Pick up/Drop off Address'" required>-->
                <!--                  <el-input v-model="form.pickUpBo.noAddress" type="text" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item :label="language==0?'送达地点':'Delivery Address'" required>-->
                <!--                  <el-input v-model="form.pickUpBo.deliveryAddress" type="text" />-->
                <!--                </el-form-item>-->
                <el-form-item :label="language==0?'备注':'Remarks'">
                  <el-input v-model="form.pickUpBo.remarks" rows="3" type="textarea" />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :lg="10" :md="10" :xl="10" :xs="24">
            <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
            <div class="border-rr mt20 pd20 ccitemBox">
              <label> {{ language == 0 ? '单价' : 'Price' }}
                <span class="fr">{{ language == 0 ? '¥' : '€' }}
                  {{ language == 0 ? item.upPrice : item.upPriceEn }}
                </span>
              </label>
              <div class="ccitem">
                <span>
                  {{ form.pickUpBo.count }} *{{ language == 0 ? '¥' : '€' }}
                  {{ language == 0 ? item.upPrice : item.upPriceEn }}
                </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
              :disabled="money<=0" :loading="payLoading" class="btn-lineG w200px" round type="primary"
              @click="submit"
            >
              {{ language == 0 ? '确认付款' : 'Pay' }}
            </el-button>
          </el-col>
        </el-row>
      </el-card>
      <div style="height: 60px;" />
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted, getCurrentInstance } from 'vue'
import { useStorage } from '@vueuse/core/index'
import { getBaseInfoByActiveId, submitOrderCar, vehicleConfigList } from '@/apiPc/booking'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'

const { proxy } = getCurrentInstance()
const payLoading = ref(false)
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const item = ref({})
const revTime1 = ref('')
const form = ref({
  pickUpBo: {
    count: 1
  },
  list: [{}]
})

const money = ref(0)
const rules = ref({
  'pickUpBo.count': {
    required: true,
    message: language.value == 0 ? '请输入人数' : 'Please enter the number of people',
    trigger: 'blur'
  },
  'pickUpBo.revTime': {
    required: true,
    message: language.value == 0 ? '请选择时间' : 'Please select time',
    trigger: 'blur'
  },
  'pickUpBo.contacts': {
    required: true,
    message: language.value == 0 ? '请输入联系人' : 'Please enter contacts',
    trigger: 'blur'
  },
  'pickUpBo.phone': {
    required: true,
    message: language.value == 0 ? '请输入联系电话' : 'Please enter contact number',
    trigger: 'blur'
  },
  'pickUpBo.no': {
    required: true,
    message: language.value == 0 ? '请输入航班号' : 'Please enter flight number',
    trigger: 'blur'
  },
  name: {
    required: true,
    message: language.value == 0 ? '请输入姓名' : 'Please enter name',
    trigger: 'blur'
  },
  date1: {
    required: true,
    message: language.value == 0 ? '请选择日期' : 'Please select date',
    trigger: 'blur'
  },
  lvcId: {
    required: true,
    message: language.value == 0 ? '请选择时间' : 'Please select time ',
    trigger: 'blur'
  }
})
const lform = ref({})
const timeList = ref([])

onMounted(() => {
  item.value = JSON.parse(decodeURIComponent(route.query.item))
  console.log(item.value)
  money.value = 0
  changecarNum()
  initDays()
  handleVehicleConfigList()
})

function changecarNum() {
  const num = form.value.pickUpBo.count
  money.value = (num * (language.value == 0 ? item.value.upPrice : item.value.upPriceEn)).toFixed(2)
  
  if (num) {
    const arr = [...new Array(num).fill({})]
    form.value.list = JSON.parse(JSON.stringify(arr))
  }
}

async function handleVehicleConfigList() {
  const res = await vehicleConfigList({ lavId: item.value.id })
  timeList.value = res.rows
}

function initDays() {
  getBaseInfoByActiveId(route.params.cptId).then(res => {
    lform.value = res.data
    
    // form.value.date1 = dayjs(lform.value.carStart).format('YYYY-MM-DD')
  }).catch(err => {
    console.log(err)
  })
}

function handelTime() {
  if (!form.value.date1) form.value.date1 = dayjs(lform.value.carStart).format('YYYY-MM-DD')
}

function disabledDate(date) {
  if (lform.value.carStart) {
    return (date.getTime() < dayjs(lform.value.carStart).valueOf()) || (date.getTime() > dayjs(lform.value.carEnd).valueOf())
  }
  return true
}

async function submit() {
  await proxy.$refs['formRef'].validate()
  if (!user) {
    useUserStore().setReLogin()
    return
  }
  if (money.value <= 0) {
    await proxy.$modal.msgError(language.value == 0 ? '请添加人数' : 'Please add the number of people')
    return
  }
  // 提交确认
  await proxy.$modal.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?')
  await pushFrom()
  // await ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
  //   confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
  //   cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
  //   type: 'warning'
  // }).then(() => {
  //   pushFrom()
  // })
}

function pushFrom() {
  payLoading.value = true
  const checkTime = timeList.value.find(v => v.id == form.value.lvcId)
  // const name = form.value.list.map(v => v.name)?.toString()
  const obj = {
    pickUpBo: {
      revTime: form.value.date1 + ' ' + revTime1.value,
      contacts: form.value.pickUpBo.contacts,
      phone: form.value.pickUpBo.phone,
      count: form.value.pickUpBo.count,
      no: form.value.pickUpBo.no,
      remarks: form.value.remarks,
      lvcId: form.value.lvcId,
      lvcTimes: checkTime.nameStart + '-' + checkTime.nameEnd,
      customers: form.value.list
    },
    activeId: item.value.activityId,
    lavId: item.value.id,
    checkIn: item.value.checkIn,
    checkOut: item.value.checkOut
    
  }
  // form.value.pickUpBo.revTime = form.value.date1 + ' ' + revTime1.value
  // form.value.activeId = item.value.activityId
  // form.value.lavId = item.value.id
  // form.value.checkIn = item.value.checkIn
  // form.value.checkOut = item.value.checkOut
  
  submitOrderCar(obj).then(res => {
    payLoading.value = false
    if (res.data && res.data.total != -100) {
      router.push({
        name: 'bookingPay',
        query: {
          orderId: res.data.orderId,
          money: res.data.total,
          type: 'car'
        }
      })
    } else {
      ElMessage.warning(language.value == 0 ? '下单失败,稍后重试' : 'Order failed, please try again later')
    }
  })
}
</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;
    font-weight: 600;
    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;
}

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

.tagbox {
  margin: 15px 0;
  
  a {
    color: #AFB5B9;
    font-size: 12px;
  }
  
  span {
    border-radius: 13px;
    font-size: 12px;
    padding: 4px 10px;
    margin-right: 10px;
    font-weight: 400;
  }
  
  span:nth-child(4n) {
    background: rgba(50, 177, 108, 0.2);
    color: rgba(50, 177, 108, 1);
  }
  
  span:nth-child(4n+1) {
    background: rgba(243, 152, 0, 0.2);
    color: rgba(243, 152, 0, 1);
  }
  
  span:nth-child(4n+2) {
    background: rgba(0, 160, 233, 0.2);
    color: rgba(0, 160, 233, 1);
  }
  
  span:nth-child(4n+3) {
    background: rgba(247, 64, 166, 0.2);
    color: rgba(247, 64, 166, 1);
  }
}
</style>