<template>
    <view class="content">
        <page-head text="分类" brF="true"></page-head>
        <view class="classifyMain">
            <view class="navList">
                <view class="navListCon">
                    <view class="text" @click="navStateFun(index)" :class="item.state?'on':''"
                        v-for="(item,index) in navData">
                        {{item.title}}
                    </view>
                </view>
            </view>
            <view class="classifyCon">
                <view class="navClassify">
                    <view class="navClassifyCon">
                        <view @click="navStateTow(index)" v-for="(item,index) in classifyConData" class="text"
                            :class="item.state?'on':''">
                            {{item.title}}
                        </view>

                    </view>

                </view>
                <scroll-view scroll-y="true" lower-threshold="100rpx" class="classifyConList" @scrolltolower="lower">
                    <view class="classifyConListCon">
                        <view class="list" v-for="(item,index) in HomeData" @click="details(item.id)">
                            <view class="imgCon">
                                <image class="img" :src="item.cover" mode="aspectFill"></image>
                            </view>
                            <view class="text">
                                {{item.name}}
                            </view>
                            <view class="textA">
                                <view class="money">
                                  ￥{{item.price_text}}
                                </view>
                                <view class="btn" v-if="item.customized==1">
                                    可定制
                                </view>
                            </view>
							<view class="memberPrice" v-if="ifMember && ifMemberPrice && item.vip_price">
							    会员价：￥{{item.vip_price}}
							</view>
                        </view>
                    </view>
                         <uni-load-more  :status="moreState"></uni-load-more>

                </scroll-view>

            </view>
        </view>

        <tab stateTab="classify"></tab>
    </view>
</template>

<script>
    import tab from "../../component/tab.vue";
    export default {
        components: {
            tab
        },
        data() {
            return {
                classifyConData: [],
                moreState: "more",
                navData: [],
                HomeData: [],
                num:10,
                total: "",
                arr: {
                    page: 1,
                    size: 10,
                    is_home: 0,
                },
				ifMember:false,
				ifMemberPrice:false
            }
        },
        onLoad() {
            this.getNavData()

        },
		onShow() {
			this.ifMember = uni.getStorageSync('ifMember');
			this.ifMemberPrice = uni.getStorageSync('ifMemberPrice');
		},
        methods: {

         
            lower: function(e) {
                this.arr.size = this.arr.size + this.num
                console.log(123123)
                if ((this.arr.page * this.arr.size) <= this.total + this.num) {
                    if ((this.arr.page * this.arr.size) != this.total) {
                        this.getHomeData()
                    } else {
                        this.moreState = "no-more"
                    }
                } else {
                    this.moreState = "no-more"
                }
            },
         
            details(id) {
                uni.navigateTo({
                    url: '/pages/commodity/commodity?id=' + id
                });
            },
            navStateFun(index) {
                for (var i = 0; i < this.navData.length; i++) {
                    this.navData[i] = {
                        ...this.navData[i],
                        state: false
                    }
                }
                // this.classifyId = this.navData[index].id
                this.navData[index].state = true
                if (this.navData[index].children.length >= 1) {
                    this.classifyConData = this.navData[index].children
                    for (var i = 0; i < this.classifyConData.length; i++) {
                        this.classifyConData[i] = {
                            ...this.classifyConData[i],
                            state: false
                        }
                    }
                    this.classifyConData[0].state = true
                    this.classifyId = this.classifyConData[0].id

                } else {
                    this.classifyId = 0
                    this.classifyConData = []
                }


                this.getHomeData()
                this.navData = [...this.navData]
            },
            getHomeData() {
                  this.moreState="loading"
                this.request({
                    url: this.host + "/api/spu/home",
                    type: "post",
                    data: {
                        ...this.arr,
                        category_id: this.classifyId
                    },
                    success: (res) => {
                        this.HomeData = res.data.data.list
                        this.total = res.data.data.total
                        if ((this.arr.page * this.arr.size) <= this.total) {

                        } else {
                            console.log("----------")
                            this.moreState = "no-more"

                        }
                    }
                })
            },
            getNavData() {
                this.request({
                    url: this.host + "/api/spu/condition",
                    type: "post",
                    data: {
                        is_home: "0",
                    },
                    success: (res) => {
                        this.navData = res.data.data
                        for (var i = 0; i < this.navData.length; i++) {
                            this.navData[i] = {
                                ...this.navData[i],
                                state: false
                            }
                        }
                        this.navData[0].state = true
                        this.navStateFun(0)

                    }
                })
            },
            navState(index) {
                for (var i = 0; i < this.classifyConData.length; i++) {
                    this.classifyConData[i].state = false
                }
                this.classifyConData[index].state = true
            },
            navStateTow(index) {

                for (var i = 0; i < this.classifyConData.length; i++) {
                    this.classifyConData[i] = {
                        ...this.classifyConData[i],
                        state: false
                    }
                }
                console.log(this.classifyConData)
                this.classifyId = this.classifyConData[index].id
                this.classifyConData[index].state = true
                this.classifyConData = [...this.classifyConData]
                this.getHomeData()
            },
        }
    }
</script>

<style>
    .navList {
        width: 128rpx;
        height: 88vh;
        background-color: #FFFFFF;
    }

    .navListCon {
        height: 90%;
        overflow-y: auto;

    }

    .scroll-view_H {
        height: 200rpx;
    }

    .scroll-Y {
        height: 200rpx;
    }

    .navListCon .text {
        font-size: 30rpx;
        padding: 30rpx 24rpx;
        width: 100%;
        color: #666;
        box-sizing: border-box;
        position: relative;
    }

    .navListCon .on {
        background-color: #f6f6f6;
        color: #000000;
        font-weight: bold;
    }

    .navListCon .on::after {
        content: "";
        position: absolute;
        left: 0px;
        top: 50%;
        margin-top: -40rpx;
        width: 9rpx;
        height: 80rpx;
        background-color: #D43939;
    }

    .classifyCon {
        flex: 1;
        padding: 0 20rpx;
        box-sizing: border-box;
        position: relative;
    }

    .navClassify {
        margin: auto;
        overflow-x: auto;
        padding-top: 30rpx;
        z-index: 3;
        padding-bottom: 30rpx;
        position: absolute;
        background-color: #f6f6f6;
    }

    .navClassifyCon {
        display: flex;
        overflow-x: auto;

    }

    .navClassifyCon::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

    .navClassify .text {
        width: 136rpx;
        height: 64rpx;
        flex: none;
        font-weight: 500;
        color: #8c8c9b;
        font-size: 30rpx;
        text-align: center;
        display: inline-block;
        line-height: 64rpx;
        border-radius: 20rpx;
        margin-right: 15rpx;
    }

    .navClassify .on {
        color: #fff;
        background-color: #D33333;
    }

    .classifyMain {
        display: flex;

    }

    .classifyConList {
        height: 88vh;
        overflow-x: auto;
        padding-bottom: 119rpx;
        box-sizing: border-box;
    
        padding-top: 100rpx;
    }


  .classifyConListCon{
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: space-between;
  }
    .classifyConList .list {
        width: 276rpx;
        /* height: 373rpx; */
        margin-top: 30rpx;
        margin-right: 28rpx;
        position: relative;
        border-radius: 30rpx;
        background-color: #FFFFFF;
		padding-bottom: 20rpx;
    }

    .classifyConList .list:nth-child(2n) {
        margin-right: 0rpx;
    }

    .classifyConList .list .img {
        width:100%;
        height: 188rpx;
        border-radius: 30rpx;
    }
     

    .classifyConList .list .text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        font-size: 24rpx;
        margin-top: 15rpx;
		height: 90rpx;
        line-height: 44rpx;
        padding: 0 12rpx;
        font-weight: bold;
    }

    .classifyConList .list .textA {

        display: flex;
        margin-top: 10rpx;
        padding: 0 12rpx;
        box-sizing: border-box;
        width: 100%;
        align-items: center;
        /* position: absolute;
        left: 0rpx;
        bottom: 32rpx; */
        justify-content: space-between;
    }

    .classifyConList .list .textA .money {
        font-size: 28rpx;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        word-break: break-all;
        width: 130rpx;
        -webkit-line-clamp: 1;
        overflow: hidden;
        font-weight: bold;
    }

    .classifyConList .list .textA .btn {
        font-size: 18rpx;
        font-weight: bold;
        width: 86rpx;
        height: 28rpx;
        border-radius: 14rpx;
        color: #FFFFFF;
        line-height: 28rpx;
        text-align: center;
        line-height: 28rpx;
        background-color: #D33333;
    }
	
	.memberPrice{
		font-size: 28rpx;font-weight: bold;padding-left: 20rpx;margin-top: 10rpx;
	}
</style>
