<style scoped>
.none {
  text-align: center;
  margin: 20px;
  color: #666;
  font-size: 16px;
}
</style>
<template>
<div class="q-pa-md">

  <!-- <div class="rounded-borders bg-white row items-center q-pa-md">
    <q-field :class="$q.platform.is.desktop ? '' : 'q-mb-md'" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2" style="min-width: 190px" dense>
      <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
      <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
        <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape
          @range-end="dateRangeHandler"></q-date>
      </q-popup-proxy>
    </q-field>
    <q-input class="q-mr-md q-ml-md" v-model="search.GTeamName" dense standout label="团号"/>
    <div class="col"></div>
    <q-btn color="primary" unelevated :label="$t('query')"  @click="setQueryHandler"/>
  </div> -->
  <!-- <div class="row">

    <div>合作伙伴:<span>{{item.ContactName}}</span></div>
    <div>已入名单人数：<span>{{item.EntGuestNum}}</span></div>
    <div>已入名单人数：<span>{{item.IsHaveFinance}}</span></div>
    <div>报名总人数:<span>{{item.GuestNum}}</span></div>
    <div>应收总金额：<span>{{item.PreferPrice}}</span></div>
    <div>退款金额：<span>{{item.Refund}}</span></div>
    <div>平台税金:<span>{{item.PlatformTax}}</span></div>
    <div>实收：<span>{{item.Income}}</span></div>
    <div>在途金额：<span>{{item.ZaiTuMoney}}</span></div>
    <div>折扣金额:<span>{{item.DiscountMoney}}</span></div>
    <div>大红包抵扣金额：<span>{{item.RedEnvelopeMoney}}</span></div>
    <div>代收总金额：<span>{{item.DueInMoney}}</span></div>
    <div>利润：<span>{{item.CommissionRate}}</span></div></div>
  </div> -->
  <!-- <div class="row q-py-md full-width">

    <div class="col">{{$t('travel.ContactNamePay')}}</div>
    <div class="col">{{$t('travel.EntGuestNum')}}</div>
    <div class="col">{{$t('travel.GuestNum')}}</div>
    <div class="col">{{$t('travel.PreferPricePay')}}</div>
    <div class="col">{{$t('travel.Refund')}}</div>
    <div class="col-1">{{$t('travel.PlatformTax')}}</div>
    <div class="col">{{$t('travel.Income')}}</div>
    <div class="col-1">{{$t('travel.ZaiTuMoney')}}</div>
    <div class="col">{{$t('travel.DiscountMoney')}}</div>
    <div class="col-1">{{$t('travel.RedEnvelopeMoney')}}</div>
    <div class="col-1">{{$t('travel.DueInMoney')}}</div>
    <div class="col">{{$t('travel.CommissionRate')}}</div>
  </div>
  <div class="row q-py-md full-width" v-for="item in orders" :key="item.id">
    <div class="col"><span>{{item.ContactName}}</span></div>
    <div class="col text-center"><span>{{item.EntGuestNum}}</span></div>
    <div class="col"><span>{{item.GuestNum}}</span></div>
    <div class="col"><span>{{item.PreferPrice}}</span></div>
    <div class="col"><span>{{item.Refund}}</span></div>
    <div class="col-1"><span>{{item.PlatformTax}}</span></div>
    <div class="col"><span>{{item.Income}}</span></div>
    <div class="col-1"><span>{{item.ZaiTuMoney}}</span></div>
    <div class="col"><span>{{item.DiscountMoney}}</span></div>
    <div class="col-1"><span>{{item.RedEnvelopeMoney}}</span></div>
    <div class="col-1"><span>{{item.DueInMoney}}</span></div>
    <div class="col"><span>{{item.CommissionRate}}</span></div>
  </div> -->
  <!-- <div v-if="!orders.length" class="none">{{$t('travel.noData')}}</div> -->
  <q-table
            separator="cell"
            :pagination="{ rowsPerPage: 100 }"
            dense
            :rows="orders"
            bordered
            :columns="cols"
            class="sticky-rightrowspan-column-table light-border col no-shadow"
          >
          </q-table>
</div>
</template>
<script lang="ts">
  import { inject, provide, reactive, toRefs, defineComponent,onMounted, ref } from 'vue';
import travelService from "../../api/travel";
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from '../../config/dictionary';
import { ApiResult } from "../../@types/enumHelper";
import message from "../../utils/message";
import { useRoute } from 'vue-router'
import { date } from 'quasar'
import useMetaModule from '../../module/meta/metaModule'
export default defineComponent({
  setup(props) {
    const { t } = useI18n()
        let { setTitle } = useMetaModule()
    const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
    pageTitle.value = t('menu.travel.four')
    setTitle(pageTitle.value)
    const qDateProxy = ref(null) as any
    const dateRange = reactive({from: '', to: ''})
    dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 50 }), 'YYYY/MM/DD')
    dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 20 }), 'YYYY/MM/DD')
    const dateRangeFormat = ref(`${dateRange.from} - ${dateRange.to}`)
    const cols = ref([
      { name: 'ContactName', label: t('travel.ContactNamePay'), align: 'left', field: 'ContactName' },
      { name: 'EntGuestNum', label: t('travel.EntGuestNum'), align: 'left', field: 'EntGuestNum' },
      { name: 'GuestNum', label: t('travel.GuestNum'), align: 'left', field: 'GuestNum' },
      { name: 'PreferPrice', label: t('travel.PreferPricePay'), align: 'left', field: 'PreferPrice', format: (val: any) => val.toLocaleString() },
      { name: 'Refund', label: t('travel.Refund'), align: 'left', field: 'Refund', format: (val: any) => val.toLocaleString() },
      { name: 'Income', label: t('travel.Income'), align: 'left', field: 'Income', format: (val: any) => val.toLocaleString() },
      { name: 'DiscountMoney', label: t('travel.DiscountMoney'), align: 'left', field: 'DiscountMoney', format: (val: any) => val.toLocaleString() },
      { name: 'CommissionRate', label: t('travel.CommissionRate'), align: 'left', field: 'CommissionRate', format: (val: any) => val.toLocaleString() },
    ])
    const {query, params} = useRoute()
    const search = {
      TCID: query.id,
        // GTeamName: '',
        // SelectEndDate: '',
        // SelectStartDate: '',
      }
    const data = reactive({

      info: {},
      copyId: 0,
      showAddOrder: false,
      OrderID: "",
      showOrderdDetail: false,
      orders: [] as Array<any>,
      pages: {
        pageIndex: 1,
        pageSize: 10,
        pageCount: 0,
      },
      loadingCel: false,
      loading: false,
    });

    // search.SelectStartDate = dateRange.from
    // search.SelectEndDate = dateRange.to
    const methods = {
      setQueryHandler() {
        data.pages.pageIndex = 1
        methods.initOrders()
      },
      // dateRangeHandler(e: any) {
      //   search.SelectStartDate = `${e.from.year}/${e.from.month}/${e.from.day}`
      //   search.SelectEndDate = `${e.to.year}/${e.to.month}/${e.to.day} `
      //   dateRangeFormat.value = `${search.SelectStartDate} - ${search.SelectEndDate} `
      //   if (qDateProxy.value) qDateProxy.value.hide()
      // },
      optionsFn(cd: any) {
        return cd >= date.formatDate(date.addToDate(new Date(), { days: 20 }), 'YYYY/MM/DD')
      },
      initOrders() {
        data.loading = true;
        let param = Object.assign({}, search);
        travelService
          .payList(param)
          .then((r) => {
            data.loading = false;
            if (r.data.resultCode == ApiResult.SUCCESS) {
              data.orders = r.data.data.length ? r.data.data : [r.data.data];
              // data.pages.pageCount = r.data.data.pageCount;
            } else {
              message.errorMsg(r.data.message);
            }
          })
          .catch((e) => {
            message.errorMsg(e.message);
            data.loading = false;
          });
      },
    }
    methods.initOrders()
    return {
      ...toRefs(data),
      ...methods,
      search,
      dateRangeFormat,
      dateRange,
      cols
    };
  }
})
</script>