<template>
  <view class="container">
    <!-- 搜索 -->
    <view class="sozone">
      <search class="search" tips="请输入店铺/标的名称关键字"/>
    </view>
	
	  <view class="secondary">
		<!-- 二级分类 20 -->
		<view class="cate-content">
		  <!-- 左侧 一级分类 -->
		  <scroll-view class="cate-left" scroll-y="true">
			<view class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in menus" :key="index"
			  @click="handleSelectNav(index)">
        <image class="cate-left-image" :src="'./static/tabbar/recommend-cate.png'"></image>
        <text class="cate-left-text">{{ item.name }}</text>
      </view>
		  </scroll-view>
		  <!-- 右侧 二级分类 -->
		  <scroll-view class="cate-right" :scroll-top="scrollTop" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
        <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
        <!-- 有数据的时候  -->
        <view v-if="list.length>0 && type==0" class="cate-right-cont">
          <view class="cate-two-box">
           <view class="cate-cont-box">
              <view class="flex-two" v-for="(item, idx) in list" :key="idx" @click="onTargetGoods(item.goods_islicode)">
              <view class="cate-img-padding">
                <view class="cate-img">
                <image class="image" mode="scaleToFill" :src="item.goods_image|gdimg"></image>
                </view>
              </view>
              <text class="name oneline-hide">{{ item.goods_name }}</text>
              </view>
            </view>
          </view>
        </view>
        <view v-else-if="userList.length>0 && type==1" class="cate-right-cont">
          <view class="cate-two-box">
            <view class="cate-cont-box">
              <view class="flex-two-data" v-for="(item, idx) in userList" :key="idx" @click="onGoodsList(item.user.name,item.goods_count)">
                <view class="cate-two-img-padding">
                  <view v-if="item.user.doorHeadPhoto" class="cate-two-img">
                    <image class="two-image" mode="scaleToFill" :src="item.user.doorHeadPhoto"></image>
                  </view>
                </view>
                <view class="two-name">
                  <text class="two-name-name">{{ item.user.name }}</text>
                  <view class="two-name-bottom">
                    <text class="two-name-type">标的数量：{{ item.goods_count}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else-if="informationList.length>0 && type==2" class="cate-right-cont">
          <view class="cate-two-box">
            <view class="cate-cont-box">
              <view class="flex-three" v-for="(item, idx) in informationList" :key="idx" @click="onConsulting(item.consultingId,item.consultingName)">
                <view class="cate-selected">
					<view style="width: 200rpx;height: 200rpx;"><img src="" /></view>
					<view>{{item.consultingName}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else-if="serviceProvidersList.length>0 && type==3" class="cate-right-cont">
          <view class="cate-two-box">
            <view class="cate-cont-box">
              <view class="flex-three" v-for="(item, idx) in serviceProvidersList" :key="idx" @click="onEconomyBusiness(item.name)">
                <view class="cate-img-padding1">
                  <view v-if="item.doorHeadPhoto" class="cate-img1">
                    <image class="image" mode="scaleToFill" :src="item.doorHeadPhoto"></image>
                  </view>
                </view>
                <text class="name oneline-hide">{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>
        <view v-else-if="transactionList.length>0 && type==4" class="cate-right-cont">
          <view class="cate-two-box">
            <view class="cate-cont-box">
              <view class="flex-three" v-for="(item, idx) in transactionList" :key="idx" @click="onTradingentity(item.name)">
				<view class="cate-image"><image src="" mode=""></image></view>
                <view class="cate-name">
                  {{item.name}}
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 空白提示 -->
<!--        <view v-else class="cate-right-cont">-->
<!--          <view class="empty-content">-->
<!--            <view class="empty-icon">-->
<!--              <image class="image" src="/static/empty.png" mode="widthFix"></image>-->
<!--            </view>-->
<!--            <view class="tips">暂无数据</view>-->
<!--          </view>-->

<!--        </view>-->
        </mescroll-body>
		  </scroll-view>
		  
		</view>
		
	  </view>

  </view>
</template>

<script>
  import MescrollCompMixin from '@/components/mescroll-uni/mixins/mescroll-comp'
  import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'

  import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
  
  import * as CategoryApi from '@/api/category'
  import * as GoodsApi from '@/api/goods'
  import Empty from '@/components/empty'
  import Search from '@/components/search'
  import Secondary from './components/secondary'
  import { rpx2px,base64ToUint8Array} from '@/utils/util'
  
  import pako from '@/core/pako'
  import transaction from 'utils/json/transaction.json'
  import temp from 'utils/json/temp.json'
  import Informationlist from 'utils/json/Informationlist.json'
  import {getMoreListData} from "../../api/category";
  
  
  // 左侧菜单(固定)
  const menus = [
    {name: '全部标的', type:0 },
    {name: '数据店铺', type: 1 },
    {name: '资讯中心', type: 2 },
    {name: '文化数据经纪商', type: 3 },
    {name: '交易主体', type: 4 },
  ]
  
  //分页大小
  let limit=10;

  // 最后一次刷新时间
  let lastRefreshTime;

  export default {
    components: {
      Search,
      Empty,
      Secondary,
      MescrollBody
    },
    mixins: [MescrollCompMixin,MescrollMixin],
    data() {
      return {
        // 枚举类
        PageCategoryStyleEnum,
        // 分类列表
        list: [],
        // 分类模板设置
        setting: {},
        // 正在加载中
        isLoading: true,
        // 一级分类：指针
        curIndex: 0,
        //默认显示第一页
        page:1,
        // 列表高度
        scrollHeight: 0,
        // 内容区竖向滚动条位置
        scrollTop: 0,
        // 菜单
        menus,
        type: 0,
        informationList: [], // 资讯中心selected
        // informationList: Informationlist.data, // 资讯中心selected
        serviceProvidersList: [], // 文化数据经纪商
        // serviceProvidersList: temp.data, // 文化数据经纪商
		// transactionList: [], // 交易主体
        transactionList: transaction.data, // 交易主体
        userList: [], // 数据店铺
        // 上拉加载配置
        upOption: {
          // 首次自动执行
          auto: true,
          // 每页数据的数量; 默认10
          page: { size: limit },
          // 数量要大于4条才显示无更多数据
          noMoreSize: 4,
          // 空布局
          empty: {
            tip: '暂无记录'
          }
        },
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 加载页面数据
      this.onRefreshPage()
      this.curIndex = options.curIndex ? options.curIndex : 0
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      // 每间隔5分钟自动刷新一次页面数据
      const curTime = new Date().getTime()
      if ((curTime - lastRefreshTime) > 5 * 60 * 1000) {
        this.onRefreshPage()
      }
    },
    created() {
      // 设置分类列表高度
      this.setListHeight()
    },
    methods: {
      // 设置列表内容的高度
      setListHeight() {
        const { windowHeight } = uni.getSystemInfoSync()
        this.scrollHeight = windowHeight - rpx2px(96)
      },
      // 刷新页面
      onRefreshPage() {
        // 记录刷新时间
        lastRefreshTime = new Date().getTime()
        // 获取页面数据
        this.getPageData()
        //加载分类数据
        //this.getCatList()
      },
      /**
       * 上拉加载的回调 (页面初始化时也会执行一次)
       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
       * @param {Object} page
       */
      async upCallback(page) {
        const app = this
        // 设置列表数据
        await app.getCatList(page.num)
            .then(list => {
              // console.log('list',list)
              const curPageLen = list.data.length
              const totalSize = list.total
              app.mescroll.endBySize(curPageLen, totalSize)
            })
            .catch(() => app.mescroll.endErr())
      },

      // 获取页面数据
      getPageData() {
        const app = this
        app.isLoading = true
        Promise.all([
            // 获取分类模板设置
            // 优化建议: 可以将此处的false改为true 启用缓存
            // SettingModel.data(false),
            // 获取分类列表
            // CategoryApi.list()
			      //this.getAllGoods()
          ])
          .then(result => {
            // 初始化分类模板设置
            // app.initSetting(result[0])
            // 初始化分类列表数据
            // app.initCategory(result[1])
          })
          .finally(() => app.isLoading = false)
      },
      // 一级分类：选中分类
      handleSelectNav(index) {
        this.curIndex = index
        this.scrollTop = 0
        this.getCatList()
      },
      // 查询分类 获取列表
      getCatList(pageNo = 1){
        const app = this
        let item = menus[this.curIndex]
        let type = item.type
        app.type = type
        app.page = pageNo

        return new Promise((resolve, reject) => {
          if (type === 1) {
            app.getUserData().then(resolveList=> {
              resolve(resolveList)
            })
          } else if (type === 2) {
            app.getConsultingContextSelection()
          } else if (type === 3) {
            app.getServiceProviders()
          } else if (type === 4) {
          } else {
            let rd={"goods_status":1,"page":app.page,"limit":limit}
            app.bindData(rd).then(bindList=> {
              resolve(bindList)
            })
          }
        })
      },
      // 标的详情
      onTargetGoods(gislicode){
        this.$navTo('pages/goods/detail', { gislicode })
      },
      // 跳转店铺列表
      onGoodsList(spname,count){
        if (count > 0) {
          this.$navTo("pages/goods/list?k="+spname+'&dt='+new Date().getTime())
        } else {
          this.$error('该店铺不存在标的信息！')
        }
      },
      // 跳转资讯中心
      onConsulting(consultingId,name){
        this.$navTo('pages/category/consulting/list', { consultingId,name })
      },
	  // 跳转交易主体
	  onTradingentity(name){
		this.$navTo('pages/category/tradingentity/list', { name })
	  },
	  // 文化数据经纪商
	  onEconomyBusiness(name){
		this.$navTo('pages/category/economybusiness/list', { name })
	  },
      // 全部标的
      async bindData(rd){
        return new Promise((resolve, reject) => {
          GoodsApi.nbgoods(rd).then(res=>{
            this.list = CategoryApi.getMoreListData(res.data.data,this.list,this.page)
            this.getHomeListImage()
            resolve(res.data)
          });
        })
      },
      async getHomeListImage() {
        this.list.forEach((item, key) => {
          if (item.goods_image === "") {
            GoodsApi.nbgoodsImage({"id": item.id}).then(res2 => {
              if (res2.code === 200) {
                this.list[key].goods_image = res2.data.data[0].goods_image;
                this.list[key].gdimg = pako.inflateRaw(base64ToUint8Array(res2.data.data[0].goods_image), {to: 'string'})
              }
            })
          }
        })
      },
      // 数据店铺
      getUserData() {
        const app = this
        let param = {
          page: app.page,
          limit: limit,
          userType: 2
        }
        return new Promise((resolve, reject) => {
          GoodsApi.souser(param).then(res=>{
            app.userList = CategoryApi.getMoreListData(res.data.data,app.userList,this.page)
            resolve(res.data)
          })
        })
      },
      // 资讯中心
      getConsultingContextSelection() {
        const app = this
        CategoryApi.consultingContextSelection().then(res=>{
          if (res.resultCode == '00000000') {
            app.informationList = res.data
          } else {
            app.$error('获取资讯信息失败')
          }
        });
      },
      // 文化数据经纪商
      getServiceProviders() {
        const app = this
        CategoryApi.serviceProviders().then(res=>{
          if (res.resultCode == '00000000') {
            app.serviceProvidersList = res.data
          } else {
            app.$error('获取文化数据经纪商失败')
          }
        });
      },
      // 处理列表中的特殊字段
      initList(newList) {
        newList.data.forEach(item => {
        item.gdimg = pako.inflateRaw(base64ToUint8Array(item.goods_image), {to: 'string'})
        })
        return newList
      },
    },
	  filters:{
      gdimg:function(value){
        return pako.inflateRaw(base64ToUint8Array(value), {to: 'string'})
      }
    }
  }
</script>

<style>
  page {
    background: #fff;
	position: relative;
  }
</style>
<style lang="scss" scoped>
  // 搜索框
  .sozone{
    position: fixed;
    z-index: 70;
    width: 100%;
    height: 120rpx;
    background-color: #1c223b;

    .search-wrapper{
      padding-top: 5rpx;
    }
  }
  
  //
  .secondary{
	  z-index: 19;
	  border-top: 1rpx solid #444;
	  // height: 100vh;
	  height: 100%;
  }
  
  // 分类内容
  .cate-content {
    display: flex;
    z-index: 1;
    background: #fff;
    // padding-top: 120rpx;
    padding-top: 94rpx;
	height: 100%;
  }
  
  // 一级分类+二级分类 20
  .cate-left {
    // height: 100%;
    display: flex;
    flex-direction: column; 
    flex: 0 0 26%;
    background: #f8f8f8;
    color: #444;
	  margin-right: 22rpx;
  }
  
  .flex-two{
	  float: left;
	  width: 50%;
  }

  // 资讯中心内容
  .flex-three {
    float: left;
    width: 100%;
	border-bottom: 1px solid #bbbbbb;

    .cate-selected {
      width: 100%;
      height: 200rpx;
      color: #8e908e;
      background-color: #f7f7f7;
      margin-top: 20rpx;
      // padding-top: 70rpx;
      font-size: 45rpx;
      // text-align: center;
      font-weight: 520;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
    }

    .cate-name {
      width: 100%;
      height: 100rpx;
      color: #000000;
      // background-color: #f7f7f7;
      margin-top: 20rpx;
      padding-top: 30rpx;
      font-size: 28rpx;
      text-align: center;
    }
	
	.cate-image{
		// background-color: #1c223b;
		width: 200rpx;
		margin: auto;
		margin-top: 20rpx;
		image{
			height: 200rpx;
			width: 200rpx;
		}
	}
  }
  
  .cate-right {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    // 全部标的
    .cate-right-cont {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      padding-top: 15rpx;
  
      .cate-two-box {
        width: 100%;
        padding: 0 10px;
      }
      // 空白提示
      .empty-content {
        box-sizing: border-box;
        width: 100%;
        padding: 140rpx 50rpx;
        text-align: center;

        .tips {
          font-size: 28rpx;
          color: gray;
          margin: 50rpx 0;
        }

        .empty-icon .image {
          width: 280rpx;
        }

      }
    }
  }
  
  // 左侧一级分类
  .type-nav {
    position: relative;
    height: 180rpx;
    z-index: 10;
    font-size: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  
    &.selected {
      background: #fff;
      color: #cec7bf;
      border-right: none;
      font-size: 28rpx;
      font-weight: bold;
    }

    .cate-left-image{
      position: absolute;
      width: 50rpx;
      height: 50rpx;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
    }
    .cate-left-text{
      position: absolute;
      margin-top: 80rpx;
    }
  }
  
  // 右侧二级分类
  .cate-cont-box {
    margin-bottom: 30rpx;
    padding-bottom: 10rpx;
    background: #fff;
    overflow: hidden;
  
    .name {
      display: block;
      padding-bottom: 30rpx;
      text-align: center;
      font-size: 26rpx;
      color: #444444;
    }

    .cate-img-padding {
      // background-color: #f7f7f7;
      margin-right: 20rpx;
      padding: 16rpx 16rpx 4rpx 16rpx;
    }
	
	.cate-img-padding1{
		height: 280rpx;
		padding: 16rpx 16rpx 4rpx 16rpx;
	}
	
    .cate-img {
      position: relative;
      width: 100%;
      padding-top: 100%;

      .image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 10rpx;
      }
    }
	
	.cate-img1{
		position: relative;
		width: 100%;
		padding-top: 70%;
		.image {
		  width: 212rpx;
		  height: 240rpx;
		  position: absolute;
		  top: 0;
		  left: 25%;
		  border-radius: 10rpx;
		}
	}

    .two-name {
      width: 42%;
      height: 200rpx;
      position: absolute;
      display: inline-block;
      margin-left: 260rpx;
      margin-top: -225rpx;
      font-weight: bold;

      .two-name-name {
        font-size: 26rpx;
        color: #444444;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .two-name-bottom {
        position: absolute;
        top: 170rpx;

        .two-name-type{
          color: #cec7bf;
        }
      }
    }

    .flex-two-data{
      float: left;
      width: 100%;
      margin-bottom: 20rpx;
      background-color: #f7f7f7;

      .cate-two-img-padding {
        width: 250rpx;
        height: 250rpx;
        background-color: #f7f7f7;
        margin-right: 20rpx;
        padding: 16rpx 16rpx 4rpx 16rpx;

        .cate-two-img {
          position: relative;
          width: 100%;
          padding-top: 100%;

          .two-image {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 10rpx;
          }
        }
      }
    }
  
  }
</style>
