<template>
    <div v-if="orderDatalist">
        <Modal v-model="modals" scrollable :title="`${orderDatalist.order_id}订单信息`" width="800" class="order_box">
			<div class="details-item">
			    <div class="title">订单信息</div>
			    <div class="list fx-r">
			        <div class="term fx-r">
			            <div class="name">订单编号：</div>
			            <div class="value">{{ orderDatalist.order_id }}</div>
			        </div>
			
			        <div class="term fx-r">
			            <div class="name">订单状态：</div>
			            <div class="value">
			                <div>
			                    <div  v-if="orderDatalist.status == 0">
			                        待支付
			                    </div>
			                    <div v-if="orderDatalist.status == 1">
			                        待发货
			                    </div>
			                    <div v-if="orderDatalist.status == 2">
			                        待收货
			                    </div>
								<div v-if="orderDatalist.status == 3">
								    已完成
								</div>
								<div v-if="orderDatalist.status == -1">
								    已关闭
								</div>
			                </div>
			            </div>
			        </div>
					
					<div class="term fx-r">
					    <div class="name">订单类型：</div>
					    <div class="value">{{ orderDatalist.is_ip_buy==1?'IP购买':'普通购买' }}</div>
					</div>
					
					<div class="term fx-r">
					    <div class="name">收货人：</div>
					    <div class="value">{{ orderDatalist.name}}</div>
					</div>
					<div class="term fx-r">
					    <div class="name">收货电话：</div>
					    <div class="value">{{ orderDatalist.tel}}</div>
					</div>
					<div class="term fx-r">
					    <div class="name">收货地址：</div>
					    <div class="value">{{ orderDatalist.address}}</div>
					</div>
					
					<div class="term fx-r">
					    <div class="name">订单金额：</div>
					    <div class="value">{{ orderDatalist.total_money}}</div>
					</div>
					<div class="term fx-r">
					    <div class="name">实付金额：</div>
					    <div class="value">{{ orderDatalist.pay_money}}</div>
					</div>
					<div class="term fx-r">
					    <div class="name">优惠券：</div>
					    <div class="value">{{ orderDatalist.coupon_money}}</div>
					</div>
					<div class="term fx-r">
					    <div class="name">积分抵扣：</div>
					    <div class="value">{{ orderDatalist.score}}</div>
					</div>
					<div class="term fx-r">
					    <div class="name">订单备注：</div>
					    <div class="value">{{ orderDatalist.mono}}</div>
					</div>
					<div class="term fx-r">
					    <div class="name">赠送积分：</div>
					    <div class="value">{{ orderDatalist.give_score}}</div>
					</div>
					<div class="term fx-r">
					    <div class="name">快递单号：</div>
					    <div class="value">{{ orderDatalist.express_num}}</div>
					</div>
					
					<div class="term fx-r"></div>
			        <div class="term fx-r">
			            <div class="name">下单时间：</div>
			            <div class="value">{{ orderDatalist.time }}</div>
			        </div>
			
			        <div class="term fx-r">
			            <div class="name">支付时间：</div>
			            <div class="value">{{ orderDatalist.pay_time }}</div>
			        </div>
					
					<div class="term fx-r">
					    <div class="name">发货时间：</div>
					    <div class="value">{{ orderDatalist.fa_time }}</div>
					</div>
					
					<div class="term fx-r">
					    <div class="name">完成时间：</div>
					    <div class="value">{{ orderDatalist.ok_time }}</div>
					</div>

			
			        
			    </div>
			</div>
<!-- 			 <Divider style="margin: 20px 0 !important;"/> -->
            <div class="details-item">
                <div class="title">订单明细</div>
                <Table :columns="columns" :data="orderDatalist.info" >
					<template slot-scope="{ row, index }" slot="img">
						<img v-lazy="row.img" :src="row.img" v-image-preview style="width: 60px;cursor: pointer"/>
					</template>
				</Table>
            </div>
           
            
        </Modal>
    </div>
</template>

<script>
    export default {
        name: 'orderDetails',
        data() {
            return {
                modal2: false,
                modals: false,
                columns: [
                    {
                        title: '商品ID',
                        key: 'p_id',
                        width: 80,
                        align: 'center'
                    },
					{
					    title: '图片',
					    slot: 'img',
					    width: 100,
					    align: 'center'
					},
					{
					    title: '商品标题',
					    key: 'title',
					    align: 'center'
					},
					{
					    title: '商品单价',
					    key: 'price',
					    width: 100,
					    align: 'center'
					},
					{
					    title: '数量',
					    key: 'count',
					    width: 100,
					    align: 'center'
					},
					{
					    title: '合计',
					    key: 'money',
					    width: 100,
					    align: 'center'
					},


                ]
            }
        },
        props: {
            orderDatalist: Object,
            orderId: Number
        },
        methods: {
            openLogistics() {
                this.getOrderData()
                this.modal2 = true;
            },
            // 获取订单物流信息
            getOrderData() {
                // getExpress(this.orderId).then(async res => {
                //     this.result = res.data.result;
                // }).catch(res => {
                //     this.$Message.error(res.msg);
                // })
            }
        },
        computed: {}
    }
</script>

<style scoped>
    .details-item .title {
        color: #17233d;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .details-item .list {
    }

    .details-item .list .term {
        width: 50%;
        color: #17233d;
        white-space: nowrap;
        font-size: 12px;
        padding-bottom: 10px
    }
    .tabBox_img{
        width:36px;
        height:36px;
        border-radius:4px;
        cursor:pointer;
    }
    .tabBox_img img{ max-width: 100%;}

</style>
