<template>
  <div class="column full-height">
    <div class="col">
      <div class="text-right" v-if="$q.platform.is.desktop">
        <q-btn
          color="primary"
          icon="refresh"
          label="全部重選"
          @click="resetHandler"
          flat
        />
      </div>
      <template v-if="p">
        <div class="text-grey-6 f12 q-my-md">選擇類型</div>
        <div class="row wrap">
          <div v-for="(x,i) in p.roomOptions" :key="i">
            <q-chip size="14px" clickable @click="handleSelect(x)" 
            :text-color="selectedObj&&selectedObj.id==x.id?'white':'dark'" 
            :color="selectedObj&&selectedObj.id==x.id?'primary':'grey-3'" square>{{getMealType(x.meals)}}</q-chip>
          </div>
        </div>
      </template>
      <div class="text-grey-6 f12 q-my-md">住宿日期</div>
      <div v-for="(x,index) in roomGroup" :key="index">
        <div v-for="(y,i) in x.rateGroup" :key="i">
          <div class="row items-end">
            <div class="col" :class="{'column':$q.platform.is.mobile}">
              <div>
                <span class="text-subtitle2 text-weight-bold">{{ selectedObj?getMealType(selectedObj.meals):''}}</span>
                <span class="text-grey-6 f12 q-ml-sm">{{y.stayDate}}</span></span>
              </div>
              <div v-if="$q.platform.is.mobile">
                <span class="text-grey-7 product-price" style="font-size: 13px">
                  <template v-if="y.perAdultRateBySetCurrency">
                     CNY{{y.perAdultRateBySetCurrency}}/人
                  </template>
                  <template v-else="y.totalPerRoomRateBySetCurrency">
                     CNY{{y.totalPerRoomRateBySetCurrency}}/晚
                  </template>
                  <!-- CNY {{ selectedObj?getPrice2(selectedObj.chargeableRateInfoPerPersonForANightBySetCurrency):0 }} /人均 -->
                </span>
              </div>
            </div>
            <div class="row items-end">
              <span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
                <template v-if="y.perAdultRateBySetCurrency">
                  CNY{{y.perAdultRateBySetCurrency}}/人
                </template>
                <template v-else="y.totalPerRoomRateBySetCurrency">
                  CNY{{y.totalPerRoomRateBySetCurrency}}/晚
                </template>
                <!-- CNY {{selectedObj? getPrice2(selectedObj.chargeableRateInfoPerPersonForANightBySetCurrency):0 }} /人均 -->
              </span>
              <!-- <q-input
                style="width: 150px"
                @input="changePeople"
                v-model="chosenObj.Count"
                class="col"
                :class="{
                  'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
                }"
                mask="#"
                reverse-fill-mask
                dense
                standout
                readonly
              >
                <template v-slot:prepend>
                  <q-btn
                    color="primary"
                    size="sm"
                    class="q-px-none"
                    flat
                    icon="remove"
                    @click="addPeople('Count', -1)"
                  />
                </template>
                <template v-slot:append>
                  <q-btn
                    color="primary"
                    size="sm"
                    class="q-px-none"
                    flat
                    icon="add"
                    @click="addPeople('Count', 1)"
                  />
                </template>
              </q-input> -->
            </div>
          </div>
        </div>
      </div>
      
      <!-- <div class="text-grey-6 f12 q-my-md">選擇數量</div>
      <div class="row items-end">
        <div class="col" :class="{'column':$q.platform.is.mobile}">
          <div>
            <span class="text-subtitle2 text-weight-bold">{{ selectedObj?getMealType(selectedObj.meals):''}}</span>
            <span class="text-grey-6 f12 q-ml-sm"></span></span>
          </div>
          <div v-if="$q.platform.is.mobile">
            <span class="text-grey-7 product-price" style="font-size: 13px">
              CNY {{ selectedObj?getPrice2(selectedObj.chargeableRateInfoPerPersonForANightBySetCurrency):0 }} /人均
            </span>
          </div>
        </div>
        <div class="row items-end">
          <span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
            CNY {{selectedObj? getPrice2(selectedObj.chargeableRateInfoPerPersonForANightBySetCurrency):0 }} /人均
          </span>
          <q-input
            style="width: 150px"
            @input="changePeople"
            v-model="chosenObj.Count"
            class="col"
            :class="{
              'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
            }"
            mask="#"
            reverse-fill-mask
            dense
            standout
            readonly
          >
            <template v-slot:prepend>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="remove"
                @click="addPeople('Count', -1)"
              />
            </template>
            <template v-slot:append>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="add"
                @click="addPeople('Count', 1)"
              />
            </template>
          </q-input>
        </div>
      </div> -->
    </div>
    <div class="q-mt-md q-pt-md" style="border-top: 1px dashed #eee">
      <div class="row items-center">
        <span class="text-subtitle2 text-grey-6 col">總金額</span>
        <span class="text-h6 text-primary product-price">CNY {{ moneyFormat(sumPrice,0) }}</span>
      </div>
      <div class="q-mt-md text-right"
      :class="{'row wrap justify-end items-start':$q.platform.is.mobile}">
        <span :class="{'col-12 q-mb-sm':$q.platform.is.mobile}">
        <span class="f12 text-negative" v-if="!p" 
        :class="{'q-mr-lg':$q.platform.is.desktop}">
          {{$q.platform.is.mobile?'請選擇上面的房間類型':'請選擇左側的房間類型'}} 
        </span>
        <span class="f12 text-negative" 
        :class="{'q-mr-lg':$q.platform.is.desktop}"
        v-if="!selectedObj&&p" >
          {{`請選擇上面的類型`}} 
        </span>
        </span>
        <q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" 
        :disable="sumPrice==0"
        @click="goOrderHandler"/>
        
      </div>
    </div>
  </div>
</template>

<script>
import { date } from "quasar";
export default {
  props: ["SimilarList","msg","price","JapanIncrease","liveNvm"],
  watch: {
    price: {
      handler(n, o) {
        this.p = n;
        this.p.roomOptions.forEach(x => {
          if(this.selectedObj&&this.getMealType(x.meals)==this.getMealType(this.selectedObj.meals)){
            this.selectedObj = x
          }
        });
        this.calcMoney()
      },
      deep: true,
      immediate: false
    },
    JapanIncrease: {
      handler(n, o) {
        this.JapanIncrease = n;
        
      },
      deep: true,
      immediate: true
    },
  },
  data() {
    return {
      p: null,
      chosenObj: null,
      sumPrice:0,
      selectedObj: null,
      roomGroup: null
    };
  },
  created() {
    this.initModel();
  },
  methods: {
    goOrderHandler(){
      let order = {
        msg: this.msg,
        // hotelId: this.msg.hotelId,
        // arrivalDate: this.msg.arrivalDate,
        // departureDate: this.msg.departureDate,
        // roomGroup: this.msg.searchroomGroup,
        liveNvm: this.liveNvm,
        id: this.p.id,
        selectedObjId: this.selectedObj.id,
        roomOptionCd: this.selectedObj.roomOptionCd,
        Count: this.chosenObj.Count,
        sumPrice: this.sumPrice
      }
      let key = this.$md5(JSON.stringify(order))
      let pickuporderHotal = localStorage.getItem('pickuporderHotal')
      pickuporderHotal = pickuporderHotal?JSON.parse(pickuporderHotal):[]
      pickuporderHotal.push({
        key,
        order
      })
      localStorage.setItem("pickuporderHotal",JSON.stringify(pickuporderHotal))
      this.CommonJump('/HotalForm/'+key, {});
    },
    handleSelect(item){
      this.selectedObj = item
      this.sumPrice = 0
      setTimeout(()=>{
        this.getData()
        // this.calcMoney()
      },100)
    },
    getData() {
      let msg = JSON.parse(JSON.stringify(this.msg))
      msg.roomOptionCd = this.selectedObj.roomOptionCd
      this.$q.loading.show();
      this.apipost(
        "dmc_post_Get_GetJAPAN_RoomsList",
        msg,
        (r) => {
          this.$q.loading.hide();
          if (r.data.resultCode == 1) {
            let rateGrouoLen = 0;
            if(Object.prototype.toString.call(r.data.data.roomGroup) == '[object Object]'){
                let arr = [];
                arr.push(r.data.data.roomGroup);
                this.roomGroup=arr;
            }
            this.roomGroup.forEach(x=>{
                    if(Object.prototype.toString.call(x.rateGroup) == '[object Object]'){
                        let arr = [];
                        arr.push(x.rateGroup);
                        x.rateGroup= arr;
                    }
                    let tt = 0;
                    let tt2 = 0;
                    let AdultTotalPrice = 0;
                    let childToTalPrice = 0;
                    let AdultCount = 0;
                    let childCount = 0;

                    let AdultJapanPrice = 0;
                    let ChildJapanPrice = 0;
                    let AdultJapanCount = 0;
                    let childJapanCount = 0;
                    
                    //原始成人
                    let oldAount=0;
                    let childAount=0;
                    let oldAuditPrice=0;
                    let oldChildPrice=0;
                    // this.TotalChildCount+=x.roomChildCount*x.rateGroup.length;

                    rateGrouoLen+= x.rateGroup.length;
                    // this.chekedChildCount = this.numberOfChildren*rateGrouoLen;
                    //无价格 只有房间价格
                    this.sumPrice = 0
                    let onlyRoomPrice=0;
                    let onlyJanpnase=0;
                    x.rateGroup.forEach(z=>{
                        if(z.perAdultRateBySetCurrency){
                            z.oldAuditPrice = z.perAdultRateBySetCurrency;
                            z.oldchildPrice = z.perChildRateBySetCurrency;

                            z.perAdultRateBySetCurrency = Math.ceil(z.perAdultRateBySetCurrency/r.data.data.JapanIncrease);
                            z.perChildRateBySetCurrency = Math.ceil(z.perChildRateBySetCurrency/r.data.data.JapanIncrease);
                            if(x.roomAdultCount>0){
                                AdultTotalPrice+=parseFloat(z.perAdultRateBySetCurrency);
                                oldAuditPrice+=parseFloat(z.oldAuditPrice);

                                AdultJapanPrice+=parseFloat(z.perAdultRate);

                            }
                            if(x.roomChildCount>0){
                                childToTalPrice+=parseFloat(z.perChildRateBySetCurrency);
                                oldChildPrice+=parseFloat(z.oldchildPrice);

                                ChildJapanPrice+=parseFloat(z.perChildRate);
                            }
                        }
                        if(z.totalPerRoomRateBySetCurrency){
                            z.totalPerRoomRateBySetCurrency = Math.ceil(z.totalPerRoomRateBySetCurrency/r.data.data.JapanIncrease);

                            onlyRoomPrice+=parseFloat(z.totalPerRoomRateBySetCurrency);
                            onlyJanpnase+=parseFloat(z.totalPerRoomRate);
                        }
                        
                    })
                    AdultCount+=AdultTotalPrice*x.roomAdultCount;
                    childCount+=childToTalPrice*x.roomChildCount;
                    // AdultCount+=AdultTotalPrice;
                    // childCount+=childToTalPrice;
                    oldAount+=oldAuditPrice;
                    childAount+=childAount;
                    // this.parameters.totalChargeableRateInfo += parseFloat(AdultCount+childCount+onlyRoomPrice);
                    // this.parameters.OldTotalPrice+=parseFloat(oldAount+childAount+onlyRoomPrice);
                    AdultJapanCount+=AdultJapanPrice*x.roomAdultCount;
                    childJapanCount+=ChildJapanPrice*x.roomChildCount;
                    // this.SettlementPrice=this.parameters.totalChargeableRateInfo;
                    // this.SettlementPrice=this.parameters.totalChargeableRateInfo;

                    // let price=this.parameters.totalChargeableRateInfo;
                    
                    this.sumPrice += parseFloat(AdultJapanCount+childJapanCount+onlyJanpnase);
                  })
                
          }
        })
    },
    initModel() {
      this.sumPrice=0
      this.chosenObj = {
        startDate: "",
        Count: 1,
        remark: "",
      };
    },
    resetHandler() {
      this.selectedObj = null
      setTimeout(()=>{
        this.p = null;
        this.initModel()
      },100)
      this.$emit("reset");
    },
    changePeople(val) {},
    addPeople(m, i, isDf = false) {
      this.chosenObj[m] = parseInt(this.chosenObj[m]) + i;
      if(m!='Count'){
        this.chosenObj[m] = this.chosenObj[m] < 0 ? 0 : this.chosenObj[m]++;
      }else{
        this.chosenObj[m] = this.chosenObj[m] < 1 ? 1 : this.chosenObj[m]++;
      }
      this.calcMoney()
    },
    calcMoney() {
      if (!this.selectedObj) return;
      let money = this.getPrice2(this.selectedObj.chargeableRateInfoPerPersonForANightBySetCurrency) * this.chosenObj.Count;
      this.sumPrice = money;
    },
    //获取餐
    getMealType(meals) {
      if (meals != "") {
        let mealType = meals.split(",");
        if (mealType[0] == 0 && mealType[2] == 0) {
          return "无餐";
        }
        if (mealType[0] == 1 && mealType[2] == 1) {
          return "含早晚餐";
        }
        if (mealType[0] == 1 && mealType[2] == 0) {
          return "含早餐";
        }
        if (mealType[0] == 0 && mealType[2] == 1) {
          return "含晚餐";
        }
      }
    },
    //获取价格
    getPrice(price) {
      return Math.ceil(price / this.JapanIncrease)*(this.auditNum+this.childNum)*this.DateDiff(this.SimilarMsg.arrivalDate,this.SimilarMsg.departureDate);
    },
    getPrice2(price){
        return Math.ceil(price / this.JapanIncrease)
    },
  
  },
};
</script>

<style></style>
