<template>
  <div>
    <q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" flat v-for="x in orders">
      <div class="row items-center desktop-only">
        <div class="q-mr-md">
          <q-btn :color="x.MailingState == 1 ? 'cyan' : 'negative'" unelevated disable size="sm" :label="`${x.MailingState == 1 ? $t('v102.ticket.zq') : $t('v102.ticket.yj')}`"></q-btn>
        </div>
        <div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ x.OrderNo }}</div>
        <div class="q-ml-md">
          <q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId" @click="setCopyHandler(x)" />
          <q-btn color="cyan" icon="check" outline size="sm" :label="$t('hotelorder.copyed')" v-else></q-btn>
        </div>
        <div class="col text-center f12 text-grey-6">
          <span v-if="x.MailingState">{{ $t('v102.ticket.sj') }}：{{ x.Name }}({{ x.EName }})/{{ x.Mobile }}</span>
        </div>
        <div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
        <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 class="mobile-only">
        <div class="row justify-between">
          <div class="q-mr-md">
            <q-btn :color="x.MailingState == 1 ? 'cyan' : 'negative'" unelevated disable size="sm" :label="`${x.MailingState == 1 ? $t('hotelorder.orderType.guest') : $t('hotelorder.orderType.tour')}`"></q-btn>
          </div>
          <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 class="bg-grey-2 rounded-borders q-pa-sm q-mt-md">
          <div class="row items-center justify-between">
            <div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ x.OrderNo }}</div>
            <div class="q-ml-md">
              <q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId" @click="setCopyHandler(x)" />
              <q-btn color="cyan" outline size="sm" :label="$t('hotelorder.copyed')" v-else></q-btn>
            </div>
          </div>
          <div class="f12 text-grey-6">
            <span v-if="x.MailingState">{{ $t('hotelorder.search.contactInfo') }}：{{ x.Name }}({{ x.EName }})/{{ x.ContactPhone }}</span>
          </div>
          <div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
        </div>
      </div>

      <div class="q-mt-md row">
        <q-table separator="cell" :hide-bottom="!x.Remark" :pagination="{ rowsPerPage: 100 }" :rows="x.DetailList" bordered :columns="cols" class="sticky-rightrowspan-column-table light-border col no-shadow">
          <template v-slot:body-cell-Date="props">
            <q-td :props="props" :rowspan="x.DetailList.length" v-if="props.rowIndex == 0">
              <div>
                {{x.CouponsName
                }}
              </div>
              <span class="text-grey-6 q-pt-xs">{{x.UseDate}}</span>
            </q-td>
          </template>
          <template v-slot:body-cell-TicketName="props">
            <q-td :props="props">
              <div class="max-hotelname ellipsis">{{ props.value }}</div>
              <q-tooltip>{{ props.value }}</q-tooltip>
            </q-td>
          </template>
          <template v-slot:body-cell-Money="props">
            <q-td :props="props" >
              {{props.row.Money}}
            </q-td>
          </template>
          <template v-slot:bottom>
            <div class="msl text-negative">{{ $t('v101.hotelRemark') }}：{{ x.Remark }}</div>
          </template>
        </q-table>
      </div>

      <div class="q-mt-md" v-if="x.OrderStatus != 3" :class="{ row: $q.platform.is.desktop, 'column reverse': $q.platform.is.mobile }">
        <div class="pay row text-grey rounded-borders" :class="{ 'bg-grey-2 q-mt-md': $q.platform.is.mobile, col: $q.platform.is.desktop }">
          <div class="bg-orange-1 col-12 rounded-borders q-pa-md">
            <div v-if="x.MailingState==2||x.MailingState==3">
              <div class="text-subtitle2 text-dark text-weight-bolder row items-center">
                <span class="col">{{ $t('v102.ticket.sjc.c5') }}：</span>
                <span class="f12" :class="[x.SendType.Color]">{{ x.SendType.Name }}</span>
              </div>
              <div class="f12 text-dark q-mt-sm">{{ x.MailingAddress }}</div>
            </div>
            <div v-else>
              <div class="text-subtitle2 text-dark text-weight-bolder">{{ $t('v102.ticket.zqa') }}：</div>
              <div class="f12 text-dark q-mt-sm">
                  {{ x.SelffetchAddress?x.SelffetchAddress:$t('v102.ticket.nzqa') }}
              </div>
            </div>
          </div>
        </div>
        <div class="col desktop-only"></div>
        <div class="rounded-borders bg-grey-2 q-pa-md" :class="{ 'q-mx-md': $q.platform.is.desktop, 'q-mt-md': $q.platform.is.mobile }">
          <div class="row items-center justify-between q-mb-sm q-pb-sm" style="border-bottom: 1px dashed #ddd">
            <div class="f12 text-grey">{{ $t('hotelorder.orderMoney') }}</div>
            <div class="dark q-ml-xl">
              <!-- <span class="f12">{{ $t('unit.jpc') }}</span> -->
              <span class="din text-subtitle1">{{ moneyFormat(x.Money) }}</span>
              <span class="f12">{{ $t('unit.jp') }}</span>
            </div>
          </div>
          <div class="text-right">
            <q-btn dense outline color="accent" size="sm" class="q-mt-sm" :label="$t('hotelorder.payinfo')" @click="ViewPayment"></q-btn>
          </div>
        </div>
        <div class="rounded-borders q-pa-sm justify-between" :class="{ column: $q.platform.is.desktop, 'row items-center': $q.platform.is.mobile, 'bg-green-1': x.OrderStatus != 1, 'bg-grey-2': x.OrderStatus == 1 }">
          <q-list dense v-if="x.OrderStatus == 1" :class="{ 'row items-center justify-between full-width': $q.platform.is.mobile }">
            <q-item class="text-negative" clickable v-close-popup @click="cancelConfirmHandler(x.OrderId)">
              <q-item-section>
                <q-item-label>{{ $t('hotelorder.opera.cancel') }}</q-item-label>
              </q-item-section>
            </q-item>
            <q-item class="text-primary" clickable v-close-popup @click="modify(x)">
              <q-item-section>
                <q-item-label>{{ $t('hotelorder.opera.edit') }}</q-item-label>
              </q-item-section>
            </q-item>
            <q-item class="text-positive" clickable v-close-popup>
              <q-item-section>
                <q-item-label>{{ $t('v101.Listofquotation.baojiadan') }}</q-item-label>
              </q-item-section>
            </q-item>
            <!-- <q-item class="text-dark" clickable v-close-popup>
                <q-item-section>
                  <q-item-label>{{ $t('hotelorder.opera.view') }}</q-item-label>
                </q-item-section>
              </q-item> -->
          </q-list>
          <div v-else>
            <div class="f12 text-green-4">{{ $t('hotelorder.payed') }}</div>
            <div class="text-subtitle1 din text-green-14">
              {{ x.Money.toFixed(2) }}
              <span class="text-green-4 f12">{{ $t('unit.jp') }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="x.OrderStatus == 3">
        <div class="q-mt-md q-pa-sm row items-center rounded-borders bg-orange-1" style="border-width: 0 5px; border-style: solid; border-color: #ffb74d">
          <div class="text-subtitle2 text-weight-bolder text-grey-900">{{ $t('v101.cancelRemark') }}：</div>
          <div class="f12 text-grey-600 q-ml-sm col">{{ x.CancelRemark ? x.CancelRemark : $t('v101.selfCancle') }}</div>
          <div class="f12 text-grey-900">{{ x.CancelEmpName }} {{ x.CancelTime }}</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 TicketService from '../../../api/ticket'
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 { getHotelOrderStatus, 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 = {
      ViewPayment() {
        data.showBankAccount = true
      },
      initOrders() {
        data.loading = true
        let param = Object.assign(data.pages, search)
        TicketService.getTicketOrderList(param)
        .then(r => {
          data.loading = false
          if (r.data.resultCode == ApiResult.SUCCESS) {
            r.data.data.pageData.forEach((x: any) => {
              x.typeInfo = data.status.find(y => y.StatusId == x.OrderStatus) ?? data.status[1]
              x.SendType = data.sends.find(y => y.Id == x.MailingState) ?? data.sends[0]
              x.Money = 0
              x.DetailList.forEach((y:any)=>{
                x.Money+=y.Money
              })
            })
            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
        })
      },
      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
        TicketService.setTicketOrderCancel(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 = getHotelOrderStatus()
        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()
    // data.orders.push(
    //   {
    //     OrderType: 0,
    //     typeInfo: data.status[1],
    //     OrderIncome: 0.0,
    //     OrderNo: '20230106214591',
    //     OrderId: 89123,
    //     CreateTime: '2023/01/06 14:34:56',
    //     DetailList: [
    //       {
    //         TicketName: '大阪環球影城',
    //         TicketMoney: 4200.0,
    //         Date: '2023/09/10',
    //         TicketList: [
    //           {
    //             TypeName: '兒童票',
    //             Num: 5,
    //             Price: 400.0,
    //             Money: 2000.0
    //           },
    //           {
    //             TypeName: '成人票',
    //             Num: 2,
    //             Price: 800.0,
    //             Money: 1600.0
    //           },
    //           {
    //             TypeName: '學生票',
    //             Num: 1,
    //             Price: 600.0,
    //             Money: 600.0
    //           }
    //         ]
    //       }
    //     ],
    //     Remark: '迪士尼陆地乐园 客人姓名：Liu Chang+Hu Yuwei~~~~注意！！！ 人数：2大 日期：1月3号 价格：大人490元/张 共收980元，全款已收！',
    //     Money:4200.0,
    //     OrderStatus:1
    //   },
    //   {
    //     OrderType: 1,
    //     typeInfo: data.status[2],
    //     OrderIncome: 0.0,
    //     OrderNo: '2023010621459800',
    //     OrderId: 891452,
    //     ContactName: '罗超',
    //     ContactEnName: 'LUOCHAO',
    //     ContactPhone: '892788812',
    //     Address: '318国道2913公桩左边的祝桑乡境内',
    //     CreateTime: '2023/01/06 14:34:56',
    //     DetailList: [
    //       {
    //         TicketName: '大阪環球影城',
    //         TicketMoney: 4200.0,
    //         Date: '2023/09/10',
    //         TicketList: [
    //           {
    //             TypeName: '兒童票',
    //             Num: 5,
    //             Price: 400.0,
    //             Money: 2000.0
    //           },
    //           {
    //             TypeName: '成人票',
    //             Num: 2,
    //             Price: 800.0,
    //             Money: 1600.0
    //           },
    //           {
    //             TypeName: '學生票',
    //             Num: 1,
    //             Price: 600.0,
    //             Money: 600.0
    //           }
    //         ]
    //       }
    //     ],
    //     Remark: '迪士尼陆地乐园 客人姓名：Liu Chang+Hu Yuwei~~~~注意！！！ 人数：2大 日期：1月3号 价格：大人490元/张 共收980元，全款已收！',
    //     Money:4200.0,
    //     OrderStatus:2,
    //     SendType: data.sends[0]
    //   }
    // )
    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>
