<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.planInfo") }}</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>
      <div class="col-4">
        <div class="mb-title">
          <i class="iconfont icon-hangban1"></i><span>{{ $t("travel.airInfo") }}</span>
        </div>
        <div class="FlightDiv-TCL" @click="showDialogF(x)">
          <div
            v-for="(subItem, subIndex) in x.TravelTeamFlightList"
            :key="subIndex + 1000"
            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>
      <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.YSeat") }}:</span
            ><span
              >{{ x.YSeat }}
              <span class="item-title q-ml-md">{{ $t("travel.unUseNum") }}:</span
              >{{ x.SurplusYSeatNum }}</span
            >
          </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="mb bold">
          <span class="item-title">{{ $t("travel.midPrice") }}: </span
          >{{ x.B2BMemberPrice }}
        </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 }}
        </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" unelevated @click="ViewPayment(x)">{{
          $t("travel.buy")
        }}</q-btn>
        <q-btn
          :class="$q.platform.is.desktop ? 'q-mt-md' : 'q-ml-md'"
          color="primary"
          unelevated
          @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.TravelTeamFlightList"
              :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.TravelTeamFlightList.length - 1">{{
                  $t("Airticket.Air_returnTrip")
                }}</span>
                <span
                  v-else-if="
                    fIndex > 0 && fIndex != dialogObj.TravelTeamFlightList.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 }}</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";

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();

    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;
      },
      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,
        };
        let param = Object.assign(msg);
        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,
    };
  },
});
</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>
