<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 == -1">
								    已关闭
								</div>
			                </div>
			            </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>
			        <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>
			</div>
           <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.show_template_title }}</div>
				    </div>
					<div class="term fx-r">
					    <div class="name">模板主图：</div>
					    <div class="value"><img v-if="orderDatalist.show_template_imgs.length>0" v-lazy="orderDatalist.show_template_imgs[0]" :src="orderDatalist.show_template_imgs[0]" v-image-preview style="width: 60px;cursor: pointer"/></div>
					</div>
							
				</div>
              
            </div>
           
            
        </Modal>
    </div>
</template>

<script>
    export default {
        name: 'ShowTemplateOrderDetails',
        data() {
            return {
                modal2: false,
                modals: false,
                columns: [
                    {
                        title: '模板标题',
                        key: 'title',
                        align: 'left'
                    },
					{
					    title: '模板价格',
					    key: 'value',
					    align: 'left'
					},
                ]
            }
        },
        props: {
            orderDatalist: Object,
            orderId: Number
        },
        methods: {
        },
        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>
