<template>
    <!-- 订单进度步骤条 -->
    <el-card class="box-card">
        <div class="order-progress" :class="`progress-${progress}`">
            <ul>
                <li>
                    <span>下单时间</span>
                    <div class="tip">1</div>
                    <!-- <div class="tip">{{ record.create_time }}</div> -->
                </li>
                <li>
                    <span>付款</span>
                    <!-- <div v-if="record.pay_status == PayStatusEnum.SUCCESS.value" class="tip">付款于 {{ record.pay_time }}</div> -->
                </li>
                <li>
                    <span>发货</span>
                    <!-- <div v-if="record.delivery_status == DeliveryStatusEnum.DELIVERED.value" class="tip">发货于 {{
                        record.delivery_time }}</div> -->
                </li>
                <li>
                    <span>收货</span>
                    <!-- <div v-if="record.receipt_status == ReceiptStatusEnum.RECEIVED.value" class="tip">收货于 {{
                        record.receipt_time }}</div> -->
                </li>
                <li>
                    <span>完成</span>
                    <!-- <div v-if="record.order_status == OrderStatusEnum.COMPLETED.value" class="tip">完成于 {{
                        record.receipt_time }}</div> -->
                </li>
            </ul>
        </div>
    </el-card>


    <!-- 订单信息 -->
    <el-card class="box-card">

        <!-- 订单操作 -->
        <div class="order-operation">
            <div class="card-title">订单操作</div>

            <div class="btn-box">
                <el-button type="primary">发 货</el-button>
            </div>
        </div>

        <el-divider />

        <div class="order-info">
            <div class="card-title">订单信息</div>
        <el-row class="order-info-box">
            <el-col :span="8">订单号： 11111</el-col>
            <el-col :span="8">实付款金额： 11111</el-col>
            <el-col :span="8">支付方式： 11111</el-col>
        </el-row>
        <el-row class="order-info-box">
            <el-col :span="8">配送方式： 11111</el-col>
            <el-col :span="8">运费金额： 11111</el-col>
            <el-col :span="8">订单状态： 11111</el-col>
        </el-row>
        <el-row class="order-info-box">
            <el-col :span="8">订单号： 11111</el-col>
            <el-col :span="8">买家信息： 11111</el-col>
            <el-col :span="8"> 买家留言： 11111</el-col>
        </el-row>
        </div>
        


    </el-card>


    <!-- 商品信息 -->
    <el-card class="box-card">

        <div class="card-title">订单商品</div>

        <el-table v-loading="loading" :data="dataList" ref="tableRef" highlight-current-row>
            <el-table-column prop="goodsInfo" label="商品信息" width="850">
                <!-- <template #default="scope">
                    <div class="goods-info-box">
                        <el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
                            :src="scope.row.goodsPicture?.split(',')[0]" :preview-src-list="scope.row.goodsPicture?.split(',')">
                            <div><el-icon :size="15">
                                    <document />
                                </el-icon></div>
                        </el-image>

                        <div>
                            <div class="goods-info-text m2">
                                {{ scope.row.goodsName }}
                            </div>
                            <div>
                                <el-tag type="info">{{ scope.row.goodsSpecName }}</el-tag>
                            </div>
                        </div>
                    </div>

                </template> -->
            </el-table-column>
            <el-table-column prop="payPrice" label="编码" width="150" />
            <el-table-column prop="payPrice" label="重量(Kg)" width="150" />
            <el-table-column prop="payType" label="单价" width="150">
                <!-- <template #default="scope">
                    <div>￥ 2</div>
                </template> -->
            </el-table-column>
            <el-table-column prop="payType" label="购买数量" width="150">
                <!-- <template #default="scope">
                    <div>￥ 2</div>
                </template> -->
            </el-table-column>
            <el-table-column prop="payType" label="商品总价" width="150">
                <!-- <template #default="scope">
                    <div>￥ 2</div>
                </template> -->
            </el-table-column>

        </el-table>

        <div class="order-summary-box">
            <div>订单总额: &nbsp;￥111.00</div>
            <div>运费金额: &nbsp;￥0.00</div>
            <div>实付款金额: &nbsp;<b>￥111.00</b></div>
        </div>

    </el-card>


    <!-- 收货信息 / 发货信息 -->
    <!-- 订单信息 -->
    <el-card class="box-card">

        <div class="card-title">收货信息</div>
        <el-row class="order-info-box">
            <el-col :span="8">收货人姓名： 11111</el-col>
            <el-col :span="8">联系电话： 11111</el-col>
            <el-col :span="8">收货地区： 11111</el-col>
        </el-row>
        <el-row class="order-info-box">
            <el-col :span="8">详细地址： 11111</el-col>
        </el-row>

        <el-divider />
        <div class="card-title">发货信息</div>
        <el-row class="order-info-box">
            <el-col :span="8">物流公司： 11111</el-col>
            <el-col :span="8">物流单号： 11111</el-col>
            <el-col :span="8">发货状态： 11111</el-col>
        </el-row>
        <el-row class="order-info-box">
            <el-col :span="8">发货时间： 11111</el-col>
        </el-row>

    </el-card>
</template>

<script setup>

const progress = ref(2)
const loading = ref(false)
const dataList = ref([])

</script>

<style lang="scss" scoped>
.box-card {
    position: relative;
    margin-bottom: 30px;
}

.card-title {
    // font-size: 18px;
    margin-bottom: 30px;
    font-weight: bold;
}

.btn-box {
    display: flex;
}

// 分割线
.o-divider {
    margin-bottom: 32px;
}

// 步骤条
.order-progress {
    height: 26px;
    line-height: 26px;
    background: #f8f8f8;
    border-radius: 13px;
    font-size: 14px;
    text-align: center;
    position: relative;

    li {
        list-style: none;
    }

    &:before,
    &:after {
        content: '';
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        bottom: 0;
        border-radius: 13px;
        background: #1890ff;
    }

    &:after {
        background: #91d5ff;
        z-index: 1;
    }

    &.progress-1 {
        &:before {
            width: 0;
        }

        &:after {
            width: 20%;
        }
    }

    &.progress-2 {
        &:before {
            width: 20%;
        }

        &:after {
            width: 40%;
        }
    }

    &.progress-3 {
        &:before {
            width: 40%;
        }

        &:after {
            width: 60%;
        }
    }

    &.progress-4 {
        &:before {
            width: 60%;
        }

        &:after {
            width: 80%;
        }
    }

    &.progress-5 {
        &:before {
            width: 100%;
        }

        &:after {
            width: 100%;
        }

        li {
            &:nth-child(5) {
                color: #fff;
            }
        }
    }

    li {
        width: 20%;
        float: left;
        border-radius: 13px;
        position: relative;
        z-index: 3;
    }

    .tip {
        font-size: 12px;
        padding-top: 10px;
        color: #8c8c8c;
    }

    &.progress-1 li:nth-child(1),
    &.progress-2 li:nth-child(1),
    &.progress-3 li:nth-child(1),
    &.progress-4 li:nth-child(1),
    &.progress-5 li:nth-child(1) {
        color: #fff;
    }

    &.progress-2 li:nth-child(2),
    &.progress-3 li:nth-child(2),
    &.progress-4 li:nth-child(2),
    &.progress-5 li:nth-child(2) {
        color: #fff;
    }

    &.progress-3 li:nth-child(3),
    &.progress-4 li:nth-child(3),
    &.progress-5 li:nth-child(3) {
        color: #fff;
    }

    &.progress-4 li:nth-child(4),
    &.progress-5 li:nth-child(4) {
        color: #fff;
    }
}


// 信息盒子
.order-info{
    margin-bottom: 10px;
}
.order-info-box {
    font-size: 15px;
    margin-top: 25px;
}


// 订单商品
.order-summary-box {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    margin: 20px 0;

    div {
        font-size: 15px;
        margin-bottom: 5px;
    }
}
</style>