<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 获取

        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>