<template>
  <view class="content">
    <view class="header">
      <!-- 搜索-->
      <view class="searchBar">
        <icon class="searchIcon" type="search" size="14"></icon>
        <input class="searchIpt" placeholder="老花镜" confirm-type="search" />
      </view>

      <!-- 筛选栏-->
      <view class="screenBar">
        <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">
          <view
            class="screenItem"
            v-bind:class="{ active: current === item.current }"
            v-if="item.current === 2"
            @click="dropDown"
          >
            {{ item.text }}
            <icon type="info" size="14"></icon>
          </view>
          <view
            class="screenItem"
            v-bind:class="{ active: current === item.current }"
            v-if="item.current === 4"
            @click="showDrawer('showRight')"
          >
            {{ item.text }}
            <icon type="info" size="14"></icon>
          </view>
          <view v-if="item.current !== 2&&item.current!==4">
            <view
              class="screenItem"
              v-bind:class="{ active: current === item.current }"
            >{{ item.text }}</view>
          </view>
        </view>
      </view>
    </view>
    <Uni-drawer
      ref="showRight"
      mask="true"
      maskClick="true"
      mode="right"
      :width="320"
      @change="change($event,'showRight')"
    >
      <view class="close">
        <view @click="closeDrawer('showRight')">
          <text class="word-btn-white">关闭</text>
        </view>
      </view>
    </Uni-drawer>

    <!-- 筛选菜单-->
    <view class="content-wrap">
      <view>
        <HMfilterDropdown
          :filterData="filterData"
          :defaultSelected="filterDropdownValue"
          :updateMenuName="true"
          @confirm="confirm"
          data-format="Object"
        ></HMfilterDropdown>
        <!-- 商品列表 -->
        <view class="goods-list">
          <view class="product-list">
            <view class="product" v-for="(goods) in goodsList" :key="goods.id">
              <Card :goods="goods"></Card>
            </view>
          </view>
          <view class="loading-text">{{loadingText}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
import Card from "@/components/CommodityCard/CommodityCard.vue";
import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
import data from "@/common/data.js"; //筛选菜单数据
import store from '@/store';

export default {
  components: {
    UniDrawer: UniDrawer,
    HMfilterDropdown: HMfilterDropdown,
    Card: Card
  },
  data() {
    return {
      screenItems: [
        { current: 0, text: "全部", hasIcon: false },
        { current: 1, text: "销量", hasIcon: false },
        { current: 2, text: "价格", hasIcon: true },
        { current: 3, text: "折扣", hasIcon: false },
        { current: 4, text: "筛选", hasIcon: true }
      ],
      current: 0,
      showRight: false,
      indexArr: "",
      valueArr: "",
      loadingText: "~~到底了~~",
      filterDropdownValue: [],
      filterData: []
    };
  },
  computed: {
      goodsList() {
        // 也可以从 getters 获取
          console.log(this.$store.getters.list);
          return this.$store.state.test.list;
      },
	  categoryList(){
		  console.log(JSON.stringify(this.$store.state.categoryOrder.categoryList));
	  }
	  
  },
  filters: {
    outData(value) {
      return JSON.stringify(value);
    }
  },
  onLoad: function() {
    store.dispatch('test/fetch');
	store.dispatch('categoryOrder/fetch')
   
    //定时器模拟ajax异步请求数据
    setTimeout(()=>{
    	//传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
    	// this.filterDropdownValue = [
    	// 	[1,1,0],				//第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
    	// 	[null,null],			//第1个菜单选中 都不选中
    	// 	[1],					//第2个菜单选中 一级菜单的第1项
    	// 	[[0],[1,2,7],[1,0]],	//筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
    	// 	[[0],[1],[1]],			//单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
    	// ];
    this.filterData = data;
    },100);
  },
  methods: {
    showDrawer(e) {
      this.$refs[e].open();
    },
    closeDrawer(e) {
      this.$refs[e].close();
    },
    change(e, type) {
      this[type] = e;
    },
    onClickItem(e) {
      if (this.current !== e) {
        this.current = e;
      }
    },
    dropDown() {
      console.log("下拉");
    },
    //接收菜单结果
    confirm(e) {
      this.indexArr = e.index;
      this.valueArr = e.value;
      return;
      console.log("修改菜单");
      this.filterData[4].submenu[1] = {
        name: "项目2",
        submenu: []
      };
    }
  },

};
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f7f6f6;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f7f6f6;
  height: 178rpx;
  width: 100%;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
}
.searchBar {
  width: 670rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0rpx 16rpx;
  border: 1px solid #ff6b4a;
  border-radius: 8rpx;
  background-color: #ffffff;
}

.searchIpt {
  height: 68rpx;
  width: 670rpx;
  padding: 16rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.screenBar {
  width: 670rpx;
  height: 110rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #333333;
  font-size: 32rpx;
}
.active {
  color: #ff6b4a;
}
.screenItem {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content-wrap {
  width: 100%;
  background-color: #ffffff;
}

.HMfilterDropdown {
  top: 178rpx !important;
}

.goods-list {
  padding-top: 286rpx;
  .loading-text {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    color: #979797;
    font-size: 12px;
  }
  .product-list {
    width: 92%;
    padding: 0 4% 3vw 4%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .product {
      width: 48%;
      margin: 0 0 20rpx 0;
      background: #ffffff;
      border: 1px solid #f2f2f2;
    }
  }
}
</style>