<template>
  <q-card flat class="light-shadow rounded-border window-width q-pa-none">
    <q-card-section class="q-pa-sm">
      <div class="text-h6">{{ h.HotelName }}</div>
      <div class="f12 text-grey-5">{{ `${search.StartDate} ${$t('hotel.col.zhi')} ${search.EndDate}` }} {{ $t('hotel.pricetips') }}</div>
    </q-card-section>
    <div style="max-height: 60vh; overflow-y: auto" class="q-pa-sm">
      <template v-for="x in h.subList">
        <div class="rounded-borders q-pa-sm q-mt-md" v-if="x.PriceList && x.PriceList.length > 0" :class="[x.PriceList[0].ins.bg, x.PriceList[0].ins.color]">
          <div class="row items-center">
            <div class="text-subtitle2 col">
              {{ x.FormatDate }}
            </div>
            <div class="f12" style="opacity: 0.5" :class="[x.PriceList[0].ins.color]">{{ x.PriceList[0].ins.text }}</div>
          </div>
          <!-- <q-separator color="white" style="opacity: .3;"/> -->
          <div class="row justify-between q-pb-sm" style="border-bottom: 1px dashed rgba(255, 255, 255, 0.2)">
            <div class="price-item">
              <div class="label">{{ $t('hotel.col.ins') }}</div>
              <div class="din">{{ x.Inventory }}</div>
            </div>
            <div class="price-item">
              <div class="label">{{ $t('hotel.col.sins') }}</div>
              <div class="din">{{ x.RemainingInventory }}</div>
            </div>
            <div class="price-item">
              <div class="label">{{ $t('hotel.table.confirm') }}</div>
              <div class="din">{{ x.ConfirmNum }}/{{ x.ReserveNum }}</div>
            </div>
            <div class="price-item">
              <div class="label">{{ $t('hotel.col.uins') }}</div>
              <div class="din">{{ x.UseInventory }}</div>
            </div>
          </div>
          <div class="row justify-between items-center">
            <div class="price-item">
              <div class="label">{{ $t('hotel.col.five') }}</div>
              <div class="row items-center">
                <div class="din">{{ x.PriceList[0].CostPrice.toFixed(2) }}{{$t('unit.jp')}}</div>
                <!-- <div class="q-ml-md" style="font-size: 12px; opacity: 0.5">{{ $t('hotel.col.more') }}</div> -->
              </div>
            </div>
            <q-btn color="color" v-if="!search.SearchByUpdate" :label="$t('hotel.buy')" class="q-pa-none q-px-md" dense outline style="opacity: 0.5" @click="showOrderSubmitHandler(h,x)"/>
          </div>
          <div class="row justify-between q-mt-md q-pa-sm rounded-borders" style="background:rgba(255,255,255,.3)"  v-if="x.PriceList[0].room.length>0">
            <div class="price-item q-ma-none" v-for="y in x.PriceList[0].room">
              <div class="label">{{ y.name }}</div>
              <div class="f12">{{ y.price.toFixed(2) }}</div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </q-card>
</template>

<script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary'
import { defineComponent, toRefs, watch, reactive, inject } from 'vue'
import useScrollModule from '../../../module/scrollbar/scrollModule'
import { useI18n } from 'vue-i18n'
export default defineComponent({
  props: {
    hotel: {
      type: Object,
      default: {},
      require: true
    }
  },
  setup(props, context) {
    const { t } = useI18n()

    const data = reactive({
      h: {} as any,
      scrollStyle: {} as any
    })
    watch(
      () => props.hotel,
      (o, n) => {
        methods.setCurrentHotel(n)
      }
    )

    data.scrollStyle = useScrollModule().scrollStyle
    const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any

    const methods = {
      showOrderSubmitHandler(row:any,col:any){
        context.emit('update:modelValue',row,col)
      },
      setCurrentHotel(hotel:any) {
        hotel.subList.forEach((x: any) => {
          x.ShowMorePrice = false
          if (x.PriceList && x.PriceList.length > 0) {
            x.PriceList.forEach((y: any) => {
              y.room = []
              if (y.BidroomPrice > 0) {
                y.room.push({
                  name: t('hotel.rooms.big'),
                  price: y.BidroomPrice
                })
              }
              if (y.SingleroomPrice > 0) {
                y.room.push({
                  name: t('hotel.rooms.sing'),
                  price: y.SingleroomPrice
                })
              }
              if (y.AddBedPrice > 0) {
                y.room.push({
                  name: t('hotel.rooms.three'),
                  price: y.GuideRoomPrice
                })
              }
              if (y.GuideRoomPrice > 0) {
                y.room.push({
                  name: t('hotel.rooms.driver'),
                  price: y.GuideRoomPrice
                })
              }
            })
          }
        })
        data.h = hotel
      }
    }

    methods.setCurrentHotel(props.hotel)

    return { ...toRefs(data), ...methods, search }
  }
})
</script>

<style scoped>
.price-item {
  margin-top: 8px;
}
.price-item .label {
  opacity: 0.5;
  font-size: 12px;
  font-weight: 400;
}
</style>
