<template>
    <div id="home">
        <div class="navLogo">
            <img src="../../../public/static/images/logo.png">
        </div>
        <Nav :title="$t('home.title')" :iconType="false"></Nav>
        <div class="search">
            <van-search v-model="searchValue" @search="onSearch" shape="round" :placeholder="$t('home.searchPlaceholder')" />
        </div>
        <div class="topbanner">
            <img src="../../../public/static/images/topba.jpg">
        </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 class="iconfont" class-prefix="icon" name="fill" />
                    {{$t('home.recommend')}}
                </div>
                <div class="right"></div>
            </div>
            <div class="content">
                <div class="rankBox">
                    <div class="rankitem"  v-for="item,index in rankList" :key="index" @click="getCommodity(item)">
                        <div class="tagBox mybkkd">
                            <span>{{index+1}}</span>
                        </div>
                        <div class="ranktit center">
                             <span>{{item.commodityName}}</span>
                         </div>
                        <div class="cell">
                            <div class="left">

                                <img :src="requestUrl+item.faceImg" alt="" srcset="">
                            </div>
                            <div class="right">
                                <div>
                                    <div class="right">
                                        <span>¥{{item.childPrice}} - ¥{{item.adultPrice}}</span>
                                    </div>
                                </div>
                                <div>{{item.fwb}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    <section id="block" v-show='companyinfo.safety!=""'>
        <input type="checkbox">
        <div class="case-block">
            <span>シートベル着用のお願い</span>

          <div class="site1">▼</div>
          <div class="site1">▲</div>
        </div>
        <div class="detail">
          <div v-html="companyinfo.safety"></div>
        </div>
  　</section>
    <section id="block" v-show='companyinfo.process!=""'>
        <input type="checkbox">
        <div class="case-block">
            <span>出発までの流れ</span>

          <div class="site1">▼</div>
          <div class="site1">▲</div>
        </div>
        <div class="detail">
          <div v-html="companyinfo.process"></div>
        </div>
  　</section>
    <section id="block" v-show='companyinfo.cancel!=""'>
        <input type="checkbox">
        <div class="case-block">
            <span>変更・キャンセル手数料</span>

          <div class="site1">▼</div>
          <div class="site1">▲</div>
        </div>
        <div class="detail">
          <div v-html="companyinfo.cancel"></div>
        </div>
      </section>
      <section id="block" v-show='companyinfo.about!=""'>
          <input type="checkbox">
          <div class="case-block">
              <span>ご利用案内</span>

            <div class="site1">▼</div>
            <div class="site1">▲</div>
          </div>
          <div class="detail">
            <div v-html="companyinfo.about"></div>
          </div>
      </section>
      <section id="block" v-show='companyinfo.mark!=""'>
        <input type="checkbox">
        <div class="case-block">
            <span>標識・約款</span>

          <div class="site1">▼</div>
          <div class="site1">▲</div>
        </div>
        <div class="detail">
          <div v-html="companyinfo.mark"></div>
        </div>
      </section>
      <section id="block" v-show='companyinfo.privacy!=""'>
          <input type="checkbox">
          <div class="case-block">
              <span>プライバシーポリシー</span>

            <div class="site1">▼</div>
            <div class="site1">▲</div>
          </div>
          <div class="detail">
            <div v-html="companyinfo.privacy"></div>
          </div>
      </section>
      <section id="block" v-show='companyinfo.agreement!=""'>
          <input type="checkbox">
          <div class="case-block">
              <span>親権者同意書</span>

            <div class="site1">▼</div>
            <div class="site1">▲</div>
          </div>
          <div class="detail">
            <div v-html="companyinfo.agreement"></div>
          </div>
      </section>

        <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,
            companyinfo: this.$store.state.user.companyinfo,
        };
    },
    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 liffId = this.$store.state.user.liffId;
            //拿到数据前做清空
            this.excellentList = [];
            let request = {
                isPreferred: 1,
                liffId: liffId,
            };
            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 liffId = this.$store.state.user.liffId;
            //拿到数据前做清空
            this.excellentList = [];
            let request = {
                liffId: liffId,
            };
            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"),
                    title: data.typeName ,
                };
                //存储商品列表状态
                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: #f6f6f6;
    height:100%;
    overflow-x:hidden;
    .excellent {
        width: 100%;
        padding: 0.12rem /* 12/100 */;
        box-sizing: border-box;
        background-color:#fff;
        padding-bottom:.06667rem;
        margin-bottom:.10667rem;
        .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;
                font-weight:600;
                /*border-left: 0.04rem solid #38d0c9;
                padding-left: 0.09333rem;*/
            }
            .right {
                font-size: 0.13rem /* 13/100 */;
                color: #999999;

                span:nth-child(1) {
                    margin-right: 0.02rem /* 5/100 */;
                    margin-top: 0.1rem;
                    color: #878787;
                }

            }
            .right .van-icon{
                 font-size: 14px ;
                 color: #878787;

            }
        }
        .content {
            display: flex;
            flex-wrap: wrap;
            font-size: 0.14rem /* 14/100 */;
            padding: 0.1rem /* 10/100 */ 0;
            .cell {
                width: 47%;
                margin: 0 0 3% 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%;
                    padding:10px;
                    box-sizing: border-box;
                    display: flex;
                    font-size: 0.12rem;
                    line-height:1.2;
                    text-align:left;
                    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;
        background-color:#fff;
        padding-bottom:.06667rem;
        margin-bottom:.10667rem;
        .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;
                font-weight:600;
                /*border-left:0.04rem solid #38d0c9;
                padding-left:.09333rem;*/

            }
            .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.14rem /* 15/100 */;
                .cell {
                    width: 48%;
                    height: 1.2rem /* 120/100 */;
                    display: flex;
                    align-items: flex-end;


                    border-radius: 0.08rem;
                    aspect-ratio: 6/8 !important;
                    box-shadow: 0px 0px 5px #e9e9e9;
                    > div {
                        width: 100%;
                        height: 100%;
                        border-radius: 0.08rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        text-align:center;
                        padding: 0.1rem /* 10/100 */;
                        box-sizing: border-box;
                        background-color:rgba(0,0,0,0.5);

                        > span:nth-child(1) {
                            color: #fff;
                            width:100%;
                            font-weight:600;
                            font-size:0.15rem;
                            opacity:1;

                        }
                        > span:nth-child(2) {
                            display: block;
                            display:none;
                           /* height: 0.2rem  20/100 ;*/
                            width: 0.2rem /* 20/100 */;
                            border-radius: 50%;
                            background: #fff;
                            line-height: 20px;
                            text-align: center;
                        }
                        > span:nth-child(2) .van-icon{
                             font-size:18px;
                        }
                    }
                }
                .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;
        background-color:#f6f6f6;
        padding:.06667rem 0;
        margin-bottom:.10667rem;
        .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;
                font-weight:600;
                .iconfont {
                font-size:26px;
                color:#38d0c9;
                 }
            }

            .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 0.1rem /* 5/100 */ 0 /* 15/100 */;

                .rankitem{
                    background-color: #fff;
                    box-shadow: 0px 0px 5px #e9e9e9;
                    padding:15px 0;
                    position:relative;
                    margin-bottom: 0.1rem;
                    .tagBox {

                        line-height: .07rem;
                        /*background: url("../../../public/static/images/tagBg.png");*/
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 1;
                        font-size: 0.16rem /* 16/100 */;
                        text-align: center;
                        font-weight:600;
                        /*background-color:#38d0c9;
                        border-color:#38d0c9;
                        border-bottom-right-radius:.14667rem;*/


                        span {
                            margin-top: 0rem /* 5/100 */;
                            margin-left: .0rem /* 5/100 */;
                            display: inline-block;
                            font-family:PingFangSC-Regular;
                            color: #fff;
                        }
                    }
                }
                .ranktit {
                    font-size: 0.15rem /* 13/100 */;
                    color: #2c2c2c;
                    width:100%;
                    font-weight:600;
                    padding-left:0.4533rem;
                    text-align:left;
                    padding-right:0.1rem;
                    box-sizing: border-box;
                }
                .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;


                    .left {
                        width: 38%;
                        border-radius: 15px;
                        overflow: hidden;

                        display: flex;
                        border: 1px #f7f5ee solid;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                    }
                    .right {
                        padding-top: 0.03rem /* 3/100 */;
                        padding-left: 0.09rem;
                        width: 72%;
                        font-size: 0.14rem /* 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 .12rem 0rem;
                            font-weight: bold;
                            box-sizing: border-box;
                            border-bottom:1px #f7f5ee solid;
                            > div:nth-child(1) {
                                text-align: justify;
                                /*color: #38d0c9;*/
                                width: 55%;
                                width:100%;
                                overflow: hidden;
                                display: -webkit-box; /*盒子模型微弹性伸缩模型*/
                                -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
                                -webkit-line-clamp: 3; /*文本显示3行*/
                                color:#e94225;
                                font-size:0.20rem;
                            }
                            > 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;
                            padding:0;
                            color: #999999;
                            box-sizing: border-box;
                            overflow: hidden; /*文本超出隐藏*/
                            display: -webkit-box; /*盒子模型微弹性伸缩模型*/
                            -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
                            -webkit-line-clamp: 2; /*文本显示3行*/
                            font-size: 0.12rem /* 15/100 */;
                        }
                    }
                }
            }
        }
    }
}
</style>
<style>
#home .van-search__content {
    /*border: 1px solid #6acdc8;*/
    background-color:#f6f6f6;

}
#home .van-field__left-icon {
    color: #ccc;
}
#home .van-image {
    height: 100%;
}
.logotop{
    position:absolute;
    top: 5px;
    left:35%;
    justify-content:center;
    z-index:99999;

    background-color:#fff;
}
.topbanner img{
    width:100%;
    display:block;
}

.mybkkd
{
  width: 0.26rem;
  height: 0.2233rem;
  box-sizing: content-box;
  padding-top: 13px;
  position: relative;
  /*background: #38d0c9;*/
  background-image: linear-gradient(#adebc3,#38d0c9);
  color: white;
  text-transform: uppercase;
}
.mybkkd:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 7px solid #fff;
  border-left: 0.13rem solid transparent;
  border-right: 0.13rem solid transparent;
}
.navLogo {
     font-size: 0.17rem /* 16/100 */;
     font-weight:500;
     text-align: center;
     width: 100%;
     height: 0.40rem /* 44/100 */;
     position:absolute;
     left: 0;
     background-color:#fff;
     z-index: 999999999999;
}
.navLogo  img{
     max-height: 0.40rem;


}





  .title-block {
      height: 26px;
      text-align: center;
  }

  #block {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
      width: 100%;
      margin: 0 ;
      font-size: 14px;
      color: #4C4C4C;
      line-height: 28px;
      padding: 0px 0;
      position: relative;
  }

 #block > .detail {
      max-height: 0px;

      overflow: hidden;
      text-align:left;
      margin: 0 0.1rem;
  }

  #block > .case-block {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: left;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 100%;
      font-size: 0.13rem;
      height: 64px;
      margin: 0 auto 0;
      background: #eee;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
      color: #2c3e50;
      font-weight: 600;
  }
  #block > .case-block .site1{
     position: absolute;
     right:30px;
     color: #999;
     font-size: 0.09rem;

  }
  #block > .case-block  span{
    padding-left:30px;
  }


  #block > .case-block div:nth-of-type(1) {
      display: block;
  }

  #block > .case-block div:nth-of-type(2) {
      display: none;
  }

  #block > [type="checkbox"] {

      position: absolute;
      display: block;
      width: 100%;
      height: 64px;
      margin: 0px auto 0;
      z-index: 1000;
      opacity: 0;

  }

  #block > [type="checkbox"]:hover + .case-block {
      background-color: #eee;
  }

 #block > [type="checkbox"]:checked + .case-block div:nth-of-type(1) {
      display: none;
  }

  #block > [type="checkbox"]:checked + .case-block div:nth-of-type(2) {
      display: block;
  }

  #block > [type="checkbox"]:checked + .case-block + .detail {
      max-height: inherit;
      max-height: 250px;
      overflow-y:scroll;
  }

</style>