<template>
  <view class="container">
    <view class="secondary">
		<!-- 搜索 -->
		<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>
      <!-- 二级分类 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 informationList" :key="index"
                @click="handleSelectNav(index,item.consultingId)">
            <image class="cate-left-image" :src="'./static/tabbar/recommend-cate.png'"></image>
            <text class="cate-left-text">{{ item.consultingName }}</text>
          </view>
        </scroll-view> -->
        <!-- 右侧 二级分类 -->
        <scroll-view class="cate-right" :scroll-top="scrollTop" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
          <view v-if="list" class="cate-right-cont">
            <view class="cate-two-box">
              <view class="cate-cont-box">
                <view class="flex-three">
                  <view class="cate-cont">
                    <view class="cate-cont-title">
                      <text v-if="list.contextTitle">{{list.contextTitle}}</text>
                      <text v-else>无标题信息</text>
                    </view>
					<view class="cate-cont-time" v-if="list.contextTitle">发布时间：{{list.contextCreationTime}}</view>
                    <view class="cate-cont-context">
                      <rich-text :nodes="list.context" @click.stop="previewImage"></rich-text>
                    </view>
					<q-previewImage ref="previewImage" :urls="imgList"></q-previewImage>
                  </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 CategoryApi from '@/api/category'
import Empty from '@/components/empty'
import Secondary from './../components/secondary'
import { rpx2px,base64ToUint8Array} from '@/utils/util'
import readmore from 'utils/json/readmore.json'
// 以下路径需根据项目实际情况填写
import {pathToBase64,base64ToPath} from '@/js_sdk/mmmm-image-tools/index.js'

//分页大小
let limit=4;

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

export default {
  components: {
    Empty,
    Secondary,
  },
  mixins: [MescrollCompMixin],
  data() {
    return {
      // 枚举类
      PageCategoryStyleEnum,
      // 分类列表
      informationList: [],
      // 分类列表
      list: [],
      // list: readmore.data,
      // 分类模板设置
      setting: {},
      // 正在加载中
      isLoading: true,
      // 一级分类：指针
      curIndex: 0,
      //默认显示第一页
      page:1,
      // 列表高度
      scrollHeight: 0,
      // 内容区竖向滚动条位置
      scrollTop: 0,
      // 分类id
      contextId: '',
	  // 图片列表
	  imgList:[]
    }
  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  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 {
	    await this.getGoodsList()
	    await this.getHomeListImage()
	  }
	},
	previewImage(){
		// 富文本全部内容
		let richText = this.list.context
		// 获取 img 标签数组
		let tagsImage = richText.match(/<img[^>]+>/g)
		let base64Arr = []
		for (let i = 0; i < tagsImage.length; i++) {
			tagsImage[i].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
				base64Arr.push(capture)
			})
		}
		// 数组倒序 从第一张开始预览
		// base64Arr = base64Arr.reverse()
		// console.log(base64Arr)
		// 串行,base64转换成临时url
		base64Arr.reduce((promise, path) => promise.then(res => base64ToPath(path).then(base64 => (res.push(base64), res))), Promise.resolve([])).then(res => {
			// 临时url
			this.imgList = res
			this.$nextTick(()=>{
			    this.$refs.previewImage.open(res); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)
			})
		})
		.catch(error => {
			console.error(error)
		})
	},
    // 设置列表内容的高度
    setListHeight() {
      const { windowHeight } = uni.getSystemInfoSync()
      this.scrollHeight = windowHeight - rpx2px(96)
    },
    // 刷新页面
    onRefreshPage() {
      // 记录刷新时间
      lastRefreshTime = new Date().getTime()
      //加载分类数据
      this.getCatList()
    },
    // 一级分类：选中分类
    handleSelectNav(curIndex, consultingId) {
      this.$navTo('pages/category/consulting/list', { consultingId,curIndex })
    },
    // 查询分类 获取列表
    getCatList(){
      const app = this
      CategoryApi.consultingContextInfo(app.contextId).then(res => {
        if (res.resultCode === '00000000') {
          app.list = res.data
        }
      })
    },
    // 资讯中心
    getConsultingContextSelection() {
      const app = this
      // CategoryApi.consultingContextSelection().then(res=>{
      //   if (res.resultCode == '00000000') {
      //     app.informationList = res.data
      //   } else {
      //     app.$error('获取资讯信息失败')
      //   }
      // })
    },
  }
}
</script>

<style>
page {
  background: #fff;
  position: relative;
}
</style>
<style lang="scss" scoped>

.secondary{
  z-index: 19;
  height: 100vh;
}

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

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

// 资讯中心内容
.flex-three {
  float: left;
  width: 100%;

  .cate-cont {
    width: 100%;
    height: 100%;
    padding: 16rpx;
    margin-top: 20rpx;
    margin-right: 60rpx;
    color: #8e908e;
    background-color: #f7f7f7;
    display: block;
    position: relative;

    .cate-cont-context img {
      width: 100%;
      height: 100%;
      margin-top: 20rpx;
    }
    .cate-cont-title {
      width: 100%;
      border-radius: 10rpx;
      padding: 0rpx 20rpx 0rpx 20rpx;
      color: #0b0b0b;
	  font-size: 30rpx;
      // background-color: #a8a8a8;
      text-align: center;
    }
	.cate-cont-time{
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
  }
}

// 左侧一级分类
.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;
}

  // 搜索
  .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;
        }
      }
    }
  }
</style>
