<comment>
  # 组件注释
</comment>
<template>
  <div class="topTab">
    <p v-show="false">{{getListData}}</p>
    <p v-show="false">{{getListDataMore}}</p>
    <div class="md-example-child md-example-child-tabs md-example-child-tab-bar-6">
      <div class="tab_bar_layout">
        <!--标签头-->
        <md-tab-bar
          class="tab_bar"
          v-model="current"
          :items="items"
          @change="onTabChange"
        >
          <!--<template slot="item" slot-scope="{ item }">-->
          <!--<div class="custom-item">-->
          <!--<div class="text">-->
          <!--<span v-text="item.typeTitle"></span>-->
          <!--</div>-->
          <!--</div>-->
          <!--</template>-->
        </md-tab-bar>


      </div>

      <div class="scroll_layout">
        <md-scroll-view
          ref="scrollView"
          :auto-reflow="true"
          :scrolling-x="false"
          @scroll="$_onScroll"
          @refreshing="$_onRefresh"
          @end-reached="$_onEndReached"
          @refreshActive="$_refreshActive"
        >
          <md-scroll-view-refresh
            slot="refresh"
            slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
            :scroll-top="scrollTop"
            :is-refreshing="isRefreshing"
            :is-refresh-active="isRefreshActive"
          ></md-scroll-view-refresh>
          <!--<div-->
          <!--v-for="i in list"-->
          <!--class="scroll-view-item"-->
          <!--:key="i"-->
          <!--@click="$_onItemClick(i)"-->
          <!--&gt;-->
          <!--{{i}}-->
          <!--</div>-->

          <md-swiper

            ref="swiper"
            :autoplay="0"
            :dragable="false"
            :is-prevent="false"
            :is-loop="false"
            :has-dots="false"
            @before-change="onSwiperChange"
          >

            <!--<component :is="comName"></component>-->

            <md-swiper-item

              class="topTab"
              v-for="(value, keys, index) in images"
            >
              <el-row :gutter="10"
                      v-show="current==keys"
              >

                <el-col class=bg-purple :xs="8" :sm="8" :md="8" :lg="8" :xl="8"
                        v-for="(values, key, index) in images[keys]">
                  <!--{{ index }}. {{ key }} : {{ value }}-->
                  <div class="grid-content " v-on:click="onClickItemIndex(keys,key)">
                    <img :src="getImageUrl(keys,key)" class="itemimg">

                  </div>
                  <div class="centerHorizontally">
                    <!--{{ index }} . {{ key }} : {{ value }}-->
                    {{ values.gameTitle }}
                  </div>
                  <div class="centerHorizontally">
                    <!--{{ index }} . {{ key }} : {{ value }}-->
                    {{ values.gamePrice }}
                  </div>
                </el-col>

              </el-row>


            </md-swiper-item>


          </md-swiper>


          <md-scroll-view-more
            slot="more"
            :is-finished="onEndReachedTag"
          >
          </md-scroll-view-more>
        </md-scroll-view>
      </div>

    </div>
  </div>
</template>

<script>
  //import logo from '../../../static/logo.png'
  import {TabBar, Swiper, SwiperItem} from 'mand-mobile'
  import {ScrollView, ScrollViewRefresh, ScrollViewMore} from 'mand-mobile'

  export default {
    name: 'topTab',
    components: {
      itemImage: () => import('../components/itemImage'),
      listView: () => import('../components/listView'),
      [TabBar.name]: TabBar,
      [Swiper.name]: Swiper,
      [SwiperItem.name]: SwiperItem,
      [ScrollView.name]: ScrollView,
      [ScrollViewRefresh.name]: ScrollViewRefresh,
      [ScrollViewMore.name]: ScrollViewMore,
    },
    data() {
      return {
        baseUrl : http_.games,
        // baseUrl : "http://127.0.0.1:9999/games/",
        current: 0,
        scrollTop: 0,
        scrollTopBack: 0,
        itemImage: "itemImage",

        comName: "listView",
        list: 99,
        //上拉加载更多
        onEndReachedTag: false,
        //下拉刷新
        onRefreshTag: false,
        // {name: 1, label: '首页',
        items: [
          {
            type: 0,
            typeTitle: '推荐'
          },
          {
            type: 1,
            typeTitle: '对战'
          },
          {
            type: 2,
            typeTitle: '单机'
          },
          {
            type: 3,
            typeTitle: '棋牌'
          },
          {
            type: 4,
            typeTitle: '休闲'
          },
          {
            type: 5,
            typeTitle: '其他'
          },
        ],


        itemRefs: [
          "itemImage0",
          "itemImage1",
          "itemImage2",
          "itemImage3",
        ],
        images: [
          [{GameUrl: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1425581591,2239095159&fm=26&gp=0.jpg"},
            {GameUrl: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1425581591,2239095159&fm=26&gp=0.jpg"},
            {GameUrl: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1425581591,2239095159&fm=26&gp=0.jpg"},
          ]
        ],
        imagesitem: [
          {image: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1425581591,2239095159&fm=26&gp=0.jpg"},
          {image: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1158851945,3016970309&fm=26&gp=0.jpg"},
          {image: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566362491089&di=64570139e7da8a5fc0161575efb10794&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201502%2F20%2F20150220120527_YVcSV.thumb.700_0.jpeg"},
        ],
        itemsAllData: [],

        testList: [
          "itemImage0",
          "itemImage1",
          "itemImage2",
          "itemImage3",
        ],

      }
    },
    //作为子组件的时候应用父组件的时候设定的变量
    props: {},
    //用来观察 方法 对象 变量 有变化 走的回调方法
    watch: {},
    //正常方法
    methods: {
      onSwiperChange(from, to) {
        this.current = this.items[to].name;
        this.$refs.scrollView.reflowScroller()
        // this.getListDataForType(to)
        setTimeout(() => {
          this.$refs.scrollView.scrollTo(0, 0, false)
        }, 10)
      },
      onTabChange(item, index) {
        this.current = this.items[index].name;
        console.log("我点了换类型", index);
        this.getListDataForType(this.current)
        this.$refs.swiper.goto(index)
        this.$refs.scrollView.reflowScroller()
        setTimeout(() => {
          this.$refs.scrollView.scrollTo(0, 0, false)
        }, 10)
      },
      onClickItemIndex(index1, index2) {
        console.log("我点了", index2);

        this.utils.goRouterforPathPush(this, {
          path: 'matching',
          query: {data: this.images[index1][index2]}
        })
        // this.$refs.itemImage.setData(this.images[index])
        this.scrollTopBack = this.scrollTop
        console.log("我想回来的时候的高度", this.scrollTopBack);
      },

      getListDataForType(type, callbackSuccess, callbackFailure) {
        // http://127.0.0.1:55555/api/getDataForList?page=1&size=10
        var sendData = {
          data: {
            // id : 9527,
            // className:"GameItem",
            type: type,

          }
        }
        // this.utils.getListData(this,sendData);
        this.utils.getDataForList(this, sendData, callbackSuccess, callbackFailure);
        // this.utils.getDataForList(this,sendData,function () {
        //
        // }.bind(this),function () {
        //
        // }.bind(this));
      },
      getListDataForTypeMore(type, callbackSuccess, callbackFailure) {
        // http://127.0.0.1:55555/api/getDataForList?page=1&size=10


        console.log("准备去加载更多", this.current, "内容是", this.itemsAllData[this.current]);

        var data = this.itemsAllData[this.current]
        if (data) {
          if (data.next != null) {



            var sendData = {
              // url: this.utils.httpToHttps(data.next),
              // url: "https://www.yuyekeji.cn/hallgame/api/getDataForList?page=2&type=0",
              url: data.next,
              data: {
                gameType: this.current
              }
            }
            this.utils.getDataForUrl(this, sendData, function (Success) {
              console.log("回来的参数是什么", Success);
              this.$store.dispatch('setTableListMore', Success)



            }.bind(this), function () {
            }.bind(this));
          }
        }

        this.onEndReachedTag = false
        this.$refs.scrollView.finishLoadMore()
      },

      getImageUrl(keys, key) {
        var image = this.images[keys][key].gameTitleUrl+"/"+"icon.png"

        return this.baseUrl+image
      },
      getScrollView(keys) {
        return "scrollView" + keys
      },
      $_onScroll({scrollLeft, scrollTop}) {
        // console.log(`[Mand Mobile ScrollView - demo0 - onScroll] scrollLeft: ${scrollLeft}, scrollTop: ${scrollTop}`)
        this.scrollTop = scrollTop
      },
      $_onRefresh() {
        if (this.onRefreshTag) {
          return
        }
        this.onRefreshTag = true
        // console.log("下拉刷新");
        //
        // var sendData = {
        //   data : {
        //     id : 9527,
        //     name : "添哥"
        //   }
        // }
        // this.utils.getListData(this,sendData);
        // async data
        // setTimeout(() => {
        //   // {image: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566362491089&di=64570139e7da8a5fc0161575efb10794&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201502%2F20%2F20150220120527_YVcSV.thumb.700_0.jpeg"},
        //   // this.list += 5
        //   // this.images.push({image: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566362491089&di=64570139e7da8a5fc0161575efb10794&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201502%2F20%2F20150220120527_YVcSV.thumb.700_0.jpeg"})
        //            this.$refs.scrollView.finishRefresh()
        // }, 2000)


        this.getListDataForType(this.current, function () {
          setTimeout(() => {
            this.onRefreshTag = false
            this.$refs.scrollView.finishRefresh()
          }, 2000)
        }.bind(this), function () {
          setTimeout(() => {
            this.onRefreshTag = false
            this.$refs.scrollView.finishRefresh()
          }, 2000)
        }.bind(this))
      },
      addItems() {
        this.list += 5
        // 如果把autoReflow设置为false, 需调用reflowScroller
        this.$refs.scrollView.reflowScroller()
      },
      $_onEndReached() {
        console.log("加载更多", this.onEndReachedTag);
        if (this.onEndReachedTag) {
          return
        }
        this.onEndReachedTag = true
        // var sendData = {
        //   data : {
        //     id : 9527,
        //     name : "添哥"
        //   }
        // }
        // this.utils.getListDataMore(this,sendData);
        // this.isFinished = true
        // console.log("加载更多 设置了吗",this.isFinished);
        // async data
        this.getListDataForTypeMore();
        // setTimeout(() => {
        //
        // }, 2000)

      },
      $_refreshActive() {
        // console.log("现在是什么方法");

      },

    },
    //计算方法
    computed: {
      getListData() {

        // console.log("网络数据是",this.$store.getters.getGetTableList);
        var list = this.$store.getters.getDataForList
        console.log("网络数据是", list, (list.data != null));
        if (list.data != null) {

          this.images[list.config.params.type] = list.data.results
          this.itemsAllData[list.config.params.type] = list.data
          console.log("总计和数据", this.itemsAllData);
          console.log("现在所有数组~~~~~~~~~~~~~~~~~~~", this.images);
        }

        // // console.log("网络数据是",this.$refs);
        // if (this.$refs.scrollView) {
        //   setTimeout(() => {
        //
        //     this.$refs.scrollView.finishRefresh()
        //   }, 1000)
        // }

      },
      getListDataMore() {

        // console.log("网络数据是",this.$store.getters.getGetTableList);
        var list = this.$store.getters.getTableListMore
        // console.log("网络数据是",list,(list.data !=null));
        if (list.data != null) {

          this.images[JSON.parse(list.config.data).gameType] = this.images[JSON.parse(list.config.data).gameType].concat(list.data.results)
          this.itemsAllData[JSON.parse(list.config.data).gameType] = list.data
        }
        // // console.log("网络数据是",this.$refs);
        // if (this.$refs.scrollView) {
        //   setTimeout(() => {
        //     this.isFinished = false
        //
        //     this.$refs.scrollView.finishLoadMore()
        //   }, 1000)
        // }

        console.log("加载更多~~~~~~~~~~~~~~~~~~~", list);
        console.log("目前最多的数据~~~~~~~~~~~~~~~~~~~", this.images);
      },


    },
    //生命周期 渲染html之前 可以初始化数据
    created() {


    },
    //生命周期 渲染html完毕 可以dom操作
    mounted() {
      // var refs = []
      // // window.ScrollViewTrigger1 = () => {
      // //   this.$refs.scrollView.triggerRefresh()
      // // }
      // // setTimeout(function () {
      // //   console.log("有多少",this.$refs);
      // //   refs = this.utils.getComponents(this,this.itemRefs)
      // //   this.utils.setComponentsData(this,refs,function (i,ref) {
      // //     ref.setData(this.images[i])
      // //   }.bind(this));
      // //   this.$refs.itemImage0.setData(this.images[2])
      // // }.bind(this),200)
      //
      // // this.$refs.itemImage0.setData(this.images[0])
      // // this.$refs.itemImage1.setData(this.images[0])
      // // this.$refs.itemImage2.setData(this.images[0])
      // // this.$refs.itemRefs[0].setData(this.images[0])
      //
      //
      // var sendData = {
      //   data : {
      //     // id : 9527,
      //     className:"GameItem",
      //     gameType : 0
      //   }
      // }
      // // this.utils.getListData(this,sendData);
      // this.utils.getDataForList(this,sendData);


      var sendData = {
        data: {}
      }
      // this.utils.getListData(this,sendData);
      this.utils.getGameItemType(this, sendData, function (Success) {
        this.items = [];
        for (var i = 0; i < Success.data.length; i++) {
          var tempData = Success.data[i]
          var setData = {
            name: tempData.type,
            label: tempData.typeTitle,
          }

          this.items.push(setData)
        }

        for (var i = 0; i < this.items.length; i++) {
          this.getListDataForType(this.items[i].name)
        }


        this.current = this.items[0].name;


      }.bind(this), function () {

      }.bind(this));
      // console.log("应该有什么",this.getListData ());
    },
    //生命周期 离开这个页面
    destroyed() {

    },
    activated() {
      console.log("缓存生效", this.scrollTopBack);
      setTimeout(() => {
        this.$refs.scrollView.scrollTo(0, this.scrollTopBack, false)
        console.log("走了吗", this.scrollTopBack);
      }, 100)
    }
  }
</script>

<style scoped>

  .topTab{
    background: #e6e6e6;
  }

  .md-example-child-tab-bar-6 .md-swiper {
    background: #FFF;
  }

  .md-example-child-tab-bar-6 .md-swiper .md-swiper-item {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 10px;
    line-height: 1.5;
    color: #666;
  }

  .md-scroll-view-more {
    padding: 12px 0;
    font-size: 14px;
    text-align: center;
    color: #858b9c
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #e7e7e7;
  }

  .tab_bar_layout {
    position: fixed;
    top: 0rem;

    width: 100%;
    z-index: 999;
  }

  .md-example-child-scroll-view-0 {
    height: 400px;
    background: #FFF;
  }


  .main {
    background: #37de43;
    height: 90vh;
  }

  .scroll_layout {
    margin-top: 2rem;
    height: 85vh;
    /*background: burlywood;*/
  }

  .tab_bar {
    width: 100%;
  }

  .bg-purple {
    /*background: #d3dce6;*/
    margin-bottom: 0.5rem;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    height: 6.5rem;
    align-items: center;
    display: flex;
    margin-bottom: 0.5rem;
  }

  .row_ {
    margin-top: 1rem;
  }

  .itemimg {
    width: 100%;
    height: 100%;
    border-radius: 5%;
  }
</style>
