<template>
  <div>
    <div class="box">
      <el-card :body-style="{ padding: '0px' }" class="mt20">
        <div slot="header">
          <div class="bg-lineg">{{ language == 0 ? '餐饮预约下单' : 'Food booking order' }}</div>
        </div>
        <!--        {{room}}-->
        <el-row class="pd20" :gutter="20">
          <el-col :span="14">
            <div class="border-info">
              <h3>{{ restaurant.name }}</h3>
              <div class="room">
                <span>{{ restaurant.address }}</span>
              </div>
            </div>

            <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>
            <div class="border-rr mt20 pd20">

              <el-form :model="form" :label-width="language == 0 ?'100':'150'" :rules="rules" ref="formRef">
                <el-form-item :label="food.name" required prop="num">
                  <el-input-number v-model="form.num" :min="1"  @change="changeNum"/>
                </el-form-item>
                <el-form-item :label="language==0?'订餐周期':'Check-in date'" required>
                  <el-date-picker @change="getDaysBetween"
                                  v-model="rzRange"
                                  type="daterange" :disabled-date="disabledDate"
                                  :placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"
                                  value-format="YYYY-MM-DD"/>
                  <!--                    :picker-options="pickerOptions"-->
                </el-form-item>

                <el-form-item :label="language==0?'联系人':'Contacts'" required>
                  <el-input v-model="form.contacts"/>
                </el-form-item>
                <el-form-item :label="language==0?'联系电话':'Contact phone'" required>
                  <el-input v-model="form.phone"/>
                </el-form-item>
                <el-form-item :label="language==0?'送餐时间':'Delivery time'">
                  <div style="line-height: 36px;">{{food.psStart}} - {{food.psEnd}}</div>
                </el-form-item>
                <el-form-item :label="language==0?'配送地址':'Delivery address'">
                  <div style="line-height: 36px;">{{food.address}}</div>
                </el-form-item>
                <el-form-item :label="language==0?'说明':'Instructions'">
                  <div class="tip" v-if="language==0">
                    *如预订多天的餐饮，将分多天进行配送。<br/>
                    *每日送餐时间只配送当日预订的餐饮。
                  </div>
                  <div class="tip" v-else>1.If you have ordered food for multiple days, it will be delivered in multiple days.
                    <br/>
                    2.Only the meals ordered on the day of delivery will be delivered during the daily delivery time.
                  </div>
                </el-form-item>
                <el-form-item :label="language==0?'备注':'Remarks'">
                  <el-input type="textarea" rows="3" v-model="form.remarks"/>
                </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> {{food.name }}</label>
              <div class="ccitem" v-for="(c, index) in choseDays" :key="index">
                {{ c }}
                <span>{{ form.num }}*{{ language == 0 ? '¥' : '€' }}{{ language == 0 ?food.foodPrice:food.foodPriceEn }}</span>
              </div>

              <label>{{ language == 0 ? '共计' : 'Total' }}<span
                  class="fr bigMoney">{{ language == 0 ? '¥' : '€' }}{{ form.total }}</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">{{ form.total }}</span></span>
            </label>
          </el-col>
          <el-col :span="12" class="text-right">
            <el-button type="primary" size="large" class="btn-lineG w200px" @click="submit" round>{{  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, submitOrderFood} from "@/apiPc/booking"
import dayjs from 'dayjs'
import {ElMessage,ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user";
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const food = ref({})
const restaurant = ref({})
const canOrderStart = ref('')
const canOrderNum = ref(0)
const form = ref({
  num: 1,
  phone: user.phonenumber||'',
  total:0
})
const rzRange = ref([])
const rzUserArr = ref([])
const money = ref(0)
const choseDays = ref([])
const rules = ref({})
const lform = ref({})

let usedays = 0
onMounted(() => {
  food.value = JSON.parse(decodeURIComponent(route.query.food))
  form.value = food.value
  restaurant.value = JSON.parse(decodeURIComponent(route.query.restaurant))
  form.value.total = 0
  console.log(food.value,restaurant.value)
  initDays()
  const today = dayjs()
})
function initDays() {
  getBaseInfoByActiveId(route.params.cptId).then(res=>{
    lform.value = res.data
  }).catch(err=>{
    console.log(err)
  })
}

function disabledDate(date) {
  //判读今天大与form.value.foodStart
  if (lform.value.foodStart) {
    const today = dayjs().format('YYYY-MM-DD')
    if (lform.value.foodStart < today) {
      return !((date.getTime() >= dayjs(today).valueOf())&&(date.getTime() <= dayjs(lform.value.foodEnd).valueOf()))
    } else {
      return !((date.getTime() >= dayjs(lform.value.foodStart).valueOf())&&(date.getTime() <= dayjs(lform.value.foodEnd).valueOf()))
    }
  }
  return true
}
function changeNum() {
  let moneyAll = 0
  if(language.value == 0){
    moneyAll = food.value.foodPrice * form.value.num * usedays
  } else {
    moneyAll = food.value.foodPriceEn * form.value.num * usedays
  }
  form.value.total = moneyAll.toFixed(2)
}
function getDaysBetween(e) {
  var d1 = Date.parse(rzRange.value[0])
  var d2 = Date.parse(rzRange.value[1])
  if (d1 > d2) {
    usedays = 1
    return
  }
  if (d1 == d2) {
    usedays = 1
  } else {
    var days = (d2 - d1) / (1 * 24 * 60 * 60 * 1000);
    usedays = days + 1
  }

  changeNum()

  var startTime = getDate(rzRange.value[0]);
  var endTime = getDate(rzRange.value[1]);
  var dateArr = [];
  while ((endTime.getTime() - startTime.getTime()) > 0) {
    var year = startTime.getFullYear();
    var month = (startTime.getMonth() + 1).toString().length === 1 ? "0" + (parseInt(startTime.getMonth()
        .toString(), 10) + 1) : (startTime.getMonth() + 1);
    var day = startTime.getDate().toString().length === 1 ? "0" + startTime.getDate() : startTime.getDate();
    dateArr.push(year + "-" + month + "-" + day);
    startTime.setDate(startTime.getDate() + 1);
  }
  dateArr.push(rzRange.value[1])
  choseDays.value = dateArr;
}

function getDate(datestr) {
  var temp = datestr.split("-");
  if (temp[1] === '01') {
    temp[0] = parseInt(temp[0], 10) - 1;
    temp[1] = '12';
  } else {
    temp[1] = parseInt(temp[1], 10) - 1;
  }
  //new Date()的月份入参实际都是当前值-1
  var date = new Date(temp[0], temp[1], temp[2]);
  return date
}

function submit() {
  if(!user){
    useUserStore().setReLogin()
    return
  }
  if(rzRange.value.length==0){
    ElMessage.warning(language.value == 0 ? '请选择订餐时间' : 'Please select the meal time')
    return
  }
  if(!form.value.contacts){
    ElMessage.warning(language.value == 0 ? '请输入联系人' : 'Please enter the contact')
    return
  }
  if(!form.value.phone){
    ElMessage.warning(language.value == 0 ? '请输入手机号' : 'Please enter the phone number')
    return
  }
  if(rzRange.value.length>0){
    form.value.dcStart = rzRange.value[0]
    form.value.dcEnd = rzRange.value[1]
  }

  form.value.foodsList = []
  var obj = {
    arfId: food.value.id,
    name: food.value.name,
    categoryName: food.value.categoryName,
    category: food.value.category,
    num: form.value.num,
    price:food.value.foodPrice
  }
  form.value.foodsList.push(obj)
  form.value.activeId = restaurant.value.activityId
  form.value.larId = restaurant.value.id
  form.value.orderName=restaurant.value.name
  // 提交确认
  ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
    confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
    cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
    type: 'warning'
  }).then(() => {
    submitOrderFood(form.value).then(res => {
      if (res.data) {
        if (res.data.total == -100) {
          ElMessage.warning(language.value == 0 ? '挤爆了,请稍后下单' : 'Too many people, please order later')
        } else {
          //去付钱
          router.push({
            name: 'bookingPay',
            query: {
              orderId:res.data.orderId,
              money:res.data.total,
              type:'food'
            }
          })
        }
      } else {
        ElMessage.warning(language.value == 0 ? '挤爆了,请稍后下单' : 'Too many people, please order later')
      }
    })
  })
}

</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;
}
.tip{font-size: 14px;color: #666;padding: 0 10px;}
</style>