<template>
  <div>
    <q-card
      class="light-shadow q-pa-md bg-white rounded-borders q-mb-md"
      flat
      v-for="(x, index) in orders"
      :key="index"
    >
      <div class="row items-center desktop-only">
        <div class="f12 text-grey-6">
          {{ $t("hotelorder.search.orderNum") }}：{{ x.orderId }}
        </div>
        <div class="col text-center f12 text-grey-6">
          <span
            >{{ $t("hotelorder.search.contactInfo") }}：{{ x.contactName }}/{{
              x.contactMobile
            }}</span
          >
        </div>
        <div class="f12 text-grey-6">
          {{ $t("hotelorder.createTime") }}：{{ x.createDate }}
        </div>
      </div>
      <div class="reactive">
        <div class="q-mt-md row">
          <q-table
            separator="cell"
            :hide-bottom="!x.Remark || !x.isMore"
            :pagination="{ rowsPerPage: 100 }"
            dense
            :rows="x.rows"
            bordered
            :columns="cols"
            class="sticky-rightrowspan-column-table light-border col no-shadow"
          >
          </q-table>
        </div>
        <div class="q-my-md">{{ $t("travel.Remarks") }}: {{ x.remarks }}</div>
      </div>

      <div
        class="q-mt-md"
        :class="{ row: $q.platform.is.desktop, 'column reverse': $q.platform.is.mobile }"
      >
        <div
          class="pay row text-grey rounded-borders q-pa-md"
          :class="{ 'bg-grey-2': $q.platform.is.mobile }"
        >
          <svg-icon
            color=" svg-red"
            icon="Code/Warning-1-circle.svg"
            :size="16"
            v-if="$q.platform.is.desktop"
          ></svg-icon>
          <div class="q-ml-sm"></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.preferPrice) }}</span>
              <!-- <span class="f12">{{ $t('unit.jp') }}</span> -->
            </div>
          </div>
          <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("travel.pays") }}</div>
            <div class="dark q-ml-xl">
              <!-- <span class="f12">{{ $t('unit.jpc') }}</span> -->
              <span class="din text-subtitle1">{{ moneyFormat(x.income) }}</span>
              <!-- <span class="f12">{{ $t('unit.jp') }}</span> -->
            </div>
          </div>
          <div
            class="row items-center justify-between q-mb-sm q-pb-sm"
            style="border-bottom: 1px dashed #ddd"
            v-if="x.CustomerPayType == 1 || x.CustomerPayType == 3"
          >
            <div class="f12 text-grey">{{ $t("hotelorder.payType.t1") }}</div>
            <div class="dark">
              <span class="f12">{{ moneyFormat(x.SelfPayMoney) }}</span>
              <span class="f12">{{ $t("unit.jp") }}</span>
            </div>
          </div>
          <div
            class="row items-center justify-between"
            v-if="x.CustomerPayType == 2 || x.CustomerPayType == 3"
          >
            <div class="f12 text-grey">{{ $t("hotelorder.payType.t2") }}</div>
            <div class="dark">
              <span class="f12">{{ moneyFormat(x.BeforeMoney) }}</span>
              <span class="f12">{{ $t("unit.jp") }}</span>
            </div>
          </div>
        </div>
        <div
          v-if="x.OrderStatus == 1"
          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
            :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.OrderId)"
            >
              <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
              @click="goUrl(x.OrderId)"
            >
              <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>
      </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="showOrderdDetail">
    <!-- <OrderdDetail :OrderID="OrderID"></OrderdDetail> -->
  </q-dialog>

  <q-dialog v-model="showAddOrder">
    <AddOrder :info="info" @close="showAddOrder = false"></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.pages.pageCount = 1;
      data.orders = [];
      methods.initOrders();
    });

    const data = reactive({
      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,
      columnsT: [
        {
          name: "calories",
          align: "center",
          label: "Calories",
          field: "calories",
          sortable: true,
        },
        { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
        { name: "carbs", label: "Carbs (g)", field: "carbs" },
        { name: "protein", label: "Protein (g)", field: "protein" },
        { name: "sodium", label: "Sodium (mg)", field: "sodium" },
        { name: "calcium", label: "Calcium (%)", field: "calcium", sortable: true },
        { name: "iron", label: "Iron (%)", field: "iron", sortable: true },
      ],
      cols: [
        {
          name: "startDate",
          field: "startDate",
          label: t("travel.startDate"),
          align: "left",
        },
        // {
        //   name: "oldPeopleNum",
        //   field: "oldPeopleNum",
        //   label: t("travel.oldPeople"),
        //   align: "left",
        // },

        { name: "manNum", field: "manNum", label: t("travel.man"), align: "left" },
        {
          name: "chirdNum",
          field: "chirdNum",
          label: t("travel.children"),
          align: "left",
        },
        { name: "babyNum", field: "babyNum", label: t("travel.BabyNum"), align: "left" },
        {
          name: "guestNum",
          field: "guestNum",
          label: t("travel.guestNum"),
          align: "left",
        },

        {
          name: "tC_Price",
          field: "tC_Price",
          label: t("travel.tC_Price"),
          align: "left",
          format: (val: any) => val.toLocaleString(),
        },
        {
          name: "unit_Price",
          field: "unit_Price",
          label: t("travel.unit_Price"),
          align: "left",
          format: (val: any) => val.toLocaleString(),
        },
        {
          name: "tradeWay",
          field: "tradeWay",
          label: t("travel.tradeWay"),
          align: "left",
        },
        // { name: 'remarks', field: 'remarks', label: '备注', align: 'left' },
      ] as any,
    });

    const methods = {
      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);
        param.PayStatus = param.PayStatus ? param.PayStatus : -1;
        travelService
          .getOrderList(param)
          .then((r) => {
            data.loading = false;
            if (r.data.resultCode == ApiResult.SUCCESS) {
              data.orders = r.data.data.pageData;
              data.orders.forEach((item) => {
                item.rows = [toRaw(item)];
                item.tradeWay =
                  item.tradeWay === 1 ? t("travel.online") : t("travel.notLine");
              });
              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>
.mb-title {
  font-weight: bold;
  margin-bottom: 10px;
}
.mb {
  margin-bottom: 10px;
}
</style>
