<!-- 订单信息 -->
<template>
    <!-- 骨架屏 -->
    <van-skeleton :row="20" :loading="loading">
        <div class="wrapper">
            <!-- 如果是已经提交  则显示物流发货信息 -->
            <div class="is-Ship" v-if="pageType !== 3">
                <div class="status-bg" :class="{ ship: pageType == 2 }"></div>
                <div>订单{{ pageType == 1 ? "待" : "已" }}发货</div>
            </div>
            <!-- 收货信息地址 -->
            <LAddress
                @click="jumpAddress"
                :option="addressOption"
                :showArrow="pageType == 3 ? true : false"
                :url="pageType == 3 ? 'myAddress' : ''"
            ></LAddress>
            <!-- 订单信息 -->
            <div>
                <div class="black-block"></div>
                <div class="c-orderInfo">
                    <div class="title">订单信息</div>
                    <div class="goods">
                        <div class="img">
                            <img
                                :src="goodsData.PrizeImg ? goodsData.PrizeImg : 'https://image.360lj.com/nopic.gif'"
                                alt
                            />
                        </div>
                        <div class="right">
                            <div class="goods-title">{{ goodsData.Name }}</div>
                            <div
                                class="goods-price"
                            >￥{{ (goodsData.Price - goodsData.Postage) | getPrice }}</div>
                            <div class="goods-transport">提货方式:快递运输</div>
                        </div>
                    </div>
                </div>
                <div class="black-block"></div>
            </div>

            <!-- 快递信息 -->
            <div class="express" v-if="pageType == 2">
                <div class="title">快递信息</div>
                <div class="express-content">
                    <div class="express-content-left">{{ goodsData.ExpressName || "未知" }}</div>
                    <div class="express-content-right">
                        <!-- 订单号 -->
                        <span class="ellips order">{{ goodsData.ExpressNum || "未知" }}</span>
                        <span class="red" @click="handleCopy(goodsData.ExpressNum)">复制</span>
                    </div>
                </div>
            </div>
            <div class="black-block" v-if="pageType == 2"></div>

            <LOItem :list="list"></LOItem>

            <!-- 提交订单 -->
            <div class="submitOrder" v-if="pageType == 3">
                <div class="price">
                    合计：
                    <span>￥{{ goodsData.Price | getPrice }}</span>
                </div>
                <van-button round type="info" class="btn" @click="submitOrder">提交订单</van-button>
            </div>
        </div>
    </van-skeleton>
</template>
<script>
    import LAddress from "@/components/address/ChooseAddress"; //收货地址
    import LOItem from "./components/COrderItem"; //奖品订单和邮寄信息
    import { copy } from "@/assets/js/utils.js";
    export default {
        // 海报裂变订单信息
        name: "orderInfo",
        components: {
            LAddress,
            LOItem
        },
        data() {
            return {
                id: "", //页面奖品id
                addressOption: {}, // 地址信息
                goodsData: {}, //商品信息
                loading: true //显示骨架屏
            };
        },
        created() {
            if (!this.$route.query.id) {
                return this.$router.back();
            } else {
                this.id = this.$route.query.id;
            }

            this.init();
        },
        methods: {
            async init() {
                // 设置默认地址
                let setAddress = async () => {
                    if (this.pageType !== 3) return;
                    let address = JSON.parse(
                        sessionStorage.getItem("lj_chooseAddress")
                    );
                    if (address) {
                        this.addressOption = address;
                    } else {
                        this.LJ_LOADING();
                        // 获取用户所有地址
                        let { data } = await this.$http.GetAddressList();

                        this.$toast.clear();
                        if (data.IsSuccess) {
                            if (data.ResultObject.length > 1) {
                                // 找出某认地址
                                this.addressOption = data.ResultObject.filter(
                                    v => v.IsDefault
                                )[0];

                                // 多条地址数据时有可能依然没有默认地址，此时也是取值第一个为默认地址
                                if (!this.addressOption) {
                                    this.addressOption = data.ResultObject[0];
                                }

                                //    只有一条地址数据时取第一个为某认
                            } else if (data.ResultObject.length == 1) {
                                this.addressOption = data.ResultObject[0];
                            }
                        } else {
                            this.$toast("加载失败");
                        }
                    }
                };

                //获取奖品信息
                this.FollowEventGetPrizeOrder(setAddress);
            },
            /**
             * 复制方法
             * @param {string} val 需要复制的字符串
             */
            handleCopy(val) {
                let isSuccess = copy(val);
                let message = "";
                isSuccess ? (message = "复制成功") : (message = "复制失败");
                this.$toast(message);
            },
            // 获取奖品详情
            FollowEventGetPrizeOrder(callback = _ => {}) {
                // Name (string, optional): 奖品名称 ,
                // Description (string, optional): 奖品描述 ,
                // PrizeImg (string, optional): 奖品图地址 ,
                // OriginalPrice (integer, optional): 原价 ,
                // Price (integer, optional): 总价 ,
                // Postage (integer, optional): 邮费 ,
                // FollowEventID (string, optional): 活动id ,
                // OrderStatus (integer, optional): 订单状态 ,
                // UserID (string, optional),
                // UserName (string, optional): 用户名称 ,
                // Phone (string, optional): 电话 ,
                // AreaCode (string, optional): 地区编码 ,
                // Address (string, optional): 详细地址 ,
                // OrderCode (string, optional): 订单编号 ,
                // OrderTime (string, optional): 下单时间 ,
                // PayTime (string, optional): 支付时间 ,
                // ExpressName (string, optional): 快递名称 ,
                // ExpressNum (string, optional): 快递单号 ,
                // rankingLists (Array[string], optional): 都有谁参加了这个活动
                this.LJ_LOADING();
                this.$http.FollowEventGetPrizeOrder(this.id).then(({ data }) => {
                    this.$toast.clear();
                    if (data.IsSuccess) {
                        this.loading = false;
                        this.goodsData = data.ResultObject;
                        this.addressOption = {
                            ...data.ResultObject,
                            Name: data.ResultObject.Receiver, //重置用户名
                            Addr: data.ResultObject.Address, //重置地址
                            IsDefault: false
                        };
                        callback();
                    } else {
                        this.$toast(data.ResultMsg);
                    }
                });
            },
            // 提交订单
            submitOrder() {
                if (!this.towid && this.pageType == 3)
                    return this.$toast("请选择地址");
                this.LJ_LOADING("提交中...");
                this.$http
                    .ReceivePrize({
                        id: this.id,
                        towid: this.towid
                    })
                    .then(({ data }) => {
                        this.$toast(data.ResultMsg);
                        if (data.IsSuccess) {
                            this.init();
                        } else {
                        }
                    });
            },
            //跳转地址栏链接设置url
            jumpAddress() {
                if (this.pageType == 3) {
                    sessionStorage.setItem("orderInfoId", JSON.stringify(this.id));
                }
            }
        },
        computed: {
            // 订单状态
            pageType() {
                // 3=>未领取 1=>订单未发货 2=>订单已发货
                return this.goodsData.OrderStatus;
            },
            // 地址id
            towid() {
                return this.addressOption.ID;
            },
            // 订单需要的数据格式
            list() {
                let _this = this;
                // 价格  分转化为元
                function getPrice(val) {
                    return (val / 100).toFixed(2);
                }
                // 过滤器里面兼容ios 的时间格式 2019-09-21T10:58:53.087 => 2019/09/21 10:58:53
                function compatibleDate(val) {
                    if (!val) return "未知";
                    return val
                        .split(".")[0]
                        .split("T")
                        .join(" ")
                        .split("-")
                        .join("/");
                }
                switch (this.pageType) {
                    case 3:
                        return [
                            {
                                name: "运费",
                                content: `￥${getPrice(_this.goodsData.Postage)}`,
                                color: "red"
                            }
                        ];
                    case 2:
                    case 1:
                        return [
                            {
                                name: "订单编号",
                                content: _this.goodsData.OrderCode
                            },
                            {
                                name: "下单时间",
                                content: `${compatibleDate(
                                    _this.goodsData.OrderTime
                                )}`
                            },
                            {
                                name: "支付时间",
                                content: `${compatibleDate(
                                    _this.goodsData.PayTime
                                )}`
                            },
                            {
                                name: "运费",
                                content: `￥${getPrice(_this.goodsData.Postage)}`,
                                color: "red"
                            }
                        ];
                }
            }
        }
    };
</script>
<style lang="less" scoped>
    .wrapper {
        min-height: 100vh;
        padding-bottom: 1.3rem;
        // 是否发货
        .is-Ship {
            display: flex;
            align-items: center;
            padding: 0 0.3rem;
            font-size: 0.34rem;
            color: #fff;
            position: relative;
            height: 1.6rem;
            background-image: linear-gradient(
                0deg,
                #3392ff 0%,
                #4ca1fc 37%,
                #64b0f9 100%
            );
            .status-bg {
                width: 0.48rem;
                height: 0.6rem;
                margin-right: 0.2rem;
                background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAY1BMVEUAYdoAYdoAYdsAYdr+/v8AYdoAYdr8/v8AYdrm8f0keOAufuEvfuJRlOdrpOv8/v9Kj+Xp8vzl7/vx9v7+/v/5+/72+f7i7ftnoemJtu72+v6SvO/P4vn7/f75+/7f6/r///+Cl17VAAAAIHRSTlMBBxEc8ykk7TCGNTAoQDjmILixjN/ZrllJH7pcPM2fdv4zuEQAAAFiSURBVFjD7dfrboJAEIbhMjsswoLi+dh27v8q6yZjBme3cVmbRpq+8Rfxe2KQCL69YMWg8MijcVLZc+nb+Rrpvg3ARh9aC6H3H6RDACTdjoVgf6GgBcCCgvYsKADeI4AxEaACLwT7PaUCVHtB76FKB+joBQXUFAOsjQK7EDjSGIAuLMgHOFEstBYp1jYAqIqE27LcYhWJ9hoAY6wty9mgktNHrTUG+DTKvu/btnXNXc65+dw5ffT6xr4HDeDIag3QyNbPAjXAAIBMoPgZoJguAEPA/AN/HsAKb1WYA5w7aZkDHPj3bXZtlQeUXCZwbhzXNMscAAdN8DpAKes6wEPXzQeNPonov0FrrfH5e98qDzD5QNe4VnJumXMSJ34d/BaQ8XzwLPCpb+87GtWpvwMK4Ke0hPjChAhgbGKyZ8ALnkgPGFACpK55L4AP0pO9CCOJgvciSPDodSv3T6PMw5LHL9UXfUP82GQbNbIAAAAASUVORK5CYII=")
                    no-repeat center/100%;
                // 发货
                &.ship {
                    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAA/CAMAAAB9/952AAAAqFBMVEUAAAAAYdoAYdoAYdoAYdoAYdoBYdoCYtsDY9z1+f7////4+/73+v/v9v36/f7z+P7k7/z+/v/r8/06hePv9v79/v/5/P/y9/71+f7u9f7U5PmcwfGvzvT3+v7s8/zZ5/rj7vvR4vnL3/fb6PrJ3vi00fVkn+n3+v7v9f3T5Pm20vWItu9yqOu40/U1guJ0qOvi7fvy9/3h7PvS5Pns8/3Z6PqfxPH///+mARw5AAAAN3RSTlMABgwaFREhJy7V+tnQpOnEofNvOZDr48u0spJYTeDAmZh9eXdbWSq7noZzU0w0KBSxiYdrXEEld0+w3QAAAslJREFUWMPN1wtb2jAUBuC1aZtSOwERUUSQOyoX52X8/3+2cz6SJdKsLcbt2dfHx4SEtydNC/rtryWoOk5iKlKLDPinbjC/LKDCOgFXtcRgk2f7GmlfkldeG5WV72vmDVqpFWZ1sR+81HIr3NfNZRhWYfEJWKlG1ilYXIXFUX0sOmh0uKyTMWhMBW5M1MbuBZcGDuV5Yc3p9AJ5B+eoLAJ2YpY7aIE3hlyH0Pwx5M1o/tjVDpoPdj4ej6fTly41L8LQEzuTMkmEeKVmdwfNHxNn/BkCLPDBEmAzard/QvPDBGs5dVYhaSjtkxjqUqVlG5TmgbEURZHo4c6F5oNFyJy7734YW3HMpTWpm1NpvhhrYsD9GUrzr0xcU/+GS/O4ZgTBEht+vPDJ+0ms/d0Kf996YMcBFn4ZFsX/NRZ8ESb+GXb13B89X5XcG8NRv5VbWPRH7O4xRR7v3FTW72D8aViNDXkq0hm6rPOnVOehCuvRpEmv3e5NqNFzLHGdprfX3exuRCftO69ZrLFsnXaah2azk66zAjYGoUvM3Zh6WytNb/YqN2naKiySruXvdkfOUEB0hEXLPXIrb/Hb7tgZyfTc/HUlJXeWCkOALVZ5o9HIpbSKaUnJL9qZy7l1C9HsRr5a6AfdlCZEkkhK00xuSkce9iaHL1BdmMFIYy75iCUczSSIjW2JggVMrxPagbOXiRPjVdOyl1m0UJrhBmbyQDiSWBtA1MECZjTDmVtDYLKViMdf9Xh34bCoFSiOta2+abeg6EVz4Gwv6jYbOCxwATi1q5M8y/KJ2ic7aqMG/DjdL4QwluJUQ3N6V4lSVmCitYRTvPamNHBqpRyzhqKGGKv4nw84NRuJi+fVlwJx1mVzajYSHp1XF18cd0fNRtSl/ViZPV5Wlzm3bR2lOF7J6aBf3CcTPVzN4b1l45WxqinZJ6vOGiSOk8d/AUIE0A7v3JioAAAAAElFTkSuQmCC");
                }
            }

            &::before {
                position: absolute;
                content: "";
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1.3rem;
                background: url("../../../../assets/images/mask_bg.png") no-repeat
                    top/100%;
                opacity: 0.3;
            }
        }
        .black-block {
            height: 0.2rem;
            background: #f5f5f7;
        }
        .submitOrder {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 0.28rem;
            justify-content: space-between;
            padding: 0 0.3rem;
            height: 1.1rem;
            background-color: #ffffff;
            box-shadow: 0rem -0.05rem 0.07rem 0rem #f3f3f3;
            .price span {
                font-size: 0.34rem;
                color: red;
            }
            .btn {
                line-height: 0.7rem;
                height: auto;
            }
        }
        .express {
            text-align: left;
            padding: 0 0.3rem;
            font-size: 0.3rem;
            color: #333333;
            .title {
                font-size: 0.32rem;
                height: 0.76rem;
                line-height: 0.76rem;
                border-bottom: solid #f3f3f3 0.01rem;
            }
            .express-content {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.3rem 0;
                .express-content-left {
                    flex-shrink: 0;
                    background-color: #ffffff;
                    box-shadow: 0rem 0rem 0.18rem 0rem #eaeaea;
                    border-radius: 0.1rem;
                    overflow: hidden;
                }
                .express-content-right {
                    flex: 1;
                    display: flex;
                    text-align: right;
                    margin-left: 0.3rem;
                    .order {
                        flex: 1;
                    }
                    .red {
                        margin-left: 0.2rem;
                        color: red;
                        line-height: normal;
                    }
                }
            }
        }
    }
    .c-orderInfo {
        text-align: left;
        padding: 0 0.3rem;
        font-size: 0.32rem;
        .title {
            height: 0.76rem;
            line-height: 0.76rem;
            border-bottom: solid #f3f3f3 0.01rem;
            color: #333333;
        }
        .goods {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.3rem 0;
            .img {
                width: 1.8rem;
                height: 1.8rem;
                background-color: #ffffff;
                box-shadow: 0rem 0rem 0.18rem 0rem #eaeaea;
                border-radius: 0.1rem;
                overflow: hidden;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .right {
                flex: 1;
                margin-left: 0.3rem;
                height: 1.8rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .goods-title {
                    font-size: 0.3rem;
                    color: #000;
                }
                .goods-price {
                    color: red;
                }
                .goods-transport {
                    color: #666;
                    font-size: 0.28rem;
                }
            }
        }
    }
</style>
