  <template>
  <div>
    <q-card class="light-shadow q-pa-md bg-white rounded-borders q-my-md" flat>
      <q-table v-if="$q.platform.is.desktop"  separator="cell" :pagination="{rowsPerPage:100}" dense :rows="orders" bordered :columns="cols" class="sticky-rightrowspan-column-table light-border col no-shadow">
        <template v-slot:body-cell-HotelName="props">
          <q-td :props="props">
            <div class="cursor-pointer" @click="getDetail(props.row.OrderID)">
              <q-img :src="props.row.HotelPic" spinner-color="drk" spinner-size="20px" width="50px" height="50px" mode="cover" />
            <span class="q-mx-md">{{ props.row.HotelName }}</span>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-OrderStatus="props">
          <q-td :props="props">
            <span :class="[props.row.typeInfo.Color]">{{ props.row.OrderStatus }}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-operation="props">
          <q-td :props="props">
            <q-btn :loading="loadingCel" v-if="props.row.OrderStatus!='已取消'" size="md" color="white" text-color="black" :label="$t('v101.scatteredOrderList.quxiaodindan')" @click.stop="canCelHotel(props.row.ThirdOrderNo)"></q-btn>
          </q-td>
        </template> 
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount" :input="true" @update:model-value="changePageHandler" />
        </template>
      </q-table>
      <q-table
      v-if="$q.platform.is.mobile"
      hide-header
      :title="pageTitle"
      :rows="orders"
      grid
      :columns="mobileCols"
      row-key="name"
      card-class="no-shadow bg-primary text-white"
      :pagination="pages"
      :loading="loading"
    >
    <template v-slot:item="props">
      <div @click="getDetail(props.row.OrderID)" class="rounded-borders bg-primary text-white col-12 q-mb-sm" style="padding: 12px;margin-left: 12px;margin-right: 12px; width: calc(100% - 24px);">
        <div>
          <div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{$t('v101.scatteredOrderList.table1')}}</div>
          <div style="font-size: 13px;">{{props.row.HotelName}}</div>
        </div>
        <div class="q-my-md">
          <div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{$t('v101.scatteredOrderList.table2')}}</div>
          <div style="font-size: 13px;">
          <span class="q-ml-xs">{{props.row.OrderID}}</span>
          </div>
        </div>
        <div class="row">
          <div>
            <div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{$t('v101.scatteredOrderList.table4')}}</div>
            <div class="">
              <span>円{{props.row.TotalPrice.toFixed(2)}}</span>
            </div>
          </div>
          <div class="q-pl-lg">
            <div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{$t('v101.scatteredOrderList.table5')}}</div>
            <div class="">
              <span>円{{props.row.CustomerPayMoney.toFixed(2)}}</span>
            </div>
          </div>
        </div>
        <div class="row q-pt-sm" :class="{'justify-between items-center':props.row.OrderStatus!='已取消','justify-end items-end':props.row.OrderStatus=='已取消'}">
          <span class="rounded-borders q-px-sm text-white">{{ props.row.OrderStatus }}</span>
          <q-btn :loading="loadingCel" v-if="props.row.OrderStatus!='已取消'" size="sm" color="white" text-color="black" :label="$t('v101.scatteredOrderList.quxiaodindan')" @click.stop="canCelHotel(props.row.ThirdOrderNo)"></q-btn>
        </div>
      </div>
    </template>
    <template v-slot:bottom>
      <q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount" :input="true" @update:model-value="changePageHandler" />
    </template>
    </q-table>
    </q-card>
    
    <q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
  </div>
  <q-dialog v-model="showOrderdDetail">
    <OrderdDetail :OrderID="OrderID"></OrderdDetail>
  </q-dialog>

</template>

<script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary'
import { defineComponent, inject, reactive, toRefs, watch } from 'vue'
import HotelService from '../../../api/scattered'
import { ApiResult } from '../../../@types/enumHelper'
import message from '../../../utils/message'
import { RoomType, StandardStatus } from '../../../@types'
import { getHotelOrderStatus, getHotelRoomType, moneyFormat } from '../../../utils/tools'
import { useI18n } from 'vue-i18n'
import svgIcon from '../../../global/svg-icon.vue'
import { copyToClipboard, useQuasar } from 'quasar'
import { currentRouter } from '../../../router'
import OrderdDetail from './OrderdDetail.vue'

export default defineComponent({
  components: { OrderdDetail },
  setup(props) {
    const search = inject(DirtionmaryHelper.HOTEL_ORDER_SEARCH) as any
    const { t } = useI18n()
    const $q = useQuasar()

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

    const data = reactive({
      OrderID: '',
      showOrderdDetail: false,
      orders: [] as Array<any>,
      status: [] as Array<StandardStatus>,
      rooms: [] as Array<RoomType>,
      pages: {
        pageIndex: 1,
        pageSize: 10,
        pageCount: 0
      },
      loadingCel: false,
      loading: false,
      cols: [
        { name: 'HotelName', label: t('v101.scatteredOrderList.table1'), align: 'left' },
        { name: 'OrderID', label: t('v101.scatteredOrderList.table2'), field: (row: any) => row.OrderID, align: 'left' },

        { name: 'Number', label: t('v101.scatteredOrderList.table3'), field: (row: any) => row.Number, align: 'left' },
        { name: 'TotalPrice', label: t('v101.scatteredOrderList.table4'), field: (row: any) => row.TotalPrice.toFixed(2), align: 'left' },
        { name: 'CustomerPayMoney', label: t('v101.scatteredOrderList.table5'), field: (row: any) => row.CustomerPayMoney.toFixed(2), align: 'left' },
        { name: 'OrderStatus', label: t('v101.scatteredOrderList.table6'), align: 'left' },
        { name: 'CreateDateStr', label: t('v101.scatteredOrderList.table7'),  field: (row: any) => row.CreateDateStr, align: 'left' },
        { name: 'operation', label: t('v101.scatteredOrderList.table8'),  align: 'center' },
      ] as any,
      mobileCols: [
        { name: 'HotelName', label: t('v101.scatteredOrderList.table1'), align: 'left' },
        { name: 'OrderID', label: t('v101.scatteredOrderList.table2'), field: (row: any) => row.OrderID, align: 'left' },
        { name: 'CustomerPayMoney', label: t('v101.scatteredOrderList.table5'), field: (row: any) => row.CustomerPayMoney.toFixed(2), align: 'left' },
      ]
    })

    const methods = {
      canCelHotel(ThirdOrderNo) {
        if(data.loadingCel) return
        let msg ={
            bookingNumber:ThirdOrderNo,
            CancelBy: search.CustomerId,
            CancelType:2
        }
        let param = Object.assign(msg)
        data.loadingCel = true
        HotelService.GetJAPANReservationCancallation(param)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              message.successMsg(`${t('success')}`)
              methods.initOrders()
            } else {
              message.errorMsg(r.data.message)
            }
            data.loadingCel = false
          })
          .catch(e => {
            message.errorMsg(e.message)
            data.loadingCel = false
          })
      },
      getDetail(OrderID){
        data.showOrderdDetail = true
        data.OrderID = OrderID
      },
      initOrders() {
        let param = Object.assign(data.pages, search)
        data.loading = true
        HotelService.GetB2BJapanHotelOrderList(param)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              r.data.data.pageData.forEach((x: any) => {
                x.typeInfo = data.status.find(y => y.StatusName == x.OrderStatus) ?? data.status[1]
              })
              data.orders = r.data.data.pageData
              data.pages.pageCount = r.data.data.pageCount
            } else {
              message.errorMsg(r.data.message)
            }
            data.loading = false
          })
          .catch(e => {
            message.errorMsg(e.message)
            data.loading = false
          })
      },
      changePageHandler(n: any) {
        data.pages.pageIndex = n
        methods.initOrders()
      },
      init() {
        data.status = getHotelOrderStatus()
        data.rooms = getHotelRoomType()
        methods.initOrders()
      }
    }

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

<style>
.light-border table,
.light-border table td,
.light-border .q-table__middle,
.light-border.borders,
.light-border table th {
  border-color: #eee !important;
  white-space: wrap;
}
.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>
