<template>
  <div class="fix-height-subpage no-wrap q-pa-md" v-if="order">
    <div class="q-py-sm q-px-md rounded-borders bg-white row items-center justify-between f12">
      <div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ order.OrderNo }}</div>
      <div v-html="$t('hotel.car.title', { days: order.DetailList.length, hotels: order.HotelCount })" class="q-pa-sm rounded-border text-orange-10 f12"></div>
      <div class="q-ml-md f12" :class="[order.typeInfo.Color]">
        <q-icon :name="order.typeInfo.Icon" />
        <span class="q-ml-sm">{{ order.typeInfo.StatusName }}</span>
      </div>
    </div>

    <div class="flex justify-start items-start content-start">
      <div class="q-pa-sm rounded-borders bg-white q-mt-md q-mr-md" style="width: 320px" v-for="x in order.DetailList">
        <div class="text-h6 row items-center">
          <div class="col">{{ x.key }}</div>
          <q-btn color="primary" icon="add" class="q-mr-md" rounded dense size="sm" flat />
          <q-btn color="negative" icon="delete" rounded dense size="sm" flat />
        </div>
        <div class="q-pa-sm rounded-borders bg-blue-grey-1 q-mt-sm" v-for="y in x.data">
          <div class="text-subtitle1 text-primary" style="border-bottom: 1px dashed #607d8b">{{ y.HotelName }}</div>
          <div v-for="(z,i) in y.RoomList" class="q-mb-md">
            <div class="row no-wrap items-center q-mt-sm f12">
              <span class="col">
                {{ z.RoomInfo.TypeName }}
                <div>{{ z.Unit_Price }}/{{ $t('unit.ren') }}</div>
              </span>
              <div class="col">
                <div class="f12 text-grey-6 text-center col" v-html="$t('hotel.yg', { roomCount: z.Number })"></div>
                <!-- <div>{{$t('hotelorder.xj')}}：{{moneyFormat(z.Money)}}</div> -->
              </div>
              <span>
                <q-input style="width: 90px" v-model="z.PeopleNumber" class="q-pa-none" mask="#" reverse-fill-mask dense standout>
                  <template v-slot:prepend>
                    <q-btn color="primary" size="sm" class="q-px-none" flat icon="remove" @click="calcPeople(y,i,0)" />
                  </template>
                  <template v-slot:append>
                    <q-btn color="primary" size="sm" class="q-px-none" flat icon="add"  @click="calcPeople(y,i,1)"/>
                  </template>
                </q-input>
              </span>
            </div>
          </div>
          <div class="row items-center justify-between" style="border-top: 1px dashed #607d8b">
            <div class="q-mt-sm">{{ $t('hotelorder.col.t') }}：{{ moneyFormat(y.TaxesPrice) }}/{{ $t('unit.ren') }}</div>
            <div class="q-mt-sm">{{ $t('hotelorder.col.t2') }}：{{ moneyFormat(y.PriceInTangTax) }}/{{ $t('unit.ren') }}</div>
          </div>
          <div class="text-right text-primary q-mt-sm" style="border-top: 1px dashed #607d8b">
            <span class="text-weight-thin">{{ $t('hotel.groupPrice') }}：</span>
            <span class="fz14">¥</span>
            <span class="text-subtitle1">{{ moneyFormat(y.HotelMoeny) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
  <div class="text-center q-mt-xl" v-if="!order && !loading">
    <svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
    <div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
  </div>
</template>

<script lang="ts">
import useMetaModule from '../../module/meta/metaModule'
import { ApiResult } from 'src/@types/enumHelper'
import HotelService from 'src/api/hotel'
import { DirtionmaryHelper } from 'src/config/dictionary'
import { currentRouter } from 'src/router'
import message from 'src/utils/message'
import { defineComponent, inject, reactive, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import { RoomType, StandardStatus } from 'src/@types'
import { getHotelOrderStatus, getHotelRoomType, groupBy, moneyFormat } from 'src/utils/tools'
export default defineComponent({
  setup(props) {
    let { setTitle } = useMetaModule()
    const { t } = useI18n()
    const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
    pageTitle.value = t('hotelm.pageTitle')
    setTitle(pageTitle.value)
    const menu = inject(DirtionmaryHelper.MENU_KEYS) as any
    menu.value = 3

    const data = reactive({
      orderId: 0,
      order: null as any,
      loading: false,
      status: [] as Array<StandardStatus>,
      rooms: [] as Array<RoomType>,
      limitGuestNum: [2, 1, 1, 3, 1]
    })
    console.log(currentRouter)
    data.orderId = currentRouter.currentRoute.value.params.orderId
    if (data.orderId == 0) {
      history.back()
    }

    const methods = {
      initOrderDetails() {
        HotelService.GetOrderDetail(data.orderId)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              data.order = r.data.data
              data.order.typeInfo = data.status.find(y => y.StatusId == data.order.OrderStatus) ?? data.status[1]
              data.order.DetailList.forEach((y: any) => {
                let PeopleNum = 0
                y.RoomList.forEach((z: any) => {
                  z.RoomInfo = data.rooms.find(r => r.TypeId == z.RoomType) ?? data.rooms[0]
                  console.log(z.RoomInfo)
                  PeopleNum += z.PeopleNumber
                })
                console.log(PeopleNum)
                y.PeopleNum = PeopleNum
              })
              data.order.HotelCount = data.order.DetailList.length

              data.order.DetailList = groupBy(data.order.DetailList, (x: any) => {
                return x.Date
              })
            } else {
              message.errorMsg(r.data.message)
            }
            data.loading = false
          })
          .catch(e => {
            message.errorMsg(e.message)
            data.loading = false
          })
      },
      calcPeople(hotel:any,room:number,type:(0|1)){
        let t=hotel.RoomList[room]
        if(t.PeopleNumber==0 && type==0) return
        t.PeopleNumber += type==0?-1:1
        t.Number = Math.ceil(t.PeopleNumber/data.limitGuestNum[t.RoomType-1])
        t.Money = t.PeopleNumber*t.Number
        methods.calcMoney(hotel)
      },
      calcMoney(hotel: any) {
        let money = 0.0
        let peoples = 0
        hotel.RoomList.forEach((x: any) => {
          money += x.Unit_Price * (x.PeopleNumber)
          peoples +=x.PeopleNumber
        })
        money += peoples * (hotel.TaxesPrice+hotel.PriceInTangTax)
        hotel.PeopleNum = peoples
        hotel.HotelMoeny = money
        //return money
      }
    }
    data.status = getHotelOrderStatus()
    data.rooms = getHotelRoomType()
    methods.initOrderDetails()
    return {
      ...toRefs(data),
      ...methods,
      moneyFormat
    }
  }
})
</script>

<style></style>
