<template>
    <!-- 订单进度步骤条 -->
    <el-card class="box-card">
        <div class="order-progress" :class="`progress-${progress}`">
            <ul>
                <li>
                    <span>下单时间</span>
                    <div class="tip">{{ detail.createTime }}</div>
                </li>
                <li>
                    <span>付款</span>
                    <div v-if="detail.payStatus == 2" class="tip">付款于 {{ detail.payTime }}</div>
                </li>
                <li>
                    <span>发货</span>
                    <div v-if="detail.deliveryStatus == 2" class="tip">发货于 {{ detail.deliveryTime }}</div>
                </li>
                <li>
                    <span>收货</span>
                    <div v-if="detail.receiptStatus == 2" class="tip">收货于 {{ detail.receiptTime }}</div>
                </li>
                <li>
                    <span>完成</span>
                    <div v-if="detail.orderStatus == 4" class="tip">完成于 {{ detail.receiptTime }}</div>
                </li>
            </ul>
        </div>
    </el-card>


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

        <template v-if="detail.orderStatus != 2">
            <!-- 订单操作 -->
            <div class="order-operation">
                <div class="card-title">订单操作</div>

                <!-- 订单改价 -->
                <div class="btn-box">
                    <el-button v-if="detail.payStatus == 1" @click="handleChangePrice(detail)">订单改价</el-button>

                    <!-- 发货 -->
                    <el-button v-if="(
                        detail.payStatus == 2
                        && detail.deliveryType == 1
                        && detail.deliveryStatus == 1
                        && detail.orderStatus != 2
                        && detail.orderStatus != 3
                    )" type="primary" @click="handleDeliver(detail)">发 货</el-button>

                    <!-- 审核取消订单 -->
                    <div v-if="detail.orderStatus == 3" style="width:  100%;">
                        <el-alert  title="当前买家已付款并申请取消订单，请审核是否同意，如同意则自动退回付款金额（原路退款）并关闭订单。"
                            type="warning" show-icon :closable=false />
                        <div>
                            <el-button type="primary"
                                @click="handleCancelOrder(detail)">审核取消订单</el-button>
                        </div>
                    </div>
                </div>

            </div>
            <el-divider />
        </template>

        <div class="order-info">
            <div class="card-title">订单信息</div>
            <el-row class="order-info-box">
                <el-col :span="8">订单号： {{ detail.orderNumber }}</el-col>
                <el-col :span="8">实付款金额：￥{{ detail.payPrice }}</el-col>
                <el-col :span="8">支付方式： <dict-tag :options="pay_type" :value="detail.payType" /></el-col>
            </el-row>
            <el-row class="order-info-box">
                <el-col :span="8">配送方式： <dict-tag :options="delivery_type" :value="detail.deliveryType" /></el-col>
                <el-col :span="8">运费金额： ￥{{ detail.expressPrice }}</el-col>
                <el-col :span="8">订单状态： <dict-tag :options="order_status" :value="detail.orderStatus" /></el-col>
            </el-row>
            <el-row class="order-info-box">
                <el-col :span="8">买家信息： {{ detail.customerPhone }}</el-col>
                <el-col :span="8">买家留言： {{ detail.orderRemark }}</el-col>
            </el-row>
        </div>



    </el-card>


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

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

        <el-table v-loading="loading" :data="detail.goodsInfoList" ref="tableRef" highlight-current-row>
            <el-table-column prop="goodsInfo" label="商品信息" width="700">
                <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 style="margin-left: 20px;">
                            <div class="goods-info-text ">
                                {{ scope.row.goodsName }}
                            </div>
                            <div>
                                <el-tag type="info" v-if="scope.row.goodsSpecName">{{ scope.row.goodsSpecName }}</el-tag>
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="goodsCoding" label="编码" align="center">
                <template #default="scope">
                    <div v-if="scope.row.goodsCoding">{{ scope.row.goodsCoding }}</div>
                    <div v-else> - - </div>
                </template>
            </el-table-column>
            <el-table-column prop="goodsWeight" label="重量(Kg)" align="center" />
            <el-table-column prop="goodsPrice" label="单价" align="center">
                <template #default="scope">
                    <div>￥ {{ scope.row.goodsPrice }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="goodsTotalNum" label="购买数量" align="center">
                <template #default="scope">
                    <div>× {{ scope.row.goodsTotalNum }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="goodsTotalPrice" label="商品总价" align="center">
                <template #default="scope">
                    <div>￥ {{ scope.row.goodsTotalPrice }}</div>
                </template>
            </el-table-column>

        </el-table>

        <div class="order-summary-box">
            <div>订单总额： &nbsp;￥{{ detail.goodsTotalAmoun }}</div>
            <div>运费金额： &nbsp;￥{{ detail.expressPrice }}</div>
            <div>实付款金额： &nbsp;<b>￥{{ detail.payPrice }}</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">收货人姓名： {{ detail.orderReceive?.consigneeName }}</el-col>
            <el-col :span="8">联系电话： {{ detail.orderReceive?.phone }}</el-col>
            <el-col :span="8">收货地区： {{ detail.orderReceive?.region }}</el-col>
        </el-row>
        <el-row class="order-info-box">
            <el-col :span="8">详细地址： {{ detail.orderReceive?.detail }}</el-col>
        </el-row>

        <div v-if="detail.deliveryStatus != 1">
            <el-divider />
            <div class="card-title">发货信息</div>
            <el-row class="order-info-box">
                <el-col :span="8">物流公司： {{ detail.logisticsCompany }}</el-col>
                <el-col :span="8">物流单号： {{ detail.logisticsTrackingNumber }}</el-col>
                <el-col :span="8">发货状态： <dict-tag :options="delivery_status" :value="detail.deliveryStatus" /></el-col>
            </el-row>
            <el-row class="order-info-box">
                <el-col :span="8">发货时间： {{ detail.deliveryTime }}</el-col>
            </el-row>
        </div>

    </el-card>

    <!-- 发货 -->
    <DeliverDialog v-model="DeliverDialogVisible" :data="DeliverDialogRow" :done="() => getDetail()"></DeliverDialog>
    <!-- 订单改价 -->
    <ChangePriceDialog v-model="ChangePriceDialogVisible" :data="ChangePriceDialogRow" :done="() => getDetail()">
    </ChangePriceDialog>
    <!-- 审核取消订单 -->
    <CancelOrderDialog v-model="CancelOrderDialogVisible" :data="CancelOrderDialogRow" :done="() => getDetail()">
    </CancelOrderDialog>
</template>

<script setup>
import modal from '@/plugins/modal.js'
import { getOrderDetails } from '@/api/business/OrderManage/Orders/order.js'
import DeliverDialog from "./components/DeliverDialog.vue";
import ChangePriceDialog from "./components/ChangePriceDialog.vue";
import CancelOrderDialog from "./components/CancelOrderDialog.vue";


const route = useRoute()
const { proxy } = getCurrentInstance()

const parm = reactive({
    orderId: route.query.orderId
})

const DeliverDialogVisible = ref(false);
const DeliverDialogRow = ref({});
const ChangePriceDialogVisible = ref(false);
const ChangePriceDialogRow = ref({});
const CancelOrderDialogVisible = ref(false);
const CancelOrderDialogRow = ref({});


const progress = ref()
const loading = ref(true)
const detail = ref({})

// 获取详情
function getDetail() {
    loading.value = true
    getOrderDetails(parm).then((res) => {
        if (res.code == 200) {
            loading.value = false;
            detail.value = res.data;
            initProgress()
        }
    });
}
getDetail()

// 步骤条位置
function initProgress() {
    progress.value = 2
    if (detail.value.payStatus == 2)
        progress.value += 1
    if (detail.value.deliveryStatus == 2)
        progress.value += 1
    if (detail.value.receiptStatus == 2)
        progress.value += 1
}



// 订单改价
function handleChangePrice(row) {
    ChangePriceDialogVisible.value = true
    ChangePriceDialogRow.value = row
}

// 发货
function handleDeliver(row) {
    DeliverDialogVisible.value = true
    DeliverDialogRow.value = row
}

// 审核修改订单
function handleCancelOrder(row) {
    CancelOrderDialogVisible.value = true
    CancelOrderDialogRow.value = row
}



// 字典获取
const pay_type = ref([]);
async function getpay_type() {
    await proxy.getDicts('pay_type').then((res) => {
        pay_type.value = res.data
    })
}
getpay_type()
// 字典获取
const pay_status = ref([]);
async function getpay_status() {
    await proxy.getDicts('pay_status').then((res) => {
        pay_status.value = res.data
    })
}
getpay_status()
// 字典获取
const delivery_type = ref([]);
async function getdelivery_type() {
    await proxy.getDicts('delivery_type').then((res) => {
        delivery_type.value = res.data
    })
}
getdelivery_type()
// 字典获取
const delivery_status = ref([]);
async function getdelivery_status() {
    await proxy.getDicts('delivery_status').then((res) => {
        delivery_status.value = res.data
    })
}
getdelivery_status()
// 字典获取
const receipt_status = ref([]);
async function getreceipt_status() {
    await proxy.getDicts('receipt_status').then((res) => {
        receipt_status.value = res.data
    })
}
getreceipt_status()
// 字典获取
const order_status = ref([]);
async function getorder_status() {
    await proxy.getDicts('order_status').then((res) => {
        order_status.value = res.data
    })
}
getorder_status()

</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;
    }
}


.goods-info-box {
    display: flex;
    margin: 10px 0;
}

.goods-info-text {
    width: 350px;
    margin-bottom: 10px;
}

.m2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.el-alert {
    display: flex;
    // margin: 20px 0 0;
    margin-bottom: 15px;
}
</style>