<template>
  <q-card class="bg-white q-py-lg column" style="max-width: 886px; min-width: 375px; width: 900px; height: 65vh"  v-if="model&&model.length>0"  v-for="(item,index) in model" :key="index" v-loading="loading">
    <div class="q-px-lg q-mb-lg" :class="{ 'row justify-between': $q.platform.is.desktop }">
      <div :class="{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }">
        <div class="mobile-only row items-center">
          <div class="text-weight-bold fz20 ellipsis" style="width: 280px">{{ item.Hotel.HotelName }}{{ item.Hotel.HotelName }}{{ item.Hotel.HotelName }}</div>
          <q-icon class="text-grey-13 cursor-pointer text-right q-ml-sm" name="close" size="md" v-close-popup></q-icon>
        </div>
        <div class="text-weight-bold fz20 ellipsis desktop-only">{{ item.Hotel.HotelName }}</div>
      </div>
      <q-icon class="text-grey-13 cursor-pointer desktop-only" name="close" size="md" v-close-popup></q-icon>
    </div>
    <q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col q-px-lg">
      
      <div class="col bg-white rounded-border q-mb-md" :class="{'row q-pa-lg':$q.platform.is.desktop}">
        <div :class="{'col row':$q.platform.is.desktop,'col-12 column':$q.platform.is.mobile}">
          <q-img v-if="model.HotelPic" :class="{'col-1 q-mr-lg':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" :src="model.HotelPic" style="display: inline-block;"  :style="{'height':$q.platform.is.mobile?'150px':'130px','width':$q.platform.is.mobile?'100%':'130px',}" spinner-color="drk" spinner-size="20px" mode="cover" :ratio="1"/>
          <div class="column" :class="{'col q-pl-lg':$q.platform.is.desktop,'q-pt-sm':$q.platform.is.mobile}">
            <div class="text-red fz18  text-weight-bold">{{item.Hotel.HotelName}}</div>
            <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.shifu')}}</span>
              <span class="col fz14 text-weight-bold text-blick">{{item.Hotel.TotalPrice}}</span>
            </div>
          
            <div  v-for="(itemrate,indexrate) in item.Hotel.RatePlanList" :key="indexrate" >
            <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.fangxing')}}</span>
              <span class="text-grey-9 q-pr-lg">
                {{getRoomType(itemrate.BedType)}}
              </span>
            </div>
            <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{$t('v103.scheduledTripDetails.itineraryDetails.canshi')}}</span>
              <span class="text-grey-9">
                {{itemrate.BreakfastType==1?"不含早":"含早"}}
              </span>
            </div>
            <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.jiagejihua')}}</span>
              <span class="text-grey-9">
                {{itemrate.RatePlanName}}
              </span>
            </div>
            <!-- <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.lutiankefang')}}</span>
              <span class="text-grey-9">
                <template v-if="parmResult.withOpenAirBath==0">{{$t('v101.scatteredOrder.wu')}}</template>
                <template v-if="parmResult.withOpenAirBath==1">{{$t('v101.scatteredOrder.you')}}</template>
              </span>
            </div> -->

            </div>
          </div>
        </div>
      </div>
      <div :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
        <div class="col column bg-white rounded-border q-mb-md" :class="{'q-mr-lg':$q.platform.is.desktop}">
          <div class="bg-light-blue-1 q-py-md fz14 rounded-borders row items-center text-weight-bold" :class="{'q-px-lg':$q.platform.is.desktop,'q-px-sm':$q.platform.is.mobile}">
            {{$t('v101.scatteredOrder.yudinxinx')}}
          </div>
          <div class="column" :class="{'q-pa-lg':$q.platform.is.desktop,'q-pa-sm':$q.platform.is.mobile}">
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{$t('v101.scatteredOrder.dindanhao')}}</span>
              <div class="q-pl-lg">
                <span>{{item.BookingID}}</span>
              </div>
            </div>
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{$t('v101.scatteredOrder.fangxingxinxi')}}</span>
              <div class="q-pl-lg">
                <span class="q-pr-lg">
                  {{roomtypeName}}
                  <!-- {{parmResult?getGradeType(parmResult.gradeType):''}}{{parmResult?getRoomType(parmResult.roomType):''}} -->
                </span>
              </div>
            </div>
            
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{$t('v101.scatteredOrder.ruzhuriqi')}}</span>
              <div class="q-pl-lg row items-center" >
                <span :class="{'q-pr-lg':$q.platform.is.desktop,'q-pr-xs':$q.platform.is.mobile
              }">{{getformatDateStr(item.CheckInDate)}}</span>
                <q-separator :class="{'q-px-sm':$q.platform.is.desktop,'q-px-xs':$q.platform.is.mobile
               }" color="dark"/>
                <span :class="{'q-pl-lg':$q.platform.is.desktop,'q-pl-xs':$q.platform.is.mobile
              }">{{getformatDateStr(item.CheckOutDate)}}</span>
              </div>
            </div>
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{$t('v101.scatteredOrder.fangjianshuliang')}}</span>
              <div class="q-pl-lg">
                <span>{{item.NumOfRooms}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col column bg-white rounded-border q-mb-md">
          <div class="bg-light-blue-1 q-py-md fz14 rounded-borders row items-center justify-between" :class="{'q-px-lg':$q.platform.is.desktop,'q-px-sm':$q.platform.is.mobile
        }">
            <span class="text-weight-bold">{{$t('v101.scatteredOrder.ruzhuxinxi')}}</span>
          </div>
          <div class="column" :class="{'q-pa-lg':$q.platform.is.desktop,'q-pa-sm':$q.platform.is.mobile
        }">
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{$t('v101.scatteredOrder.yudinren')}}</span>
              <div class="q-pl-lg">
                <span>{{item.Contact.Name.First + item.Contact.Name.Last}}</span>
              </div>
            </div>
            <!-- <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{$t('v101.scatteredOrder.dangqiandizhi')}}</span>
              <div class="q-pl-lg row">
                <span>{{parmResultRoomInfo.guestAddress}}</span>
              </div>
            </div> -->
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{$t('v101.scatteredOrder.Email')}}</span>
              <div class="q-pl-lg">
                <span>{{item.Contact.Email}}</span>
              </div>
            </div>
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{$t('v101.scatteredOrder.dianhua')}}</span>
              <div class="q-pl-lg">
                <span>{{item.Contact.Phone}}</span>
              </div>
            </div>
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{$t('v101.scatteredOrder.kehubeizhu')}}</span>
              <div class="q-pl-lg">
                <span >{{item.CustomerRequest}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </q-scroll-area>
  </q-card>
  <q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRef, toRefs, provide, onMounted, inject, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from '../../../config/dictionary'
import { date } from 'quasar'
import message from '../../../utils/message'
import { moneyFormat, dateDiffer } from '../../../utils/tools'
import DidaService from '../../../api/didahotel'
import { currentRouter } from 'src/router'
import { HotelRate,HotelArea, useHotel } from '../../../utils/hotelRate'
import { isPhone, validatAlphabetsName } from '../../../utils/validate'
import { ApiResult } from 'src/@types/enumHelper'
import useScrollModule from '../../../module/scrollbar/scrollModule'
export default defineComponent({
      components: {  },
      props: ['OrderID'],
      emits:['close'],
      setup(props, context) {
        const { t } = useI18n()
        
        const data = reactive({
          scrollStyle: {} as any,
          params:{
            orderId: props.OrderID,
          },
          model: {} as any,
          parmResult: {} as any,
          parmResultRoomInfo: {} as any,
          loading: false,
          RoomTypeList: [] as Array<HotelArea>,//房间等级
          scatteredRoomTypeList: [] as Array<HotelArea>,//散客房间类型
            roomtypeName : ""
          })

        data.scrollStyle = useScrollModule().scrollStyle
        data.RoomTypeList = useHotel.getHotelRoomType()
        data.scatteredRoomTypeList = useHotel.getHotelScatRoom()

        const methods = {
        //日期格式化
      getformatDateStr(value){
        var  dt = new Date(value);
        let year = dt.getFullYear();
        let  month = (dt.getMonth()+1).toString().padStart(2,'0');
        let  date = (dt.getDate()+1).toString().padStart(2,'0');
        return year+"-"+month+"-"+date;
      },
          //获取房型
          getGradeType(type) {
            let gradeType = "";
            switch (parseInt(type)) {
              case 1:
                gradeType = data.RoomTypeList[0].name;
                break;
              case 2:
                gradeType = data.RoomTypeList[1].name;
                break;
              case 3:
                gradeType = data.RoomTypeList[2].name;
                break;
              case 4:
                gradeType = data.RoomTypeList[3].name;
                break;
              case 5:
                gradeType = data.RoomTypeList[4].name;
                break;
              case 6:
                gradeType = data.RoomTypeList[5].name;
                break;
            }
            return gradeType;
          },
           //获取房型
        getRoomType(roomtypeId) {
         
          if (roomtypeId>0) {
              data.HotelRoomTypes.forEach((item) => {
                if (item.ID == roomtypeId) {
                  this.roomtypeName=item.Name_CN;
                }
              });
          }
           return this.roomtypeName;
        },
     //获取道旅床类型列表
      getdidaBedType() {
        DidaService.GetDidaBedType({}).then((res) => {
          console.log("getdidaBedType", res);
          if (res.data.resultCode == 1) {
            data.HotelRoomTypes = res.data.data;
          }
        });
      },
          initHotel() {
            data.loading = true
            let param = Object.assign(data.params)
            DidaService.GetDiDaBookingSearchList(param)
              .then(r => {
                if (r.data.resultCode == ApiResult.SUCCESS) {
                  data.model = r.data.data.BookingDetailsList
                  console.log(r.data.data.BookingDetailsList);
                }
                data.loading = false
              }).catch(e => {
                data.loading = false
                message.errorMsg(e.message)
              })
          },
        }
        methods.initHotel()
        methods.getdidaBedType()
        onMounted(()=>{
          
        })
    
        return { ...toRefs(data), ...methods }
      }
    })
</script>

<style>
.ScatteredOrderdDetail{
  width: 70px;
}
</style>
