<template>
  <q-card class="bg-white q-py-lg column" style="max-width: 886px; min-width: 375px; width: 900px; height: 65vh">
    <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">{{ model.HotelName }}{{ model.HotelName }}{{ model.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">{{ model.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">{{model.hotelName}}</div>
            <div class="q-pt-xs">
              <q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
              <span class="col fz14 text-weight-bold text-blick">{{parmResult.address}}</span>
            </div>
            <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">
                {{parmResult?getGradeType(parmResult.gradeType):''}}{{parmResult?getRoomType(parmResult.roomType):''}}
              </span>
            </div>
            <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.xiyan')}}</span>
              <span class="text-grey-9">
                <template v-if="parmResult.smoking==0">{{$t('v101.scatteredOrder.xiyan0')}}</template>
                <template v-if="parmResult.smoking==1">{{$t('v101.scatteredOrder.xiyan1')}}</template>
              </span>
            </div>
            <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.cesuo')}}</span>
              <span class="text-grey-9">
                <template v-if="parmResult.withBath==0">{{$t('v101.scatteredOrder.wu')}}</template>
                <template v-if="parmResult.withBath==1">{{$t('v101.scatteredOrder.you')}}</template>
              </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 :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>{{model.ThirdOrderNo}}</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">
                  {{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" v-if="model.CheckIn&&model.CheckOut">
                <span :class="{'q-pr-lg':$q.platform.is.desktop,'q-pr-xs':$q.platform.is.mobile
              }">{{model.CheckIn.split('T')[0]}}</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
              }">{{model.CheckOut.split('T')[0]}}</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>{{model.Number}}</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>{{parmResult.guestLastName + parmResult.guestFirstName}}</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>{{parmResultRoomInfo.guestEmail}}</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>{{parmResultRoomInfo.guestPhoneNumber}}</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 v-if="model.Remark">{{model.Remark}}</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 HotelService from '../../../api/scattered'
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>,//散客房间类型
        })

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

        const methods = {
          //获取房间等级
          getRoomType(type) {
            let gradeType = "";
            switch (parseInt(type)) {
              case 1:
                gradeType = data.scatteredRoomTypeList[0].name;
                break;
              case 2:
                gradeType = data.scatteredRoomTypeList[1].name;
                break;
              case 3:
                gradeType = data.scatteredRoomTypeList[2].name;
                break;
              case 4:
                gradeType = data.scatteredRoomTypeList[3].name;
                break;
              case 5:
                gradeType = data.scatteredRoomTypeList[4].name;
                break;
              case 6:
                gradeType = data.scatteredRoomTypeList[5].name;
                break;
              case 7:
                gradeType = data.scatteredRoomTypeList[6].name;
                break;
              case 8:
                gradeType = data.scatteredRoomTypeList[7].name;
                break;
              case 9:
                gradeType = data.scatteredRoomTypeList[8].name;
                break;
            }
            return gradeType;
          },
          //获取房型
          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;
          },
          initHotel() {
            data.loading = true
            let param = Object.assign(data.params)
            HotelService.GetJAPANOrderDetail(param)
              .then(r => {
                if (r.data.resultCode == ApiResult.SUCCESS) {
                  data.model = r.data.data.model
                  data.parmResult = r.data.data.parmResult
                  data.parmResultRoomInfo = r.data.data.parmResultRoomInfo
                }
                data.loading = false
              }).catch(e => {
                data.loading = false
                message.errorMsg(e.message)
              })
          },
        }
        methods.initHotel()
        onMounted(()=>{
          
        })
    
        return { ...toRefs(data), ...methods }
      }
    })
</script>

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