<template>
    <div id="home">
        <Nav :title="$t('home.title')" :iconType="false"></Nav>
        <div class="search">
            <van-search v-model="searchValue" @search="onSearch" shape="round" background="#F9F9F9" :placeholder="$t('home.searchPlaceholder')" />
        </div>
        <div class="excellent">
            <div class="title">
                <div class="left">{{$t('home.preferredZone')}}</div>
                <div class="right"><span @click="getSpecialArea('excellent')">{{$t('home.seeAll')}}</span>
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="content">
                <div class="cell" v-for="item,index in excellentList" :key="index" @click="getCommodity(item)">
                    <div>
                        <van-image :src="requestUrl+item.faceImg">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20" />
                            </template>
                        </van-image>
                    </div>
                    <div>
                        <span>{{item.commodityName}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="classification">
            <div class="title">
                <div class="left">{{$t('home.classifiedArea')}}</div>
                <div class="right"></div>
            </div>
            <div class="content">
                <div>
                    <div class="cell" @click="getSpecialArea('island',item)" v-for="item,index in classificationList" :key="index" :style="{background:'url('+requestUrl+item.typeImg+') no-repeat'}">
                        <div>
                            <span>{{item.typeName}}</span>
                            <span>
                                <van-icon name="arrow" />
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rank">
            <div class="title">
                <div class="left">
                    <van-icon color="#38D0C9" class="iconfont" class-prefix="icon" name="fill" />
                    {{$t('home.recommend')}}
                </div>
                <div class="right"></div>
            </div>
            <div class="content">
                <div class="rankBox">
                    <div class="cell" v-for="item,index in rankList" :key="index" @click="getCommodity(item)">
                        <div class="left">
                            <div class="tagBox">
                                <span>{{index+1}}</span>
                            </div>
                            <img :src="requestUrl+item.faceImg" alt="" srcset="">
                        </div>
                        <div class="right">
                            <div>
                                <div class="center">
                                    <span>{{item.commodityName}}</span>
                                </div>
                                <div class="right">
                                    <span>¥{{item.childPrice}} - ¥{{item.adultPrice}}</span>
                                </div>
                            </div>
                            <div>{{item.fwb}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-overlay :show="loading" @click="loading = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-loading color="#1989fa" size="50" />
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Nav from "@/components/pages/nav";
import {
    selectTypeList,
    selectPreferredList,
    selectSalesTop10,
} from "@/api/comp/home.js";
export default {
    data() {
        return {
            searchValue: "",
            excellentList: [],
            rankList: [],
            classificationList: [],
            excellentList: [],
            requestUrl: process.env.VUE_APP_BASE_API,
            loading: true,
        };
    },
    mounted() {
        let urlRequire = this.GetRequest();
        for (let quire in urlRequire) {
            if (quire === "distributionId") {
                this.$store.commit(
                    "user/SET_DISTR_BUTION_ID",
                    urlRequire[quire]
                );
            }
        }
        this.getData();
        // console.log(this.$t('productDetails.receive'),"ttttt");
    },
    components: {
        Nav,
    },
    methods: {
        //搜索
        onSearch(value) {
            console.log(value);
            //存储搜索字段跳转到商品列表页把全局商品列表状态调整为搜索的状态
            this.$store.commit("home/SET_SEARCH_VALUE", this.searchValue);
            let storeData = {
                type: 1,
                typeId: null,
                title: null,
            };
            this.$store.commit("home/SET_PRODUCT_LIST_DATA", storeData);
            this.$router.push({ path: "/specialArea" });
            this.searchValue = "";
        },
        getData() {
            //查询分类
            this.selectTypeListF();
            this.selectExcellentList();
            this.selectRecommendList();
        },
        //查询分类
        selectTypeListF() {
            this.loading = true;
            //拿到数据前做清空
            this.classificationList = [];
            selectTypeList().then((res) => {
                if (res.code == 200) {
                    //插入数据
                    this.classificationList = res.data;
                    this.loading = false;
                }
            });
        },
        //查询优选列表
        selectExcellentList() {
            this.loading = true;
            //获取全局
            let deptId = this.$store.state.user.deptId;
            //拿到数据前做清空
            this.excellentList = [];
            let request = {
                isPreferred: 1,
                deptId: deptId,
            };
            selectPreferredList(request).then((res) => {
                if (res.code == 200) {
                    //插入数据 只插入3个
                    for (let i = 0; i < 3; i++) {
                        if (res.data[i]) {
                            this.excellentList.push(res.data[i]);
                        }
                    }
                    this.loading = false;
                }
            });
        },
        //查询销量排行推荐
        selectRecommendList() {
            this.loading = true;
            //获取全局
            let deptId = this.$store.state.user.deptId;
            //拿到数据前做清空
            this.excellentList = [];
            let request = {
                deptId: deptId,
            };
            selectSalesTop10(request).then((res) => {
                if (res.code == 200) {
                    this.rankList = res.data;
                    //从富文本里抓取一段字用于显示说明
                    for (let i = 0; i < this.rankList.length; i++) {
                        let text = "";
                        let temp = document.createElement("div");
                        temp.innerHTML = this.rankList[i].attention;
                        console.log(temp, "8*********");
                        for (let j = 0; j < temp.children.length; j++) {
                            if (!temp.children[j].children.length) {
                                if (j == 0) {
                                    text += temp.children[j].innerText;
                                } else {
                                    text += "," + temp.children[j].innerText;
                                }
                            } else {
                                //这里是为一个诡异的数据单独加的  不排除有多个诡异数据格式 个人认为此值不应放在这里
                                for (
                                    let k = 0;
                                    k < temp.children[j].children.length;
                                    k++
                                ) {
                                    if (
                                        temp.children[j].children[k].tagName ==
                                        "STRONG"
                                    ) {
                                        for (
                                            let o = 0;
                                            o <
                                            temp.children[j].children[k]
                                                .children.length;
                                            o++
                                        ) {
                                            if (
                                                temp.children[j].children[k]
                                                    .children[o].tagName == "EM"
                                            ) {
                                                if (j == 0) {
                                                    text +=
                                                        temp.children[j]
                                                            .children[k]
                                                            .children[o]
                                                            .innerText;
                                                } else {
                                                    text +=
                                                        "," +
                                                        temp.children[j]
                                                            .children[k]
                                                            .children[o]
                                                            .innerText;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        this.rankList[i].fwb = text;
                    }
                    this.loading = false;
                }
            });
        },
        getCommodity(data) {
            console.log(data, "获得的商品数据");
            this.$store.commit("home/SET_PRODUCT", data);
            this.$router.push("/productDetails");
        },
        getSpecialArea(name, data) {
            //优选专区
            if (name == "excellent") {
                let storeData = {
                    type: 2,
                    typeId: null,
                    title: null,
                };
                //存储商品列表状态
                this.$store.commit("home/SET_PRODUCT_LIST_DATA", storeData);
                //清空全局搜索字段
                this.$store.commit("home/SET_SEARCH_VALUE", this.searchValue);
            }
            //分类专区
            if (name == "island") {
                let storeData = {
                    type: 3,
                    typeId: data.id,
                    title: data.typeName + this.$t("home.suffix"),
                };
                //存储商品列表状态
                this.$store.commit("home/SET_PRODUCT_LIST_DATA", storeData);
                //清空全局搜索字段
                this.$store.commit("home/SET_SEARCH_VALUE", this.searchValue);
            }
            this.$router.push({ path: "/specialArea" });
        },
        GetRequest(str) {
            var url = str ? str : decodeURI(location.search); //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                url = url.substr(1);
            }
            if (url) {
                var strs = url.split("&");
                for (var i = 0; i < strs.length; i++) {
                    var srtArry = strs[i].split("=");
                    var y = srtArry.shift();
                    theRequest[y] = unescape(srtArry.join("="));
                }
            }
            return theRequest;
        },
    },
};
</script>

<style lang="scss" scoped>
#home {
    background: #f9f9f9;
    .excellent {
        width: 100%;
        padding: 0.12rem /* 12/100 */;
        box-sizing: border-box;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.05rem /* 10/100 */ 0;
            margin-bottom: 0.1rem /* 12/100 */;
            width: 100%;
            .left {
                font-size: 0.16rem /* 16/100 */;
                color: #333333;
            }
            .right {
                font-size: 0.13rem /* 13/100 */;
                color: #999999;
                span:nth-child(1) {
                    margin-right: 0.02rem /* 5/100 */;
                    margin-top: 0.1rem;
                }
            }
        }
        .content {
            display: flex;
            flex-wrap: wrap;
            font-size: 0.14rem /* 14/100 */;
            padding: 0.1rem /* 10/100 */ 0;
            .cell {
                width: 30%;
                margin-left: 3%;
                // height: 1.5rem /* 124/100 */;
                overflow: hidden;
                background: #fff;
                border-radius: 0.05rem /* 5/100 */;
                aspect-ratio: 6/8 !important;
                box-shadow: 0px 0px 5px #e9e9e9;
                > div:nth-child(1) {
                    height: 70%;
                }
                > div:nth-child(2) {
                    width: 100%;
                    display: flex;
                    font-size: 1vw;
                    align-items: center;
                    justify-content: center;
                    // border: 1px solid red;
                    aspect-ratio: 6/2 !important;
                }
            }
        }
    }
    .classification {
        width: 100%;
        padding: 0.12rem /* 12/100 */;
        box-sizing: border-box;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.05rem /* 10/100 */ 0;
            margin-bottom: 0.1rem /* 12/100 */;
            width: 100%;
            .left {
                font-size: 0.16rem /* 16/100 */;
                color: #333333;
            }
            .right {
                font-size: 0.13rem /* 13/100 */;
                color: #999999;
                span:nth-child(1) {
                    margin-right: 0.05rem /* 5/100 */;
                }
            }
        }
        .content {
            padding: 0.05rem 0;
            > div {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                padding: 0.05rem /* 15/100 */;
                font-size: 0.15rem /* 15/100 */;
                .cell {
                    width: 48%;
                    height: 1.2rem /* 120/100 */;
                    display: flex;
                    align-items: flex-end;
                    > div {
                        width: 100%;
                        height: 44px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0.1rem /* 10/100 */;
                        box-sizing: border-box;
                        > span:nth-child(1) {
                            color: #fff;
                        }
                        > span:nth-child(2) {
                            color: #38d0c9;
                            display: block;
                            height: 0.2rem /* 20/100 */;
                            width: 0.2rem /* 20/100 */;
                            border-radius: 50%;
                            background: #fff;
                            line-height: 20px;
                            text-align: center;
                        }
                    }
                }
                .cell {
                    background: url(../../../public/static/images/hd.png)
                        no-repeat;
                    background-size: 100% 100% !important;
                    margin-bottom: 0.12rem /* 12/100 */;
                }
            }
        }
    }
    .rank {
        width: 100%;
        padding: 0 0.12rem 0.12rem 0.12rem /* 12/100 */;
        box-sizing: border-box;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.05rem /* 10/100 */ 0;
            margin-bottom: 0.1rem /* 12/100 */;
            width: 100%;
            .left {
                font-size: 0.16rem /* 16/100 */;
                color: #333333;
            }
            .right {
                font-size: 0.13rem /* 13/100 */;
                color: #999999;
                span:nth-child(1) {
                    margin-right: 0.05rem /* 5/100 */;
                }
            }
        }
        .content {
            display: flex;
            .rankBox {
                padding: 0.05rem /* 5/100 */ 0 /* 15/100 */;
                .cell {
                    width: 100%;
                    height: 1.39rem /* 139/100 */;
                    display: flex;
                    padding: 0.12rem /* 12/100 */;
                    margin-bottom: 0.15rem /* 15/100 */;
                    box-sizing: border-box;
                    border-radius: 0.05rem /* 5/100 */;
                    color: #333333;
                    background-color: #fff;
                    box-shadow: 0px 0px 5px #e9e9e9;
                    .left {
                        width: 38%;
                        border-radius: 5px;
                        overflow: hidden;
                        position: relative;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                        .tagBox {
                            width: 32px;
                            height: 32px;
                            background: url("../../../public/static/images/tagBg.png");
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: 1;
                            font-size: 0.14rem /* 16/100 */;
                            text-align: left;
                            span {
                                margin-top: 0.05rem /* 5/100 */;
                                margin-left: 0.05rem /* 5/100 */;
                                display: inline-block;
                                color: #fff;
                            }
                        }
                    }
                    .right {
                        padding-top: 0.03rem /* 3/100 */;
                        width: 72%;
                        font-size: 0.15rem /* 15/100 */;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        > div:nth-child(1) {
                            width: 100%;
                            // height: 0.63rem;
                            max-height: 0.63rem;
                            display: flex;
                            padding: 0 0 0 0.12rem;
                            font-weight: bold;
                            box-sizing: border-box;
                            > div:nth-child(1) {
                                text-align: justify;
                                color: #38d0c9;
                                width: 55%;
                                overflow: hidden;
                                display: -webkit-box; /*盒子模型微弹性伸缩模型*/
                                -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
                                -webkit-line-clamp: 3; /*文本显示3行*/
                            }
                            > div:nth-child(2) {
                                color: #e94225;
                                width: 45%;
                                overflow: hidden;
                                display: -webkit-box; /*盒子模型微弹性伸缩模型*/
                                -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
                                -webkit-line-clamp: 3; /*文本显示3行*/
                            }
                        }
                        > div:nth-child(2) {
                            margin-top: 0.05rem;
                            width: 100%;
                            // height: 35%;
                            text-align: left;
                            padding: 0 0 0 0.12rem;
                            color: #999999;
                            box-sizing: border-box;
                            overflow: hidden; /*文本超出隐藏*/
                            display: -webkit-box; /*盒子模型微弹性伸缩模型*/
                            -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
                            -webkit-line-clamp: 2; /*文本显示3行*/
                        }
                    }
                }
            }
        }
    }
}
</style>
<style>
#home .van-search__content {
    border: 1px solid #6acdc8;
}
#home .van-field__left-icon {
    color: #6acdc8;
}
#home .van-image {
    height: 100%;
}
</style>