<template>
  <q-card class="bg-white q-pb-md window-height column" :style="{'width':$q.platform.is.desktop?'500px':'100vw','height':$q.platform.is.desktop?'100%':'100vh'}">
    <div class="q-pt-md q-px-lg row items-center justify-between">
      <div class="row items-center">
        <q-icon v-if="$q.platform.is.mobile" class="q-pr-sm" style="margin-left: -15px;" name="navigate_before" size="30px" @click="close"></q-icon>
        <span class="text-h6">{{ $t('hotel.car.subtitle') }}</span>
      </div>
      <span class="q-pa-sm rounded-border bg-orange-1 text-orange-8 f12">
        {{$t('hotel.car.title')}}
        <span class="din text-orange-10">{{cars.length}}</span>
        {{$t('hotel.car.title1')}}
        <span class="din text-primary">{{HotelLength}}</span>
        {{$t('hotel.car.title2')}}
      </span>
      <div v-if="$q.platform.is.desktop" v-close-popup class="q-pa-sm" :class="{'draw-close':$q.platform.is.desktop,'draw-close-modile':$q.platform.is.mobile}">
        <q-icon name="close" size="26px"></q-icon>
      </div>
    </div>
    <q-separator color="grey-3" class="q-mt-md" />
    <q-scroll-area v-if="cars && cars.length > 0" :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col">

      <div class="q-pa-sm rounded-borders bg-dark text-grey-2 q-mx-md q-mt-md" v-for="(x,xi) in cars" >
        <div class="text-subtitle1 din text-weight-bolder">{{ x.Date }}</div>
        <q-list bordered separator>
        <q-slide-item class="rounded-borders" v-for="(y,i) in x.Hotels" :class="{'q-mt-sm':i>0}" :right-color="rightColor" @right="onRight">
          <template v-slot:right>
            <div :class="{'opera-box':$q.platform.is.desktop,'opera-box-mobile':$q.platform.is.mobile,'column':$q.platform.is.mobile,'justify-center':$q.platform.is.mobile,'q-px-md':$q.platform.is.mobile}">
              <div class="text-center full-width" :class="{'row':$q.platform.is.mobile,'items-center':$q.platform.is.mobile}">
                <q-btn rounded icon="mode" color="primary" dense unelevated :class="{'q-mr-md':$q.platform.is.desktop,'q-mr-lg':$q.platform.is.mobile}" @click="setEditorHandler(y)"/>
                <q-btn rounded icon="delete" color="negative" dense unelevated @click="removeHotelHandler(xi,i)"/>
              </div>
            </div>
          </template>
          <div class="q-pa-sm rounded-borders bg-light-blue-1 hotel-car-item">
            <div v-if="$q.platform.is.desktop" :class="{'opera-box':$q.platform.is.desktop,'opera-box-mobile':$q.platform.is.mobile,'column':$q.platform.is.mobile,'justify-center':$q.platform.is.mobile,'q-px-md':$q.platform.is.mobile}">
              <div class="text-center full-width" :class="{'column':$q.platform.is.mobile,'items-center':$q.platform.is.mobile}">
                <q-btn rounded icon="mode" color="primary" dense unelevated :class="{'q-mr-md':$q.platform.is.desktop,'q-mb-lg':$q.platform.is.mobile}" @click="setEditorHandler(y)"/>
                <q-btn rounded icon="delete" color="negative" dense unelevated @click="removeHotelHandler(xi,i)"/>
              </div>
            </div>
            <div class="text-subtitle2 text-weight-bolder text-primary row items-center">
              <div class="col">
                <span class="listCarHotelName" :style="{'width':$q.platform.is.desktop?'300px':'200px'}">{{ y.HotelName }}</span>
              </div>
              <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" :class="{'justify-between':$q.platform.is.mobile}" v-for="z in y.DetailList">
                <div :class="{'col-6':$q.platform.is.desktop,'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
                  <span :class="{'col-6':$q.platform.is.desktop,'q-mb-xs':$q.platform.is.mobile}">{{ z.RoomName }}</span>
                  <span :class="{'col-6':$q.platform.is.desktop}">{{ moneyFormat(z.Unit_Price) }}/{{ $t('unit.ren') }}</span>
                </div>
                <div :class="{'col':$q.platform.is.desktop,'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
                  <span :class="{'col-4':$q.platform.is.desktop,'text-right':$q.platform.is.mobile,'q-mb-xs':$q.platform.is.mobile}">
                    <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>
            <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">{{ $t('hotel.groupPrice') }}：{{ moneyFormat(y.Money) }}</div>
          </div>
        </q-slide-item>
        </q-list>
      </div>
    </q-scroll-area>

    <div v-else class="q-pa-lg row items-center justify-center">
      {{$t('noneData')}}
    </div>
    <div class="column q-px-md" v-if="cars && cars.length>0">
      <div class="col "
      :class="{'row':$q.platform.is.desktop,'wrap':$q.platform.is.desktop,'justify-between':$q.platform.is.desktop,'q-py-lg':$q.platform.is.desktop,'q-py-sm':$q.platform.is.mobile,}">
          <div :class="{'col-6':$q.platform.is.desktop}">
            <n-select filterable :class="{'q-pr-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}"
              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>
          <div v-if="parameters.OrderType == 2" :class="{'col-6':$q.platform.is.desktop}">
            <q-input :class="{'q-pl-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}" v-model="parameters.TCNum" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.TCNum')" ref="TCNumRef" :rules="$q.platform.is.desktop?[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.TCNum')]:[val => !!val || '']" />
          </div>
        <template v-if="parameters.OrderType == 1">
          <div :class="{'col-6':$q.platform.is.desktop}">
            <q-input v-model="parameters.ContactName" :class="{'q-pl-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactName')" ref="ContactNameRef" :rules="$q.platform.is.desktop?[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactName')]:[val => !!val || '']" />
          </div>
          <div :class="{'col-6':$q.platform.is.desktop}">
            <q-input v-model="parameters.ContactNumber" :class="{'col-6':$q.platform.is.desktop,'q-pr-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactNumber')" ref="ContactNumberRef" :rules="$q.platform.is.desktop?[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactNumber')]:[val => !!val || '']" />
          </div>

        </template>
        <q-input :class="{'col-6':$q.platform.is.desktop,'q-pl-sm':$q.platform.is.desktop&&parameters.OrderType == 1,'q-pr-sm':$q.platform.is.desktop&&parameters.OrderType == 2,'q-pb-lg':$q.platform.is.desktop}" v-model="parameters.Remark" reverse-fill-mask dense filled clearable type="text" :label="$t('hotel.car.Remark')" />
      </div>
      <div :class="{'row':$q.platform.is.desktop,'justify-between':$q.platform.is.desktop,'items-center':$q.platform.is.desktop,}">
        <div class="text-negative text-weight-bolder din">
          <span class="text-weight-thin">{{$t('hotel.car.sumPrice')}}：</span>
          <span class="fz14">円</span>
          <span class="text-h6">{{ moneyFormat(parameters.Money) }}</span>
        </div>
        <div :class="{'row':$q.platform.is.mobile,'justify-end':$q.platform.is.mobile,'q-pt-sm':$q.platform.is.mobile}">
          <q-btn color="primary" size="md" unelevated class="q-px-xl" :loading="loading" @click="submit">
            <div class="ellipsis">
              {{ $t('hotel.car.submit') }}
            </div>
          </q-btn>
        </div>
      </div>
    </div>
  </q-card>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject, watch, onBeforeUnmount, computed } 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, dateDiffer } from '../../../utils/tools'
import { useQuasar } from 'quasar'
import { NSelect } from 'naive-ui'
export default defineComponent({
  components: { NSelect },
  props: {},
  setup(props, context) {
    const HotelLength = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_LENGTH) as any
    const orderstatus = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS) as any
    const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any
    // cars&&cars.value.forEach((item:any,index:Number) => {
    //   if(dateDiffer(item.Date)<15){
    //     cars.value.splice(index,1)
    //   }
    // });
    HotelLength.value = cars.value.length
    const editor = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any
    const { t } = useI18n()
    const TCNumRef = ref(null) as any
    const ContactNameRef = ref(null) as any
    const ContactNumberRef = ref(null) as any
    const $q = useQuasar()
    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,
      loading: false,
      cacheHotels: [
        { Name: t('hotel.car.scattered'), ID: 1 },
        { Name: t('hotel.car.group'), ID: 2 }
      ]
    })
    data.scrollStyle = useScrollModule().scrollStyle
    const info = ref(null)
    const panning = ref(false)
    //   今天购买数量
    watch(cars.value, (n, o) => {
      methods.getMoney()
    })
    const slideRatio = ref({
      left: 0,
      right: 0
    })
    const rightColor = computed(() => (
      slideRatio.value.right >= 1
        ? 'bg-light-blue-1'
        : 'blue-1'
    ))
    let timer
    function finalize (reset) {
      timer = setTimeout(() => {
        reset()
      }, 1000)
    }
    onBeforeUnmount(() => {
      clearTimeout(timer)
    })
    const methods = {
      onRight ({ reset }) {
        finalize(reset)
      },
      close(){
        context.emit('close')
      },
      getMoney() {
        data.parameters.Money = 0
        cars.value.forEach((item: any) => {
          item.Hotels.forEach((t: any) => {
            data.parameters.Money += t.Money
          })
        })
      },
      submit() {
        let temp = JSON.parse(JSON.stringify(cars.value))
        if(data.loading) return
        let flag = false
        if (data.parameters.OrderType == 1) {
          ContactNameRef.value.validate()
          ContactNumberRef.value.validate()
          flag = !ContactNameRef.value.hasError && !ContactNumberRef.value.hasError
        }else{
          TCNumRef.value.validate()
          flag = !TCNumRef.value.hasError
        }
        if(!flag) return
        data.loading = true
        data.parameters.DetailList = [] as Array<any>
        temp.forEach((x:any)=>{
          x.Hotels.forEach((y:any)=>{
            y.RoomList = JSON.parse(JSON.stringify(y.DetailList))
            delete y.DetailList
            data.parameters.DetailList.push(y)
          })
        })
        data.loading = true
        HotelService.SetCustomerOrder(data.parameters)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              message.successMsg(`${t('success')}`)
              localStorage.removeItem(DirtionmaryHelper.HOTEL_HOTELCARS_CACHE)
              cars.value=[]
              orderstatus.value = true
              HotelLength.value = 0
              context.emit('success')
            } else {
              message.errorMsg(r.data.message)
            }
            data.loading = false
          })
          .catch(e => {
            message.errorMsg(e.message)
            data.loading = false
          })
      },
      removeHotelHandler(x:number,y:number){
        $q.dialog({
          title: t('dialog.titles.hotel'),
          message: `${t('dialog.contents.hotel.t1')} ${cars.value[x].Date} ${t('dialog.contents.hotel.t2')}${cars.value[x].Hotels[y].HotelName}`,
          cancel: true,
          persistent: true
        }).onOk(() => {
          if(cars.value[x].Hotels.length==1){
            cars.value.splice(x,1)
          }else{
            cars.value[x].Hotels.splice(y,1)
          }
          HotelLength.value = cars.value.length
        })

      },
      setEditorHandler(x:any){
        editor.value = x
        context.emit('close')
      }
    }
    methods.getMoney()
    return {
      ...toRefs(data),
      cars,
      TCNumRef,
      ContactNameRef,
      ContactNumberRef,
      moneyFormat,
      info,
      panning,
      rightColor,
      HotelLength,
      ...methods }
  }
})
</script>

<style>
.ListCar-title {
  white-space: wrap;
}
.hotel-car-item{
  position: relative;
  overflow: hidden;
}
.hotel-car-item .opera-box{
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  display: none;
  background: rgba(0,0,0,.3);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hotel-car-item:hover .opera-box{
  display: flex;
}
.hotel-car-item .opera-box-mobile{
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  right: 0;
  display: none;
  background: rgba(0,0,0,.3);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.listCarHotelName{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
