<template>
  <view class="content">
    <view class="header">
      <!-- 搜索-->
      <view class="searchBar">
        <icon class="searchIcon" type="search" size="14"></icon>
        <input
         v-model="searchText"
         class="searchIpt"
         placeholder="老花镜"
         confirm-type="search"
         @blur="searchKey"
        />
      </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="categoryList"
          :defaultSelected="filterDropdownValue"
          :updateMenuName="true"
          @search="search"
          @getList="getList"
          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: [],
      searchText: '',
	  // goodsList:[
	  // 	{ goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
	  // 	{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
	  // 	{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
	  // 	{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
	  // 	{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
	  // 	{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
	  // 	{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
	  // 	{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
	  // 	{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
	  // 	{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
	  // ],
    };
  },
  computed: {
    goodsList() {
      // 也可以从 getters 获取
      return this.$store.state.index.list;
    },
	  categoryList(){
      return this.$store.state.index.categoryList;
				// newData[0].submenu[0].submenu = categoryList[0].submenu
				// newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu
				// newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu
				// newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu
				// newData[4].submenu[0] = categoryList[3]
				this.filterData = newData;
				// this.filterData = categoryList;
	  },
  },
  filters: {
    outData(value) {
      return JSON.stringify(value);
    }
  },
  onLoad() {
    store.dispatch('index/category');
    // this.getList();
    store.dispatch('index/list');
  },
  methods: {
    showDrawer(e) {
      this.$refs[e].open();
    },
    getList() {
      store.dispatch('index/list');
    },
    // search(params) {
    //   this.$store.index.
    // },
    closeDrawer(e) {
      this.$refs[e].close();
    },
    change(e, type) {
      this[type] = e;
    },
    onClickItem(e) {
      if (this.current !== e) {
        this.current = e;
      }
    },
    dropDown() {
      console.log("下拉");
    },
    searchKey(e) {
      const { value: keyword } = e.detail;
      this.keyWords = keyword;
      store.dispatch('index/search', {
        params: {},
        keyword,
      });
    },
    //接收菜单结果
    search(e) {
      const { on, value, index  } = e;
      let params = {}
      if(on[0] === 1) {
        // 若点击全部
        this.searchText = '';
        store.dispatch('index/list');
      } else {
        for(let i = 1; i<=on.length; i++){ // on[0]是全部
          if(on[i] === 1) { // 若该选项被选中
            params[`${this.categoryList[i].value}`] = value[i][0];
          }
        }
        store.dispatch('index/search', {
          params, 
          keyword: this.keyWords
        });
      }
    }
  },

};
</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>