<template>
    <view>
        <view class="swiper">
            <swiper v-if="banner.length>0" class="swiper-box" :indicator-dots="true" :autoplay="true" :interval="3000"
                :duration="1000">
                <block v-for="(item,index) of banner" :key='index'>
                    <swiper-item>
                        <view class="swiper-item" @click.stop="bindPreview(item.type,item.appid,URL+item.thumb,index,item.wifi_id)">
                            <image :src="URL+item.thumb"></image>
                        </view>
                    </swiper-item>
                </block>
            </swiper>
            <view class="swiper-item" v-else>
                <image src="https://zxzhdc.zx-xcx.com/dining/banner.png" mode="aspectFit"></image>
            </view>
        </view>

        <view class="flex-y-center home-header box-pack-between">
            <view class="home-header-contentLeft flex-center" @click="canTeen">
                <view class="">
                    <image class="home-header-icon" :src="URL+obj.to_store_log"></image>
                    <view class="home-header-title">
                        {{obj.to_store_title||''}}
                    </view>
                    <view class="home-header-tip">
                        {{obj.to_store_desc||''}}
                    </view>
                </view>
            </view>
            <!-- <view class="home-header-line"></view> -->
            <view class="home-header-contentRight flex-col box-pack-between">
                <view class="flex-center home-header-contentRight1" @click="takeFood">
                    <view class="flex-y-center">
                        <image class="home-header-icon-take" :src="URL+obj.takeout_log"></image>
                        <view class="">
                            <view class="home-header-title">
                                {{obj.takeout_title||''}}
                            </view>
                            <view class="home-header-tip">
                                {{obj.takeout_desc||''}}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="flex-center home-header-contentRight1" @click="SelfMention">
                    <view class="flex-y-center">
                        <image class="home-header-icon-take" :src="URL+obj.self_logo"></image>
                        <view class="">
                            <view class="home-header-title">
                                {{obj.self_title||''}}
                            </view>
                            <view class="home-header-tip">
                                {{obj.self_desc||''}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <slot name='getCoupon'></slot>

        <!-- #ifdef MP-ALIPAY -->
        <mkt v-if="canIUse" mode="AUTOMATIC" boothCode="MERCHANT_SELF_TINYAPP" :cityCode="cityCode" version="2"
            class='mkt' />
        <!-- #endif -->

        <navigator url="/pages/onPay/onPay" class="box-pack-between home-pay flex-y-center">
            <view class="home-pay-title">
                {{obj.pay_title||''}}
                <view class="home-pay-tip">
                    {{obj.pay_desc||''}}
                </view>
            </view>
            <image class="home-pay-jiantou" src="/static/home/jiantou.png"></image>
        </navigator>

        <view class="home-store flex-y-center">
            <view class="flex-grow-1">
                <view class="box-pack-between flex-grow-1 flex-y-center">
                    <text>{{systemInfo.title}}</text>
                    <view class="more-businessTime flex-y-center" @click="getShop"><text
                            style="margin-right: 6rpx;">更多门店</text><text class="iconfont icon-jiantou1"></text></view>
                </view>
                <view class="businessTime flex-grow-1 box-pack-between flex-y-center">
                    <view class="flex-grow-1">
                        <view class="businessTime businessTimeItem" v-if="systemInfo.is_rest==2 && systemInfo.time">
                            营业时间：{{systemInfo.time}}-{{systemInfo.time2}}
                        </view>
                        <view class=" box-pack-between flex-grow-1" @click="getNavigation">
                            <text class="iconfont icon-dizhi">{{systemInfo.address}}</text>
                            <text class="iconfont icon-icon-test"></text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="flex home-item-content box-pack-between">
            <view class="home-item home-item-one" v-if="applet_info.name" @click="navigateMiniProgram">
                <view class="">
                    <view class="">
                        {{applet_info.name||''}}
                    </view>
                    <view class="home-item-one-tip flex-y-center">
                        {{applet_info.desc||''}}
                    </view>
                </view>
                <image class="home-item-icon1" src="https://zxzhdc.zx-xcx.com/dining/home2.png"></image>
            </view>

            <navigator class="home-item home-item-two" url="/subscribe/index">
                <view class="">
                    {{obj.yy_title||''}}
                </view>
                <image class="home-item-icon1" :src="URL+obj.yy_logo"></image>
            </navigator>

            <navigator class="home-item home-item-two" url="/pages/lineup/lineup">
                <view class="">
                    {{obj.queue_title||''}}
                </view>
                <image class="home-item-icon1" :src="URL+obj.queue_logo"></image>
            </navigator>

            <navigator class="home-item home-item-three" url="../coupon-list/coupon-list">
                <view class="">
                    {{obj.coupon_title||''}}
                </view>
                <image class="home-item-icon1" :src="URL+obj.coupon_logo"></image>
            </navigator>
        </view>
        <getPhone />
        <model :obj="modelObj"></model>
        <Vphone :getPhonePop="getPhonePop" @close="setClose"></Vphone>

        <uni-popup ref="popup" type="bottom">
            <view class="popup_content flex-grow-1 ">
                <view class="popup_content_title">
                    <text v-if="systemInfo.table" class="ft28">您现在已经在{{systemInfo.table||''}}点餐，是要切换到其他餐桌吗？</text>
                </view>
                <view class="flex-y-center flex-grow-1 box-pack-between" style="padding-bottom: 25rpx;">
                    <view class="flex-center popup_content_left popup_content_left1" @click="canTeen_yz">
                        <view class="flex-y-center">
                            <view class="">
                                原桌点餐
                            </view>
                        </view>
                    </view>
                    <view class="flex-center popup_content_left popup_content_left2" @click="bindScan">
                        <view class="flex-y-center">
                            <view class="">
                                重选餐桌
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </uni-popup>

    </view>
</template>
<script>
    let hideLoading = true;
    import getPhone from './module/getPhone.vue';
    import Vphone from '@/components/v-phone/v-phone.vue';
    // import getCoupon from  "plugin://couponPlugin/get-coupon";
    import {
        mapState,
        mapMutations
    } from 'vuex'
    export default {
        components: {
            getPhone,
            Vphone,
            // getCoupon
        },
        props: {
            cityCode: {
                type: [Number, String],
                default: 0
            }
        },
        data() {
            return {
                URL: getApp().globalData.URL,
                banner: [],
                applet_info: {},
                obj: {},
                getPhonePop: false,
                modelObj: null,
                // cityCode: "",
                // #ifdef MP-ALIPAY
                canIUse: my.canIUse('mkt'),
                // #endif
            }
        },

        computed: {
            ...mapState(['systemInfo', 'setColor', 'store_id', 'userInfo'])
        },

        watch: {
            store_id(nVal) {
                this.banner_list();
                this.applet();
                this.setCopy();
                this.getCouponList();
            },
        },

        created() {
            this.banner_list();
            this.applet();
            this.setCopy();
            this.home();
            // this.getCouponList(); 
        },

        methods: {
            ...mapMutations(['SET_ADDRESS', 'SET_TEEN_INDEX', 'SET_SELFMENTION']),
            bindScan(e) {
                // 允许从相机和相册扫码
                uni.scanCode({
                    success: (res) => {
                        var store_id = this.gettParameter(res.result, 'store_id')
                        var table_id = this.gettParameter(res.result, 'table_id')
                        // console.log(store_id, table_id)
                        this.$store.commit('SET_SYSTEM', '') //清空
                        this.$store.commit('SET_STORE_ID', store_id)
                        this.$store.commit('SET_TEEN_INDEX', 1) //重置默认
                        this.$store.commit('SET_TABLE_ID', table_id)
                        this.$store.commit('SET_CATE_ID', '')
                        this.$store.dispatch('getSystemStup', store_id);
                        this.$store.dispatch('getOpenid', store_id);
                        uni.switchTab({
                            url: "/pages/index/index"
                        })
                        this.$refs.popup.close();
                    }
                })
            },

            gettParameter: function(url, name) {
                let val = ''
                if (url.indexOf('?' + name + '=') !== -1) {
                    val = url.split('?' + name + '=')[1].split(/&|#/)[0];
                } else if (url.indexOf('&' + name + '=') !== -1) {
                    val = url.split('&' + name + '=')[1].split(/&|#/)[0];
                }
                return val
            },

            getShop(e) {
                uni.navigateTo({
                    url: "../../shop/index/index"
                })
            },

            // 首页内容
            home() {
                this.$http.request('xcx/home', {
                    store_id: this.store_id,
                }, "", "", hideLoading).then(res => {
                    this.obj = res.data;
                })
            },
            // 打开地图
            getNavigation() {
                // console.log(this.systemInfo.set.coordinates)
                let obj = this.systemInfo.set.coordinates.split(",");
                uni.openLocation({
                    latitude: Number(obj[0]),
                    longitude: Number(obj[1]),
                    name: this.systemInfo.title,
                    address: this.systemInfo.address,
                    success: function() {
                        console.log('success');
                    }
                });
            },

            // 赋能
            setCopy() {

                if (getApp().globalData.isApp) {
                    this.$http.request('xcx/funeng', {
                        store_id: this.store_id,
                    }, "", "", hideLoading).then(res => {
                        let way_power = res.data.way_power;
                        if (!way_power) {
                            return
                        }
                        let content = way_power.replace(/<br\s*\/?\s*>/ig, "\n");
                        uni.setClipboardData({
                            data: content,
                            success: function(r) {
                                console.log('success', r);
                                getApp().globalData.isApp = false
                            }
                        });
                        // // #ifdef MP-WEIXIN
                        // 	wx.showLoading();
                        // 	uni.setClipboardData({
                        // 		data: content,
                        // 		success: (res) => {
                        // 			wx.hideLoading()

                        // 		}
                        // 	});
                        // // #endif
                        // // #ifdef MP-ALIPAY
                        // uni.setClipboardData({
                        // 	data: content,
                        // 	success: (res) => {}
                        // });
                        // // #endif
                    })
                }
            },

            // 开启会员弹窗
            onGetphone(e) {
                this.getPhonePop = true;
            },
            // 子组件传参
            setClose(e) {
                this.getPhonePop = e;
            },

            // 跳转小程序、内页面
            bindPreview(type, appId, thumb, index,wifi_id) {
                console.log(type, appId, thumb, index, 888)
                let {
                    is_article
                } = this.banner[index]
                if (type == 1) {
                    if (appId) {
                        uni.navigateToMiniProgram({
                            appId: appId,
                            success(res) {
                                // 打开成功
                            }
                        })
                    }
                } else if (type == 2) {
                    if (appId) {
                        if ("/pages/index/index" == appId || "/pages/my/my" == appId ||
                            "/pages/myOrderList/myOrderList" == appId) {
                            uni.switchTab({
                                url: appId
                            })
                        } else {
                            uni.navigateTo({
                                url: appId
                            })
                        }
                    } else {
                        // let url = this.URL + info.thumb;
                        uni.previewImage({
                            urls: [thumb],
                        });
                    }
                } else if (type == 3) {
                    if (!this.userInfo.mobile) {
                        // #ifdef MP-WEIXIN
                        this.modelObj = {
                            content: "完善资料才能享有领取权利，是否完善？",
                        };
                        this.$store.commit('showAttrPicker', true)
                        // #endif
                        // #ifdef MP-ALIPAY
                        this.getPhonePop = true;
                        // #endif
                        return
                    } else {
                        uni.showToast({
                            title: '您已经完善过会员信息了，无需重复操作！',
                            icon: 'none'
                        })
                    }
                } else if (type == 4) {
                    uni.navigateTo({
                        url: `/shop/richText/index?id=${is_article}`
                    })
                } else if(type == 5 && wifi_id){
                    uni.navigateToMiniProgram({
                        appId: appId,
                        extraData:{
                            id:wifi_id
                        },
                        success(res) {
                            // 打开成功
                        }
                    })
                }
            },

            applet() {
                let type;
                // #ifdef MP-WEIXIN
                type = 1
                // #endif
                // #ifdef MP-ALIPAY
                type = 2
                // #endif
                this.$http.request('xcx/applet_index', {
                    store_id: this.store_id,
                    type: type,
                }, "", "", true).then(res => {
                    this.applet_info = res.data;
                })
            },

            banner_list() {
                this.$http.request('xcx/banner_list', {
                    store_id: this.store_id,
                    type_id: 2,
                }, "", "", true).then(res => {
                    // console.log(res, "LqCoupons_lists")
                    this.banner = res.data;
                })
            },

            // 子组件传参
            // setClose(e) {
            // 	this.getPhonePop = e;
            // }

            canTeen() {
                if (this.systemInfo.is_hall == 1) {
                    if (this.systemInfo.set.change_table == 1) {
                        this.$refs.popup.open();
                    } else {
                        this.SET_TEEN_INDEX(1);
                        uni.switchTab({
                            url: `../index/index`
                        })
                    }
                    return
                }
                uni.showToast({
                    title: "敬请期待！",
                    icon: 'none'
                })
            },

            canTeen_yz() {
                this.SET_TEEN_INDEX(1);
                uni.switchTab({
                    url: `../index/index`
                })
                this.$refs.popup.close();
            },

            // 外卖
            takeFood(e) {
                if (this.systemInfo.is_waimai == 1) {
                    this.SET_TEEN_INDEX(2);
                    uni.switchTab({
                        url: `../index/index`
                    })
                    return
                }
                uni.showToast({
                    title: "敬请期待！",
                    icon: 'none'
                })
            },
            // 自提
            SelfMention(e) {
                // if (this.systemInfo.is_waimai == 1) {
                if (this.systemInfo.is_ziti == 1) {
                    if (this.systemInfo.pay_type == 2 && this.systemInfo.is_ziti == 1) {
                        uni.showToast({
                            icon: "none",
                            title: '餐后付款不能自提!'
                        })
                        return
                    }
                    this.SET_TEEN_INDEX(3);
                    uni.switchTab({
                        url: `../index/index`
                    })
                    return
                }
                uni.showToast({
                    title: "敬请期待！",
                    icon: 'none'
                })
                // return
                // }
            },

            navigateMiniProgram() {
                // 	uni.navigateToMiniProgram({
                // 		appId: "wxc7811d73da68c79e",
                // 		path: "pages/index/index",
                // 		envVersion: 'develop',
                // 		success(res) {

                // 		}
                // 	})

                // 	return
                if (!this.applet_info.appid) {
                    uni.showToast({
                        title: "敬请期待！",
                        icon: 'none'
                    })
                    return
                }
                var mobile = this.userInfo.mobile,
                    path = '',
                    type = this.userInfo.mobile ? 1 : 2;

                // uni.navigateToMiniProgram({
                // 	appId: 'wx394da23b82f9863a',
                // 	path: `pages/integral-index/index?mobile=${mobile}&type=${type}`,
                // 	envVersion: 'develop',
                // 	success(res) {}
                // })



                if ('wx394da23b82f9863a' == this.applet_info.appid) {
                    path = `${this.applet_info.pages}?mobile=${mobile}&type=${type}`; //跳转智豆商圈
                } else if ('wxc7811d73da68c79e' == this.applet_info.appid) {
                    path = `${this.applet_info.pages}?mobile=${mobile}&type=${type}`; //跳转智豆商圈
                } else {
                    path = this.applet_info.pages;
                }

                uni.navigateToMiniProgram({
                    appId: this.applet_info.appid,
                    path: path,
                    envVersion: 'develop',
                    success(res) {
                        // 打开成功
                    }
                })
            },
        }
    }
</script>

<style>
    .popup_content {
        background-color: #FFFFFF;
        height: 400rpx;
        padding: 0 30rpx;
    }

    .popup_content_title {
        padding: 30rpx 0;
        font-size: 32rpx;
    }

    .popup_content_left {
        border-radius: 14rpx;
        height: 155rpx;
        text-align: left;
        width: 300rpx;
        font-size: 35rpx;
    }

    .popup_content_left1 {
        background: linear-gradient(to right, #fb652e, 34%, #F0AD4E);
        color: #FFFFFF;
        box-shadow: 0rpx 8rpx 16rpx 8rpx #F1F1F1;
    }

    .popup_content_left2 {
        background: #FFFFFF;
        color: #000;
        box-shadow: 0rpx 8rpx 16rpx 8rpx #F1F1F1;
    }

    .home-store {
        font-size: 30rpx;
        width: 690rpx;
        background-color: #FFFFFF;
        margin: 0 auto;
        /* height: 180rpx; */
        margin-top: 25rpx;
        padding: 20rpx 40rpx;
        border-radius: 14rpx;
        box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(204, 215, 230, 0.08);
    }

    .home-pay-title {
        font-size: 30rpx;
    }

    .more-businessTime {
        font-size: 24rpx;
    }

    .businessTime {
        font-size: 24rpx;
        color: #999999;
        padding-top: 10rpx;
    }

    .businessTimeItem {
        margin-bottom: 10rpx;
    }

    .businessTime .icon-dizhi {
        font-size: 24rpx;
    }
</style>
