<template>
    <div>
      <div class="text-subtitle2 text-weight-bold">選擇房間類型、選項</div>
      <div class="text-grey-6 f12 q-my-md">請選擇出房間類型</div>
      <q-separator color="grey-2" class="q-my-md" />
      <div class="rounded-borders col" v-for="(item,index) in prices" :key="index"
      :class="{'max-width':$q.platform.is.mobile?'100vw':'auto'}">
        <div class="non-selectable row">
            <div class="q-pr-md cursor-pointer" @click="showImageHandler(item.roomImageURL,item.images)"
            :class="{'col-2':$q.platform.is.desktop,'col-5':$q.platform.is.mobile}"
            style="border-right: 1px solid #F5F5F5;">
              <div class="relative rounded-borders overflow-hidden column bg-grey-1"
              style="border: 1px solid #eee">
                <q-img :src="item.roomImageURL" 
                :ratio="16/9" style="width: 100%;"/>
                <div class="column q-pt-xs q-pb-sm q-px-sm">
                  <span class="fz15 text-weight-bold">
                    <span v-if="item.roomType==1">{{getGradeType(item.gradeType)}}单人间</span>
                    <span v-if="item.roomType==2">{{getGradeType(item.gradeType)}}双人间</span>
                    <span v-if="item.roomType==3">{{getGradeType(item.gradeType)}}大床房</span>
                    <span v-if="item.roomType==4">{{getGradeType(item.gradeType)}}三人间</span>
                    <span v-if="item.roomType==5">{{getGradeType(item.gradeType)}}四人间</span>
                    <span v-if="item.roomType==6">{{getGradeType(item.gradeType)}}日式房</span>
                    <span v-if="item.roomType==7">{{getGradeType(item.gradeType)}}日式+西式混合房</span>
                    <span v-if="item.roomType==8">{{getGradeType(item.gradeType)}}大床房（小型）</span>
                    <span v-if="(item.roomType==9||item.roomType=='')&&item.gradeType==''">未知房型</span>
                  </span>

                  <span class="fz13 text-grey-6">
                    <span v-if="item.smoking==0">禁烟, </span>
                    <span v-if="item.smoking==1">可吸烟, </span>
                    <span v-if="item.withBath==0">无浴室</span>
                    <span v-if="item.withBath==1">有浴室</span>
                  </span>
                </div>
                <div class="absolute" style="right: 10px;bottom: 65px;">
                  <span class="text-white f12 q-px-sm row items-center" 
                  style="background: rgba(23,23,23,.5);border-radius: 30px;">
                  <q-icon class="q-pl-xs" name="images"></q-icon>
                  <span>{{item.images.length}}</span>
                  </span>
                </div>
              </div>
            
            </div>
            <div class="col" :class="{'column':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
              <div class="relative q-pt-lg q-pb-sm q-pl-md" v-for="(subItem,indexs) in item.roomOptions"
              :style="{'border-bottom': indexs+1!=item.roomOptions.length?'1px solid #F5F5F5':'',
            'min-width':$q.platform.is.mobile?'150px':'auto'}">
                <div class="q-pt-sm" 
                :class="{'row no-wrap justify-between':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
                    <template v-if="$q.platform.is.desktop">
                    <div class="col-3 text-grey-6 q-pr-sm">
                        {{subItem.bookingDeadline}}
                    </div>
                    <div class="col-4 q-px-sm">{{subItem.childRates}}</div>
                    <div class="col text-red">
                        <div>入住时间 {{subItem['check-inStartTime']}}</div>
                        <div>最迟入住时间 {{subItem['finalCheck-inTime']}}</div>
                        <div>最迟退房时间 {{subItem['finalCheck-outTime']}}</div>
                    </div>
                    </template>
                    <div class="col text-center"
                    :class="{'row justify-end q-pb-sm':$q.platform.is.mobile}"
                    v-if="getPrice2(subItem.chargeableRateInfoPerPersonForANightBySetCurrency)">
                        <span class="fz13">CNY</span>
                        <span class="text-red text-weight-bold q-px-sm"
                        :class="{'fz28':$q.platform.is.desktop}">{{getPrice2(subItem.chargeableRateInfoPerPersonForANightBySetCurrency)}}
                          <span style="font-size:12px;color:#888888">/人均</span>
                      </span>
                        <!-- <span>{{getPrice(subItem.chargeableRateInfoPerPersonForANightBySetCurrency)}}</span> -->
                    </div>
                    <div :class="{'row justify-end':$q.platform.is.mobile}">
                        <q-btn color="primary" :size="$q.platform.is.desktop?'md':'sm'" label="立即預訂" unelevated 
                        :class="{'q-px-xs':$q.platform.is.desktop}"
                        @click="goOrderHandler(subItem.roomOptionCd)"/>
                    </div>
                </div>
                <span class="absolute q-px-sm text-white" :class="getMealType(subItem.meals)=='无餐'?'bg-dark':'bg-green'"
                style="left: 0;top:0;border-top-right-radius: 5px;border-bottom-right-radius: 5px;">{{getMealType(subItem.meals)}}</span>
                <span class="text-red-6" v-if="$q.platform.is.desktop">{{subItem.minNights}}</span>
              </div>
            </div>
        </div>
        <q-separator color="grey-2" class="q-my-md"/>
      </div>
      <div v-if="prices.length==0" class="text-center q-my-xl">
        <none-data
          iconType="order"
          title="沒有找到您的房間信息哦"
          subtitle="趕緊去搜索其他入住日期看看吧"
        ></none-data>
      </div>
      <q-dialog class="no-padding" v-model="showImagePriview" 
    v-if="images && images.length > 0">
      <image-preview :current="currentImage" :images="images"></image-preview>
    </q-dialog>
    </div>
  </template>
  
  <script>
  import { date } from "quasar";
  import ImagePreview from 'src/components/common/ImagePreview.vue'
  import NoneData from "src/components/common/noneData.vue";
  export default {
    components: {ImagePreview,NoneData},
    props: ["priceList",'SimilarObj','msg'],
    data() {
      return {
        images: [],
        currentImage:0,
        showImagePriview: false,
        chooseObj:null
      };
    },
    watch: {
      priceList: {
        handler(newVal, oldValue) {
          this.prices = JSON.parse(JSON.stringify(newVal));
          this.$forceUpdate();
          this.init();
        },
        deep: true, // 深度监听
      },
      SimilarObj: {
        handler(newVal, oldValue) {
          this.SimilarObj = newVal;
        },
        deep: true,
      },
      msg: {
        handler(newVal, oldValue) {
          this.msg = newVal;
        },
        deep: true,
      },
    },
    created() {
      this.prices = this.priceList;
    },
    methods: {
      goOrderHandler(item){
      let order = {
        msg: this.msg,
        liveNvm: this.SimilarObj.liveNvm,
        roomOptionCd: item,
      }
      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, {});
    },
      init() {
        this.chooseObj = null
      },
      chosenDateHandler(item) {
        this.chooseObj = item
        this.$emit("change", item);
      },
      showImageHandler(url,img) {
        this.images = img
        let index = 0
        let images = this.images
        this.$viewerApi({
          options: {
            initialViewIndex: index,
          },
          images,
        });
        return
        this.currentImage = url
        this.showImagePriview = true
      },
    //获取价格
    getPrice(price) {
      //(chargeableRateInfoPerPersonForANightBySetCurrency/0.9975)*入住天数*入住人数
      //天数
          this.init();
      return Math.ceil(price / this.SimilarObj.JapanIncrease)*(this.SimilarObj.numberOfAdults+this.SimilarObj.numberOfChildren)*this.DateDiff(this.SimilarObj.arrivalDate,this.SimilarObj.departureDate);
    },
    getPrice2(price){
      if(this.SimilarObj.JapanIncrease)
        return Math.ceil(price / this.SimilarObj.JapanIncrease)
    },
    //获取餐
    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 "含晚餐";
        }
      }
    },
    
      //获取房型
    getGradeType(type) {
      let gradeType = "";
      switch (parseInt(type)) {
        case 1:
          gradeType = "标准";
          break;
        case 2:
          gradeType = "普通";
          break;
        case 3:
          gradeType = "经济";
          break;
        case 4:
          gradeType = "精品";
          break;
        case 5:
          gradeType = "豪华";
          break;
        case 6:
          gradeType = "套房";
          break;
      }
      return gradeType;
    },
    reset() {
      this.chooseObj = "";
    },
    },
  };
  </script>
  
  <style>
  .hover-date:hover {
    background: #eee;
  }
  </style>
  