<template>
  <div>
    <div class="box">
      <el-card :body-style="{ padding: '0px' }" class="mt20">
        <div slot="header">
          <div class="bg-lineg uppercase">{{
              language == 0 ? '车辆预约下单' : 'TRANSPORTATION RESERVATION order'
            }}
          </div>
        </div>
        <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 class="flex">
                <el-image :src="fillImgUrl(car.photos?.split(',')[0])" class="w150px br10 as16_9" fit="cover"/>
                <div class="ml20">
                  <div class="roomType">{{ car.carType }}</div>
                  <div class="tagbox">
                    <span class="tag">{{ car.carColor }}</span>
                    <span v-show="car.checkOut==1" class="tag">{{ language == 0 ? '可送车' : 'Can send car' }}</span>
                    <span v-show="car.checkIn==1" class="tag">{{ language == 0 ? '可接车' : 'Can pick up' }}</span>
                  </div>
                  <div class="room">
                    <span>{{ language == 0 ? '座位数' : 'Seats' }}: {{ car.carSeat }}</span>
                    <span> |  {{
                        language == 0 ? '运营时间' : 'Servers Time'
                      }}: {{ car.operStart }} ~ {{ car.operEnd }}</span>
                  </div>
                </div>
              </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?'车辆数量':'cars'" prop="num" required>
                  <el-input-number v-model="form.num" :min="1" @change="changecarNum"/>
                </el-form-item>
                <el-form-item :label="language==0?'是否接送':'use Type'" prop="useType" required>
                  <el-checkbox-group v-model="form.useType" @change="changeUseType">
                    <el-checkbox v-if="car.checkIn == 1" value="0">
                      {{ language == 0 ? '接站' : 'Pick up' }}
                    </el-checkbox>
                    <el-checkbox v-if="car.checkOut == 1" value="1">{{ language == 0 ? '送站' : 'Drop off' }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>

                <div v-show="form.useType?.indexOf('0')> -1">
                  <h3 class="afterLine">{{ language == 0 ? '接站信息' : 'Pick up information' }}</h3>
                  <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"/>
                    <!--                    :picker-options="pickerOptions"-->
                  </el-form-item>
                  <el-form-item :label="language==0?'用车时间':'Time'" required>
                    <el-time-picker
                      v-model="revTime1" :end="car.operEnd" :start="car.operStart"
                      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?'人数':'Person Count'" required>
                    <el-input-number v-model="form.pickUpBo.count" 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>
                </div>
                <div v-show="form.useType?.indexOf('1')> -1">
                  <h3 class="afterLine">{{ language == 0 ? '送站信息' : 'Drop off information' }}</h3>
                  <el-form-item :label="language==0?'用车日期':'Date'" required>
                    <el-date-picker v-model="date2" :disabled-date="disabledDate"
                                    :placeholder="language==0?'选择日期':'Select date'"
                                    format="YYYY-MM-DD" type="date"
                                    value-format="YYYY-MM-DD"/>
                    <!--                    :picker-options="pickerOptions"-->
                  </el-form-item>
                  <el-form-item :label="language==0?'用车时间':'Time'" required>
                    <el-time-picker
                      v-model="revTime2" :end="car.operEnd" :start="car.operStart"
                      format="HH:mm" value-format="HH:mm" @change="bindTimeChange2"
                    />
                  </el-form-item>
                  <el-form-item :label="language==0?'联系人':'Contacts'" required>
                    <el-input v-model="form.dropOffBo.contacts" type="text"/>
                  </el-form-item>
                  <el-form-item :label="language==0?'联系电话':'Phone'" required>
                    <el-input v-model="form.dropOffBo.phone" type="text"/>
                  </el-form-item>
                  <el-form-item label="人数" required>
                    <el-input v-model="form.dropOffBo.count" type="text"/>
                  </el-form-item>
                  <el-form-item label="送达地点" required>
                    <el-input v-model="form.dropOffBo.deliveryAddress" type="text"/>
                  </el-form-item>
                  <el-form-item :label="language==0?'备注':'Remarks'">
                    <el-input v-model="form.dropOffBo.remarks" rows="3" type="textarea"/>
                  </el-form-item>
                </div>
              </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 v-show="form.useType.indexOf('0')>-1"> {{ language == 0 ? '接站车辆费' : 'Room fee' }}
                <span class="fr">{{ language == 0 ? '¥' : '€' }}{{ form.pickUpBo.total }}</span>
              </label>
              <div v-show="form.useType.indexOf('0')>-1" class="ccitem">
                {{ car.name }}
                <span>{{ form.num }} *{{ language == 0 ? '¥' : '€' }}{{ car.inPrice }}</span>
              </div>
              <label v-show="form.useType.indexOf('1')>-1">{{ language == 0 ? '送站车辆费' : 'Extra bed fee' }}
                <span class="fr">{{ language == 0 ? '¥' : '€' }}{{ form.dropOffBo.total }}</span>
              </label>

              <div v-show="form.useType.indexOf('1')>-1" class="ccitem">
                {{ car.name }}
                <span>{{ form.num }}*{{ language == 0 ? '¥' : '€' }}{{ car.outPrice }}</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" 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>
  </div>
</template>

<script setup>
import {useRouter, useRoute} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useStorage} from "@vueuse/core/index";
import {checkResidueRoom, getBaseInfoByActiveId, newsSubmitOrderHotel, 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 car = ref({})
const revTime1 = ref('')
const revTime2 = ref('')
const date1 = ref('')
const date2 = ref('')
const form = ref({
  num: 1,
  pickUpBo: {
    carsList: [],
    total: 0
  },
  dropOffBo: {
    carsList: [],
    total: 0
  },
  useType: []
})
const rzRange = ref([])
const rzUserArr = ref([])
const money = ref(0)
const choseRooms = ref([])
const rules = ref({})
const lform = ref({})


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

function changeUseType(e) {
  console.log(form.value.useType)
  changecarNum()
  console.log(form.value)
}

function changecarNum(e) {
  var m1 = 0
  var m2 = 0
  if (form.value.useType.indexOf('0') > -1) {
    if (language.value == 0) {
      m1 = form.value.num * car.value.inPrice
    } else {
      m1 = form.value.num * car.value.inPriceEn
    }
  }
  if (form.value.useType.indexOf('1') > -1) {
    if (language.value == 0) {
      m2 = form.value.num * car.value.outPrice
    } else {
      m2 = form.value.num * car.value.outPriceEn

    }
  }
  form.value.pickUpBo.total = m1.toFixed(2)
  form.value.dropOffBo.total = m2.toFixed(2)
  console.log(form.value.num, m1, m2)
  money.value = (m1 + m2).toFixed(2)
}

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

function bindTimeChange2(e) {
  revTime2.value = e
}

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

function disabledDate(date) {
  // const today = dayjs().format('YYYY-MM-DD')
  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
  var obj = {
    avcId: car.value.id,
    num: form.value.num,
    price: car.value.inPrice,
    carSeat: car.value.carSeat,
    carColor: car.value.carColor,
    typeName: "接站",
    name: car.value.carType,
    checkIn: car.value.checkIn,
    checkOut: car.value.checkOut,
    total: (form.value.num * car.value.inPrice).toFixed(2)
  }
  var obj2 = {
    avcId: car.value.id,
    num: form.value.num,
    price: car.value.outPrice,
    carSeat: car.value.carSeat,
    carColor: car.value.carColor,
    typeName: "送站",
    name: car.value.carType,
    checkIn: car.value.checkIn,
    checkOut: car.value.checkOut,
    total: (form.value.num * car.value.outPrice).toFixed(2)
  }
  if (form.value.useType.indexOf('0') > -1) {
    form.value.pickUpBo.carsList.push(obj)
    form.value.pickUpBo.revTime = date1.value + ' ' + revTime1.value
  }
  if (form.value.useType.indexOf('1') > -1) {
    form.value.dropOffBo.carsList.push(obj2)
    form.value.dropOffBo.revTime = date2.value + ' ' + revTime2.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>