<template>
    <div class="detail-container">
        <el-card shadow="hover">
            <div class="operate-container">
                <i class="el-icon-warning color-danger" style="margin: 10px 10px 0 20px"><el-icon><WarnTriangleFilled /></el-icon></i>
                <span class="color-danger">当前订单状态：{{ orderObj.orderStatus }}</span>
                <div class="operate-button-container" v-show="orderObj.orderStatus === '待支付'">
                    <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
                        title="确定要取消订单吗？" @confirm="cancelOrder" width=180>
                        <template #reference>
                            <el-button style="height: 25px" class="ml-5" type="danger">取消订单 <el-icon
                                    style="margin-left: 5px;">
                                    <Remove />
                                </el-icon></el-button>
                        </template>
                    </el-popconfirm>
                </div>
                <div class="operate-button-container" v-show="orderObj.orderStatus === '待发货'">
                    <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
                        title="确定要退款吗？" @confirm="refund" width=180>
                        <template #reference>
                            <el-button style="height: 25px" class="ml-5" type="danger">退款 <el-icon
                                    style="margin-left: 5px;">
                                    <Remove />
                                </el-icon></el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </div>
            <div style="margin-top: 20px">
                <el-icon><List /></el-icon>
                <span class="font-small">基本信息</span>
            </div>
            <div class="table-layout">
                <el-row>
                    <el-col :span="4.8" class="table-cell-title">订单编号</el-col>
                    <el-col :span="4.8" class="table-cell-title">拍摄地点</el-col>
                    <el-col :span="4.8" class="table-cell-title">拍摄日期</el-col>
                    <el-col :span="4.8" class="table-cell-title">拍摄时间</el-col>
                    <el-col :span="4.8" class="table-cell-title">妆造服务</el-col>
<!--                    <el-col :span="4" class="table-cell-title">拍摄服务</el-col>-->
                </el-row>
                <el-row>
                    <el-col :span="4.8" class="table-cell">{{ orderObj.orderNumber }}</el-col>
                    <el-col :span="4.8" class="table-cell">{{ orderObj.isIndoors ? '室内' : '室外' }}</el-col>
                    <el-col :span="4.8" class="table-cell">{{ orderObj.specificDate }}</el-col>
                    <el-col :span="4.8" class="table-cell">{{ orderObj.timePoint }}</el-col>
                    <el-col :span="4.8" class="table-cell">{{ orderObj.isMakeup ? '带妆造' : '不带妆造' }}</el-col>
<!--                    <el-col :span="4" class="table-cell">{{ orderObj.isPhotography ? '是' : '否' }}</el-col>-->
                </el-row>
            </div>
            <div style="margin-top: 20px">
                <el-icon><List /></el-icon>
                <span class="font-small">收货人信息</span>
            </div>
            <div class="table-layout">
                <el-row>
                    <el-col :span="12" class="table-cell-title">联系人</el-col>
                    <el-col :span="12" class="table-cell-title">手机号码</el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="table-cell">{{ contactsSnapshot.name }}</el-col>
                    <el-col :span="12" class="table-cell">{{ contactsSnapshot.phone }}</el-col>
                </el-row>
            </div>
            <div style="margin-top: 20px">
                <el-icon><List /></el-icon>
                <span class="font-small">商品信息</span>
            </div>
            <div class="table-layout">
                <el-row>
                    <el-col :span="6" class="table-cell-title">服装图片</el-col>
                    <el-col :span="6" class="table-cell-title">服装名</el-col>
                    <el-col :span="6" class="table-cell-title">服装类别</el-col>
                    <el-col :span="6" class="table-cell-title">服装价格</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6" class="table-cell-product"><img :src="downloadUrl + photoProductsSnapshot.introImg"
                            style="height: 70px; width: 70px;" alt=""></el-col>
                    <el-col :span="6" class="table-cell-product">{{ photoProductsSnapshot.name }}</el-col>
                    <el-col :span="6" class="table-cell-product">{{ photoProductsSnapshot.categoryName }}</el-col>
                    <el-col :span="6" class="table-cell-product">{{ photoProductsSnapshot.price }}</el-col>
                </el-row>
            </div>
            <div style="float: right;margin: 20px">
                合计：<span class="color-danger">￥{{ totalAmount }}</span>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import myAxios from "@/api/myAxios";
import { SuccessInfo, ErrorInfo } from "@/utils/messageInfo";
import { useRoute } from "vue-router";
import { downloadUrl } from '@/utils/formatImgUpload'

const route = useRoute();
const orderObj: any = ref({})  //订单对象
const orderStatus = ref<String>() //订单状态
const contactsSnapshot: any = ref({})  //联系人快照
const photoProductsSnapshot: any = ref({}) //商品快照
const totalAmount: any = ref(0) //订单总价
onMounted(() => {
    getOrderItem()
})
const getOrderItem = async () => {  //获取订单详情
    const oid = route.params.id //传递订单id
    const res = await myAxios.post('/advanceOrder/list', { id: oid })
    if (res.data.code === 1) {
        orderObj.value = res.data.data.records[0];
        orderStatus.value = res.data.data.records[0].orderStatus
        contactsSnapshot.value = res.data.data.records[0].contactsSnapshot
        photoProductsSnapshot.value = res.data.data.records[0].photoProductsSnapshot
        totalAmount.value = res.data.data.records[0].totalAmount
    }
}
const cancelOrder = async () => {  //取消订单方法
    const res = await myAxios.post('/advanceOrder/cancel/id', { id: route.params.id })
    console.log(res);
    
    if (res.data.code === 1) {
        SuccessInfo('退款成功')
        getOrderItem()
    }
}
const refund = async () => {  //退款方法
    const res = await myAxios.post('/wechat/refund/photo/create', { id: route.params.id })
    if (res.data.code === 1) {
        SuccessInfo('退款成功')
        getOrderItem()
    } else {
        ErrorInfo('退款失败')
    }
}
</script>

<style scoped>
.detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  min-width: 800px;
}

.operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
}

.color-danger {
    color: red;
}

.operate-button-container {
    float: right;
    margin-right: 20px
}

.table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
}

.table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  width: 20%;
}

.table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  width: 20%;
}

.table-cell-product {
    height: 100px;
    line-height: 80px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
}
</style>