<template>
    <div :class="classes()">
        <div :class="classes('box')" @click="orderDetails">
            <span class="orderLeft orderGrey">订单编号：{{orderId}}</span>
            <span class="orderRight red" v-if="orderStatus=='NEED_PAY' || orderStatus=='PAYING'">{{orderStatusDescription || '未付款'}}</span>
            <span class="orderRight red" v-if="orderStatus=='PAID'">{{orderStatusDescription || '待提货'}}</span>
            <span class="orderRight orderGrey" v-if="orderStatus=='FINISHED'||orderStatus=='SERVICED'">{{orderStatusDescription || '已提货'}}</span>
            <span class="orderRight orderGrey" v-if="orderStatus=='CLOSED'||orderStatus=='CANCELED'">{{orderStatusDescription || '交易关闭'}}</span>
            <span class="orderRight orderGrey" v-if="orderStatus=='DELETED'" style="color: red;">{{orderStatusDescription || '已删除'}}</span>
        </div>
        <div :class="classes('list')" @click="orderDetails">
            <ul class="shop-img-list">
                <li class="shop-img-list-item" v-for="(item, index) in itemList" :key="index">
                    <h-image :src="item.thumbnailsUrl"></h-image>
                </li>
            </ul>
            <h-image src="https://front-xps-cdn.xsyx.xyz/2019/11/01/1605049687.jpg" v-if="itemList.length>5" class="dian"></h-image>
            <h-image src="https://front-xps-cdn.xsyx.xyz/2019/11/01/471523909.jpg" class="arrowsRight"></h-image>
        </div>
        <div class="time-total">
            <div class="orderInfo orderGrey">{{orderDate}}</div>
            <div class="totalRight redText">
                <span class="orderGrey L_small">共{{totalQty}}件商品 </span> 
                <span class="small"> ￥</span>
                <span class="big">{{orderTotal}}</span>
            </div>
        </div>
        <div class="bill-btn">
            <span class="bill-detail">提货单号:<i class="bill-id">{{billOfLading}}</i>{{phone}}</span>
            <span class="surePickUp-btn" @click="onPay" v-if="orderStatus=='NEED_PAY' || orderStatus=='PAYING'">去付款</span>
            <span class="surePickUp-btn greybtn" @click="onDelete" v-if="orderStatus=='FINISHED' || orderStatus=='CLOSED'">删除</span>
        </div>
    </div>
</template>
<script>
import { classesMixin } from '../../common/mixins/classname';
import hImage from '../image/index.vue';
let classMixin = classesMixin('order-shop');
export default {
    name: 'h-order-shop',
    mixins: [ classMixin ],
    components: {
        hImage
    },
    props: {
        // 订单编号
        orderId: [ Number, String ],
        // 订单状态
        orderStatus: String,
        // 商品列表
        itemList: Array,
        // 订单日期
        orderDate: String,
        // 商品总数
        totalQty: [Number, String],
        // 订单金额
        orderTotal: [Number, String],
        // 提货单号
        billOfLading: [Number, String],
        // 电话号码
        phone: [Number, String],
         // 订单状态-文字
        orderStatusDescription: String,
    },
    methods: {
        onPay() {
            this.$emit('pay', { item: this.$props });
        },
        onDelete() {
            this.$emit('delete', { item: this.$props });
        },
        orderDetails() {
            this.$emit('detail', { item: this.$props });
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>