<template>
  <q-card class="bg-white q-pb-md" style="width: 500px;">
    <div class="drawerTop row justify-between items-center q-py-md q-px-lg">
      <q-btn rounded class="q-mr-md" color="red" icon="shopping_cart">
        <q-badge class="text-red" color="white" rounded floating>{{HotelLength}}</q-badge>
      </q-btn>
      <q-icon class="cursor-pointer" name="close" size="18px" color="grey-5" @click="$emit('close')"></q-icon>
    </div>
    <q-separator color="grey-3" class="q-my-sm" />
    <div style="height: 660px;">
        <q-scroll-area v-if="HotelCarList.length>0" :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="full-height">
          <q-list>
              <q-item class="rounded-borders">
                  <q-item-section>
                    <q-card bordered class="q-pa-md q-my-sm" v-for="(item,index) in HotelCarList" :key="index">
                      <div class="column">
                        <div class="row items-center">
                          <span class="text-red fz18">{{item.HotelName}}</span>
                        </div>
                        <div v-for="(x,i) in item.timeList" :key="i" class="column q-py-xs">
                              <div class="row justify-between">
                                <div></div>
                                <div class="row">
                                  <div class="q-pl-md f12">
                                    <span class="text-red q-px-sm">{{x.total}}</span>
                                    <span>{{$t('hotel.shopping.between')}}</span>
                                  </div>
                                  <span class="text-grey-6 fz12 q-pl-md" style="flex-shrink: 0;">
                                    {{x.Date}}
                                  </span>
                                </div>
                              </div>
                              <div class="row items-center justify-between no-wrap q-py-xs" v-for="(room,s) in x.rooms" ::key="s">
                              <div class="column q-pr-lg" style="flex-grow: 1;">
                                <div class="row items-center justify-between">
                                  <div class="q-pb-xs ListCar-title f12">
                                    <template v-if="room.RoomType==1">{{$t('hotel.shopping.StandardRooms')}}</template>
                                    <template v-if="room.RoomType==2">{{$t('hotel.shopping.maxRooms')}}</template>
                                    <template v-if="room.RoomType==3">{{$t('hotel.shopping.naturalRooms')}}</template>
                                    <template v-if="room.RoomType==4">{{$t('hotel.shopping.ThreeRooms')}}</template>
                                    <template v-if="room.RoomType==5">{{$t('hotel.shopping.driverRoom')}}</template>
                                  </div>
                                  <div>
                                    <span class="fz10 text-red">¥</span>
                                    <span class="fz14 text-weight-bold q-pl-sm">{{room.Unit_Price}}</span>
                                  </div>
                                </div>
                              </div>
                              <div class="row">
                                <div class="row items-center justify-between">
                                  <div>
                                      <q-btn rounded dense color="white" text-color="black" size="xs" icon="remove" @click='addGoods(item,index,x,i,room,s,0)'/>
                                  </div>
                                  <div class="q-px-sm" style="width: 80px;">
                                      <q-input style="width: 100%;" v-model="room.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,index,x,i,room,s,1)'/>
                                  </div>
                                </div>
                                <div class="row items-center justify-between q-pl-md">
                                  <div>
                                      <q-btn rounded dense color="white" text-color="black" size="xs" icon="remove" @click='addPeople(item,index,x,i,room,s,0)'/>
                                  </div>
                                  <div class="q-px-sm" style="width: 80px;">
                                      <q-input style="width: 100%;" v-model="room.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,index,x,i,room,s,1)'/>
                                  </div>
                                </div>
                              </div>
                              
                              </div>
                              
                              
                            <!-- <q-separator color="grey-3" class="q-my-sm"  dark vertical/> -->
                        </div>
                        <div class="row justify-end">
                          <div v-if="item.TaxesPrice>0">
                            <span class="text-red q-pr-sm f12">
                              {{$t('hotel.car.tax')}}
                            </span>
                            <span>
                              {{item.TaxesPrice}}
                            </span>
                          </div>
                          <div v-if="item.PriceInTangTax>0" class="q-pl-sm">
                            <span class="text-red q-pr-sm f12">
                              {{$t('hotel.car.soup')}}
                            </span>
                            <span>
                              {{item.PriceInTangTax}}
                            </span>
                          </div>
                        </div>
                      </div>
                    </q-card>
                  </q-item-section>
              </q-item>
        </q-list>
      </q-scroll-area>
      <div v-else class="q-pa-lg row items-center justify-center">
        {{$t('noneData')}}
      </div>
    </div>
    <div class="column q-px-md">
      <div class="row wrap justify-between col q-py-lg">
        <div class="col-6 q-pb-sm">
          <n-select filterable @update:value="changeOrderType" style="max-width: 200px;"
          v-model:value="parameters.OrderType" :placeholder="$t('hotel.car.OrderType')" :options="cacheHotels" 
          max-tag-count="responsive" size="large" value-field="ID" label-field="Name" />
        </div>
        <q-input v-if="parameters.OrderType==2" class="col-6" v-model="parameters.TCNum" style="max-width: 200px;" reverse-fill-mask dense 
          type="text" standout :label="$t('hotel.car.inputText')+$t('hotel.car.TCNum')" ref="TCNumRef" 
          :rules="[val => !!val || $t('hotel.car.inputText')+$t('hotel.car.TCNum')]"/>
        
        <template v-if="parameters.OrderType==1">
          <q-input v-model="parameters.ContactName"  style="max-width: 200px;"  class="col-6" reverse-fill-mask dense 
          type="text" standout :label="$t('hotel.car.inputText')+$t('hotel.car.ContactName')" ref="ContactNameRef"
          :rules="[val => !!val || $t('hotel.car.inputText')+$t('hotel.car.ContactName')]"/>

          <q-input v-model="parameters.ContactNumber" style="max-width: 200px;"  class="col-6 q-mr-md" reverse-fill-mask dense 
          type="text" standout :label="$t('hotel.car.inputText')+$t('hotel.car.ContactNumber')" ref="ContactNumberRef" 
          :rules="[val => !!val || $t('hotel.car.inputText')+$t('hotel.car.ContactNumber')]"/>
        </template>
        <q-input class="col-6"
            style="max-width: 200px;"
            v-model="parameters.Remark"
            reverse-fill-mask dense 
            filled
            clearable
            type="text"
            :label="$t('hotel.car.Remark')"
          />
        
      </div>
      <div class="row justify-between">
        <div>
          <span class="fz14">¥</span>
          {{parameters.Money}}
        </div>
        
        <q-btn color="red" style="width: 150px" :loading="loading" @click="submit">
          <div class="ellipsis">
            {{$t('hotel.car.submit')}}
          </div>
        </q-btn>
      </div>
    </div>
    
  </q-card>
  
</template>
  
  <script lang="ts">
  import { defineComponent, ref, reactive, 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 useScrollModule from '../../../module/scrollbar/scrollModule'
  import { DirtionmaryHelper } from '../../../config/dictionary'
  import message from '../../../utils/message'
  import { ApiResult } from '../../../@types/enumHelper'
  import HotelService from '../../../api/hotel'
  export default defineComponent({
    props: {
      
    },
    setup(props, context) {
      const HotelCarList = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any
      const {locale,t } = useI18n();
      const TCNumRef = ref(null) as any
      const ContactNameRef = ref(null) as any
      const ContactNumberRef = ref(null) as any
      const data=reactive({
        scrollStyle: {} as any,
        addNum: 1,
        parameters: {
          Money: 0,
          DetailList: [],
          Remark: '',
          OrderType: 1,//订单类型 1散客 2团队
          TCNum: '',//=团队时 传递 组团号
          ContactName: '',//=散客时 传递 联系人
          ContactNumber: '',//=散客时 传递 联系人电话
          OrderId: 0,
        },
        currentIndex: 0,
        currentI: 0,
        currentS: 0,
        RemainingInventory: 0,
        HotelLength: 0,
        loading: false,
        cacheHotels: [
          {Name:t('hotel.car.scattered'),ID:1},
          {Name:t('hotel.car.group'),ID:2},
        ],
      })
      data.scrollStyle = useScrollModule().scrollStyle
      //   今天购买数量
      watch(HotelCarList.value, (n, o) => {
        methods.calculateNum()
        methods.getMoney()
      })
      const methods = {
        changeOrderType() {
          setTimeout(() => {
            // console.log(data.parameters.OrderType)
          }, 1000)
        },
        getMoney(){
          data.parameters.Money = 0
          HotelCarList.value.forEach(item=>{
            item.timeList.forEach(t=>{
              t.rooms.forEach(room=>{
                let m = (room.PeopleNumber*room.Unit_Price)+(room.Number*room.TaxesPrice)+(room.Number*room.PriceInTangTax)
                data.parameters.Money+=m
              })
            })
          })
        },
        submit() {
          // context.emit('success')
          // return
          // TCNumRef.value.validate()
          // ContactNameRef.value.validate()
          // ContactNumberRef.value.validate()
          if(data.parameters.OrderType==1){
            if(!data.parameters.ContactName){
              message.warnMsg(`${t("hotel.car.inputText")}${t("hotel.car.ContactName")}`)
              return
            }if(!data.parameters.ContactNumber){
              message.warnMsg(`${t("hotel.car.inputText")}${t("hotel.car.ContactNumber")}`)
              return
            }
          }
          if(data.parameters.OrderType==2&&!data.parameters.TCNum){
            message.warnMsg(`${t("hotel.car.inputText")}${t("hotel.car.TCNum")}`)
            return
          }

          data.parameters.DetailList = [] as Array<any>
          HotelCarList.value.forEach(item=>{
            item.timeList.forEach(t=>{
              let datas = {
                HotelId: item.HotelId,
                Date: t.Date,
                Destription:'',
                RoomList:[],
              }
              t.rooms.forEach(room=>{
                let msg = {
                  RoomType: room.RoomType,
                  Unit_Price: room.Unit_Price,
                  Number: room.Number,
                  PeopleNumber: room.PeopleNumber,
                  Destription: room.Destription?room.Destription:''
                }
                datas.RoomList.push(msg)
              })
              data.parameters.DetailList.push(datas)
            })
            
          })
          // console.log(data.parameters,'-----')
          // return
          data.loading = true
          HotelService.SetCustomerOrder(data.parameters)
            .then(r => {
              if (r.data.resultCode == ApiResult.SUCCESS) { 
                message.successMsg(`${t('success')}`)
                data.parameters = {
                  Money: 0,
                  DetailList: [],
                  Remark: '',
                  OrderType: 1,//订单类型 1散客 2团队
                  TCNum: '',//=团队时 传递 组团号
                  ContactName: '',//=散客时 传递 联系人
                  ContactNumber: '',//=散客时 传递 联系人电话
                  OrderId: 0,
                },
                context.emit('success')
              } else {
                message.errorMsg(r.data.message)
              }
              data.loading = false
            })
            .catch(e => {
              message.errorMsg(e.message)
              data.loading = false
            })
        },
        getLength(){
          data.HotelLength = 0
          if(HotelCarList.value.length>0){
            HotelCarList.value.forEach(item=>{
              item.timeList.forEach(t=>{
                if(t.rooms.length>0){
                  data.HotelLength+=t.rooms.length
                }
              })
            })
          }
        },
        // 计算房间数量
        calculateNum(){
          let list = HotelCarList.value
          if(list&&list[data.currentIndex]){
            // HotelCarList.value[data.currentIndex].timeList[data.currentI].total = 0
            HotelCarList.value&&HotelCarList.value.forEach((item,index)=> {
              item.timeList.forEach(t=>{
                t.total = 0
                t.rooms.forEach(room=>{
                  t.total+=room.Number
                })
              })
            })
          }
        },
        // 人数
        addPeople(item: Object,index: any,x: Object,i: any,room: Object,s: any,type: any){
            data.currentIndex = index
            data.currentI = i
            data.currentS = s
            if(type==1&&room.Number<x.RemainingInventory){
              room.PeopleNumber++ 
            }else if(type==0&&room.PeopleNumber>1){
              room.PeopleNumber--
            }
            // methods.getMoney()
        },
        // 房间数
        addGoods(item: Object,index: any,x: Object,i: any,room: Object,s: any,type: any){
            data.currentIndex = index
            data.currentI = i
            data.currentS = s
            if(type==1&&room.Number<x.RemainingInventory){
                if(x.total<x.RemainingInventory){
                  room.Number++ 
                }
            }else if(type==0&&room.Number>0){
                if(room.Number==1){
                  if(HotelCarList.value[index].timeList[i].rooms.length==1&&HotelCarList.value[index].timeList.length>1){
                    HotelCarList.value[index].timeList.splice(i, 1)
                  }else if(HotelCarList.value[index].timeList.length==1&&
                    HotelCarList.value[index].timeList[i].rooms.length==1){
                    HotelCarList.value.splice(index, 1)
                    return
                  }else{
                    HotelCarList.value[index].timeList[i].rooms.splice(s, 1)
                  }
                  methods.getLength()
                }
                room.Number--
                
            }
        },
      }
      onMounted(()=>{
        
        methods.getLength()
        methods.getMoney()
      })
      return {...toRefs(data),HotelCarList,TCNumRef,ContactNameRef,ContactNumberRef,...methods}
    }
  })
  </script>
  
<style>
    .ListCar-title{
      white-space: wrap;
    }
</style>