
<template>
    <div class="home" style="height: auto;">
        <div style="height: 0.9rem;"></div>
        <div ref="header" class="page-top" id="top-nav">
            <i class="position" @click="show = true"><img src="../assets/images/icon/position.png" />{{defaultCity}}</i>
            <i class="logo"><img src="../assets/images/icon/logo.png" /></i>
            <i class="text"><a href="tel:400-6080100">联系客服</a></i>
        </div>
        <div class="page-content">
            <!--banner图-->
            <div class="banner" v-if="bannerImgList.length > 0">
                <swiper :options="swiperOption" ref="mySwiper">
                    <swiper-slide v-for="(item,index) in bannerImgList" :key="index">
                        <a :href="item.linkUrl ? item.linkUrl: 'javascript:void(0)' " class="swiper-img" :style="{backgroundImage:'url('+item.imgUrl+')'}"></a>
                    </swiper-slide>
                </swiper>
                <div class="swiper-pagination"></div>
            </div>
            <!-- TODO: 对应换hot 和 new 图标 -->
            <div class="service f-flex" v-if="iconList.length != 0">
                <div class="item" v-for="(item,index) in iconList" :key="index" v-on:click="goods(item.combinationNo)">
                    <a href="javascript:void(0)" class="f-relative f-inb">
                        <img :src="imghost + item.icon" class="icon" />
                        <img src="../assets/images/icon/hot.png" class="hot" v-if="item.label == '2'" />
                        <img src="../assets/images/icon/new.png" class="new" v-if="item.label == '1'" />
                    </a>
                    <p>{{item.combinationName}}</p>
                </div>
            </div>
            <div class="coupon" v-if="promotionImgList.imgUrl">
                <a v-if="promotionImgList.linkUrl != '' " :href="promotionImgList.linkUrl"><img :src="promotionImgList.imgUrl" /></a>
                <a v-else href="javascript:void(0)"><img :src="promotionImgList.imgUrl" /></a>
            </div>
            <!-- TODO: 三种样式 -->
            <!-- one -->
            <div class="recommend f-flex" v-if="activityImgList.length == 3">
                <div class="left">
                    <a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl"></a>
                </div>
                <div class="right">
                    <a :href="activityImgList[1].linkUrl"><img :src="activityImgList[1].imgUrl" class="gap"></a>
                    <a :href="activityImgList[2].linkUrl"><img :src="activityImgList[2].imgUrl"></a>
                </div>
            </div>
            <!-- two -->
            <div class="recommend f-flex" v-if="activityImgList.length == 2">
                <div class="left">
                    <a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl"></a>
                </div>
                <div class="right">
                    <a :href="activityImgList[1].linkUrl"><img :src="activityImgList[1].imgUrl" class="two"></a>
                </div>
            </div>
            <!-- three -->
            <div class="recommend f-flex" v-if="activityImgList.length == 1">
                <a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl" class="three"></a>
            </div>

            <!--商品列表-->
            <div class="new-card-box" style="padding-top: 0.3rem;">
                <div class="new-card" v-if="item.goodsList.length > 0" v-for="(item,index) in goodsList" :key="index">
                    <div class="new-card-top">
                        <img :src=" imghost + item.image">
                    </div>
                    <ul class="card-list">
                        <li v-for="item1 in item.goodsList">
                            <a :href="'/mall/web/vgoods/detail/' + item1.goodsNo + '?uniqueId='+ uniqueId">
                                <div class="left">
                                    <a :href="'/mall/web/vgoods/detail/' + item1.goodsNo + '?uniqueId='+ uniqueId">
                                        <img v-if="item1.goodsTitleImg!=''" :src=" imghost + item1.goodsTitleImg" />
                                        <img v-else-if="item1.showImg!=''" :src=" imghost + item1.showImg" />
                                        <img v-else :src=" imghost + item1.bannerImgs" />
                                    </a>
                                </div>
                                <div class="right">
                                    <h3  v-if="item1.goodsTitle" >{{item1.goodsTitle}}</h3>
                                    <h3>{{item1.name}}</h3>
                                    <div class="text">{{item1.shortDesc}}</div>
                                    <div class="card-name">
                                        <i :style="{marginRight:(i+1)==item1.labelList.length?'0':'0.1rem'}" v-if="label.labelText" v-for="(label,i) in item1.labelList">{{label.labelText}}</i>
                                    </div>
                                    <div class="btn-box">
                                        <!--originalPrice原价price优惠价 -->
                                        <div class="btn-box-left">
                                            <span class="price">￥ <em>{{item1.price ? item1.price/100:item1.originalPrice/100}}</em></span>
                                            <span class="original-price" v-if="item1.price&&item1.price!=item1.originalPrice"><em>￥{{ item1.originalPrice/100}}</em></span>
                                        </div>
                                        <a :href="'/mall/web/vgoods/detail/' + item1.goodsNo + '?uniqueId='+ uniqueId">立即购买</a>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="height:1rem"></div>
        </div>
        <div class="page-bottom">
            <routerFooter></routerFooter>
        </div>
        <popup-picker :show="show" @cancel="cancel" @confirm="confirm" :data-list="addressData" :value="addressValue"></popup-picker>
        <div class="Loading-box">
            <loading v-model="showLoading" text="loading"></loading>
        </div>
        <alert v-model="alertShow" title="自动定位地址：" @on-hide="alertHide" button-text="手动切换地址">
            {{address}}
            <div style="color: #2c3e50">
                暂不提供服务
            </div>
        </alert>
    </div>
</template>

<script>
import homeApi from "../models/home-model.js";
import configs from "../configs";
import { Alert, Toast, Loading } from "vux";
import routerFooter from "../components/nav-bottom";
import popupPicker from "../components/popup-picker.vue";
import Qs from 'qs';


var locationUrl = configs.locationUrl;
export default {
    components: {
        Toast,
        routerFooter,
        Loading,
        Alert,
        "popup-picker": popupPicker
    },
    data() {
        return {
            show: false,
            uniqueId:'',
            defaultCity: "天河区", //区名 默认值 不需要去掉
            merchantNo: 2, //商户编号 默认值 不需要去掉
            districtId: "440106000", //区id 默认值 不需要去掉
            addressData: [],
            addressValue: [
                "440000000&广东省",
                "440100000&广州市",
                "440106000&天河区&2"
            ],
            bannerImgList: [], //轮播图
            activityImgList: [], // 广告图
            iconList: [], // 图标列表
            promotionImgList: {}, //优惠券，
            goodsList: [],
            swiperOption: {
                autoplay: {
                    disableOnInteraction: false
                },
                speed: 1000,
                pagination: {
                    el: ".swiper-pagination"
                }
            },
            showLoading: false,
            searchBarFixed: false,
            provinceId: "",
            cityId: "",
            alertShow: false,
            address: "",
            flag: false,
            state: 0
        };
    },
    watch: {
        $route(to, from) {
            // this.getCityName();
        }
    },
    methods: {
        //确定时保存记录
        confirm(list) {
            let arr = list[2].split("&") || "";
            this.districtId = arr[0];
            this.merchantNo = arr[2];
            this.getGoodsList(); //加载商品列表
            this.defaultCity = arr[1];
            this.addressValue = list.slice();
            localStorage.setItem("cityName", list);
            this.show = false;
        },
        //加载商品列表
        getGoodsList() {
            return new Promise((resolve, reject) => {
                var params = {
                    merchantNo: this.merchantNo,
                    selectedDistrictId: this.districtId
                };
                homeApi.getGoods(params).then(res => {
                    this.showLoading = false;
                    this.state = 0;
                    if (res.code == 0) {
                        this.bannerImgList = res.response.bannerImgList;
                        this.activityImgList =
                            res.response.activityImgList || [];
                        this.iconList = res.response.iconList || [];
                        this.promotionImgList =
                            res.response.promotionImgList[0] || {};
                        let list = res.response.goodsList;
                        for (let i = 0; i < list.length; i++) {
                            for (let y = 0; y < list[i].goodsList.length; y++) {
                                list[i].goodsList[y].labelList = list[i]
                                    .goodsList[y].smallLabel
                                    ? JSON.parse(
                                          list[i].goodsList[y].smallLabel
                                      )
                                    : "";
                            }
                        }
                        this.goodsList = list.slice();
                    } else {
                        this.$vux.toast.text(res.msg, "middle");
                    }
                    resolve();
                });
            });
        },
        cancel() {
            let str = localStorage.getItem("cityName") || "";
            //首次取消也需要请求
            if (
                !str &&
                (this.state == -1 || this.state == 2 || this.state == 1)
            ) {
                this.defaultCity = "天河区";
                //商户编号
                this.merchantNo = 2;
                //区id
                this.districtId = "440106000";
                this.addressValue = [
                    "440000000&广东省",
                    "440100000&广州市",
                    "440106000&天河区&2"
                ];
                this.getGoodsList();
            } else if (this.state == 2 || this.state == 1) {
                this.getGoodsList();
            }
            this.show = false;
        },
        ShareWenXin() {
            var merchantNo = this.merchantNo;
            this.wxShare({
                merchantNo: merchantNo,
                uniqueId:this.uniqueId,
                source: 0,
                url: encodeURIComponent(location.href.split('#')[0])
            });
        },
        countExtend() {
            return new Promise((resolve, reject) => {
                var params = {
                    buryingPointType: 0,
                    salesmanUniqueIdentity: this.uniqueId,
                    timeStr: this.getTime(Date.now())
                };
                homeApi.countExtend(params).then(res => {

                    resolve();
                });
            });
        },
        getTime(time) {
            let date = new Date(time);
            let year = date.getFullYear();
            let month = this.checkTime(date.getMonth() + 1);
            let day = this.checkTime(date.getDate());
            let str =
                year + "-" + month + "-" + day;
            return str;
        },
        checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        },
        // 商品分类
        goods(c_no) {
            this.$router.push({
                name: "商品分类",
                params: {
                    no: this.merchantNo,
                    id: this.districtId,
                    c_no: c_no
                }
            });
        },
        getLocation() {
            this.getId();
            this.showLoading = true;
            return new Promise((resolve, reject) => {
                homeApi
                    .getLocation({
                        cityId: this.cityId ? this.cityId : ""
                    })
                    .then(res => {
                        if (res.response.allAddress && res.response.userAddress) {
                            this.addressData = res.response.allAddress;
                            this.flag = true;
                            let data = res.response;
                            if (data.userAddress.type == 1) {
                                this.address =
                                    data.userAddress.cityName +
                                    (data.userAddress.districtName
                                        ? data.userAddress.districtName
                                        : "");
                                this.alertShow = true;
                            } else if (data.userAddress.type == 2) {
                                this.$vux.confirm.show({
                                    title: "自动定位地址：",
                                    content:
                                        data.userAddress.cityName +
                                        (data.userAddress.districtName
                                            ? data.userAddress.districtName
                                            : ""),
                                    cancelText: "切换地址",
                                    onCancel: () => {
                                        this.show = true;
                                        this.state = 2;
                                    },
                                    onConfirm: () => {
                                        this.provinceId = data.userAddress
                                            .provinceId
                                            ? data.userAddress.provinceId
                                            : this.provinceId;
                                        this.cityId = data.userAddress.cityId
                                            ? data.userAddress.cityId
                                            : this.cityId;
                                        this.districtId = data.userAddress
                                            .districtId
                                            ? data.userAddress.districtId
                                            : this.districtId;
                                        this.defaultCity = data.userAddress
                                            .districtName
                                            ? data.userAddress.districtName
                                            : this.defaultCity;
                                        this.merchantNo =
                                            data.userAddress.merchantNo;
                                        this.addressValue = [
                                            this.provinceId +
                                                "&" +
                                                data.userAddress.provinceName,
                                            this.cityId +
                                                "&" +
                                                data.userAddress.cityName,
                                            this.districtId +
                                                "&" +
                                                data.userAddress.districtName +
                                                "&" +
                                                data.userAddress.merchantNo
                                        ];
                                        localStorage.setItem(
                                            "cityName",
                                            this.addressValue.slice()
                                        );
                                        this.getGoodsList();
                                    }
                                });
                            } else if (data.userAddress.type == 0) {
                                this.getGoodsList();
                            } else if (data.userAddress.type == -1) {
                                this.state = -1;
                                this.$vux.alert.show({
                                    title: "自动定位失败",
                                    onHide: () => {
                                        this.show = true;
                                    }
                                });
                            }
                            resolve();
                        }
                        this.showLoading = false;
                    });
            });
        },
        getId() {
            let str = localStorage.getItem("cityName") || "";
            if (!str) {
            } else {
                let arr = str.split(",");
                this.addressValue = arr;
                this.provinceId = arr[0].split("&")[0];
                this.cityId = arr[1].split("&")[0];
                let cityNameArr = arr[2].split("&");
                this.districtId = cityNameArr[0];
                this.defaultCity = cityNameArr[1];
                this.merchantNo = cityNameArr[2];
            }
        },
        getData() {
            let get = async () => {
                await this.getLocation();
                // await this.getGoodsList();
            };
            return get();
        },
        alertHide() {
            this.state = 1;
            this.show = true;
        },
    },
    mounted() {
        //异步加载
        // this.getdefaultAddress();
        // this.getAddress();
        // this.getLocation();
        this.getData();
        var uuniqueId = Qs.parse(location.search.substring(1)).uniqueId
        console.log('uuniqueId:'+uuniqueId)
        if(uuniqueId !== undefined && uuniqueId !== null && uuniqueId !== ""){
            this.uniqueId = uuniqueId
            console.log('uniqueId:'+this.uniqueId)
        }
        return new Promise((resolve, reject) => {
            console.log('uniqueId:'+this.uniqueId)
                var params = {
                    salesmanUniqueIdentity: this.uniqueId,
                };
                homeApi.updateUniqueId(params).then(res => {
                    this.showLoading = false;
                    if (res.code == 0) {
                        this.uniqueId=this.$cookies.get('1hjz_mall_unique_id')
                        if(this.uniqueId !== undefined && this.uniqueId !== null && this.uniqueId !== ""){
                            this.countExtend();
                        }
                        
                        this.ShareWenXin();
                    } else {
                        this.$vux.toast.text(res.msg, "middle");
                    }
                    resolve();
                });
            });

    }
};
</script>

<style lang="scss">
.swiper-pagination {
    width: 100%;
    height: 0.3rem;
    bottom: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-pagination span {
    width: 0.2rem;
    height: 0.2rem;
    margin: 0 0.1rem;
    background-color: rgba(255, 255, 255, 0.9);
}
.swiper-pagination-bullet-active {
    background-color: rgba(255, 255, 255, 1);
}
.weui-dialog__hd {
    padding: 0;
}
</style>
<style lang="scss" scoped>
.btn-box {
    display: flex;
    position: absolute;
    bottom: 0;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .btn-box-left {
        display: flex;
        align-items: flex-end;
        // justify-content: space-around;
    }
}
.home {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    position: relative;
    .page-top {
        background: rgba(255, 255, 255, 1);
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 100;
        position: fixed;
        top: 0;
        left: 0;
        i {
            font-style: normal;
            display: flex;
            align-items: center;
        }
        .position {
            font-size: 0.26rem;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
            img {
                width: 0.2rem;
                height: 0.25rem;
                margin-right: 0.07rem;
            }
        }
        .logo img {
            width: 1.77rem;
            height: 0.3rem;
        }
        .text {
            height: 0.28rem;
            font-size: 0.28rem;
            font-weight: 400;
            color: rgba(36, 158, 108, 1);
            a {
                position: relative;
                color: rgba(36, 158, 108, 1);
            }
        }
    }
}

.home .page-content {
    background: rgba(255, 255, 255, 1);
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    position: relative;
    top: 0;
    z-index: 10;
    .banner {
        max-height: 3rem;
        position: relative;
        -webkit-overflow-scrolling: touch;
        a {
            display: block;
        }
        div img {
            width: 100%;
            height: 3rem;
            display: block;
            margin: auto;
        }
    }
    .coupon {
        margin-top: 0.3rem;
        img {
            width: 6.8rem;
            display: block;
            margin: auto;
        }
    }
    .new-card-first {
        padding-top: 0.3rem;
    }
    .new-card .new-card-top {
        padding: 0rem 0 0.3rem;
        img {
            width: 7.1rem;
            display: block;
            margin: auto;
        }
    }
}
.home .page-content .banner > div {
    max-height: 3rem;
    -webkit-overflow-scrolling: touch;
}
.swiper-img {
    width: 100%;
    height: 3rem;
    background-size: 100% 100%;
}
.home .page-content .new-card .card-list li {
    width: 7rem;
    height: 2.5rem;
    border: 1px solid rgba(238, 238, 238, 1);
    box-sizing: border-box;
    padding: 0.2rem;
    margin: auto;
    margin-bottom: 0.3rem;
    display: block;
}
.home .page-content .new-card .card-list li a {
    display: flex;
    align-items: center;
    // justify-content: space-between;
}
.home .page-content .new-card .card-list li .left {
    width: 2rem;
    height: 2rem;
    margin-right: 0.18rem;
}
.home .page-content .new-card .card-list li .left img {
    width: 2rem;
    height: 2rem;
    display: block;
}
.home .page-content .new-card .card-list li .right {
    // width: 4.3rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 2rem;
    position: relative;
    padding-top: 0.15rem;
    box-sizing: border-box;
}
.home .page-content .new-card .card-list li .right h3 {
    font-size: 0.33rem;
    font-weight: 400;
    padding-top: 0.03rem;
    line-height: 1.2;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 0.13rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-wrap: break-word;
}
.home .page-content .new-card .card-list li .right .text {
    font-size: 0.24rem;
    // height: 0.24rem;
    font-weight: 400;
    line-height: 1.2;
    color: rgba(153, 153, 153, 1);
    margin-bottom: 0.16rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
}
.home .page-content .new-card .card-list li .right .card-name {
    height: 0.3rem;
    font-size: 0.2rem;
    font-style: normal;
    font-weight: 400;
    color: rgba(244, 163, 83, 1);
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-all;
    -webkit-line-clamp: 1;
    word-wrap: break-word;
}
.home .page-content .new-card .card-list li .right .card-name i {
    font-style: normal;
    line-height: 1.5;
    background: rgba(255, 242, 229, 1);
    padding: 0.05rem 0.1rem;
    // line-height: 0.28rem;
}
.home .page-content .new-card .card-list li .right .btn {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.home .page-content .new-card .card-list li .right .btn-box .price {
    color: #249e6c;
    min-width: 1.4rem;
    display: flex;
    align-items: flex-end;
}
.home .page-content .new-card .card-list li .right .btn-box span em {
    font-size: 0.38rem;
    font-weight: 600;
    line-height: 0.9;
    display: inline-block;
    font-style: normal;
}
.home .page-content .new-card .card-list li .right .btn-box .original-price em {
    font-size: 0.24rem;
    text-decoration: line-through;
    font-weight: normal;
}
.home .page-content .new-card .card-list li .right .btn-box span {
    font-size: 0.22rem;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-right: auto;
}

.home .page-content .new-card .card-list li .right .btn-box a {
    width: 1.7rem;
    height: 0.56rem;
    border-radius: 0rem;
    background-color: #2bb079;
    border: none;
    color: #fff;
    border-radius: 2px;
    font-size: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home .page-bottom {
    width: 100%;
    height: 1rem;
    position: fixed;
    bottom: 0;
    background: rgba(255, 255, 255, 1);
    z-index: 130;
}
.Loading-box .weui-toast {
    width: 100%;
    min-height: 100% !important;
    overflow: hidden;
    top: 0;
}
.Loading-box .weui-icon_toast.weui-loading {
    margin-top: 75%;
}
.service {
    padding: 0.11rem 0;
    .item {
        text-align: center;
        font-size: 0;
        flex: 1;
        .icon {
            width: 0.78rem;
            height: 0.78rem;
        }
        .hot {
            position: absolute;
            top: 0.05rem;
            right: 0;
            width: 0.24rem;
            height: 0.1rem;
        }
        .new {
            position: absolute;
            top: 0.05rem;
            right: 0;
            width: 0.24rem;
            height: 0.08rem;
        }
        p {
            color: #666;
            font-size: 0.21rem;
        }
    }
}
.recommend {
    padding: 0 0.2rem;
    margin-top: 0.3rem;
    font-size: 0;
    .left {
        img {
            width: 2.51rem;
            height: 1.74rem;
            margin-right: 0.05rem;
        }
    }
    .right {
        img {
            width: 4.54rem;
            height: 0.84rem;
        }
        .gap {
            margin-bottom: 0.06rem;
        }
        .two {
            width: 4.54rem;
            height: 1.74rem;
        }
    }
    .three {
        width: 7.1rem;
        height: 1.74rem;
    }
}
</style>
