import MHeader from '@/components/m-header';
import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import { Tab, Tabs } from 'vant';
import List from './component/list';

export default defineComponent({
  name: 'collection-record',
  setup() {
    const data = reactive({
      tab: '1',
      refundIndex: 0
    });
    return () => (
      <div class={styles.container}>
        <MHeader />
        <div class={styles.content}>
          <Tabs v-model:active={data.tab} animated swipeable>
            <Tab name="1" title="待领取">
              <div class={styles.wrap}>
                <List orderStatus="WAIT_PAY,PAYING" />
              </div>
            </Tab>
            <Tab name="2" title="已领取">
              <div class={styles.wrap}>
                <List orderStatus="PAID,REFUNDED" onRefund={() => data.refundIndex = data.refundIndex + 1} />
              </div>
            </Tab>
            <Tab name="3" title="已关闭">
              <div class={styles.wrap}>
                <List orderStatus="CLOSED" />
              </div>
            </Tab>
            <Tab name="4" title="退回">
              <div class={styles.wrap}>
                <List refundIndex={data.refundIndex} orderStatus="REFUNDED" />
              </div>
            </Tab>
          </Tabs>
        </div>
      </div>
    );
  }
});
