<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search">
      <view class="search-wrapper">
        <view class="index-search">
          <view class="index-cont-search t-c">
            <text class="search-icon iconfont icon-search"></text>
            <text class="search-text">
              <input type="text" placeholder="请输入关键字" v-model="searchValue">
            </text>
            <button class="search-text-bu" @click="onSearch">搜索</button>
          </view>
        </view>
      </view>
    </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` }">
          <!-- 有数据的时候  -->
          <view v-if="list.length>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-top-rank" :class="rank_bg_arr[idx]">
                    <view class="cate-top-num" :class="rank_font_arr[idx]">{{idx+1}}</view>
                  </view>
                  <view class="cate-img-padding">
                    <view v-if="item.rankingDetails.goodsImage" class="cate-img">
                      <image class="image" mode="scaleToFill" :src="item.rankingDetails.goodsImage"></image>
                    </view>
                  </view>
                  <view class="name">
                    <text class="name-name">{{ item.goodsName }}</text>
                    <view class="name-bottom">
                      <text class="name-price">￥ {{ item.rankingDetails.price }}</text>
                      <text class="name-type">交易类型：{{ item.rankingDetails.goodsEntrust == 1 ? '转让' : '授权'}}</text>
                    </view>
                  </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>

        </scroll-view>

      </view>

    </view>

  </view>
</template>

<script>
import MescrollCompMixin from '@/components/mescroll-uni/mixins/mescroll-comp'
import {PageCategoryStyleEnum} from '@/common/enum/store/page/category'
import * as GoodsApi from '@/api/goods'
import Empty from '@/components/empty'
import {rpx2px, base64ToUint8Array} from '@/utils/util'


// 左侧菜单(固定)
const menus = [
  {id: 'all', name: '标的推荐', type: 0},
  {id: 'rs', name: '销售排行', type: 1},
  {id: 'rd', name: '店铺排行', type: 2},
]

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

export default {
  components: {
    Empty,
  },
  mixins: [MescrollCompMixin],
  data() {
    return {
      searchValue: '',
      // 枚举类
      PageCategoryStyleEnum,
      // 分类列表
      list: [],
      // 分类模板设置
      setting: {},
      // 正在加载中
      isLoading: true,
      // 一级分类：指针
      curIndex: 0,
      //默认显示第一页
      page: 1,
      // 列表高度
      scrollHeight: 0,
      // 内容区竖向滚动条位置
      scrollTop: 0,
      // 菜单
      menus,
      rank_font_arr: ['rank_one', 'rank_two', 'rank_three', 'rank_four', 'rank_five'],
      rank_bg_arr: ['bg_one', 'bg_two', 'bg_three', 'bg_four', 'bg_five']
    }
  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 每间隔5分钟自动刷新一次页面数据
    const curTime = new Date().getTime()
    if ((curTime - lastRefreshTime) > 5 * 60 * 1000) {
      this.onRefreshPage()
    }
  },
  created() {
    // 设置分类列表高度
    this.setListHeight()
  },
  methods: {
    // 搜索
    async onSearch() {
      if (this.searchValue == '') {
        this.$error('请输入搜索关键词');
      } else {
        this.getCatList()
      }
    },

    // 设置列表内容的高度
    setListHeight() {
      const {windowHeight} = uni.getSystemInfoSync()
      this.scrollHeight = windowHeight - rpx2px(96)
    },

    // 刷新页面
    onRefreshPage() {
      // 记录刷新时间
      lastRefreshTime = new Date().getTime()
      //加载分类数据
      this.getCatList()
    },

    // 一级分类：选中分类
    handleSelectNav(index) {
      this.curIndex = index
      this.scrollTop = 0
      this.getCatList()
    },
    // 查询分类 获取列表
    getCatList() {
      let item = menus[this.curIndex]
      let type = item.type
      let param = {
        goods_type: '', //1.文化资源数据,2.文化数字内容
        lbdSet: 1, //1 热门标的推荐 2 交易(销售) 3 点击
        pageIndex: this.page,
        pageRows: 5,
        typeStatus: 1,
      }

      if (type === 1) {
        param.lbdSet = 2
      } else if (type === 2) {
        param.lbdSet = 3
      }
      if (this.searchValue != '') {
        param.goodsName = this.searchValue
      }
      this.bindData(param)
    },
    // 标的详情
    onTargetGoods(gislicode) {
      // this.$toast(goodsId)
      this.$navTo('pages/goods/detail', {gislicode})
    },
    // 绑定数据
    async bindData(param) {
      const app = this
      GoodsApi.getRankingList(param).then(res=>{
        app.list = res.data
      });
    },
  },

}
</script>

<style lang="scss" scoped> // 搜索框
  .search {
    position: fixed;
    float: top;
    top: var(--window-top);
    left: var(--window-left);
    right: var(--window-right);
    z-index: 19;

    .search-wrapper {
      background: #1c223b;
      padding: 0rpx 20rpx 20rpx 20rpx;
    }

    .index-search {
      border-bottom: 0;
      background: #fff;
      border-radius: 50rpx;
      overflow: hidden;
      font-size: 28rpx;
      color: #6d6d6d;
      box-sizing: border-box;
      height: 74rpx;
      line-height: 74rpx;

      .index-cont-search {
        width: 100%;
        font-size: 28rpx;
        background: #f7f7f7;
        display: flex;
        justify-content: center;
        align-items: center;

        .search-icon {
          font-size: 34rpx;
          margin-left: 50rpx;
        }

        .search-text {
          text-align: left;
          float: left;
          margin-left: 20rpx;
          width: 100%;

          input {
            font-size: 20rpx;
          }
        }
        .search-text-bu {
          margin-right: 20rpx;
          color: #ffffff;
          background-color: #1c223b;
          font-size: 20rpx;
          width: 120rpx;
          height: 50rpx;
          text-align: center;
          border-radius: 50rpx;
        }
      }
    }
  }

  //
  .secondary {
    z-index: 19;
    border-top: 1rpx solid #444;
    height: 100vh;
  }

  // 分类内容
  .cate-content {
    display: flex;
    z-index: 1;
    background: #fff;
    padding-top: 96rpx;
    height: 100%;
  }

  // 一级分类+二级分类 20
  .cate-left {
    // height: 100%;
    display: flex;
    flex-direction: column;
    flex: 0 0 26%;
    background: #f8f8f8;
    color: #444;
    margin-right: 22rpx;
  }


  .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: 15 rpx;

      .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 {
      width: 42%;
      height: 200rpx;
      position: absolute;
      display: inline-block;
      margin-left: 250rpx;
      margin-top: -225rpx;
      font-weight: bold;

      .name-name {
        font-size: 26rpx;
        color: #444444;
      }

      .name-bottom {
        position: absolute;
        top: 125rpx;

        .name-price{
          color: #fe7730;
          margin-bottom: 10rpx;
        }

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


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

      text {
        display: inline-block;
      }

      .cate-top-rank {
        position: relative;
        float: left;
        z-index: 9999;
        width: 0;
        height: 0;
        border-right: 50px solid transparent; /* 控制三角形的大小 */

        .cate-top-num {
          float: left;
          margin-top: -80rpx;
          margin-left: 23rpx;
          font-family: 'Impact';
          font-size: 28rpx;
          font-weight: 900;
        }
        .rank_one{
          color: #e99d42;
        }
        .rank_two{
          color: #93d2f3;
        }
        .rank_three{
          color: #9b7d31;
        }
        .rank_four{
          color: #93d2f3;
        }
        .rank_five{
          color: #93d2ef;
        }
      }
      .bg_one {
        border-top: 50px solid #febd45; /* 控制三角形的颜色 */
      }
      .bg_two {
        border-top: 50px solid #b4fdff; /* 控制三角形的颜色 */
      }
      .bg_three {
        border-top: 50px solid #cba43f; /* 控制三角形的颜色 */
      }
      .bg_four {
        border-top: 50px solid #10476e; /* 控制三角形的颜色 */
      }
      .bg_five {
        border-top: 50px solid #10476e; /* 控制三角形的颜色 */
      }


      .cate-img-padding {
        width: 250rpx;
        height: 250rpx;
        padding: 16rpx 16rpx 4rpx 16rpx;
      }

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

        .image {
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: 10;
          top: 0;
          left: 0;
        }
      }
    }
  }
</style>
