<template>
    <div class="page">
        <manage-nav :title="'供应管理端'"></manage-nav>
        <ul class="tab">
            <li
                class="tab__item"
                :class="{ 'tab__item--active': tab === index }"
                v-for="(item, index) in list"
                :key="index"
                @click="setTab(index)"
            >
                <div class="tab__text">{{ item.title }}</div>
                <div class="tab__num" v-if="item.num > 0">
                    {{ item.num }}
                </div>
            </li>
        </ul>
        <div class="page__content" v-if="!noPower">
            <swiper class="page__swiper" :current="tab" @change="swiperChange">
                <swiper-item v-for="(item, index) in list" :key="index">
                    <scroll-view
                        class="page__scroll"
                        :scroll-y="true"
                        @scrolltolower="getMoreList"
                    >
                        <ul class="order">
                            <li
                                class="order__item"
                                v-for="(order, oindex) of orderList"
                                :key="oindex"
                            >
                                <div class="order__main">
                                    <div class="order__top order__top2">
                                        <div class="des">
                                            <span>订单号：</span>
                                            {{ order.orderNo }}
                                            <span
                                                class="copy"
                                                @click="copy(order.orderNo)"
                                                >复制</span
                                            >
                                            <span class="order-status link">{{
                                                order.status | orderStatus
                                            }}</span>
                                        </div>
                                    </div>
                                    <div class="order__con">
                                        <ul class="info-list">
                                            <li>店铺：{{ order.shopName }}</li>
                                            <li>
                                                商品代码：<span
                                                    class="link"
                                                    @click="
                                                        copy(order.productCode)
                                                    "
                                                >
                                                    {{ order.productCode }}
                                                </span>
                                                <span
                                                    class="copy"
                                                    @click="
                                                        copy(order.productCode)
                                                    "
                                                    >复制</span
                                                >
                                            </li>
                                            <li>店铺：{{ order.shopName }}</li>
                                            <li>
                                                总价：¥{{ order.amount / 100 }}
                                            </li>
                                            <li>
                                                下单时间：{{ order.orderTime }}
                                            </li>
                                            <li>
                                                支付状态：{{ order.payStatus }}
                                            </li>
                                        </ul>
                                        <div class="order__title">
                                            {{ order.receiverName || "" }}
                                            ({{ order.receiverMobile || "" }})
                                        </div>
                                        <p class="order__des">
                                            {{ order.receiverAddress }}
                                            <span
                                                class="copy"
                                                @click="
                                                    copyAddress(order)
                                                "
                                                >复制</span
                                            >
                                        </p>
                                    </div>
                                </div>

                                <div class="view-detail">
                                    <ul class="goods">
                                        <li class="goods__item">
                                            <div class="goods__content">
                                                <div class="goods__left">
                                                    <my-image
                                                        class="goods__img"
                                                        :src="
                                                            order.productImage
                                                        "
                                                    ></my-image>
                                                    <div class="goods__info">
                                                        <div
                                                            class="goods__title"
                                                        >
                                                            {{
                                                                order.productName ||
                                                                ""
                                                            }}
                                                        </div>
                                                        <div
                                                            class="goods__spec"
                                                        >
                                                            {{
                                                                order.productSpec ||
                                                                ""
                                                            }}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="goods__right">
                                                    <div class="goods__price">
                                                        ¥{{
                                                            order.productPrice
                                                                | minuteToRmb
                                                        }}
                                                    </div>
                                                    <div class="goods__num">
                                                        {{
                                                            "X" +
                                                            (order.count || "0")
                                                        }}
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="order__btns">
                                    <div
                                        class="btn"
                                        v-if="
                                            order.status === 3 ||
                                            order.status === 4 ||
                                            order.status === 9 ||
                                            order.status === 21
                                        "
                                        @click="fillDeliveryOrder(order)"
                                    >
                                        填写单号
                                    </div>
                                    <div
                                        class="btn"
                                        v-if="
                                            order.status !== 6 &&
                                            order.status !== 12
                                        "
                                        @click="cancelOrder(order)"
                                    >
                                        取消订单
                                    </div>
                                    <div
                                        class="btn active-btn"
                                        v-if="
                                            order.status === 20 &&
                                            order.afterSaleStatus !== 3
                                        "
                                        @click="confirmOrder(order)"
                                    >
                                        确认订单
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="null" v-if="loading && !item.list.length">
                            <img
                                class="null__img"
                                src="/static/common/order_null.jpg"
                                alt
                            />
                            <div class="null__title">还没有相关数据哦</div>
                            <!-- <div class="null__sub-title">xxx</div> -->
                        </div>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </div>

        <uni-popup ref="popup" type="dialog">
            <uni-popup-dialog
                mode="input"
                :title="'会员码'"
                :content="false"
                :inputType="'text'"
                placeholder="请输入会员码"
                @confirm="popupConfirm"
            ></uni-popup-dialog>
        </uni-popup>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import fn from "../../common/js/function";
import uniPopup from "../../components/uni-popup/uni-popup";
import uniPopupDialog from "../../components/uni-popup/uni-popup-dialog";
import ManageNav from "../../components/layout/manage-nav";

export default {
    name: "",
    components: { MyImage, uniPopup, uniPopupDialog, ManageNav },
    // 数据
    data() {
        return {
            tab: 0,
            list: [
                {
                    title: "全部",
                    status: "-1",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "待确认",
                    status: "20",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "待发货",
                    status: "3",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "待收货",
                    status: "4",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "售后",
                    status: "99",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "已完成",
                    status: "9",
                    num: 0,
                    page: 1,
                    list: [],
                },
            ],
            loading: false, // 是否加载完成
        };
    },
    filters: {
        afterSaleStatus(v) {
            switch (v) {
                case 1:
                    return "退款审核中";
                case 2:
                    return "等待商家退款";
                case 3:
                    return "退款完成";
                case 4:
                    return "退款取消";
                case 5:
                    return "退货审核中";
                case 6:
                    return "退货取消";
                case 7:
                    return "退货完成";
                case 8:
                    return "等待买家退货";
                case 9:
                    return "等待确认收货";
                case 10:
                    return "已拒绝";
                default:
                    return "未知";
            }
        },

        orderStatus(v) {
            let obj = {
                2: "待支付",
                3: "待发货",
                4: "待收货",
                5: "拼团中",
                6: "已取消",
                7: "售后中",
                8: "已删除",
                9: "已完成",
                10: "已评价",
                11: "已售后",
                12: "已退款",
                20: "待接单",
                21: "拣货中",
                22: "拣货完成",
                23: "待配送",
                24: "配送中",
                25: "已送达",
                26: "待提货",
                27: "已提货",
                31: "订单已推单",
                32: "订单已被骑手接单",
                33: "骑手已到店",
                34: "骑手已取餐",
                35: "订单完成",
                36: "订单失败",
            };
            return obj[v] || "未知";
        },
    },
    onLoad() {
        uni.hideLoading();
    },
    async onShow() {
        const self = this;
        self.fn.shareMenu();
        self.tab = this.$store.state.common.tabIndex || 0;
        this.getList();
    },

    // 函数
    methods: {
        // 切换导航
        setTab(index) {
            const self = this;
            self.tab = index;
            this.$store.commit("common/update", {
                tabIndex: index,
            });
        },

        // swiper切换处理
        swiperChange(val) {
            const self = this;
            self.tab = val.target.current;
            self.getList();
        },

        // 获取订单列表
        getList() {
            const self = this;

            self.list[self.tab].page = 1;

            uni.showLoading({
                title: "加载中...",
            });
            self.api
                .get("/Supplier/GetOrderList", {
                    status: self.list[self.tab].status,
                    pageIndex: self.list[self.tab].page,
                    pageSize: 20,
                })
                .then((res) => {
                    uni.hideLoading();
                    let data = res.data.data;

                    if (data.length) {
                        self.list[self.tab].page++;
                    }

                    self.list[self.tab].list = data;
                    self.loading = true;
                    uni.hideLoading();
                });
        },

        // 获取更多内容
        getMoreList() {
            const self = this;

            self.api
                .get("/Supplier/GetOrderList", {
                    status: self.list[self.tab].status,
                    pageIndex: self.list[self.tab].page++,
                    pageSize: 20,
                })
                .then((res) => {
                    let data = res.data.data;
                    // if (data.length) {
                    //     self.list[self.tab].page++;
                    // }
                    self.list[self.tab].list = self.list[self.tab].list.concat(
                        data
                    );
                });
        },

        confirmOrder(order) {
            this.fn
                .showModal({
                    content: "是否确认订单?",
                })
                .then((modalRes) => {
                    if (modalRes.confirm) {
                        uni.showLoading({
                            title: "处理中...",
                            mask: true,
                        });
                        this.api
                            .get("/Supplier/ConfirmOrder", {
                                id: order.id,
                            })
                            .then((res) => {
                                uni.hideLoading();
                                if (res.success) {
                                    this.fn.showToast("确认订单成功");
                                    this.getList();
                                } else {
                                    this.fn.showModal({
                                        title: "确认订单失败",
                                        content: res.message,
                                        showCancel: false,
                                    });
                                }
                            });
                    }
                });
        },

        cancelOrder(order) {
            this.fn
                .showModal({
                    content: "是否取消订单?",
                })
                .then((modalRes) => {
                    if (modalRes.confirm) {
                        uni.showLoading({
                            title: "处理中...",
                            mask: true,
                        });
                        this.api
                            .get("/Supplier/CancelOrder", {
                                id: order.id,
                            })
                            .then((res) => {
                                uni.hideLoading();
                                if (res.success) {
                                    this.fn.showToast("取消订单成功");
                                    this.getList();
                                } else {
                                    this.fn.showModal({
                                        title: "取消订单失败",
                                        content: res.message,
                                        showCancel: false,
                                    });
                                }
                            });
                    }
                });
        },

        // 填写快递单号
        fillDeliveryOrder(val) {
            this.router.push({
                path: "/pages/index/order-delivery-form",
                query: {
                    orderId: val.id,
                },
            });
        },

        // 复制
        copy(val) {
            const self = this;

            uni.setClipboardData({
                data: val,
                success: () => {
                    self.fn.showToast("复制成功");
                },
            });
        },

        // 复制
        copyAddress(order) {
            let str = `${order.receiverName}，${order.receiverMobile}，${order.receiverAddress}`;
            const self = this;

            uni.setClipboardData({
                data: str,
                success: () => {
                    self.fn.showToast("复制成功");
                },
            });
        },
    },

    // 数据计算
    computed: {
        tabList() {
            return this.$store.state.common.tabList;
        },
        user() {
            return this.$store.state.user.user;
        },
        orderList() {
            return this.list[this.tab].list;
        },
        noPower() {
            return this.$store.state.user.noPower;
        },

        curShopId() {
            return this.user && this.user.storeId;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style>
page {
    height: 100%;
}
</style>

<style lang="scss" scoped>
.page {
    &__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: px(145);
        padding: 0 px(50);
        background-color: #fff;
        border-bottom: 1px solid #f1f1f1;
    }
    .name {
        font-size: px(36);
        color: #999;
        flex-shrink: 0;
        margin-right: px(20);
    }
    .shop-main {
        display: flex;
        align-items: center;
    }
    .scan {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .scan-img {
        width: px(70);
        height: px(70);
        & ~ .scan-img {
            margin-left: px(30);
        }
        /deep/ img {
            width: px(70);
            height: px(70);
        }
    }
}

.shop {
    display: flex;
    color: #666;
    font-size: px(36);
    flex-shrink: 0;
    margin-right: px(30);
    width: 100%;
    &__logo {
        margin-right: px(20);
        width: px(80);
        height: px(80);
        border-radius: 50%;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        /deep/ img {
            width: px(80);
            height: px(80);
        }
    }
    &__name {
        display: flex;
        white-space: nowrap;
        align-items: center;
    }
    &__arrow {
        margin-left: px(10);
        transform: rotate(90deg);
    }
}
.page {
    display: flex;
    flex-direction: column;
    height: 100%;

    &__content {
        flex: 1;
        position: relative;
    }

    &__swiper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
    }

    &__scroll {
        height: 100%;
    }
}

.tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: px(145);
    background-color: #fff;

    &__item {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        height: 100%;

        &--active:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: px(6);
            background-color: #333;
        }
    }

    &__text {
        font-size: px(42);
        color: #333;
    }

    &__num {
        position: absolute;
        top: px(30);
        right: px(30);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: px(42);
        height: px(42);
        transform: translateX(50%);
        padding: 0 px(15);
        font-size: px(30);
        color: #fff;
        border-radius: px(21);
        background-color: #262626;
    }
}

.order {
    padding-top: px(30);

    &__item {
        margin: px(20);
        margin-top: px(30);
        background-color: #fff;
        border-radius: px(10);
        box-shadow: 0px 2px 6px -3px rgba(0, 0, 0, 0.5);
        padding-bottom: 1px;
    }
    &__main {
        padding: px(40);
    }
    &__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .des {
            font-size: px(40);
            width: 100%;
            span {
                color: #666;
            }
        }
        .index {
            font-size: px(55);
        }
        .symbol {
            font-size: px(36);
        }
    }
    &__top2 {
        margin-top: px(20);
    }
    .order-status {
        float: right;
    }
    .tags {
        margin-top: px(20);
        .tag {
            display: inline-block;
            line-height: px(50);
            padding: 0 px(15);
            font-size: px(32);
            border: 1px solid #d9d9d9;
            color: #666;
            background: #fafafa;
            border-radius: px(4);
        }
        .magenta {
            color: #eb2f96;
            background: #fff0f6;
            border-color: #ffadd2;
        }
        .green {
            color: #52c41a;
            background: #f6ffed;
            border-color: #b7eb8f;
        }
        .geekblue {
            color: #2f54eb;
            background: #f0f5ff;
            border-color: #adc6ff;
        }
    }

    &__con {
        margin-top: px(30);
        position: relative;
    }

    &__title {
        font-size: px(60);
        position: relative;
    }
    &__title2 {
        margin-top: px(60);
    }
    &__des {
        font-size: px(40);
        margin-top: px(20);
        color: #999;
        &.on {
            color: #333;
        }
    }
    &__btns {
        display: flex;
        border-top: 1px solid #dedede;
        justify-content: space-between;
        margin-bottom: -1px;
        .btn {
            height: px(120);
            line-height: px(120);
            font-size: px(44);
            width: 100%;
            text-align: center;
            & ~ .btn {
                border-left: 1px solid #f1f1f1;
            }
        }
        .active {
            background-color: #f68a3f;
            color: #fff;
            font-size: px(50);
            width: 100%;
        }
        .tel {
            width: px(200);
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: px(36);
            line-height: 1;
            /deep/ img {
                width: px(60);
                height: px(60);
                margin-bottom: px(10);
            }
        }
    }
    .yuji {
        padding: px(20) px(40) px(20) px(60);
        font-size: px(36);
        color: #999;
    }
    .remarks {
        background-color: #fefaf1;
        color: #6b5651;
        font-size: px(36);
        line-height: 1.5;
        padding: px(10);
        margin-left: px(60);
        margin-bottom: px(30);
        margin-right: px(40);
    }
}

.caption {
    display: flex;
    align-items: center;

    &__icon {
        margin-top: px(5);
        font-size: px(44);
        color: #333;
    }

    &__title {
        margin-left: px(30);
        font-size: px(36);
        color: #333;
    }

    &__arrows {
        margin: px(5) 0 0 px(20);
        font-size: px(44);
        color: #333;
    }
}

.null {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: px(145);

    &__img {
        width: px(739);
        height: px(371);
    }

    &__title {
        margin-top: px(20);
        font-size: px(42);
        color: #666;
    }

    &__sub-title {
        margin-top: px(20);
        font-size: px(42);
        color: #999;
    }
}
.tips {
    padding: px(60) px(30);
    text-align: center;
    font-size: px(44);
    .bind {
        color: #3582fb;
    }
}
.view-detail {
    padding: px(20) px(40) px(50);
}
.tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: px(0) px(40);
    .oper-btn {
        display: inline-block;
        text-align: center;
        line-height: px(66);
        padding: 0 px(20);
        font-size: px(38);
        height: px(66);
        border-radius: px(33);
        border: 1px solid #f1f1f1;
        margin-right: px(20);
    }
    .view-btn {
        text-align: right;
        font-size: px(38);
        color: #3582fb;
    }
}

.goods {
    padding: 0 px(45);
    background-color: #f5f5f5;

    &__item {
        min-height: px(225);
        padding-top: px(30);
        & ~ .goods__item {
            border-top: solid px(3) #ececec;
        }

        &:first-child {
            border-top: none;
        }
    }

    &__content {
        display: flex;
        justify-content: space-between;
    }

    &__left {
        display: flex;
        flex: 1;
    }

    &__img /deep/ img {
        width: px(170);
        height: px(170);
        border-radius: px(10);
    }

    &__info {
        flex: 1;
        margin-left: px(30);
    }

    &__title {
        @include omits(2);
        font-size: px(36);
        color: #333;
    }

    &__spec {
        @include omits(1);
        margin-top: px(30);
        font-size: px(36);
        color: #999;
    }

    &__right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: px(210);
    }

    &__price {
        font-size: px(36);
        color: #333;
    }

    &__num {
        margin-top: px(20);
        font-size: px(36);
        color: #999;
    }

    &__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: px(30) 0;
    }

    &__text {
        font-size: px(36);
        color: #999;
    }

    &__status {
        display: flex;
        align-items: center;
    }

    &__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: px(70);
        padding: 0 px(40);
        margin-left: px(30);
        font-size: px(36);
        color: #666;
        border-radius: px(35);
        border: solid px(3) #999;
    }
}
.remarks.user-name {
    background-color: transparent;
    font-size: px(44);
    line-height: px(70);
    font-weight: 500;
    color: #333;
}
.apply {
    padding: px(40);
    border-bottom: 1px dashed #f1f1f1;
    background-color: #fcfcfc;
    &.showAll {
        .info-item {
            display: block !important;
        }
    }
    .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: px(10);
        .tit {
            font-size: px(50);
        }
    }
    .info-item {
        border-bottom: 1px solid #f1f1f1;
        padding: px(15) 0;
        & ~ .info-item {
            display: none;
        }
        .coll {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #666;
            font-size: px(40);
            padding: px(0) px(30);
            margin-top: px(20);
        }
        .coll-tit {
            color: #333;
            font-size: px(44);
            .status {
                display: inline-flexbox;
                margin-left: px(30);
            }
        }
        .good-r {
            .money {
                display: inline-flex;
                width: px(200);
                justify-content: flex-end;
            }
        }
    }
    .btns {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: px(30);
        .btn {
            width: 45%;
            height: px(100);
            border: 1px solid #cacaca;
            border-radius: px(50);
            font-size: px(44);
            text-align: center;
            line-height: px(100);
            background-color: #fff;
        }
        .ok {
            background-color: #ff4b26;
            border-color: #ff4b26;
            color: #fff;
        }
    }
    .toggle {
        margin-top: px(20);
        font-size: px(40);
        text-align: right;
        color: #3582fb;
    }
}
.money-red {
    color: #ff475f;
}
.guide {
    padding-bottom: 2rem;
    padding-top: px(250);
    min-height: 100vh;
    background-color: #fff;
    .btn {
        position: fixed;
        bottom: 3rem;
        left: 0;
        right: 0;
        z-index: 10;
        color: #fff;
        background-color: rgb(0, 188, 38);
        font-size: px(44);
        border-radius: 0;
    }
    .tit1 {
        font-size: px(48);
        font-weight: bold;
        // color: rgb(0, 188, 38);
        padding-bottom: px(40);
        text-align: center;
    }
    .tit2 {
        font-size: px(54);
        font-weight: bold;
        // color: rgb(0, 188, 38);
        padding-bottom: px(120);
        text-align: center;
    }
    .box {
        border: 1px solid rgb(0, 188, 38);
        padding: px(60) px(40);
        margin: 0 px(80);
        li {
            font-size: px(44);
            .index {
                color: red;
            }
        }
        li ~ li {
            padding-top: px(50);
        }
    }
    .load {
        height: 100%;
        padding-top: px(300);
        .text {
            width: px(700);
            margin: 0 auto;
            line-height: 1.6;
            text-align: center;
            font-size: px(44);
        }
    }
    .link {
        color: #409eff;
    }
}
.success-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
}
.success-btn {
    color: #fff;
    background-color: rgb(0, 188, 38);
    font-size: px(44);
    width: 100%;
}
.success-tit1 {
    font-size: px(56);
    font-weight: bold;
    // color: rgb(0, 188, 38);
    padding-bottom: px(40);
    text-align: center;
}
.success-tit2 {
    font-size: px(54);
    font-weight: bold;
    // color: rgb(0, 188, 38);
    padding-bottom: px(120);
    text-align: center;
}
.success-shop-name {
    font-size: px(44);
    text-align: center;
    margin-top: px(100);
}
.success-box {
    padding: px(40);
    width: 100%;
    margin-top: px(300);
    .success-text {
        width: 100%;
        text-align: center;
        color: #409eff;
        margin-bottom: px(50);
        display: flex;
        align-items: center;
        justify-content: center;
        .success-checkbox {
            transform: scale(0.8);
        }
    }
}
.success-load {
    height: 100%;
    padding-top: px(300);
    .success-text {
        width: px(700);
        margin: 0 auto;
        line-height: 1.6;
        text-align: center;
        font-size: px(44);
    }
}
.success-link {
    color: #409eff;
}
.info-list {
    padding: px(30) 0;
    font-size: px(44);
    line-height: 1.5;
    li {
        padding: px(6) 0;
    }
}
.copy {
    display: inline-block;
    font-size: px(32);
    line-height: px(44);
    padding: 0 px(10);
    border: 1px solid #d9d9d9;
    color: #333;
    background-color: #fafafa;
    margin-left: px(20);
    border-radius: px(5);
}
.link {
    color: #3582fb !important;
}
.active-btn {
    color: #52c41a;
}
</style>