<template>
  <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 items-center desktop-only">
        <div class="q-mr-md">
          <q-btn
            :color="
              search.OrderType == 1
                ? 'cyan'
                : search.OrderType == 2
                ? 'negative'
                : 'positive'
            "
            unelevated
            disable
            size="sm"
          >
            <template v-if="search.OrderType == 1">{{
              $t("v102.CharteredBus.baochetype1")
            }}</template>
            <template v-if="search.OrderType == 2">{{
              $t("v102.CharteredBus.baochetype2")
            }}</template>
            <template v-if="search.OrderType == 3">{{
              $t("v102.CharteredBus.baochetype3")
            }}</template>
          </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
            >{{ $t("v102.ticket.sj") }}：{{ x.SurName }}{{ x.Name }}/{{ 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]"
          bordered
          :columns="cols"
          class="sticky-rightrowspan-column-table light-border col no-shadow"
        >
          <template v-slot:header>
            <q-tr>
              <q-th v-for="(item, i) in cols">
                {{ item.label }}
              </q-th>
            </q-tr>
          </template>
          <template v-slot:body-cell-OrderDate="props">
            <q-td :props="props">
              <div class="max-hotelname ellipsis">
                {{ props.row.ProductName }}
              </div>
              <div class="text-grey-6 q-pt-xs">{{ props.row.CreateTime }}</div>
              <q-tooltip>{{ props.row.ProductName }}</q-tooltip>
            </q-td>
          </template>
          <template v-slot:body-cell-AirportName="props">
            <q-td :props="props">
              <div>{{ props.row.AirLine }}</div>
              <div>
                {{ props.row.AirportName }}
              </div>
              <div class="text-grey-9 q-pt-xs">{{ props.row.FlightNumber }}</div>
              <div class="text-grey-6 q-pt-xs">
                {{ props.row.FlightTime }}
                {{
                  search.OrderType == 1
                    ? $t("v102.CharteredBus.dida")
                    : $t("v102.CharteredBus.chufa")
                }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-HandLuggageNum="props">
            <q-td :props="props">
              <div v-if="props.row.HandLuggageNum > 0">
                <span class="text-grey-6 q-pt-xs q-pr-sm"
                  >{{ $t("v102.CharteredBus.sjc.c27") }}:</span
                >
                {{ props.row.HandLuggageNum }}
              </div>
              <div v-if="props.row.RegisteredLuggageNum > 0">
                <span class="text-grey-6 q-pt-xs q-pr-sm"
                  >{{ $t("v102.CharteredBus.sjc.c28") }}:</span
                >
                {{ props.row.RegisteredLuggageNum }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-GetonAddress="props">
            <q-td :props="props">
              <div v-if="props.row.GetonAddress">
                <span class="text-grey-6 q-pt-xs q-pr-sm"
                  >{{ $t("v102.CharteredBus.sjc.c25") }}:</span
                >
                {{ props.row.GetonAddress }}
              </div>
              <div class="q-pt-xs" v-if="props.row.GetoffAddress">
                <span class="text-grey-6 q-pt-xs q-pr-sm"
                  >{{ $t("v102.CharteredBus.sjc.c26") }}:</span
                >
                {{ props.row.GetoffAddress }}
              </div>
              <div class="q-pt-xs">
                <span class="text-grey-6 q-pt-xs q-pr-sm fz12"
                  >{{ $t("v102.CharteredBus.sjc.c8") }}:</span
                >{{ props.row.OrderDate }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-Numr="props">
            <q-td :props="props">
              <div v-if="props.row.ManNum > 0">
                <span class="text-grey-6 q-pt-xs q-pr-sm"
                  >{{ $t("v102.CharteredBus.sjc.c21") }}:</span
                >
                {{ props.row.ManNum }}{{ $t("v102.CharteredBus.sjc.c30") }}
              </div>
              <div class="q-pt-xs" v-if="props.row.ChildNum > 0">
                <span class="text-grey-6 q-pt-xs q-pr-sm"
                  >{{ $t("v102.CharteredBus.sjc.c22") }}:</span
                >
                {{ props.row.ChildNum }}{{ $t("v102.CharteredBus.sjc.c30") }}
              </div>
              <div class="q-pt-xs" v-if="props.row.BabyNum > 0">
                <span class="text-grey-6 q-pt-xs q-pr-sm"
                  >{{ $t("v102.CharteredBus.sjc.c23") }}:</span
                >
                {{ props.row.BabyNum }}{{ $t("v102.CharteredBus.sjc.c30") }}
              </div>
            </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">{{ x.CurrencyCode }}</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="editOrder(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-list>
          <div v-else>
            <div class="f12 text-green-4">{{ $t("hotelorder.payed") }}</div>
            <div class="text-subtitle1 din text-green-14">
              {{ x.Income.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>
</template>

<script lang="ts">
import CharteredBusService from "../../../api/CharteredBus";
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 { useRouter } from "vue-router";
import BankAccount from "../../BankAccount.vue";
export default defineComponent({
  components: { svgIcon, BankAccount },
  props: ["OrderType"],
  setup(props) {
    const $router = useRouter();
    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();
    });
    watch(props, (n, o) => {
      search.OrderType = props.OrderType;
    });

    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: "OrderDate",
          label: t("v102.CharteredBus.sjc.c19") + "(" + t("v102.CharteredBus.pt") + ")",
          field: (row: any) => row,
          align: "left",
        },
        {
          name: "AirportName",
          label: t("v102.CharteredBus.hangban"),
          field: (row: any) => row,
          align: "left",
        },
        {
          name: "HandLuggageNum",
          label: t("v102.CharteredBus.sjc.c31"),
          field: (row: any) => row,
          align: "left",
        },
        {
          name: "GetonAddress",
          label: t("v102.CharteredBus.sjc.c24"),
          field: (row: any) => row,
          align: "left",
        },
        {
          name: "Numr",
          label: t("v102.CharteredBus.sjc.c29"),
          field: (row: any) => row.Num,
          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[],
    });

    const methods = {
      ViewPayment() {
        data.showBankAccount = true;
      },
      initOrders() {
        data.loading = true;
        let param = Object.assign(data.pages, search);
        CharteredBusService.GetTYMyCarOrderPageList(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];
              });
              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;
        CharteredBusService.CancelTYCarOrder(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();
      },
      editOrder(order: any) {
        let onldOpen = `${order.OrderDate.split("-")}`;
        let newOpen =
          onldOpen.substring(0, 4) + onldOpen.substring(5, 7) + onldOpen.substring(8, 10);
        $router.push({
          path: `/vehicle/Preview/${order.ProductId}/${newOpen}/${order.OrderId}`,
        });
      },
      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,
      search,
      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>
