<!-- 
** 详细信息列表 -- 油罐、油枪
-->
<template>
    <el-dialog :title=isDisplay.title v-model="isDisplay.isShowDialog" width="300px" class="main-content">
        <div class="orderItem">
            <div>订单号：</div>
            <div>{{ isDisplay.order.id }}</div>
        </div>
        <div class="orderItem">
            <div>云端订单号：</div>
            <div>{{ isDisplay.order.cloundOrderId }}</div>
        </div>
        <div class="orderItem">
            <div>流水号：</div>
            <div>{{ isDisplay.order.ttc }}</div>
        </div>
        <div class="orderItem">
            <div>枪号：</div>
            <div>{{ isDisplay.order.nozzleNum }}号枪</div>
        </div>
        <div class="orderItem">
            <div>油品：</div>
            <div>{{ isDisplay.order.oilName }}</div>
        </div>
        <div class="orderItem">
            <div>单价：</div>
            <div>{{ isDisplay.order.price }}元/升</div>
        </div>
        <div class="orderItem">
            <div>加油金额：</div>
            <div>{{ isDisplay.order.amount }}元</div>
        </div>
        <div class="orderItem">
            <div>加油升数：</div>
            <div>{{ isDisplay.order.volume }}升</div>
        </div>
        <div class="orderItem">
            <div>实付金额：</div>
            <div>{{ isDisplay.order.amountPayable }}元</div>
        </div>
        <div class="orderItem">
            <div>退款金额：</div>
            <div>{{ isDisplay.order.refundAmount }}元</div>
        </div>
        <div class="orderItem">
            <div>支付时间：</div>
            <div>{{ isDisplay.order.paymentTime }}</div>
        </div>
        <div class="orderItem">
            <div>授权状态：</div>
            <div>{{ isDisplay.order.authrization }}</div>
        </div>
        <div class="orderItem">
            <div>支付状态：</div>
            <div>{{ isDisplay.order.paystatus }}</div>
        </div>
        <div class="orderItem">
            <div>支付类型：</div>
            <div>{{ isDisplay.order.paymentName }}</div>
        </div>
        <div class="orderItem">
            <div>用户：</div>
            <div>{{ isDisplay.order.user }}</div>
        </div>
        <div class="orderItem">
            <div>手机号：</div>
            <div>{{ isDisplay.order.phoneNumber }}</div>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref } from 'vue';

const isDisplay = reactive({
    isShowDialog: false,
    loading: false,
    title: '订单详情',
    order:null
})

// 挂载前
onBeforeMount(() => {
    
})

// 挂载时
onMounted(async () => {
    
})


const openDialog = (row) => {
    isDisplay.isShowDialog = true
    isDisplay.order = row
}

defineExpose({
    openDialog,
})


</script>

<style lang="scss">
.orderItem{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 3%;
    margin-right: 10%;
}
</style>