<template>
  <div>
    <div class="q-py-sm"></div>
    <q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" flat
    v-for="(x,index) in orders">
      <div class="row wrap justify-between">
        <span class="f12 text-grey-6">
          {{ $t('hotelorder.search.orderNum') }}：{{x.orderId}}</span>
        <!-- <span class="text-center f12 text-grey-6">
          <template v-if="$q.platform.is.desktop">{{ $t('v102.ticket.sj') }}：</template>
          {{x.serviceName}} {{x.servicePhone}}
        </span> -->
        <div :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile,}">
          <span class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{x.createDate}}</span>
          <div :class="{'row justify-end':$q.platform.is.mobile}">
            <div class="q-ml-md f12" :class="[x.typeInfo.Color]">
              <q-icon :name="x.typeInfo.Icon" />
              <span class="q-ml-sm">{{ x.typeInfo.StatusName }}</span>
            </div>
          </div>
          
        </div>
      </div>
      <div class="q-pt-sm" :class="{'row justify-between':$q.platform.is.desktop,'col':$q.platform.is.mobile}">
          <div :class="{'row col':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
            <div :style="{'width':$q.platform.is.desktop?'150px':'100%'}">
              <q-img class="rounded-borders" :style="{'width':$q.platform.is.desktop?'150px':'100%'}" style="height: 100%;" :ratio="16 / 9" :src="x.imgCover[0].url?x.imgCover[0].url:'http://imgfile.oytour.com/Upload/DMC/yEiRE8pRWE5ZF8cPNRnAiQST8WbyaGQc.jpg'" spinner-color="grey" spinner-size="50px" fit="cover"/>
            </div>
            <div class="column col" :class="{'q-pl-lg':$q.platform.is.desktop,'q-pt-sm':$q.platform.is.mobile}">
              <div class="ellipsis" style="overflow: hidden;width: 100%;">
                <span class="text-subtitle1 text-weight-bolder">{{x.title}}</span>
              </div>
              <span class="f12 text-grey-700 ellipsis q-py-sm">{{x.ltName}}</span>
              <span class="f13 text-grey-700">{{$t('v103.scheduledTripOrder.number')}}：{{x.tcid}} ( <span class="text-red">{{ x.guestNum }} </span>{{$t('v103.scheduledTripOrder.passenger')}} ) </span>
            </div>
          </div>
          <div class="q-pl-lg" :class="{'row items-end':$q.platform.is.desktop}" :style="{'flex-shrink': $q.platform.is.desktop?0:'inherit'}">
            <div class="column" :class="{'text-left':$q.platform.is.desktop,'text-right':$q.platform.is.mobile}">
              <div class="fz13" :class="{'column q-pt-lg q-pb-xs':$q.platform.is.desktop}">
                <div v-if="x.discountMoney>0" :class="{'':$q.platform.is.desktop}">
                  <span class=" text-red">{{$t('v103.scheduledTripOrder.hui')}}：<span class="fz15">CNY {{moneyFormat(x.discountMoney)}}</span></span>
                </div>
                <span class="q-pt-xs">{{$t('v103.scheduledTripOrder.total')}}：<span class="fz15">CNY {{moneyFormat(x.preferPrice)}}</span> </span> 
              </div>
              <span class="fz14  text-orange-7">{{$t('v103.scheduledTripOrder.paid')}}：<span class="fz17">CNY {{moneyFormat(x.customerPayMoney)}}</span> </span>
              <div class="q-pt-sm text-right" v-if="x.orderState==1||x.orderState==2">
                <q-btn color="primary" unelevated size="sm"
                @click="cancel(x)">{{$t('hotelm.cancel')}}</q-btn>
              </div>
            </div>
          </div>
      </div>
    </q-card>
    <q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" v-if="pages.pageCount > 0" flat>
      <q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount" :input="true" @update:model-value="changePageHandler" />
    </q-card>
    <q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
  </div>
  <div class="text-center q-mt-xl" v-if="(!orders || orders.length == 0) && !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>
  <q-dialog v-model="showBankAccount">
    <BankAccount @change="showBankAccount=false"></BankAccount>
  </q-dialog>
  <q-dialog v-model="showModify" persistent>
    <modify-order-address :order="modifyOrder" @close="showModify=false" @success="showModify=false,initOrders()"></modify-order-address>
  </q-dialog>
</template>

<script lang="ts">
import scheduledTripService from '../../../api/scheduledTrip'
import { DirtionmaryHelper } from '../../../config/dictionary'
import { defineComponent, inject, reactive, toRefs, watch } from 'vue'
import { ApiResult } from '../../../@types/enumHelper'
import message from '../../../utils/message'
import { SendType, StandardStatus } from '../../../@types'
import { useI18n } from 'vue-i18n'
import svgIcon from '../../global/svg-icon.vue'
import { copyToClipboard, useQuasar } from 'quasar'
import { getTripOrderStatus, getSendType, moneyFormat } from '../../../utils/tools'
import ModifyOrderAddress from './ModifyOrderAddress.vue'
import BankAccount from '../../BankAccount.vue'
export default defineComponent({
  components: { svgIcon, ModifyOrderAddress,BankAccount },
  setup(props) {
    const search = inject(DirtionmaryHelper.TICKET_ORDER_SEARCH) as any
    const { t } = useI18n()
    const $q = useQuasar()

    watch(search, (n, o) => {
      if (data.loading) return
      data.loading = true
      data.pages.pageIndex = 1
      data.orders = []
      methods.initOrders()
    })

    const data = reactive({
      PaymentDialog: false,
      orders: [] as Array<any>,
      status: [] as Array<StandardStatus>,
      sends: [] as Array<SendType>,
      showBankAccount: false,
      pages: {
        pageIndex: 1,
        pageSize: 10,
        pageCount: 0
      },
      loading: false,
      copyId: 0,
      expendsOrderId: 0,
      cols: [
        { name: 'Date', label: t('v102.ticket.jq')+'('+t('v102.ticket.d')+')', field: (row: any) => row.Date, align: 'left' },
        { name: 'TicketName', label: t('v102.ticket.hn'), field: (row: any) => row.TicketName, align: 'left' },
        { name: 'Num', label: t('v102.ticket.sl'), field: (row: any) => row.Num, align: 'left' },
        { name: 'Money', label: t('hotelorder.col.m'), field: (row: any) => row.Money, align: 'left' }
      ] as any[],
      modifyOrder:{} as any,
      showModify:false,
    })

    const methods = {
      cancel(obj){
        $q.dialog({
          title: t('dialog.titles.horder'),
          message: t('dialog.contents.horder'),
          cancel: true,
          persistent: true
        }).onOk(() => {
          methods.cancellations(obj)
        })
			},
      // 取消跟团
      cancellations(obj) {
        scheduledTripService.B2BRemoveOrder({ID:obj.orderId})
              .then(r => {
                  if (r.data.resultCode == ApiResult.SUCCESS) {
                      methods.initOrders()
                      methods.GetWaitDealOrderPageList()
                      message.successMsg(`${t('success')}`)
                  } else {
                      message.errorMsg(r.data.message)
                  }
              })
              .catch(e => {
                  message.errorMsg(e.message)
              })
      },
      ViewPayment() {
        data.showBankAccount = true
      },
      initOrders() {
        data.loading = true
        let param = Object.assign(data.pages, search)
        scheduledTripService.GetTravelOrderB2BList(param)
        .then(r => {
          data.loading = false
          if (r.data.resultCode == ApiResult.SUCCESS) {
            r.data.data.pageData&&r.data.data.pageData.forEach((x: any) => {
              x.typeInfo = data.status.find(y => y.StatusId == x.orderState) ?? data.status[1]
            })
            data.orders = r.data.data.pageData
            data.pages.pageCount = r.data.data.pageCount
          } else {
            message.errorMsg(r.data.message)
          }
        }).catch(e => {
          message.errorMsg(e.message)
          data.loading = false
        })
        
      },
      GetWaitDealOrderPageList(){
        let param = {
          pageIndex: 1,
          pageSize: 100
        };
        scheduledTripService.GetWaitDealOrderPageList(param)
        .then(r => {
          if (r.data.resultCode == ApiResult.SUCCESS) {
            
          }
        }
        )
      },
      cancelConfirmHandler(orderId: number) {
        $q.dialog({
          title: t('dialog.titles.horder'),
          message: t('dialog.contents.horder'),
          cancel: true,
          persistent: true
        }).onOk(() => {
          methods.cancelOrderHandler(orderId)
        })
      },
      // 取消订单
      cancelOrderHandler(orderId: number) {
        if (data.loading) return
        data.loading = true
        scheduledTripService.GetWaitDealOrderPageList(orderId)
        .then(r => {
          data.loading = false
          if (r.data.resultCode == ApiResult.SUCCESS) {
            methods.init()
            message.successMsg(`${t('success')}`)
          } else {
            message.errorMsg(r.data.message)
          }
          
        }).catch(e => {
          message.errorMsg(e.message)
          data.loading = false
        })
      },
      setShowWarnHander(id: number) {
        data.expendsOrderId = id == data.expendsOrderId ? 0 : id
      },
      changePageHandler(n: any) {
        data.pages.pageIndex = n
        methods.initOrders()
      },
      init() {
        data.status = getTripOrderStatus()
        data.sends = getSendType()
        methods.initOrders()
      },
      modify(order:any) {
        // order.Sex = JSON.stringify(order.Sex)
        data.modifyOrder=order
        data.showModify =true
      },
      setCopyHandler(order: any, ctx?: string) {
        if (ctx) {
          data.copyId = -1
          copyToClipboard(ctx)
        } else {
          data.copyId = order.OrderId
          copyToClipboard(order.OrderNo)
        }

        setTimeout(() => {
          data.copyId = 0
        }, 2000)
      }
    }

    methods.init()
    return {
      ...toRefs(data),
      ...methods,
      moneyFormat
    }
  }
})
</script>

<style scoped>
  .light-border table td:first-child{
    border-left:  1px solid #eee
  }
  .light-border table tr td:last-child{
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: rgb(0 0 0 / 5%) -2px 0px 0px;
  }
.light-border table,
.light-border table td,
.light-border .q-table__middle,
.light-border.borders,
.light-border table th {
  border-color: #eee !important;
}
.light-border .room-item {
  height: 28px;
  line-height: 28px;
  border-bottom: 1px solid #eee;
}
.light-border .room-item:last-child {
  border-bottom: none;
}
.light-border .max-hotelname {
  width: 140px;
  height: 28px;
  line-height: 28px;
}
.orderListDialog-title {
  position: relative;
}
.orderListDialog-title span {
  font-size: 20px;
}
.orderListDialog-close {
  position: absolute;
  right: 0;
  top: -10px;
  font-size: 26px;
}
.orderListDialog-bg {
  background: #5098ff;
  border-radius: 10px;
}
.orderListDialog-img {
  background: url('../../../../assets/images/wallet.png') no-repeat right #5098ff;
  background-size: 97px 100%;
}
</style>
