<template>
    <view>

        <view class="">
            <view class="bg"></view>
            <view class="bg-model">
                <view class="bg-model-pa">
                    <image class="bg-model-img" src="../static/images/bg.png"></image>
                </view>
                <card :date="date" :obj="info" :textCollection="textCollection" />
            </view>
        </view>

        <view class="box-pack-between menber">
            <view class="menber-left menber-content">
                <view class="">
                    今日新增会员
                </view>
                <view class="number">
                    {{obj.today_count||0}}
                </view>
            </view>
            <view class="menber-right menber-content">
                <view class="">
                    今日会员充值(元)
                </view>
                <view class="number">
                    {{obj.today_total||0}}
                </view>
            </view>
        </view>

        <view class="haeder-content">
            <view class="flex-y-center haeder-title haeder-title-color">
                <view class="haeder flex-center haeder-color">
                    <view class="haeder-bg">
                    </view>
                </view>
                <view class="">
                    商品订单
                </view>
            </view>

            <view class="">
                <view class="haeder-bottom">
                    <view class="haeder-bottom-price">
                        {{obj.to_be_paid_order||0}}
                    </view>
                    <view class="haeder-bottom-title">
                        待支付
                    </view>
                </view>

                <view class="haeder-bottom">
                    <view class="haeder-bottom-price">
                        {{obj.paid_order||0}}
                    </view>
                    <view class="haeder-bottom-title">
                        已支付
                    </view>
                </view>

                <view class="haeder-bottom">
                    <view class="haeder-bottom-price">
                        {{obj.dai_peisong_order||0}}
                    </view>
                    <view class="haeder-bottom-title">
                        待配送
                    </view>
                </view>

                <view class="haeder-bottom">
                    <view class="haeder-bottom-price">
                        {{obj.peisong_order||0}}
                    </view>
                    <view class="haeder-bottom-title">
                        配送中
                    </view>
                </view>

                <view class="haeder-bottom">
                    <view class="haeder-bottom-price">
                        {{obj.picked_order||0}}
                    </view>
                    <view class="haeder-bottom-title">
                        待自提
                    </view>
                </view>

                <view class="haeder-bottom">
                    <view class="haeder-bottom-price">
                        {{obj.refund_order||0}}
                    </view>
                    <view class="haeder-bottom-title">
                        已退款
                    </view>
                </view>
            </view>
        </view>

        <view class="payCode" @click="upCode">
            <image src="../static/images/payCode.png" mode="widthFix"></image>
        </view>

        <view class="shopSolt haeder-content">
            <view class="flex-y-center haeder-title shop-titleColor">
                <view class="haeder flex-center shop-color">
                    <view class="haeder-bg">
                    </view>
                </view>
                <view class="">
                    商品销量排行
                </view>
            </view>
            <view class="solt-num">
                排名实时更新
            </view>

            <view class="main">
                <view class="row tab-h sticky">
                    <view class="td" :class="type==2?'flex-grow-1':'td'">排名</view>
                    <view class="td" :class="type==2?'flex-grow-1':'td'">名称</view>
                    <view class="td" :class="type==2?'flex-grow-1':'td'">数量</view>
                    <!-- <view class="td" v-if="type==1">类型</view> -->
                </view>
                <view class="row" v-for="(item,index) in obj.goods_list" :key="item.id">
                    <view class="td" :class="type==2?'flex-grow-1':'td'">
                        <image class="number" v-if="index==0" src="../static/images/number1.png"></image>
                        <image class="number" v-else-if="index==1" src="../static/images/number2.png"></image>
                        <image class="number" v-else-if="index==2" src="../static/images/number3.png"></image>
                        <block v-else>
                            {{index+1}}
                        </block>
                    </view>
                    <view class="td" :class="type==2?'flex-grow-1':'td'">{{item.name}}</view>
                    <view class="td" :class="type==2?'flex-grow-1':'td'">{{item.num}}</view>
                </view>
            </view>
        </view>
        <view class="haeder-content" style="margin-top: 40rpx;margin-bottom: 40rpx;">
            <view class="flex-y-center haeder-title haeder-title-color">
                <!-- <view class="haeder flex-center haeder-color">
                    <view class="haeder-bg">
                    </view>
                </view> -->
                <image src="/static/images/icon_15.png" mode="aspectFit" class="gn-icon"></image>
                <view class="">
                    常用功能
                </view>
            </view>
            <view class="gn-list">
                <navigator url="/statistics/goodsData/goodsData" class="gn-item flex-column flex-center"
                    hover-class="nav-hover">
                    <image src="/static/images/gn_icon_1.png" mode="aspectFit" class="gn-icon"></image>
                    <view class="name">商品统计</view>
                </navigator>
                

            </view>
        </view>

        <zx-footer-bar :active="0" :type="type" />
    </view>
</template>

<script>
    // #ifdef MP-WEIXIN
    import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
    // #endif
    import zxFooterBar from '../../components/zx-footer-bar/zx-footer-bar.vue'
    import card from '../components/card/card.vue'
    export default {
        components: {
            zxFooterBar,
            card,
        },
        data() {
            return {
                textCollection: {
                    title: "营业额",
                    type: 1, //'首页'
                    wx: '微信支付',
                    ali: '支付宝支付',
                    money: '现金支付',
                    menber: '会员支付',
					juhe: '聚合支付',
                },
                info: {},
                obj: {},
                type: 2,
                list: [],
                URL: getApp().globalData.URL,
                date: "今日"
            }
        },

        onLoad() {
            this.http();	
			
        },

        onPullDownRefresh() {
            uni.showNavigationBarLoading();
            this.http();
            setTimeout(() => {
                uni.hideNavigationBarLoading()
                uni.stopPullDownRefresh()
            }, 1000)
        },

        methods: {


            http(e) {
                this.request({
                    url: 'Smdcshop/store_index',
                    data: {
                        admin_id: uni.getStorageSync("admin_id")
                    }
                }).then(res => {
                    if (res.code == 200) {
                        let info = {
                            total: res.data.jryye_price,
                            wx: res.data.jr_wx,
                            zfb: res.data.jr_zfb,
                            cash: res.data.jrxz_order,
                            menber: res.data.jr_hy,
							juhe:res.data.jh_ping_juhema1
                        }
                        this.info = info;
                        this.obj = res.data;
                    }
                }).catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    })
                });
            },

            upCode(e) {
                // #ifdef H5
                uni.showModal({
                    title: '提示',
                    content: '请长按二维码图片进行保存',
                    showCancel: false,
                    confirmText: '好的',
                });
                // #endif
                // #ifdef MP-WEIXIN 
                var url = this.URL + this.obj.skm_qrcode;
                console.log(url, "url")
                saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
                    //成功的逻辑
                    console.log(res, "保存成功")
                    uni.showToast({
                        title: '保存成功',
                        icon: 'none',
                        mask: true,
                    })
                }).catch((err) => {
                    console.log(err, "保存失败")
                    if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
                        err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
                        "saveImageToPhotosAlbum:fail authorize no response") {
                        // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
                        uni.showModal({
                            title: '提示',
                            content: '需要您设置授权保存相册',
                            showCancel: false,
                            success: modalSuccess => {
                                uni.openSetting({
                                    success(settingdata) {
                                        console.log("settingdata", settingdata)
                                        if (settingdata.authSetting[
                                                'scope.writePhotosAlbum']) {
                                            uni.showModal({
                                                title: '提示',
                                                content: '获取权限成功,再次点击图片即可保存',
                                                showCancel: false,
                                            })
                                        } else {
                                            uni.showModal({
                                                title: '提示',
                                                content: '获取权限失败，将无法保存到相册哦~',
                                                showCancel: false,
                                            })
                                        }
                                    },
                                    fail(failData) {
                                        console.log("failData", failData)
                                    },
                                    complete(finishData) {
                                        console.log("finishData", finishData)
                                    }
                                })

                            }
                        })
                    }
                    // 失败后的逻辑
                })
                // #endif			
            },


        },
    }
</script>

<style lang="scss">
    page {
        background-color: #F4F5F7;
    }

    .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 313rpx;
        background: #3387ff;
    }

    .bg-model {
        position: relative;
        width: 100%;
    }

    .bg-model-pa {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .bg-model-img {
        width: 690rpx;
        height: 361rpx;
        display: block;
        margin: 0 auto;
        border-radius: 8rpx;
        box-shadow: 0px 6rpx 12rpx 0px rgba(230, 233, 240, 0.50);
    }

    .menber {
        width: 690rpx;
        margin: 40rpx auto;

    }

    .menber-content {
        width: 330rpx;
        height: 160rpx;
        border-radius: 8rpx;
        box-shadow: 0px 6px 16rpx 0px rgba(0, 60, 32, 0.06);
        color: #FFFFFF;
        padding: 31rpx 40rpx;
        font-size: 28rpx;
    }

    .menber-left {
        background: linear-gradient(180deg, #6fa8f8, #328afe);
    }

    .menber-right {
        background: linear-gradient(180deg, #fbd652, #fda03c);
    }

    .menber-content .number {
        font-size: 36rpx;
    }

    .haeder-content {
        width: 690rpx;
        margin: 0 auto;
        background-color: #FFFFFF;
        padding-bottom: 40rpx;
        border-radius: 8rpx;
    }

    .haeder-title {
        height: 90rpx;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: center;
        color: #333333;
        border-radius: 8rpx 8rpx 0px 0px;
        padding: 0 24rpx;
    }

    .haeder-title-color {
        background: linear-gradient(90deg, rgba(114, 178, 255, 0.30), rgba(114, 178, 255, 0.00));
    }

    .haeder-color {
        background: linear-gradient(136deg, #6397fd 4%, #3377ff 100%);
    }

    .shop-titleColor {
        background: linear-gradient(90deg, rgba(254, 160, 51, 0.30), rgba(254, 160, 51, 0.00));
    }

    .shop-color {
        background: linear-gradient(138deg, #ffb660 5%, #fea033 97%);
    }

    .haeder {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        margin-right: 10rpx;
    }

    .gn-icon {
        flex: none;
        display: block;
        width: 36rpx;
        height: 36rpx;
        margin-right: 10rpx;
    }

    .haeder-bg {
        width: 16rpx;
        height: 19rpx;
        background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.60) 100%);
        border-radius: 4rpx;
    }

    .haeder-bottom {
        padding: 30rpx 0 0rpx 0;
        width: 25%;
        display: inline-block;
        text-align: center;
    }

    .haeder-bottom-price {
        font-size: 36rpx;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: center;
        color: #333333;
        margin-bottom: 12rpx;
    }

    .haeder-bottom-title {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #a2a2a2;
    }

    .payCode {
        width: 690rpx;
        margin: 29rpx auto;
        /* height: 216rpx; */
    }

    .payCode image {
        width: 100%;
        height: 100%;
    }

    .solt-num {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #999999;
        padding: 30rpx 0 24rpx 0;
    }

    .main {
        background-color: #fff;
        display: table;
        width: 100%;
        z-index: 3;
    }

    .main .row {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        /* height: 80rpx; */
        padding: 20rpx 0;
        border-bottom: 2rpx solid #f5f5f5;

    }

    .main .row.tab-h {
        top: var(--window-top);
        background-color: #F9FBFF;

    }

    .main .row .td {
        text-align: center;
        font-size: 24rpx;
        color: #333;
    }

    .main .row .td:nth-child(1) {
        width: 10%;
    }

    .main .row .td:nth-child(2) {
        width: 40%;
    }

    .main .row .td:nth-child(3) {
        width: 30%;
    }

    .main .row .td:nth-child(4) {
        width: 20%;
    }

    .main .number {
        width: 36rpx;
        height: 43rpx;
    }

    .gn-list {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-content: flex-start;

        .gn-item {
            flex: none;
            width: 25%;
            padding-top: 40rpx;

            .gn-icon {
                display: block;
                width: 48rpx;
                height: 48rpx;
            }

            .name {
                font-size: 24rpx;
                line-height: 33rpx;
                margin-top: 16rpx;
            }
        }
    }
</style>
