<template>
    <div>
      <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 relative q-pb-sm">
            <div class="q-pr-md cursor-pointer" 
            @click="item.imageList&&item.imageList.length>0?showImageHandler(item.imageList[0],item.imageList):''"
            :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.imageList&&item.imageList.length>0?item.imageList[0]:'../../assets/img/errImg.png'" 
                :ratio="16/9" style="width: 100%;">
                 <template v-slot:error>
                    <div class="absolute-full flex flex-center bg-grey-3 text-dark">
                      <img src="../../assets/img/errImg.png" alt="" style="width: 60%;">
                    </div>
                  </template>
                </q-img>
                <div class="column q-pt-xs q-pb-sm q-px-sm">
                  <span class="fz15 text-weight-bold">
                    <span>{{ item.RoomName_CN }}</span>
                  </span>
                </div>
                <div v-if="item.imageList.length" class="absolute" style="right: 10px;top: 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.imageList.length }}</span>
                  </span>
                </div>
              </div>
              <div class="q-mt-sm">
                {{ item.RoomName==item.RoomName_CN?"":item.RoomName}}
              </div>
            </div>
            <!-- <q-scroll-area style="" 
            :thumb-style="{
              right: '2px',
              borderRadius: '5px',
              backgroundColor: 'rgba(0, 0, 0, 0)',
              width: '5px',
              opacity: '0.75'
            }"
            :content-style="{
              backgroundColor: 'rgba(0, 0, 0, 0)',
              color: '#555'
            }"
            :content-active-style="{
              backgroundColor: 'rgba(0, 0, 0, 0)',
              color: 'black'
            }"></q-scroll-area> -->
            <div
            v-if="item.RatePlanList" class="col" :class="{'column':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
              <template v-for="(subItem,indexs) in item.RatePlanList">
                <div v-if="(!item.showMore&&indexs<3)||item.showMore" class="relative q-pt-lg q-pb-sm q-pl-md"
                :key="indexs"
                :style="{'border-bottom': indexs+1!=item.RatePlanList.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-2 text-grey-6 q-pr-sm" >
                          {{subItem.IsOnRequest?'0.5小時內確認':'立即確認'}}
                      </div>
                      <div class="col-2 q-px-sm">
                        <div>
                          {{ getRoomType(subItem.BedType) }}</div>
                        <div>
                          {{item.RoomName_CN.length==0?item.RoomName:item.RoomName_CN}}</div>
                      </div>
                      <div class="col">
                        <div>
                          入住日期 
                          <span v-for="( itemp, indexp ) in subItem.PriceList"
                            :key="indexp">
                            {{getWeek(itemp.StayDate)}}
                            <template v-if="indexp!=subItem.PriceList.length-1">
                              ,
                            </template>
                          </span>
                        </div>
                          <span class="text-red"
                            v-if="subItem.RatePlanCancellationPolicyList && subItem.RatePlanCancellationPolicyList != null">
                            <span
                              v-if="getIsCancella(subItem.RatePlanCancellationPolicyList,subItem.TotalPrice)>0">
                              {{getIsCancella(subItem.RatePlanCancellationPolicyList,subItem.TotalPrice)==1?'限時取消':'付費取消'}}
                              </span>
                            <span v-else>不可退改</span>
                          </span>
                          <span v-else class="text-red">不可退改</span>
                      </div>
                      <div class="col" v-if="dataList&&dataList.policy">
                          <div>入住時間: <span class="text-red">{{dataList.policy.checkinFrom}}</span></div>
                          <div>退房時間: <span class="text-red">{{dataList.policy.checkoutTo}}</span></div>
                      </div>
                      </template>
                      <div class="col text-center cursor-pointer" 
                      :class="{'row justify-end q-pb-sm':$q.platform.is.mobile}"
                      >
                          <span class="fz13">{{subItem.Currency }}</span>
                          <!-- style="border-bottom: 1px dotted #f44336;"
                          @click="getDiDaPriceConfirm(index,indexs,subItem)" -->
                          <span class="text-red text-weight-bold q-px-sm"
                          :class="{'fz28':$q.platform.is.desktop}"
                          @click="getDiDaPriceConfirm(index,indexs,subItem)"
                          v-loading="index==currentIndex&&indexs==currentSubIndex&&confirmLoading">
                          {{ subItem.PriceList&&subItem.PriceList.length?getPrice(subItem.PriceList[0].Price):getPrice(subItem.TotalPrice) }}
                            <span v-if="subItem.PriceList&&subItem.PriceList.length" 
                            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 
                          @click="goOrderHandler(item,subItem)"
                          :class="{'q-px-xs':$q.platform.is.desktop}"/>
                      </div>
                  </div>
                  <template v-if="subItem.PriceList&&subItem.PriceList.length">
                    <template v-for="( itemp, indexp ) in subItem.PriceList">
                      <span
                      :key="indexp"
                      class="absolute q-px-sm text-white"
                      :class="itemp.MealAmount==0?'bg-dark':'bg-green'"
                      style="left: 0;top:0;border-top-right-radius: 5px;border-bottom-right-radius: 5px;">
                          <!-- <span class="text-red">{{subItem.Currency }}
                            {{getPrice(itemp.Price) }}
                          </span> -->
                            {{getMealtype(itemp.MealType)}}
                            {{itemp.MealAmount>0?('×'+itemp.MealAmount+'份'):''}}
                      </span>
                      <span class="text-red-6" v-if="$q.platform.is.desktop&&itemp.minNights">
                        {{itemp.minNights}}
                      </span>
                    </template>
                  </template>
                  
                  
                </div>
              </template>
            </div>
            <div class="cursor-pointer" v-if="item.RatePlanList.length>3" style="position: absolute;left:0;right:0;bottom:-20px;" 
              @click="showMoreList(index)">
              <div class="row justify-center items-center q-py-xs">
                <q-icon size="1.5rem" :name="!item.showMore?'arrow_drop_down':'arrow_drop_up'"></q-icon>
                <span class="text-xs">{{!item.showMore?`查看更多 余${item.RatePlanList.length-3}项`:'收起'}}</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','HotelRoomTypes',
    'HotelMealTypes','dataList'],
    data() {
      return {
        images: [],
        currentImage:0,
        showImagePriview: false,
        chooseObj:null,
        roomRateDetails:{},
        confirmPriceList:[],
        WeekList: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        confirmLoading:false,
        currentIndex:0,
        currentSubIndex:0,
      };
    },
    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: {
      showMoreList(index){
        this.prices[index].showMore = !this.prices[index].showMore
        this.$forceUpdate()
      },
      //日期格式化
      getformatDateStr(value) {
        var dt = new Date(value);
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2, "0");
        let date = (dt.getDate()).toString().padStart(2, "0");
        let hours = (dt.getHours()).toString().padStart(2, "0");
        let minutes = (dt.getMinutes()).toString().padStart(2, "0");
        let seconds = (dt.getSeconds()).toString().padStart(2, "0");
        return year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
      },
      //日期格式化
      getIsCancella(RatePlanCancellationPolicyList, TotalPrice) {
        let IsCancel = 0; //不可取消
        let date2 = new Date(); //当前时间
        RatePlanCancellationPolicyList.forEach((item, index) => {
          var dt = new Date(item.FromDate); //取消时间
          if (IsCancel == 0) {
            if (dt > date2) {
              if (item.Amount == TotalPrice) {
                IsCancel = 1;
              } else {
                IsCancel = 2;
              }
            } else {
              if (item.Amount != TotalPrice) {
                IsCancel = 2;
              }
            }
          }
        });
        return IsCancel;
      },
      //通过日期得到周几
      getWeek(dateTime) {
        let dt = new Date(dateTime);
        let year = dt.getFullYear();
        let month = (dt.getMonth()+1).toString().padStart(2, "0");
        let date = (dt.getDate()).toString().padStart(2, "0");
        return month + "-" + date + "(" + this.WeekList[dt.getDay()] + ")";
      },
      getAveragePrice(PriceList) {
        let totelPrice = 0
        if (PriceList && PriceList.length > 0) {
          PriceList.forEach((item, index) => {
            totelPrice += Math.ceil(item.Price);
          });
          return Math.ceil(totelPrice / (PriceList.length));
        }
        return totelPrice;
      },
      getPrice(price) {
        return Math.ceil(price);
      },
      getDiDaPriceConfirm(index, subIndex, item) {
        this.currentIndex = index;
        this.currentSubIndex = subIndex;
        this.confirmLoading = true;
        let params = {
          sort: 1,
          displayFrom: 1,
          CheckInDate: this.msg.CheckInDate,
          CheckOutDate: this.msg.CheckOutDate,
          searchroomGroup: this.msg.searchroomGroup,
          ratePlanID: item.RatePlanID,
          imgUrl: "",
          RoomCount: (this.msg.searchroomGroup && this.msg.searchroomGroup.length > 0) ? this.msg.searchroomGroup
            .length : 0,
          ChildCount: this.msg.childNum,
          AdultCount: this.msg.auditNum,
          OccupancyDetails: [],
          hotelId: this.msg.hotelId
        }
        this.apipost(
          "dmc_post_GetDiDaPriceConfirm",
          params,
          res => {
            this.confirmLoading = false;
            if (res.data.resultCode == 1) {
              this.confirmPriceList = res.data.data.PriceDetails;
              this.roomRateDetails = res.data.data.PriceDetails.HotelList[0];
              this.prices[index].RatePlanList[subIndex].PriceList = this.roomRateDetails.RatePlanList[0].PriceList;
              this.$forceUpdate();
            }
            if (this.roomRateDetails && this.roomRateDetails.RatePlanList && this.roomRateDetails.RatePlanList
              .length > 0) {
              item.IsSellOut = 0;
            } else {
              item.IsSellOut = 1;
            }
          },
          null
        );
      },
      goOrderHandler(item,subItem){
        subItem = {
          RoomName_CN: item.RoomName_CN,
          RoomName: item.RoomName,
          imageList: item.imageList,
          ...subItem
        }
        this.$emit('placeOrder', subItem);
        
      },
      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,
        });
      },
    getPrice2(price){
      if(this.SimilarObj.JapanIncrease)
        return Math.ceil(price / this.SimilarObj.JapanIncrease)
    },
    //获取餐型
    getMealtype(mealtypeId) {
      let mealtypeName = "";
      if (mealtypeId > 0) {
        this.HotelMealTypes.forEach((item) => {
          if (item.ID == mealtypeId) {
            mealtypeName = item.Name_CN;
          }
        });
      }
      return mealtypeName;
    },
    
    //获取房型
    getRoomType(roomtypeId) {
        let roomtypeName = "";
        if (roomtypeId > 0) {
          this.HotelRoomTypes.forEach((item) => {
            if (item.ID == roomtypeId) {
              roomtypeName = item.Name_CN;
            }
          });
        }
        return roomtypeName;
    },
      //获取房型
    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>
  