<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()
    },
    // 朋友圈设置页面
    onShareAppMessage() {
      let myName = this.$store.state.user.userInfo.nickName
      if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') {
        myName = '【神秘人】'
      } else {
        myName = '【' + myName + '】'
      }
      return {
        title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)
        path: '/pages/index/index',
        // imageUrl: '/static/img/details/d1.png', // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
        success: function (res) {
          if (res.errMsg === 'shareAppMessage:ok') {
            console.log('分享成功！', res)
          }
        },
        fail: function (res) {
          if (res.errMsg === 'shareAppMessage:fail cancel') {
            console.log('fail', '放弃分享')
          } else if (res.errMsg === 'shareAppMessage:fail') {
            console.log('fail', '分享失败')
          }
        },
      }
    },
    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>