import MHeader from '@/components/m-header';
import { defineComponent, 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'
    });
    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" /> */}
                <List orderStatus="PAYING" />
              </div>
            </Tab>
            <Tab name="2" title="已领取">
              <div class={styles.wrap}>
                <List orderStatus="PAID" />
              </div>
            </Tab>
            <Tab name="3" title="已关闭">
              <div class={styles.wrap}>
                <List orderStatus="CLOSED" />
              </div>
            </Tab>
            <Tab name="4" title="退回">
              <div class={styles.wrap}>
                <List orderStatus="REFUNDED" />
              </div>
            </Tab>
          </Tabs>
        </div>
      </div>
    );
  }
});