<!--待付款详情-->
<template>
    <div id="detailTtoBePaid">
        <Nav :title="navTitle"></Nav>
        <div class="content">
            <!-- 倒计时只有在待付款详情中才有  pageType=1为待付款-->
            <template v-if="pageType==1">
                <div class="countDown" :style="{background:overtime?'#FFE6DC':'#e0f4f3'}">
                    <van-icon name="clock-o" size="15" color="#333" />
                    <div class="hr" :style="{background:overtime?'#FFE6DC':'#e0f4f3'}"></div>
                    <template v-if="!overtime">
                        <van-count-down v-if="!isNaN(downTime)" :time="downTime" @finish="onFinish" format="剩 mm 分 ss 秒自动关闭" color="#fff" />
                    </template>
                    <template v-else>
                        <div class="overtimeBox"><span>{{$t('detailTtoBePaid.orderTimeout')}}!</span></div>
                    </template>
                </div>
            </template>
            <div class="userBox">
                <span>{{userData.name}}</span>
                <!--<span>{{userData.phone}}</span>-->
            </div>
            <div class="cell">
                <div class="top" @click="goDetails">
                    <!-- <div class="left">
                        <van-checkbox v-model="confirm.checked"></van-checkbox>
                    </div> -->
                    <div class="center">
                        <van-image :src="requestUrl+oderData.faceImg" />
                    </div>
                    <div class="right">
                        <div class="text">
                            <van-skeleton :row="2" :loading="loading">
                                <span>{{oderData.commodityName}}</span>
                            </van-skeleton>
                        </div>
                        <div class="discount">
                            <!--
                            <van-skeleton :row="1" :loading="loading">
                                <span>{{$t('detailTtoBePaid.surplus')}}{{oderData.stock}}</span>
                            </van-skeleton>-->
                            <!-- <div class="discountBox"><span>已领取50元优惠券</span></div>
                            <div class="delBox">
                                <van-icon name="delete-o" color="#999999" size="14" />
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="bottomCell">
                        <div>
                            <span>{{$t('detailTtoBePaid.adult')}}</span>
                        </div>
                        <div class="def1">
                            <span style="color: #E94225">¥{{oderData.adultPrice}}/{{$t('detailTtoBePaid.people')}}</span>
                            <span>×{{oderData.adultNum}}</span>
                        </div>
                    </div>
                    <div class="bottomCell">
                        <div>
                            <span>{{$t('detailTtoBePaid.children')}}</span>
                        </div>
                        <div>
                            <span style="color: #E94225">¥{{oderData.childPrice}}/{{$t('detailTtoBePaid.people')}}</span>
                            <span>×{{oderData.childNum}}</span>
                        </div>
                    </div>
                    <div class="bottomCell">
                        <div>
                            <span>{{$t('detailTtoBePaid.location')}}</span>
                        </div>
                        <div class="def1">
                            <span>{{oderData.departurePlace}}</span>
                        </div>
                    </div>
                    <div class="bottomCell">
                        <div>
                            <span>{{$t('detailTtoBePaid.date')}}</span>
                        </div>
                        <div class="def1">
                            <span>{{oderData.departureDate}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell">
                <div class="bottom">
                    <div class="bottomCell">
                        <div>
                            <span>{{$t('detailTtoBePaid.totalPrice')}}</span>
                        </div>
                        <div class="def1" style="color:#E94225">
                            <span>{{oderData.orderMoney+oderData.couponDeduction}}</span>
                        </div>
                    </div>
                    <div class="bottomCell">
                        <div>
                            <span>{{$t('detailTtoBePaid.coupon')}}</span>
                        </div>
                        <div class="def1">
                            <span>{{oderData.couponDeduction}}</span>
                        </div>
                    </div>
                    <div class="bottomCell">
                        <div>
                            <span>{{$t('detailTtoBePaid.requiredPayment')}}</span>
                        </div>
                        <div class="def1">
                            <span>{{oderData.orderMoney}}</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="cell">
                <div class="bottom">
                    <div class="bottomCell">
                        <div>
                            <span>{{$t('detailTtoBePaid.orderNum')}}</span>
                        </div>
                        <div class="def1">
                            <span>{{oderData.orderNo}}</span>
                        </div>
                    </div>
                    <!--
                    <div class="bottomCell">
                        <div>
                            <span>{{$t('detailTtoBePaid.zfbNum')}}</span>
                        </div>
                        <div class="def1">
                            <span>{{oderData.zfBtransactionNum}}</span>
                            <span id="copySpan" :data-clipboard-text="oderData.zfBtransactionNum" style="color:#999999">{{$t('detailTtoBePaid.copy')}}</span>
                        </div>
                    </div>-->
                    <div class="bottomCell">
                        <!-- 待付款详情和已退款详情为创建时间 -->
                        <template v-if="pageType==1||pageType==4">
                            <div>
                                <span>{{$t('detailTtoBePaid.createTime')}}</span>
                            </div>
                            <div class="def1">
                                <span>{{oderData.createTime}}</span>
                            </div>
                        </template>
                        <!-- 待参加详情为付款时间 -->
                        <template v-if="pageType==2">
                            <div>
                                <span>{{$t('detailTtoBePaid.paymentTime')}}</span>
                            </div>
                            <div class="def1">
                                <span>{{oderData.payDate}}</span>
                            </div>
                        </template>
                        <!-- 已完成详情和已评价详情为完成时间 -->
                        <template v-if="pageType==3||pageType==5">
                            <div>
                                <span>{{$t('detailTtoBePaid.completionTime')}}</span>
                            </div>
                            <div class="def1">
                                <span>{{oderData.updateTime}}</span>
                            </div>
                        </template>
                    </div>
                    <!-- 已退款详情才有退款时间 -->
                    <template v-if="pageType==4">
                        <div class="bottomCell">
                            <div>
                                <span>{{$t('detailTtoBePaid.refundTime')}}</span>
                            </div>
                            <div class="def1">
                                <span>{{oderData.updateTime}}</span>
                            </div>
                        </div>
                    </template>
                    <!-- 已退款详情才有该提示-->
                    <template v-if="pageType==4">
                        <div class="refundPrompt">
                            <span>{{$t('detailTtoBePaid.refundMessage')}}</span>
                        </div>
                    </template>
                </div>
            </div>
            <!-- 已评价详情才有我的评价 -->
            <template v-if="pageType==5">
                <div class="cell">
                    <div class="evaluates" v-for="item,index in oderData.orderEvaluateList" :key="index">
                        <div>
                            <span>{{$t('detailTtoBePaid.myComments')}}</span>
                            <van-skeleton :row="1" :loading="loading">
                                <span>{{item.createTime}}</span>
                            </van-skeleton>
                        </div>
                        <div>
                            <van-skeleton :row="3" :loading="loading">
                                <span>{{item.content}}</span>
                            </van-skeleton>
                        </div>
                        <div class="reply">
                            <div>
                                <span>カスタマーサポート：</span>
                                <span>{{item.rebackTime}}</span>
                            </div>
                            <div><span v-html="item.rebackContent"></span></div>
                            <div style="clear:both"></div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <!-- 已评价详情和已退款详情没有下部的按钮 -->
        <template v-if="pageType!=5&&pageType!=4">
            <div class="confirmOrderBox">
                <div class="cell">
                    <!-- 待付款详情 -->
                    <template v-if="pageType==1">
                        <div>
                            <van-button :disabled="overtime" color="#38D0C9" size="small" plain block @click="cancelOrder">{{$t('detailTtoBePaid.cancellationOrder')}}</van-button>
                        </div>
                        <div>
                            <van-button :disabled="overtime" size="small" color="#38D0C9" block @click="getContinue">{{$t('detailTtoBePaid.continuePayment')}}</van-button>
                        </div>
                    </template>
                    <!-- 待参加详情-->
                    <template v-if="pageType==2">
                        <div>
                            <van-button color="#E94225" size="small" block @click="refund">{{$t('detailTtoBePaid.refund')}}</van-button>
                        </div>
                    </template>
                    <!-- 已完成详情-->
                    <template v-if="pageType==3">
                        <div>
                            <van-button color="#38D0C9" size="small" block @click="evaluate">{{$t('detailTtoBePaid.evaluate')}}</van-button>
                        </div>
                    </template>
                </div>
            </div>
        </template>
        <!-- 评价弹窗 -->
        <van-popup v-model="popupShow">
            <div class="evaluateBox">
                <div class="titleBox"><span>{{$t('detailTtoBePaid.evaluationContent')}}</span></div>
                <div class="textBox">
                    <div>
                        <van-cell-group inset>
                            <van-field v-model="popupShowMessage" rows="2" type="textarea" maxlength="50" placeholder="请输入评价内容" show-word-limit />
                        </van-cell-group>
                    </div>
                </div>
                <div class="butsBox">
                    <span @click="butsCancel">{{$t('detailTtoBePaid.cancel')}}</span>
                    <span @click="butsConfirm">{{$t('detailTtoBePaid.confirm')}}</span>
                </div>
            </div>
        </van-popup>
        <van-overlay :show="loading" @click="loading = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-loading color="#1989fa" size="50" />
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Nav from "@/components/pages/nav";
import { getCommodity4H5, getOrderDetail } from "@/api/comp/home.js";
import {
    getOrderList,
    addOrderEvalute,
    delOrder,
    returnPay,
} from "@/api/comp/personal.js";
//复制插件
import ClipboardJS from "clipboard";
//倒计时依赖
import { ref } from "vue";
export default {
    data() {
        return {
            loading: true,
            shoppingLsit: [],
            confirmList: [],
            pageType: "",
            navTitle: "",
            popupShow: false,
            popupShowMessage: "",
            oderData: {
                checked: true,
                image: "",
                text: "",
                adult: "",
                adultNum: "",
                place: "",
                children: "",
                childrenNum: "",
                time: "",
                original: "",
                present: "",
                coupon: "",
                price: "",
                payment: "",
                orderNum: "",
                zfBtransactionNum: "",
                createTime: "",
                stock: "",
            },
            userData: {
                name: "",
                phone: "",
            },
            productData: {},
            requestUrl: process.env.VUE_APP_BASE_API,
            overtime: false,
            // evaluateId:null,
            orderData: null,
        };
    },
    created() {
        //获取用户信息
        let userInfo = this.$store.state.user.userInfo;
        //写入用户信息
        this.userData.name =
            userInfo.nickName || this.$t("detailTtoBePaid.noneName");
        this.userData.phone = userInfo.username;
    },
    mounted() {
        //复制功能
        let clipboard = new ClipboardJS("#copySpan");
        let that = this;
        clipboard.on("success", function (e) {
            that.$notify({
                type: "success",
                message: this.$t("detailTtoBePaid.copySuccess"),
            });
        });
        //判断进入页面的状态 1待付款详情 2待参加详情 3已完成详情 4已退款详情 5已评价详情
        this.pageType = this.$route.query.type;
        switch (Number(this.pageType)) {
            case 1:
                this.navTitle = this.$t("detailTtoBePaid.toBePaidDetails");
                break;
            case 2:
                this.navTitle = this.$t("detailTtoBePaid.toBeAttendedDetails");
                break;
            case 3:
                this.navTitle = this.$t("detailTtoBePaid.completedDetails");
                break;
            case 4:
                this.navTitle = this.$t("detailTtoBePaid.refundedDetails");
                break;
            case 5:
                this.navTitle = this.$t("detailTtoBePaid.evaluatedDetails");
                break;
        }
        //拿到需要展示的商品参数 接口依赖
        this.productData = this.$store.state.home.product;
        //console.log(this.$store.state.home.product, "1111111111111");
        this.getData();
    },
    computed: {
        downTime() {
            let num =
                new Date(this.oderData.createTime).getTime() +
                3600000 -
                new Date().getTime();
            if (num < 0) {
                num = 0;
            }
            return num;
        },
    },
    methods: {
        getData() {
            getCommodity4H5(this.productData.commodityId).then((res) => {
                if (res.code == 200) {
                    getOrderDetail(this.productData.id).then((res1) => {
                        if (res1.code == 200) {
                            this.oderData = res.data.commodity;
                            //加入此数据是在回退时可以继续调接口
                            this.oderData.commodityId =
                                this.productData.commodityId;
                            this.oderData.adultNum = this.productData.adultNum;
                            this.oderData.childNum = this.productData.childNum;
                            this.oderData.departurePlace =
                                this.productData.departurePlace;
                            this.oderData.departureDate =
                                this.productData.departureDate;
                            this.oderData.orderMoney =
                                this.productData.orderMoney;
                            this.oderData.couponDeduction =
                                this.productData.couponDeduction;
                            this.oderData.orderNo = this.productData.orderNo;
                            this.oderData.payDate = this.productData.payDate;
                            this.oderData.updateTime =
                                this.productData.updateTime;
                            this.oderData.createTime =
                                this.productData.createTime;
                            this.oderData.zfBtransactionNum = "ZFB2342324242";
                            this.oderData.orderEvaluateList = res1.data.orderEvaluate;
                                //res1.data.orderEvaluate.map((item) => {
                                //    item.rebackContent =
                                //        item.rebackContent.replace(
                                //            /\<img/g,
                                //            '<img style="width:auto;height:auto;max-width:100%;display:block"'
                                //        );
                                //    return item;
                                //});
                            this.loading = false;
                        }
                    });
                }
            });
        },
        onFinish() {
            this.overtime = true;
        },
        //取消订单
        cancelOrder() {
            this.$dialog
                .confirm({
                    title: this.$t("detailTtoBePaid.tips"),
                    message: this.$t("detailTtoBePaid.orderConfirmTips"),
                })
                .then(() => {
                    delOrder(this.productData.id).then((res) => {
                        if (res.code == 200) {
                            this.$toast({
                                type: "success",
                                message: this.$t(
                                    "detailTtoBePaid.orderSuccessmassage"
                                ),
                            });
                            this.$router.replace({
                                path: "/toBePaid",
                                query: { type: 1 },
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$notify({
                        type: "warning",
                        message: this.$t("detailTtoBePaid.orderMassage"),
                    });
                });
        },
        //继续付款
        getContinue() {
            let commodityData = {
                id: this.productData.orderTotalId,
                list: [this.productData],
            };
            this.$store.commit("home/SET_ORDER_INFORMATION", commodityData);
            this.$router.push({ path: "/confirmOrder" });
        },
        //退款
        refund() {
            this.$dialog
                .confirm({
                    title: this.$t("detailTtoBePaid.tips"),
                    message: this.$t("detailTtoBePaid.refundConfirmTips"),
                })
                .then(() => { 
                    returnPay(this.productData.id).then((res) => {
                        if (res.code == 200) {
                            this.$toast({
                                type: "success",
                                message: this.$t(
                                    "detailTtoBePaid.refundSuccessmassage"
                                ),
                            });
                            this.$router.replace({
                                path: "/toBePaid",
                                query: { type: 2 },
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$notify({
                        type: "warning",
                        message: this.$t("detailTtoBePaid.refundMassage"),
                    });
                });
        },
        //评价
        evaluate() {
            // this.evaluateId=item.id;
            this.popupShow = true;
        },
        //评价取消弹窗
        butsCancel() {
            this.$notify({
                type: "warning",
                message: this.$t("detailTtoBePaid.commentMassage"),
            });
            this.popupShow = false;
        },
        //评价取消确认
        butsConfirm() {
            if (!this.popupShowMessage) {
                this.$toast({
                    type: "fali",
                    message: this.$t(
                        "detailTtoBePaid.evaluationContentMessage"
                    ),
                });
            }
            let quire = {
                orderId: this.productData.id,
                content: this.popupShowMessage,
            };
            addOrderEvalute(quire).then((res) => {
                if (res.code == 200) {
                    this.$toast({
                        type: "success",
                        message: this.$t(
                            "detailTtoBePaid.commentSuccessmassage"
                        ),
                    });
                    this.popupShow = false;
                    this.popupShowMessage = "";
                    this.$router.replace({
                        path: "/toBePaid",
                        query: { type: 3 },
                    });
                }
            });
        },
        //跳转详情页
        goDetails() {
            console.log(this.oderData, "获得的商品数据");
            this.$store.commit("home/SET_PRODUCT", this.oderData);
            this.$router.push("/productDetails");
        },
    },
    components: {
        Nav,
    },
};
</script>

<style lang="scss" scoped>
#detailTtoBePaid {
    .content {
        background: #f9f9f9;
        min-height: calc(100vh - 1.28rem /* 128/100 */);
        padding-top: 0.12rem /* 12/100 */;
        box-sizing: border-box;
        .countDown {
            width: 100%;
            height: 0.45rem /* 45/100 */;
            display: flex;
            // justify-content: center;
            align-items: center;
            margin-bottom: 0.12rem /* 12/100 */;
            color: #fff;
            padding: 12px;
            box-sizing: border-box;
            .hr {
                width: 0.05rem /* 5/100 */;
                // background: #e0f4f3 !important;
            }
            .overtimeBox {
                font-size: 15px;
                color: #f56c6c;
                letter-spacing: 0.02rem;
            }
        }
        .userBox {
            background: #fff;
            margin-bottom: 0.12rem /* 12/100 */;
            font-size: 0.14rem /* 14/100 */;
            padding: 0.12rem /* 12/100 */;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            > span {
                line-height: 0.26rem /* 26/100 */;
            }
        }
        .cell {
            background: #fff;
            margin-bottom: 0.12rem /* 12/100 */;
            .top {
                display: flex;
                padding: 0.12rem /* 12/100 */;
                box-sizing: border-box;
                height: 1.2rem /* 120/100 */;
                // .left {
                //     width: 10%;
                //     display: flex;
                //     align-items: center;
                // }
                .center {
                    width: 1.05rem /* 105/100 */;
                    height: 1.05rem /* 105/100 */;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                }
                .right {
                    width: 70%;
                    padding: 0 0 0 0.1rem /* 10/100 */;
                    box-sizing: border-box;
                    text-align: left;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .text {
                        font-size: 0.16rem /* 16/100 */;
                    }
                    .discount {
                        font-size: 0.15rem /* 15/100 */;
                        text-align: left;
                        > span {
                            font-size: 0.13rem /* 13/100 */;
                            color: #333333;
                            display: inline-block;
                            padding: 0.05rem /* 5/100 */ 0.09rem /* 9/100 */;
                            background: #f2f2f2;
                            border-radius: 0.04rem /* 4/100 */;
                        }
                        // font-size: 0.13rem /* 13/100 */;
                        // display: flex;
                        // justify-content: space-between;
                        // align-items: center;
                        // .discountBox {
                        //     span {
                        //         background: #e5f9f8;
                        //         display: block;
                        //         padding: 0.05rem /* 5/100 */ 0.1rem /* 10/100 */;
                        //         border-radius: 0.05rem /* 5/100 */;
                        //         color: #38d0c9;
                        //     }
                        // }
                    }
                }
            }
            .bottom {
                padding: 0.12rem /* 12/100 */;
                .bottomCell {
                    font-size: 0.15rem /* 15/100 */;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0.14rem /* 14/100 */ 0;
                    flex-wrap: wrap;
                    > div:nth-child(1) {
                        width: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        > span:nth-child(1) {
                            margin-right: 0.1rem /* 10/100 */;
                        }
                        > img {
                            margin-right: 0.05rem /* 10/100 */;
                        }
                    }
                    > div:nth-child(2) {
                        width: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        > span:nth-child(1) {
                            margin-right: 0.1rem /* 10/100 */;
                        }
                    }
                    > div:nth-child(3) {
                        text-align: left;
                        padding-top: 0.1rem /* 10/100 */;
                        font-size: 0.13rem /* 13/100 */;
                        color: #999999;
                    }
                }
                .bottomCell:not(:last-child) {
                    border-bottom: 1px solid #eeeeee;
                }
                .refundPrompt {
                    color: #38d0c9;
                    padding: 0.14rem /* 14/100 */ 0;
                    font-size: 0.14rem /* 15/100 */;
                    text-align: left;
                }
            }
            .evaluates {
                font-size: 13px;
                > div:nth-child(1) {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0.12rem /* 12/100 */;
                    > span:nth-child(1) {
                        font-size: 14px;
                        font-weight: bold;
                    }
                    > span:nth-child(2) {
                        color: #999999;
                    }
                }
                > div:nth-child(2) {
                    padding: 0 0.12rem /* 12/100 */ 0.12rem /* 12/100 */ 0.12rem
                        /* 12/100 */;
                    text-align: left;
                    .span {
                        line-height: 0.2rem /* 20/100 */;
                    }
                }
                .reply {
                    padding: 0.12rem 0.12rem 0.12rem 0.32rem;
                    box-sizing: border-box;
                    font-size: 0.13rem /* 13/100 */;
                    > div:nth-child(1) {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                    > div:nth-child(2) {
                        text-align: justify;
                        line-height: 0.22rem;
                        display: inline-block;
                        width: 100%;
                        word-wrap: break-word;
                        white-space: normal;
                        padding: 0.1rem /* 10/100 */ 0;
                    }
                }
            }
        }
    }
    .confirmOrderBox {
        width: 100%;
        height: 0.84rem /* 84/100 */;
        .cell {
            width: 100%;
            height: 0.84rem /* 84/100 */;
            position: fixed;
            bottom: 0;
            left: 0;
            background: #fff;
            box-shadow: 0px 0px 5px #e9e9e9;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0.12rem /* 12/100 */;
            box-sizing: border-box;
            > div {
                width: 30%;
                font-size: 0.13rem /* 13/100 */;
            }
            > div:nth-child(1) {
                margin-right: 0.1rem /* 10/100 */;
            }
        }
    }
    .evaluateBox {
        padding: 0.05rem 0 /* 12/100 */;
        background: #fff;
        border-radius: 0.05rem /* 5/100 */;
        box-sizing: border-box;
        text-align: left;
        width: 3rem /* 300/100 */;
        .titleBox {
            font-size: 0.16rem /* 16/100 */;
            // font-weight: bold;
            padding: 0.16rem /* 12/100 */ 0.12rem;
        }
        .textBox {
            padding: 0 0.12rem;
            > div {
                font-size: 0.14rem /* 14/100 */;
                border: 1px solid #6acdc8;
                border-radius: 0.04rem /* 1/100 */;
                margin-bottom: 0.12rem /* 12/100 */;
            }
        }
        .butsBox {
            font-size: 0.14rem /* 14/100 */;
            border-top: 1px solid #eeeeee;
            > span {
                display: inline-block;
                width: 50%;
                padding: 12px;
                box-sizing: border-box;
                text-align: center;
            }
            > span:nth-child(1) {
                color: #999999;
            }
            > span:nth-child(2) {
                color: #38d0c9;
                border-left: 1px solid #eeeeee;
            }
        }
    }
}
</style>
<style>
#detailTtoBePaid .van-image {
    width: 100%;
    height: 100%;
}
#detailTtoBePaid .van-count-down {
    font-size: 0.15rem /* 15/100 */;
    color: #38d0c9;
    font-weight: bold;
}
#detailTtoBePaid .van-popup {
    background: none;
}
.van-button {
    padding: 0 25px;
    font-size: 13px;
    border-radius: 20px;
    font-weight: 600;
    border-radius: 25px;
}
</style>