<template>
    <q-card flat class="q-px-lg q-py-sm bg-grey-1" 
    style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15)">
        <div class="text-blue column q-pb-xs fz16">
            <div class="row items-center justify-center">{{HotelRow.HotelName}}</div>
            <div class="row justify-start">
                <span class="fz12 text-grey-6">{{hotelInfor.DateStr}}</span>
            </div>
        </div>
        <template v-for="(item,index) in parameters.DetailList">
            <div class="row no-wrap justify-between items-center q-py-sm">
                <div class="q-pr-md column">
                    <div class="f12 q-pb-xs">
                        <template v-if="item.RoomType==1">{{$t('hotel.shopping.StandardRooms')}}</template>
                        <template v-if="item.RoomType==2">{{$t('hotel.shopping.maxRooms')}}</template>
                        <template v-if="item.RoomType==3">{{$t('hotel.shopping.naturalRooms')}}</template>
                        <template v-if="item.RoomType==4">{{$t('hotel.shopping.ThreeRooms')}}</template>
                        <template v-if="item.RoomType==5">{{$t('hotel.shopping.driverRoom')}}</template>
                    </div>
                    <div class="text-red fz10">
                        <span class="fz10">¥</span>
                        <span class="fz14 q-pl-xs text-weight-bold">{{item.Unit_Price}}</span>
                    </div>
                </div>
                <div class="row items-center no-wrap justify-between">
                    <div>
                        <q-btn rounded dense color="white" text-color="black" size="xs" icon="remove" @click='addGoods(item,0)'/>
                    </div>
                    <div class="q-px-sm" style="width: 80px;">
                        <q-input style="width: 100%;" v-model="item.Number" class="col q-mr-md" mask="#.##" 
                        reverse-fill-mask dense type="text" standout :label="$t('hotel.shopping.labelNum')" />
                    </div>
                    <div>
                        <q-btn rounded dense color="primary" size="xs" icon="add" @click='addGoods(item,1)'/>
                    </div>
                </div>
                <div class="row items-center no-wrap justify-between q-pl-md">
                    <div>
                        <q-btn rounded dense color="white" text-color="black" size="xs" icon="remove" @click='addPeople(item,0)'/>
                    </div>
                    <div class="q-px-sm" style="width: 80px;">
                        <q-input style="width: 100%;" v-model="item.PeopleNumber" class="col q-mr-md" mask="#.##" 
                        reverse-fill-mask dense type="text" standout :label="$t('hotel.shopping.peopleNum')" />
                    </div>
                    <div>
                        <q-btn rounded dense color="primary" size="xs" icon="add" @click='addPeople(item,1)'/>
                    </div>
                </div>
            </div>
        </template>
        <div class="row items-center justify-between q-pt-md">
            <div class="text-grey-6 fz12">
                {{$t('hotel.shopping.only')}}
                <span class="text-orange-14 fz14 q-px-xs">{{onlyNum}}</span>
                {{$t('hotel.shopping.between')}}
            </div>
            <div class="row items-center q-pl-md">
                <div v-if="total>0" class="q-pr-md f12">
                    <span>{{$t('hotel.shopping.TheSelected')}}</span>
                    <span class="text-red q-px-sm">{{total}}</span>
                    <span>{{$t('hotel.shopping.between')}}</span>
                </div>
                <div>
                    <q-btn round class="border-radius" 
                    :color="total==0?'grey-6':'red'" size="sm" icon="shopping_cart" 
                    :title="$t('hotel.car.addShopping')" @click="total==0?'':join()"/>
                </div>
            </div>
        </div>
    </q-card>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, reactive, toRef, toRefs, provide, onMounted, inject, watch } from 'vue'
  import { SitLang } from '../../../@types';
  import { useI18n } from 'vue-i18n'
  import { dispatchAction } from '../../../store/utils';
  import { UserActionsType } from '../../../store/modules/user/actions';
  import { DirtionmaryHelper } from '../../../config/dictionary'
  import message from '../../../utils/message'
  import HotelService from '../../../api/hotel'
  export default defineComponent({
    props: {
        HotelRow:{
            type: Object,
            require: true
        },
        hotelInfor:{
            type: Object,
            require: true
        }
    },
    setup(props, context) {
      const {locale,t } = useI18n();
      const HotelCarList = inject(DirtionmaryHelper.HOTEL_CAR_LIST)
      const data=reactive({
        HotelRow: props.HotelRow,
        hotelInfor: props.hotelInfor,
        onlyNum: '' as any,
        parameters:{
            HotelId:'' as String,
            HotelName: '' as String,
            Date: '' as String,
            RemainingInventory: '' as String,
            total: 0,
            Money: '' as String,
            DetailList: [] as Array<any>,
            Remark: '' as String,
        },
        total: 0,
      })
      
      data.onlyNum = JSON.parse(JSON.stringify(data.hotelInfor.RemainingInventory))
    //   今天购买数量
      watch(data.parameters, (n, o) => {
        methods.calculateNum()
     })
      const methods = {
        addPeople(item: String,type:any){
            if(type==1&&item.Number<data.hotelInfor.RemainingInventory){
                item.PeopleNumber++ 
            }else if(type==0&&item.PeopleNumber>1){
                item.PeopleNumber--
            }
        },
        addGoods(item: String,type:any){
            if(type==1&&item.Number<data.hotelInfor.RemainingInventory){
                if(data.total<data.hotelInfor.RemainingInventory){
                   item.Number++ 
                }
            }else if(type==0&&item.Number>0){
                item.Number--
            }
        },
        // 计算房间数量
        calculateNum(){
            data.total = 0
            data.parameters.DetailList.forEach(item => {
                if(data.total<data.hotelInfor.RemainingInventory){
                  data.total+=item.Number  
                }
            })
        },
        // 加入购物车
        join(){
            if(data.total<1||data.total>data.hotelInfor.RemainingInventory){
                message.errorMsg(`${t('hotel.shopping.small')}1${t('hotel.shopping.big')}${data.hotelInfor.RemainingInventory}`)
            }
            const parameters = data.parameters
            let msgData = {
                HotelId: parameters.HotelId,
                HotelName: parameters.HotelName,
                timeList: [] as Array<any>
            }
            let msg = {
                Date: parameters.Date,
                total: data.total,
                RemainingInventory: parameters.RemainingInventory,
                rooms: [] as Array<any> 
            }
            data.parameters.DetailList.forEach((x,index)=>{
                msgData.TaxesPrice = x.TaxesPrice
                msgData.PriceInTangTax = x.PriceInTangTax
                if(x.Number>0){
                    let ArrData = {
                        HotelId:  x.HotelId,
                        Date: x.Date,
                        RoomType: x.RoomType,
                        Unit_Price: x.Unit_Price,
                        Number: x.Number,
                        PeopleNumber: x.PeopleNumber,
                        Destription: x.Destription,
                        TaxesPrice: x.TaxesPrice,
                        PriceInTangTax: x.PriceInTangTax,
                    }
                    msg.rooms.push(ArrData)
                }
            })
            msgData.timeList.push(msg)
            if(data.total>0){
                let list = HotelCarList.value
                if(list.length>0){
                    let fault = true
                    list.forEach((item,index)=>{
                        if(item.HotelId==parameters.HotelId){
                            item.timeList.forEach((x,i)=>{
                                if(fault&&x.Date==parameters.Date){
                                    HotelCarList.value[index].timeList.splice(i,1)
                                    HotelCarList.value[index].timeList.push(msg)
                                    fault = false
                                }else if(fault&&x.Date!=parameters.Date){
                                    HotelCarList.value[index].timeList.push(msg)
                                    fault = false
                                }else{
                                    // console.log(fault,x.Date,parameters.Date)
                                }
                            })
                        }
                    })
                    if(fault)  HotelCarList.value.push(msgData)
                }else{
                    HotelCarList.value.push(msgData)
                }
            }
            message.successMsg(`${t('success')}`)
        },
        // 组装可选房间
        setList(){
            data.parameters.DetailList = [] as Array<any>
            // 1:標間成本价 2:大床成本价 3:自然間成本价 4:3人間成本价 5:司機房成本价 稅金 TaxesPrice  入湯稅 PriceInTangTax
            let roomTyps=['CostPrice','BidroomPrice','SingleroomPrice','AddBedPrice','GuideRoomPrice']
            let tempPrice=data.hotelInfor.PriceList[0]
            let hotel=data.hotelInfor
            data.parameters.HotelId = data.HotelRow.HotelId,
            data.parameters.HotelName = data.HotelRow.HotelName
            data.parameters.Date = hotel.DateStr
            data.parameters.RemainingInventory = hotel.RemainingInventory,
            roomTyps.forEach((x:any,i:number)=>{
                if(tempPrice[x]>0){
                    let dataMsg = {
                        HotelId:  data.HotelRow.HotelId,
                        Date: hotel.DateStr,
                        RoomType: i+1,
                        Unit_Price: tempPrice[x],
                        Number: 0,
                        PeopleNumber: 1,
                        Destription: '',
                        TaxesPrice: tempPrice.TaxesPrice,
                        PriceInTangTax: tempPrice.PriceInTangTax,
                        HotelName: data.HotelRow.HotelName,
                    }
                    data.parameters.DetailList.push(dataMsg)
                }
            })
            HotelCarList.value.forEach(item=>{
                if(item.HotelId==data.HotelRow.HotelId){
                    if(item.timeList.length>0){
                        item.timeList.forEach(x=>{
                            if(x.Date==hotel.DateStr){
                                x.rooms.forEach(room=>{
                                    data.parameters.DetailList.forEach(j=>{
                                        if(j.RoomType==room.RoomType){
                                            j.Number = room.Number
                                            j.PeopleNumber = room.PeopleNumber
                                        }
                                    })
                                })
                            }
                            
                        })
                    }
                }
            })
        },
      }
      onMounted(()=>{
        methods.setList()
      })
      return {...toRefs(data),HotelCarList,...methods}
    }
  })
  </script>
  
<style>
    
</style>