<template>
    <div :class='classes()' :style="customStyle">
        <div class='title'>我的订单</div>
        <div class='line'></div>
        
        <div :class="classes('content')">
            <div @click="openOrderList('all')" :class="classes('item')">
                <div class="img-box">
                    <h-image src="https://front-xps-cdn.xsyx.xyz/2019/08/15/1141828417.png"></h-image>
                </div>
                <span>全部订单</span>
            </div>
            <div @click="openOrderList('NEED_PAY')" :class="classes('item')">
                <div class="img-box">
                    <span class="order-tag" v-if="needPayNum>0">{{needPayNum}}</span>
                    <!-- <em >9</em> -->
                    <h-image src="https://front-xps-cdn.xsyx.xyz/2019/08/15/1909763276.png"></h-image>
                </div>
                <span>未付款</span>
            </div>
            <div @click="openOrderList('PAID')" :class="classes('item')">

                <div class="img-box">
                    <span class="order-tag" v-if="paiedNum>0">{{paiedNum}}</span>
                    <h-image src="https://front-xps-cdn.xsyx.xyz/2019/08/15/483472379.png"></h-image>
                </div>
                <span>待提货</span>
            </div>
            <div @click="openOrderList('FINISHED')" :class="classes('item')">
                <div class="img-box">
                    <h-image src="https://front-xps-cdn.xsyx.xyz/2019/08/15/1701008653.png"></h-image>
                </div>
                <span>已提货</span>
            </div>
        </div>
    </div>
</template>
<script>
import { classesMixin } from '../../common/mixins/classname';
import hImage from '../image/index.vue';
let classMixin = classesMixin('my-card');
export default {
    name: 'h-my-order',
    mixins: [ classMixin ],
    components: {
        hImage
    },
    props: {
        // 自定义样式
        customStyle: Object,
        //未付款订单数
        needPayNum: [Number,String],
        //待提货订单数
        paiedNum: [Number,String],
    },
    methods: {
        openOrderList( type ) {
            this.$emit( 'click', type )
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>