<template>
  <qinui-theme v-model="thePageStatus" :loading="theLoading">
    <qinui-layout-order-list
      :tabsData="theStatusDatas"
      :logined="theIsLogin"
      :h5Auth="onClick"
      :minAfterAuth="onAfterAuth"
      :getData="onGetList"
      tabValue="completed"
    >
      <template v-slot:list="{ data }">
        <div>
          <qinui-item-order
            :data="theOne"
            :key="theOne.incrementId"
            v-for="theOne in data"
          />
          <qinui-box>
            <qinui-copyright content="----我是有底线的----" />
          </qinui-box>
        </div>
      </template>
    </qinui-layout-order-list>
  </qinui-theme>
</template>

<script lang="ts" setup>
  import { onMounted, ref, shallowRef } from 'vue';

  // 模拟数据 start
  const theStatusConf = [
    {
      label: '待支付',
      value: 'pending',
    },
    {
      label: '待使用',
      value: 'wait_use',
    },
    {
      label: '已完成',
      value: 'completed',
    },
    {
      label: '已关闭',
      value: 'closed',
    },
  ];

  const theOneData = {
    pagination: {
      currentPage: 1,
      from: 1,
      lastPage: 8,
      perPage: 10,
      to: 10,
      total: 73,
    },
    data: [
      {
        incrementId: 'DZ2401091719403896381649',
        createdAt: '01-09 17:19:40',
        productDate: '游玩日期2022年12月29日 - 2022年11月12日',
        pOrderId: '',
        payAmount: '0.00',
        productTitle:
          '双日成人票',
        productSubTitle:
          '双日成人票',
        productSkuTitle:
          '双日成人票',
        orderState: '\u5f85\u4f7f\u7528',
        canReserve: true,
        ticketNo: '',
        productUnitLabel: '\u4ef6',
        total: 1,
        showReserve: true,
        reserveState: 2,
        poster:
          'https://dz-cdn.test.fanzhi.cn/images/51/71/676c329c8dbbf8727f68ad0257f4.jpg',
        needAppointment: true,
        appointmentType: 1,
        isThirdOrder: false,
        isLogistics: 0,
      },
    ],
  };
  // 模拟数据 end

  const theStatusDatas = ref<any>([]);
  // 获取状态
  const onGetStatus = () => {
    theStatusDatas.value = theStatusConf;
  };

  // ajax 接口方法
  const onGetList = (theParams: any) => {
    console.log(theParams, 'theParams');
    return new Promise((resolve) => {
      let theDatas = {};
      if (theParams._page === 1) {
        theDatas = theOneData;
      } else {
        theDatas = {
          data: [],
          pagination: {
            total: 8,
            lastPage: 1,
          },
        };
      }
      resolve(theDatas);
    });
  };

  const thePageStatus = shallowRef(false);
  const theLoading = shallowRef(true);

  // 登录相关 start
  const theIsLogin = shallowRef(true);
  const onAfterAuth = (theItem: any) => {
    console.log(theItem, '授权成功');
    theIsLogin.value = true;
  };
  const onClick = () => {
    console.log('h5 点击');
  };
  // 登录相关 start

  onMounted(() => {
    onGetStatus();
    // #ifndef H5
    // 获取 code
    qin.login({
      complete(resCode) {
        console.log(resCode, 'resCode');
      },
    });
    // #endif
    setTimeout(() => {
      theLoading.value = false;
      thePageStatus.value = true;
    }, 300);
  });
</script>