<template>
  <div>
    <q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" flat
      :class="$q.platform.is.desktop ? 'row' : ''" v-for="(x, index) in orders">
      <div class="col-2 ">
        <div class="mb-title">
          <i class="iconfont icon-biaoti1"></i><span>{{ $t('travel.airInfo') }}</span>
        </div>
        {{ x.GTeamName }}
        <div class="mb">
          <span>{{ x.Title }}</span>
        </div>
        <div>
          {{ $t('travel.startDate') }}：<span>{{ x.StartDate }}</span>
        </div>
        <div>
          {{ $t('travel.groupInfo') }}：<span>{{ x.TCNUM }}({{ x.TCID }})</span>
        </div>
        <div>
          <span v-if="x.StartAddress" class="q-mt-md text-weight-bold text-negative">{{ x.StartAddress }} {{
            $t('travel.start') }}</span>
        </div>
      </div>
      <div class="col-4" :class="$q.platform.is.desktop ? 'q-pl-md' : ''">
        <div class="mb-title">&nbsp;
          <!-- <i class="iconfont icon-hangban1"></i><span>{{ $t('travel.airInfo') }}</span> -->
        </div>
        <div class="FlightDiv-TCL cursor-pointer" @click="showDialogF(x)">
          <div v-for="(subItem, subIndex) in x.SelfFlightList" :key="subIndex" class="TCL-flighInfoList">
            <span class="travelnowrap">
              <span class="TCL-FlightNumber">{{ subItem.Flight_number }}</span>
              <span><template v-if="subItem.DIATA">({{ subItem.DIATA }})</template> <template v-else>({{ subItem.dName
                  }})</template></span>
              {{ subItem.DepartureName }}
              <!-- {{ subItem.StopoverName == '' ? '' : '-(' + subItem.StopoverIATA + ')' + subItem.StopoverName }} -->
              <template v-if="subItem.ArrivalCityName">
                <span v-if="subItem.AIATA"> -({{ subItem.AIATA }}) </span>
                <span v-else>-</span>
                {{ subItem.ArrivalCityName }}
                <template v-if="!subItem.DIATA">({{ subItem.aName }})</template>
              </template>
              <!-- <span v-if="subItem.FlightState == 1" class="TCL-greenType">【OK】</span> -->
              <span v-else class="TCL-redType">【{{ $t('travel.tmp') }}】</span>
            </span>
          </div>
        </div>
        <div class="q-mt-sm" v-if="x.WordUrl && x.WordUrl.length > 0">
          <span class="text-primary cursor-pointer" @click="download(x.WordUrl)">{{ $t('travel.download') }}</span>
        </div>
      </div>
      <div class="col-2">
        <div>
          <div class="mb-title">
            <i class="iconfont icon-jiage"></i><span>{{ $t('travel.airSeatInfo') }}</span>
          </div>
          <div class="mb bold">
            <span class="item-title">{{ $t('travel.totalSeat') }}:</span>
            <span>
              {{ x.YSeat }}

            </span>
          </div>
          <div class="mb bold">
            <span class="item-title ">{{ $t('travel.unUseNum') }}:</span>
            <span>{{ x.SurplusYSeatNum }}</span>
          </div>
          <div class="mb bold">
            <span class="item-title">{{ $t('travel.status.waiting') }}:</span><span>{{ x.WatingNum }} </span>
          </div>
          <div class="q-mt-sm" v-if="isMember">
            <span class="item-title">{{ $t('travel.returnMoney') }}:</span><span class="text-negative">{{
              x.RakeBackRatio.toLocaleString() }} /
              pax</span>
          </div>
          <div class="q-mt-sm" v-if="isMember">
            <span class="item-title text-primary cursor-pointer">{{ $t('travel.queryDetail') }}</span>
            <q-popup-proxy :offset="[0, 10]">
              <q-card class="" flat>
                <div class="">
                  <div class="row items-center bg-grey-2">
                    <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{
                      $t('travel.peopleRequired')
                      }}</div>
                    <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{ $t('travel.ratio') }}
                    </div>
                  </div>
                  <div class="row items-center" v-for="(item, index) in x.RakeBackList" :key="index"
                    :class="{ 'bg-green-2': x.RakeBackRatio == item.Ratio }">
                    <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{ item.MinGuest }}-{{
                      item.MaxGuest }}
                      pax
                    </div>
                    <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{ item.Ratio.toLocaleString() }}/pax
                    </div>
                    <!-- <div class="q-pa-sm text-center col">
                      <div class="bg-green" style="width:10px;height:10px;border-radius:50%; display: inline-block;" v-if="x.RakeBackRatio == item.Ratio"></div>
                    </div> -->
                  </div>
                </div>
              </q-card>
            </q-popup-proxy>
          </div>

          <!-- <div class="mb bold">
            <span class="item-title">{{ $t("travel.CSeat") }}:</span
            ><span>
              {{ x.CSeat }}
              <span class="item-title q-ml-md">{{ $t("travel.unUseNum") }}:</span
              >{{ x.SurplusCSeatNum }}</span
            >
          </div>
          <div class="mb bold">
            <span class="item-title">{{ $t("travel.FSeat") }}:</span
            ><span>
              {{ x.FSeat }}
              <span class="item-title q-ml-md">{{ $t("travel.unUseNum") }}:</span
              >{{ x.SurplusFSeatNum }}</span
            >
          </div> -->
        </div>
      </div>
      <div class="col-3">
        <div class="mb-title">
          <i class="iconfont icon-jiage"></i><span>{{ $t('travel.priceInfo') }}</span>
        </div>
        <div class="bold" v-if="isMember">
          <span class="item-title">{{ $t('travel.midPrice') }}: </span>{{ x.MiddlePrice.toLocaleString() }}

        </div>
        <div class="q-mt-sm bold">
          <span class="item-title">{{ $t('travel.b2bPirce') }}: </span>{{ x.B2BShowPrice.toLocaleString() }}

        </div>
        <div class="q-mt-sm bold">
          <span class="item-title">{{ $t('travel.b2cPirce') }}: </span>{{ x.B2CShowPrice.toLocaleString() }}

        </div>
        <div class="q-mt-sm">
          <q-btn color="primary" flat dense>{{ $t('travel.priceDetail') }}</q-btn>
          <q-popup-proxy :offset="[0, 10]">
            <q-card style="min-width: 375px; width: 40vw;" class="q-pa-none" flat>
              <div class="row items-center bg-grey-2">
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{ $t('travel.type') }}</div>
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;" v-if="isMember">{{
                  $t('travel.MiddlePrice') }}</div>
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{ $t('travel.b2bPirce') }}
                </div>
                <div class="q-pa-sm text-center col">{{ $t('travel.b2cPirce') }}</div>
              </div>
              <div class="row items-center" style="border-top: 1px solid #eee;">
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;"> {{ $t('travel.man') }}</div>
                <div class="q-pa-sm text-center col" v-if="isMember" style="border-right: 1px solid #eee;">{{
                  x.MiddlePrice.toLocaleString() }}</div>
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{
                  x.B2BShowPrice.toLocaleString()
                  }}</div>
                <div class="q-pa-sm text-center col">{{ x.B2CShowPrice.toLocaleString() }}</div>
              </div>
              <div class="row items-center" style="border-top: 1px solid #eee;">
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;"> {{ $t('travel.childNeedBed')
                  }}
                </div>
                <div class="q-pa-sm text-center col" v-if="isMember" style="border-right: 1px solid #eee;">{{
                  (x.MiddlePrice + x.ChildNeedPrice).toLocaleString() }}</div>
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{
                  (x.B2BShowPrice + x.ChildNeedPrice).toLocaleString() }}</div>
                <div class="q-pa-sm text-center col">{{ (x.B2CShowPrice + x.ChildNeedPrice).toLocaleString() }}</div>
              </div>

              <div class="row items-center" style="border-top: 1px solid #eee;">
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;"> {{ $t('travel.NoNeedBed') }}
                </div>
                <div class="q-pa-sm text-center col" v-if="isMember" style="border-right: 1px solid #eee;">{{
                  (x.MiddlePrice + x.ChildNoNeedPrice).toLocaleString() }}</div>
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{
                  (x.B2BShowPrice + x.ChildNoNeedPrice).toLocaleString() }}</div>
                <div class="q-pa-sm text-center col">{{ (x.B2CShowPrice + x.ChildNoNeedPrice).toLocaleString() }}</div>
              </div>
              <div class="row items-center" style="border-top: 1px solid #eee;">
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;"> {{ $t('travel.Baby') }}
                </div>
                <div class="q-pa-sm text-center col">{{ x.BabyPrice.toLocaleString() }}</div>
                <div class="q-pa-sm text-center col">&nbsp;</div>
                <div class="q-pa-sm text-center col" v-if="isMember">&nbsp;</div>
              </div>
              <div class="q-pa-md" style="border-top: 1px solid #eee; border-bottom: 1px solid #eee;">
                {{ $t('travel.OtherPrice') }}
              </div>
              <div class="row items-center bg-grey-2">
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{ $t('travel.VisaPrice') }}
                </div>
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{
                  $t('travel.SingleRoomPrice') }}
                </div>
                <div class="q-pa-sm text-center col">{{ $t('travel.OtherPrice') }}</div>
              </div>
              <div class="row items-center" style="border-top: 1px solid #eee;">

                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{
                  x.VisaPrice.toLocaleString() }}
                </div>
                <div class="q-pa-sm text-center col" style="border-right: 1px solid #eee;">{{
                  x.SingleRoomPrice.toLocaleString() }}</div>
                <div class="q-pa-sm text-center col">{{ x.OtherPrice.toLocaleString() }}</div>
              </div>
            </q-card>
          </q-popup-proxy>
        </div>
        <!-- <div class="mb bold">
          <span class="item-title">{{ $t('travel.childNeedBed') }}: </span>{{ x.ChildNeedPrice }}
          <span class="item-title q-ml-md">{{ $t('travel.NoNeedBed') }}:</span>
          {{ x.ChildNoNeedPrice }}
        </div>
        <div class="mb bold">
          <span class="item-title">{{ $t('travel.Baby') }}:</span> {{ x.BabyPrice }}
          <span class="item-title q-ml-md">{{ $t('travel.BabyChargePrice') }}: </span>{{ x.BabyChargePrice }}
          <span class="item-title q-ml-md">{{ $t('travel.VisaPrice') }}: </span>{{ x.VisaPrice }}
        </div>
        <div class="mb bold">
          <span class="item-title">{{ $t('travel.OldManChargePrice') }}:</span>
          {{ x.OldManChargePrice }}
          <span class="item-title q-ml-md">{{ $t('travel.VisaPrice') }}: </span>{{ x.VisaPrice }}
        </div>
        <div class="mb bold">
          <span class="item-title">{{ $t('travel.SingleRoomPrice') }}:</span>
          {{ x.SingleRoomPrice }}
          <span class="item-title q-ml-md">{{ $t('travel.OtherPrice') }}: </span>{{ x.OtherPrice }}
        </div> -->
      </div>
      <div class="col-1">
        <q-btn color="primary" :style="$q.platform.is.desktop ? 'width: 100%' : ''" flat dense
          @click="ViewPayment(x)">{{
            $t('travel.buy') }}</q-btn>
        <q-btn v-if="isMember" flat dense :style="$q.platform.is.desktop ? 'width: 100%' : ''"
          :class="$q.platform.is.desktop ? 'q-mt-md' : 'q-ml-md'" color="primary" @click="gotoUrl(x)">{{
            $t('travel.payOrder')
          }}</q-btn>
      </div>
      <q-dialog width="900" v-model="showItem" trigger="click">
        <div class="TC_tripDetails" style="width: 900px; background-color: #fff">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr class="_color_666" style="text-align: center">
              <th width="60">{{ $t('Airticket.Air_segment') }}</th>
              <th width="80">{{ $t('system.query_flightNum') }}</th>
              <th width="150">{{ $t('system.ph_flightTime') }}</th>
              <th width="80">{{ $t('system.query_arrivalTime') }}</th>
              <!-- <th width="100">{{ $t('system.query_stopCity') }}</th> -->
            </tr>
            <tr v-for="(fItem, fIndex) in dialogObj.SelfFlightList" :key="fIndex" style="text-align: center">
              <td class="_d_name _color_666">
                <span v-if="fIndex == 0">{{ $t('Airticket.Air_go') }}</span>
                <span v-else-if="fIndex == dialogObj.SelfFlightList.length - 1">{{ $t('Airticket.Air_returnTrip')
                  }}</span>
                <span v-else-if="fIndex > 0 && fIndex != dialogObj.SelfFlightList.length - 1">{{
                  $t('Airticket.Air_transit')
                  }}</span>
              </td>
              <td>
                <div>{{ fItem.Flight_number }}</div>
                <div style="margin-top: 5px">{{ fItem.AlName }}</div>
              </td>
              <td>
                <div>{{ fItem.FlightDate.slice(0, 10) }} {{ fItem.Departure_time }}</div>
                <div style="margin-top: 5px">
                  <span v-if="fItem.DIATA">({{ fItem.DIATA }})</span>
                  {{ fItem.dName }}
                </div>
              </td>
              <td>
                <div>{{ fItem.FlightArrivalTime }} {{ fItem.Arrival_time }}
                  <span v-if="fItem.aDay && fItem.aDay != '' && fItem.aDay != '0'" class="text-negative q-ml-sm f12">+{{
                    fItem.aDay }}</span>
                </div>
                <div style="margin-top: 5px">
                  <span v-if="fItem.AIATA">({{ fItem.AIATA }})</span>
                  {{ fItem.aName }}
                </div>
              </td>
              <!-- <td>
                <template v-if="fItem.StopoverIATA">({{ fItem.StopoverIATA }})</template>{{ fItem.StopoverName }}
              </td> -->
            </tr>
          </table>
        </div>
      </q-dialog>
    </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="showOrderdDetail">
    <!-- <OrderdDetail :OrderID="OrderID"></OrderdDetail> -->
  </q-dialog>

  <q-dialog v-model="showAddOrder">
    <AddOrder :info="info" @close="closeAdd"></AddOrder>
  </q-dialog>
</template>

<script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary'
import { defineComponent, inject, reactive, toRefs, watch, toRaw } from 'vue'
import travelService from '../../../api/travel'
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'
// import BankAccount from '../../BankAccount.vue'
import AddOrder from './addOrder.vue'
import { useRouter } from 'vue-router'
import { UserGetter } from 'src/store/modules/user/getters'
import { getStoreGetter } from 'src/store/utils'

export default defineComponent({
  components: { AddOrder },
  setup(props) {
    const $router = useRouter()
    const search = inject(DirtionmaryHelper.TRAVEL_ORDER_OBJ) as any
    const { t } = useI18n()
    const $q = useQuasar()
    const userInfo = getStoreGetter<UserGetter>('user', 'getUser')
    const isMember = userInfo.isMember == 1
    console.log(userInfo)
    watch(search, (n, o) => {
      if (data.loading) return
      data.pages.pageIndex = 1
      data.orders = []
      methods.initOrders()
    })

    const data = reactive({
      showItem: false,
      dialogObj: { TravelTeamFlightList: [] } as any,
      info: {},
      copyId: 0,
      showAddOrder: false,
      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
    })


    const methods = {
      showDialogF(item) {
        data.showItem = true
        data.dialogObj = item
      },
      download(url: string) {
        url = url.replace('http://imgfile.oytour.com/', `http://${window.location.host}/webfile/`)
        url = url.replace('https://imgfile.oytour.com/', `https://${window.location.host}/webfile/`)
        try {
          const filename = url.split('/').pop() || 'download'
          const link = document.createElement('a')
          link.href = url
          link.download = filename
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        } catch (error) {
          message.errorMsg(t('downloadFailed'))
        }

      },
      closeAdd() {
        data.showAddOrder = false
        methods.initOrders()
      },
      changePageHandler(n: any) {
        data.pages.pageIndex = n
        methods.initOrders()
      },
      ViewPayment(info: any) {
        data.info = toRaw(info)
        data.showAddOrder = true
      },
      gotoUrl(x) {
        $router.push({ path: `/travel/payList`, query: { id: x.TCID } })
      },
      canCelHotel(ThirdOrderNo) {
        $q.dialog({
          title: t('dialog.titles.horder'),
          message: t('dialog.contents.horder'),
          cancel: true,
          persistent: true
        }).onOk(() => {
          methods.cancellations(ThirdOrderNo)
        })
      },
      cancellations(ThirdOrderNo) {
        if (data.loadingCel) return
        let msg = {
          bookingNumber: ThirdOrderNo,
          CancelBy: search.CustomerId,
          CancelType: 2,
          StartAddress: search.StartAddress
        }
        let param = Object.assign(msg)
        console.log(param)
        data.loadingCel = true
        travelService
          .getTravelList(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() {
        data.loading = true
        let param = Object.assign(data.pages, search)
        travelService
          .getTravelList(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
              //   let Money = 0
              //   x.DetailList.forEach((y:any)=>{
              //     Money+=y.Money
              //   })
              //   x.Money= Number(Money+x.MailingMoney)
              // })
              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
          })
      },
      init() {
        data.status = getHotelOrderStatus()
        data.rooms = getHotelRoomType()
        methods.initOrders()
      },
      setCopyHandler(order: any, ctx?: string) {
        if (ctx) {
          data.copyId = -1
          copyToClipboard(ctx)
        } else {
          data.copyId = order.OrderID
          copyToClipboard(order.ThirdOrderNo)
        }

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

    methods.init()
    return {
      ...toRefs(data),
      ...methods,
      moneyFormat,
      isMember
    }
  }
})
</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>
<style scoped>
.TC_tripDetails {
  padding: 0;
  box-shadow: 0px 1px 3px 0px #dedede;
  max-height: 400px;
  overflow-y: auto;
}

.TC_tripDetails .popper__arrow::after {
  border-bottom-color: #ededed !important;
}

.TC_tripDetails table {
  padding: 10px 0 0 20px;
  background-color: #ededed;
  border-collapse: collapse;
  border: 1px solid #d2d2d2;
  font-size: 12px;
}

.TC_tripDetails table th {
  background-color: #ededed;
  padding: 5px;
}

.TC_tripDetails table td {
  background-color: #ffffff;
  padding: 9px 15px;
  color: #333333;
  border: 1px solid #d2d2d2;
}

.TC_tripDetails table td._d_name {
  background-color: #ededed;
}

.TC_tripDetails table ._color_666 {
  color: #666666;
}

.TC_tripDetails table tr._color_666 th {
  padding: 9px 15px;
}

.mb-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.mb {
  margin-bottom: 10px;
}

.bold {
  font-weight: bold;
}

.item-title {
  font-size: 12px;
  color: #666;
  font-weight: normal;
}
</style>
