<template>
    <div style="width: 1200px; margin: 0 auto; word-spacing: 2em">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card style="margin-top: 10px">
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <!-- <span >订单状态 {{ dict['003'] && dict['003'].filter(({value}) => value === order.orderState)[0].label}}</span> -->
                            <span>订单状态 </span><span style="letter-spacing: normal; color: #333333;line-height: normal; font-weight: 700;">{{ order.refStatus }}</span>
                        </el-col>
                        <el-col :span="16" style="cursor: pointer">
                            <span @click="seeOrderStatus()">订单跟踪></span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="24">
                <el-card>
                    <el-row :gutter="10">
                        <el-col :span="24" style="margin-bottom: 20px">
                            <!-- <span @click="toServerProject">{{ order.goodsName }}></span> -->
                             <span>{{ order.goodsName }}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="24">
                <el-card>
                    <el-row :gutter="10">
                       

                        <el-col :span="12">
                            <span
                                >顾客信息 {{ member.name }}
                                {{ member.privacyUser }}</span
                            >
                        </el-col>
                        <el-col :span="12">
                            <span
                                ><i class="el-icon-location-information" />{{
                                    member.address
                                }}{{ member.detailed }}</span
                            >
                        </el-col>
                        <el-col :span="24" style="margin-top: 20px">
                            <span>备注 {{ order.memo }}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="24">
                <el-card>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <span>订单编号 {{ order.orderIndex }} </span>
                            <el-button
                                size="mini"
                                class="orderIndex"
                                :data-clipboard-text="order.orderIndex"
                                >复制</el-button
                            >
                        </el-col>

                        <el-col :span="12" style="margin-bottom: 20px">
                            <span>下单时间 {{ order.createTime }}</span>
                        </el-col>

                        <el-col :span="12">
                            <span >服务类别 </span><span>{{order.parentName == null?"":order.parentName+"—"}}{{ order.categoryName }}</span>
                        </el-col>
                        <el-col :span="12" style="margin-bottom: 20px">
                            <span>数量 {{ order.goodsCounts }}小时</span>
                        </el-col>

                        <el-col :span="12">
                            <span>次数 </span><span>3</span>
                        </el-col>
                        <el-col :span="12" >
                            <span >订单金额 </span><span class="span-color"  >￥{{ order.orderAmount }}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="24" v-if="order.beanAmount">
                <el-card>
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <span>优金豆</span><span style="color: #D9001B;"> -￥{{ order.beanAmount }}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            
            <el-col>
                <el-card
                    :span="24"
                    style="background-color: rgb(127, 127, 127); color: white"
                >
                    <el-row :gutter="10">
                       
                        <el-col :span="12">
                            <span>订单实付 ￥{{ order.totalAmount }}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
          <el-col :span="24"  v-if="order.orderVerificationRecordList.length>0">
                 <el-row :span="24" style="margin-bottom: 5px">
                    <b>核销记录</b>
                </el-row>
                <el-card v-for="item in order.orderVerificationRecordList" :key="item.orderVerificationRecordId">
                     <el-row :gutter="10">
                        <el-col :span="12">
                            <span>核销时间 {{ item.createTime | dateFormat('yyyy-MM-DD HH:mm') }} </span>
                        </el-col>

                        <el-col :span="12" style="margin-bottom: 20px">
                            <span>上门时间 {{ item.appointmentTime | dateFormat('yyyy-MM-DD HH:mm') }}</span>
                        </el-col>

                        <el-col :span="12">
                            <span >核销码 {{item.orderVerificationCode}}</span>

                        </el-col>
                        <el-col :span="12" style="margin-bottom: 20px">
                            <span>备注 {{ item.remark }}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
            
        <el-row>
            <el-col :span="24" v-if="refundOpen">
                <el-card>
                    <el-row :gutter="10">
                        <el-col :span="24" style="margin-bottom: 20px">
                            <b>退款信息 </b>
                        </el-col>
                        <el-col :span="12" style="margin-bottom: 10px">
                            <span
                                >退款金额
                                {{
                                    refund === undefined ? "" : refund.payMoney
                                }}
                                元</span
                            >
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" style="margin-bottom: 10px">
                        <el-col :span="24">
                            <span
                                >退款原因
                                {{
                                    refund === undefined
                                        ? ""
                                        : refund.refundReason
                                }}</span
                            >
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <span
                                >审核结果
                                {{
                                    refund === undefined
                                        ? ""
                                        : refund.refundResult
                                }}</span
                            >
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

        <!--订单跟踪-->
        <el-dialog title="订单跟踪" :visible.sync="recordOpen" width="600px">
            <ul>
                <li :key="item.id" v-for="item in orderRecord">
                    <el-row>
                        <el-col :span="12">
                            {{ checkCode(item) }}
                        </el-col>

                        <el-col :span="12">
                            {{ item.createTime }}
                        </el-col>
                    </el-row>

                    <el-divider></el-divider>
                </li>
            </ul>
        </el-dialog>
    </div>
</template>

<script>
import { getOrder, getAddress } from "@/api/system/order";
import { getUser } from "../../../api/system/ServiceUserService";
import { listCode } from "../../../api/system/dict/code";
import { listRecord } from "../../../api/system/orderRecord";
import { listRefund } from "../../../api/system/orderRefund";
import { mapGetters } from "vuex";
import ClipboardJS from "clipboard";

export default {
    name: "index",
    data() {
        return {
            refundOpen: false,
            order: {
                orderVerificationRecordList:[]
            },
            activeNames: ["1"],
            imgSrc: "",
            goodsList: [],
            member: {},
            serverUser: {},
            recordOpen: false,
            orderRecord: [],
            refStatusOptions: [],
            refund: {},
            clipboard: null,
        };
    },
    computed: {
        ...mapGetters(["dict"]),
    },

    mounted() {
        getOrder(this.$route.query.id).then((response) => {
            this.order = response.data;
            this.queryAdress();
            this.getServicceUser();
            this.getRefStatus();
            this.getRefund();
        });

        this.clipboard = new ClipboardJS(".orderIndex");
        this.clipboard.on("success", (e) => {
            this.$message.success("复制成功");
            e.clearSelection();
        });
    },
    destroyed() {
        // 销毁Clipboard实例，避免在其它页面或组件中实例化Clipboard后造成再次监听，产生重复回调
        this.clipboard.destroy();
    },

    methods: {
        checkCode({ preState, nowState }) {
            let result = nowState;
            switch (nowState) {
                case "000":
                    result = "提交订单";
                    break;
                case "001":
                    result = "支付成功";
                    break;
                case "002":
                    result = preState === "001" ? "开始服务" : "追加服务";
                    break;
                case "003":
                    result = "完成服务";
                    break;
                case "004":
                    result =
                        preState === "005" ? "顾客取消平台退款" : "确认完成";
                    break;
                case "005":
                    result = "顾客申请平台退款";
                    break;
                case "006":
                    result = preState === "005" ? "平台已退款" : "商家已退款";
                    break;
                case "007":
                    result = "平台拒绝退款";
                    break;
                case "099":
                    result = "未支付取消订单";
                    break;
            }
            return result;
        },
        toServerProject() {
            this.$router.push("/merchant/service");
        },
        queryAdress() {
            getAddress(this.order.orderId).then((res) => {
                this.member = res.data;
            });
        },
        getServicceUser() {
            if (!this.order.serverId) {
                return;
            }
            getUser(this.order.serverId).then((res) => {
                this.serverUser = res.data;
                this.serverUser.rate =
                    parseFloat(this.serverUser.rate || 0) + "%";
                let params = {
                    codeValue: "服务等级",
                };
                listCode(params).then((res) => {
                    for (let i in res.rows) {
                        if (
                            this.serverUser.serverLevel == res.rows[i].decodeId
                        ) {
                            this.serverUser.serverLevel =
                                res.rows[i].decodeValue;
                        }
                    }
                });
            });
        },
        seeOrderStatus() {
            listRecord(this.order).then((res) => {
                this.orderRecord = res.rows;
                this.recordOpen = true;
            });
        },
        /** 获取订单退款子状态和信息*/
        getRefStatus() {
            let param = {
                codeValue: "退款状态",
            };
            listCode(param).then((res) => {
                this.refStatusOptions = res.rows;
            });
        },
        getRefund() {
            listRefund({ ...this.order, createTime: null }).then((res) => {
                this.refund = res.rows[0];
                if (this.refund) {
                    this.refundOpen = true;
                }
            });
        },
    },
};
</script>

<style scoped>
.el-card {
    margin-bottom: 20px;
}

li {
    list-style-type: none;
}
ul {
    padding-inline-start: 0px;
}
.span-color{
    font-size: 16px;color: #F59A23;
}
</style>
