<template>
  <q-card class="bg-white q-pb-md window-height column" style="width: 500px;">
    <div class="q-pt-md q-px-lg row items-center justify-between">
      <span class="text-h6">{{$t('hotel.car.subtitle')}}</span>
      <span v-html="$t('hotel.car.title',{days:cars.length,hotels:HotelLength})" class="q-pa-sm rounded-border bg-orange-1 text-orange-8 f12"></span>
      <div class="draw-close q-pa-sm">
        <q-icon name="close" size="26px" v-close-popup></q-icon>
      </div>
    </div>
    <q-separator color="grey-3" class="q-mt-md" />
    <div class="col">
        <div class="q-pa-sm rounded-borders bg-dark text-grey-2 q-mx-md q-mt-md" v-for="x in cars">
          <div class="text-subtitle1 din text-weight-bolder" >{{x.Date}}</div>
          <div class="q-pa-sm rounded-borders bg-light-blue-1" v-for="y in x.Hotels">
            <div class="text-subtitle2 text-weight-bolder text-primary row items-center">
              <span class="col">{{y.HotelName}}</span>
              <div class="f12">
                <span>{{ $t('hotel.shopping.TheSelected') }}</span>
                <span class="text-red q-px-sm">{{ y.SumPeople }}</span>
                <span>{{ $t('unit.ren') }}</span>
                <span class="text-red q-px-sm">{{ y.Total }}</span>
                <span>{{ $t('hotel.shopping.between') }}</span>
              </div>
            </div>
            <div class="q-mt-sm q-pb-sm text-dark" style="border-top:1px dashed var(--q-primary);border-bottom:1px dashed var(--q-primary);">
              <div class="row no-wrap items-center q-mt-sm" v-for="z in y.DetailList">
                <span class="col-3">{{z.RoomName}}</span>
                <span class="col-3">{{moneyFormat(z.Unit_Price)}}/{{$t('unit.ren')}}</span>
                <span class="col-2">
                  <span>{{ z.PeopleNumber }}</span>
                  <span>{{ $t('unit.ren') }}</span>
                  <span>{{ z.Number }}</span>
                  <span>{{ $t('hotel.shopping.between') }}</span>
                </span>
                <span class="col text-right">{{$t('hotelorder.xj')}}：{{moneyFormat(z.Unit_Price*z.PeopleNumber)}}</span>
              </div>
            </div>
            <div class="q-mt-sm row items-center text-dark justify-between q-pb-sm" v-if="y.TaxesPrice>0 || y.PriceInTangTax>0" style="border-bottom:1px dashed var(--q-primary);">
              <span v-if="y.TaxesPrice>0">{{$t('hotelorder.col.t')}}：{{y.TaxesPrice}}*{{y.SumPeople}}{{$t('unit.ren')}}={{moneyFormat(y.TaxesPrice*y.SumPeople)}}</span>
              <span v-if="y.PriceInTangTax>0">{{$t('hotelorder.col.t2')}}：{{y.PriceInTangTax}}*{{y.SumPeople}}{{$t('unit.ren')}}={{moneyFormat(y.PriceInTangTax*y.SumPeople)}}</span>
            </div>
            <div class="q-mt-sm text-right text-primary">
              {{moneyFormat(y.Money)}}
            </div>
          </div>
        </div>

        <!-- <q-scroll-area v-if="cars.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>


                        </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 { useI18n } from 'vue-i18n'
  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'
import { moneyFormat } from '../../../utils/tools'
  export default defineComponent({
    props: {

    },
    setup(props, context) {
      const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any
      const { 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: [] as Array<any>,
          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(cars.value, (n, o) => {
        methods.getMoney()
      })
      const methods = {
        changeOrderType() {
          setTimeout(() => {
            // console.log(data.parameters.OrderType)
          }, 1000)
        },
        getMoney(){
          data.parameters.Money = 0
          cars.value.forEach((item:any)=>{
            item.Hotels.forEach((t:any)=>{
              t.DetailList.forEach((room:any)=>{
                let m = (room.PeopleNumber*room.Unit_Price)+(room.Number*room.TaxesPrice)+(room.Number*room.PriceInTangTax)
                data.parameters.Money+=m
              })
            })
          })
        },
        submit() {
          // context.emit('success')
          // return
          console.log(ContactNameRef)
          ContactNameRef.value.validate()

          return;
          // 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:any)=>{
          //   item.timeList.forEach((t:any)=>{
          //     let datas = {
          //       HotelId: item.HotelId,
          //       Date: t.Date,
          //       Destription:'',
          //       RoomList:[] as Array<any>,
          //     }
          //     t.rooms.forEach((room:any)=>{
          //       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)
          //   })

          // })

          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
          cars.value.forEach((item:any)=>{
            data.HotelLength+=item.Hotels.length
          })

        },
      }
      onMounted(()=>{

        methods.getLength()
        methods.getMoney()
      })
      return {...toRefs(data),cars,TCNumRef,ContactNameRef,ContactNumberRef,...methods,moneyFormat}
    }
  })
  </script>

<style>
    .ListCar-title{
      white-space: wrap;
    }
</style>
