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

        <template v-if="detail.orderRefundStatus == 1">
            <!-- 售后单操作 -->
            <div class="order-operation">
                <div class="card-title">售后单操作</div>

                <div class="btn-box" v-if="detail.merchantAuditStatus == 1">
                    <!-- 审核售后订单 -->
                    <div style="width:  100%;">
                        <el-alert title="当前买家已发起售后申请，请及时审核处理。" type="warning" show-icon :closable=false />
                        <div>
                            <el-button type="primary" @click="handleAuditOrderRefund(detail)">商家审核</el-button>
                        </div>
                    </div>
                </div>
                <div class="btn-box" v-if="detail.isCustomerSend == 2">
                    <!-- 确认收货 -->
                    <div style="width:  100%;">
                        <el-alert title="当前买家已发货，请确认包裹后点击收货，确认收货后将退款给买家。" type="warning" show-icon :closable=false />
                        <div>
                            <el-button type="primary" @click="handleConfirmsReceipt(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.customerPhone }}</el-col>
                <el-col :span="8">退款金额：￥{{ detail.refundMoney }}</el-col>
            </el-row>
            <el-row class="order-info-box">
                <el-col :span="8">售后类型： <dict-tag :options="refund_type" :value="detail.refundType" /></el-col>
                <el-col :span="8">售后单状态： <dict-tag :options="order_refund_status"
                        :value="detail.orderRefundStatus" /></el-col>
                <el-col :span="8">申请时间： {{ detail.createTime }}</el-col>
            </el-row>
        </div>

        <el-divider />

        <div class="order-info">
            <div class="card-title">处理进度</div>
            <el-row class="order-info-box">
                <el-col :span="8">审核状态(商家)： <dict-tag :options="merchant_audit_status"
                        :value="detail.merchantAuditStatus" /></el-col>
                <el-col :span="8">发货状态(买家)： <dict-tag :options="is_customer_send" :value="detail.isCustomerSend" /></el-col>
                <el-col :span="8">收货状态(商家)： <dict-tag :options="is_merchant_receive"
                        :value="detail.isMerchantReceive" /></el-col>
            </el-row>
            <el-row class="order-info-box">
                <el-col :span="8" v-if="detail.merchantRefuseDesc">商家拒绝说明：{{ detail.merchantRefuseDesc }}</el-col>
            </el-row>
        </div>

    </el-card>


    <el-card class="box-card">

        <div class="order-info">
            <div class="card-title">买家申请原因</div>
            <el-row class="order-info-box">
                <el-col :span="12" style="margin-bottom: 25px;">退货原因：<dict-tag :options="refund_reason"
                        :value="detail.refundReason" /></el-col>
                <el-col :span="12" style="margin-bottom: 25px;">退款说明：{{ detail.customerRefundDesc }}</el-col>
                <el-col :span="24">退款凭证：
                    <el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
                        :src="detail.customerRefundImg?.split(',')[0]"
                        :preview-src-list="detail.customerRefundImg?.split(',')">
                        <div><el-icon :size="15">
                                <document />
                            </el-icon></div>
                    </el-image>
                </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>

    </el-card>


    <!-- 收货信息 / 发货信息 -->
    <el-card class="box-card" v-if="detail.shopRefundAddressGuid">

        <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-col :span="8">收货状态： <dict-tag :options="is_merchant_receive" :value="detail.isMerchantReceive" /></el-col>
            <el-col :span="8">收货时间： {{ detail.merchantReceiveTime }}</el-col>
        </el-row>

        <div v-if="detail.isCustomerSend == 2">
            <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.expressNo }}</el-col>
                <el-col :span="8">发货状态： <dict-tag :options="is_customer_send" :value="detail.isCustomerSend" /></el-col>
            </el-row>
            <el-row class="order-info-box">
                <el-col :span="8">发货时间： {{ detail.customerSendTime }}</el-col>
                <el-col :span="8">备注： {{ detail.customerWaybillRemark }}</el-col>
            </el-row>
        </div>

    </el-card>

    <!-- 审核售后订单 -->
    <AuditOrderRefundDialog v-model="AuditOrderRefundDialogVisible" :data="AuditOrderRefundDialogRow"
        :done="() => getDetail()">
    </AuditOrderRefundDialog>
</template>

<script setup>
import modal from '@/plugins/modal.js'
import { ElMessageBox } from 'element-plus'
import { getOrderRefundDetails, confirmsReceipt } from '@/api/business/OrderManage/OrderRefunds/orderRefund.js'
import AuditOrderRefundDialog from "./components/AuditOrderRefundDialog.vue";


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

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

const AuditOrderRefundDialogVisible = ref(false);
const AuditOrderRefundDialogRow = ref({});


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

// 获取详情
function getDetail() {
    loading.value = true
    getOrderRefundDetails(parm).then((res) => {
        if (res.code == 200) {
            loading.value = false;
            detail.value = res.data;
        }
        console.log(detail.value, '详情');
    });
}
getDetail()




// 审核修改订单
function handleAuditOrderRefund(row) {
    AuditOrderRefundDialogVisible.value = true
    AuditOrderRefundDialogRow.value = row
}


/** 确认收货按钮操作 */
function handleConfirmsReceipt(row) {
    const Ids = row.orderRefundGuid

    ElMessageBox.confirm("是否确认确认收货？", "系统提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
    })
        .then(function () {
            return confirmsReceipt({ orderRefundGuid: Ids })
        })
        .then(() => {
            getDetail()
            modal.msgSuccess("确认收货成功")
        })
        .catch(() => { })
}


// 字典获取
const refund_type = ref([]);
async function getrefund_type() {
    await proxy.getDicts('refund_type').then((res) => {
        refund_type.value = res.data
    })
}
getrefund_type()
// 字典获取
const refund_reason = ref([]);
async function getrefund_reason() {
    await proxy.getDicts('refund_reason').then((res) => {
        refund_reason.value = res.data
    })
}
getrefund_reason()
// 字典获取
const goods_receive_status = ref([]);
async function getgoods_receive_status() {
    await proxy.getDicts('goods_receive_status').then((res) => {
        goods_receive_status.value = res.data
    })
}
getgoods_receive_status()
// 字典获取
const merchant_audit_status = ref([]);
async function getmerchant_audit_status() {
    await proxy.getDicts('merchant_audit_status').then((res) => {
        merchant_audit_status.value = res.data
    })
}
getmerchant_audit_status()
// 字典获取
const is_customer_send = ref([]);
async function getis_customer_send() {
    await proxy.getDicts('is_customer_send').then((res) => {
        is_customer_send.value = res.data
    })
}
getis_customer_send()
// 字典获取
const order_refund_status = ref([]);
async function getorder_refund_status() {
    await proxy.getDicts('order_refund_status').then((res) => {
        order_refund_status.value = res.data
    })
}
getorder_refund_status()
// 字典获取
const is_merchant_receive = ref([]);
async function getis_merchant_receive() {
    await proxy.getDicts('is_merchant_receive').then((res) => {
        is_merchant_receive.value = res.data
    })
}
getis_merchant_receive()


</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-info-box div {}


// 订单商品
.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>