<template>
    <view class="container">
      <view
        class="content skeleton"
        v-show="showContent"
      >
        <view class="header">
          <!-- 搜索-->
          <view class="searchBar skeleton-rect">
            <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 skeleton-rect">
          <view>
            <HMfilterDropdown
              :filterData="categoryList"
              :defaultSelected="filterDropdownValue"
              :updateMenuName="true"
              @search="search"
              @getList="getList"
              data-format="Object"
            ></HMfilterDropdown>
            <!-- 商品列表 -->
            <!-- 		<scroll-view

  		  enable-flex
  		  @scrolltolower="handleScrolltolower"
  		  scroll-y
  		  style="height: 1000px;margin-bottom: 20px;"
  		>	 -->

            <view class="goods-list">
              <view class="product-list">
                <view
                  class="product skeleton-rect"
                  v-for="(goods) in goodsList"
                  :key="goods.id"
                >
                  <Card
                    :goods="goods"
                    :scrollTop="scrollTop"
                    :viewHeight="viewHeight"
                  ></Card>
                </view>
              </view>
              <view class="loading-text">
                <text v-if="isLoading==true">{{loadingText}}</text>
                <text v-else>{{loadedText}}</text>

              </view>
            </view>

            <!-- </scroll-view> -->

          </view>
        </view>

      </view>
      <!--引用组件-->
      <skeleton
        :show="showSkeleton"
        ref="skeleton"
        loading="chiaroscuro"
        selector="skeleton"
        bgcolor="#FFF"
      ></skeleton>
    </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 skeleton from '@/components/quick-skeleton/quick-skeleton.vue'
  import store from '@/store'

  export default {
    components: {
      UniDrawer: UniDrawer,
      HMfilterDropdown: HMfilterDropdown,

      Card: Card,
      skeleton: skeleton,

    },

    data() {

      return {

        indexArr: '',
        valueArr: '',
        isLoading: true, // 初始化加载状态
        loadingText: 'data loading...',
        loadedText: '~~暂无更多数据~~',

        filterDropdownValue: [],

        filterData: [],

        searchText: '',
        scrollTop: 0,

  	  showContent: true,

        viewHeight: uni.getSystemInfoSync().windowHeight,
  	  showSkeleton: false, // 骨架屏显示隐藏
      }

    },

    onPageScroll({ scrollTop }) {
      // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件

      this.scrollTop = scrollTop

    },

    computed: {

      goodsList() {

        // 也可以从 getters 获取

        // console.log('index-list=====>',this.$store.state.index.list)

        const list = this.$store.state.index.list
  	  if (list.length == 0) {
  		 this.isLoading = false
  	  }
  	  this.scrollTop = 0.1

  	  return list

      },

      categoryList() {

        return this.$store.state.index.categoryList
      },

    },

    filters: {

      outData(value) {

        return JSON.stringify(value)
      },
    },
    /**
     *  页面载入完成后调用子组件的方法生成预加载效果
     */
    onReady: function() {
  	 this.getInitData()

    },

    methods: {
      async getInitData () {
        this.showSkeleton = true
        await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')])
        this.showSkeleton = false
        this.showContent = true
      },

      showDrawer(e) {

        this.$refs[e].open()

      },

      getList() {

        store.dispatch('index/list')
        this.isLoading = false // TODO:::这里不知道怎么改，请同学帮忙写一下。
        // 把data里的isLoading 改为false就可以了

      },
      // 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 if (this.categoryList[i].value === 'px') {
                params.orderby = value[i][0]

              } else {

                params[`${this.categoryList[i].value}`] = value[i][0]

              }

            }
          }

          store.dispatch('index/search', {

            params,

            keyword: this.keyWords,
          })

        }

      },
    },
  }

  </script>
  
  <style lang="scss">

  .content,
  .container {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;

  }
  .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%;
        min-height: 120rpx;

        margin: 0 0 20rpx 0;
        background: #ffffff;
        border: 1px solid #f2f2f2;
      }
    }
  }

  </style>