<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 store from '@/store'

export default {
  components: {
    UniDrawer: UniDrawer,
    HMfilterDropdown: HMfilterDropdown,
    Card: Card,
  },
  data () {
    return {
      indexArr: '',
      valueArr: '',
      loadingText: '~~到底了~~',
      filterDropdownValue: [],
      filterData: [],
      searchText: '',
    }
  },
  computed: {
    goodsList () {
      // 也可以从 getters 获取
      // console.log('index-list=====>',this.$store.state.index.list)
      return this.$store.state.index.list
    },
    categoryList () {
      return this.$store.state.index.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, selectedData } = e
      let params = {}
      const selectedPayload = {}
      for (const key in selectedData) {
        if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
          selectedPayload[key] = selectedData[key].toString()
        }
      }
      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) { // 若该选项被选中
            if (this.categoryList[i].value === 'filter') {
              params = {
                ...selectedPayload,
                ...params,
              }
            } else {
              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>