<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 :span="14">
            <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="language == 0 ?'120':'200'" :model="form" :rules="rules">
                <el-form-item :label="language==0?'人数':'Person Count'" required>
                  <el-input-number v-model="form.pickUpBo.count" type="text" @change="changecarNum" />
                </el-form-item>
                <el-form-item :label="language==0?'用车日期':'Date'" required>
                  <el-date-picker
                    v-model="date1" :disabled-date="disabledDate"
                    :placeholder="language==0?'选择日期':'Select date'"
                    format="YYYY-MM-DD" type="date"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
                <el-form-item :label="language==0?'用车时间':'Time'" required>
                  <el-time-picker v-model="revTime1" format="HH:mm" value-format="HH:mm" @change="bindTimeChange" />
                </el-form-item>
                <el-form-item :label="language==0?'联系人':'Contacts'" required>
                  <el-input v-model="form.pickUpBo.contacts" type="text" />
                </el-form-item>
                <el-form-item :label="language==0?'联系电话':'Phone'" required>
                  <el-input v-model="form.pickUpBo.phone" type="text" />
                </el-form-item>
                <el-form-item :label="language==0?'航班/火车班次:':'Flight/Train No'" required>
                  <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 :span="10">
            <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
              :loading="payLoading" :disabled="money<=0" 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, watch } from 'vue'
import { useStorage } from '@vueuse/core/index'
import { getBaseInfoByActiveId, submitOrderCar } from '@/apiPc/booking'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'

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 date1 = ref('')
const form = ref({
  pickUpBo: {
    count: 1
  }
})

const money = ref(0)
const rules = ref({})
const lform = ref({})


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

function changecarNum() {
  money.value = (form.value.pickUpBo.count * (language.value == 0 ? item.value.upPrice : item.value.upPriceEn)).toFixed(2)
}

function bindTimeChange(e) {
  revTime1.value = e
}

function initDays() {
  getBaseInfoByActiveId(route.params.cptId).then(res => {
    lform.value = res.data
  }).catch(err => {
    console.log(err)
  })
}

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

function submit() {
  if (!user) {
    useUserStore().setReLogin()
    return
  }
  if (money.value <= 0) {
    // ElMessage.error(language.value == 0 ? '请选择接站/送站' : 'Please select pickup/drop off')
    return
  }
  // 提交确认
  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
  form.value.pickUpBo.revTime = date1.value + ' ' + 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(form.value).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>