<template><page-meta
  :page-font-size="$baseFontSize() + 'px'"
  :root-font-size="$baseFontSize() + 'px'"
></page-meta>
  <view class="componentPage">
    <!-- 公共组件-每个页面必须引入 -->

    <!-- <view class="fixed">
      <view v-if="isOpenRightButton">
        <view class="openBox">
          <block v-for="(v, index) in cateIconList" :key="index">
            <view
              :class="`bg${index} PM_font rightButton ${
                viewid == 'cont' + index ? 'hotButton' : ''
              }`"
              :data-index="index"
              @click="getViewId"
              >{{ v.title }}</view
            >
          </block>
        </view>

        <view
          @click="close"
          class="closeBox"
          style="background-color: #fff; margin-top: 20rpx; width: 100%"
        >
          <image
            src="@/static/icon/close.png"
            mode="widthFix"
            style="width: 50rpx; height: 50rpx"
          ></image
        ></view>
      </view>
      <view class="closeBox" v-else @click="isOpenRightButton = true">
        <image
          src="@/static/icon/open.png"
          mode="widthFix"
          style="width: 50rpx; height: 50rpx"
        ></image>
      </view>
    </view> -->
    <scroll-view
      scroll-y
      :style="`height:calc(100vh - ${(110 + statusBarHeight) * 2}rpx)`"
      class="scroll"
      :scroll-into-view="viewid"
      scroll-with-animation
      @scroll="scrollEvt"
    >
      <view v-for="(v, index) in cateIconList" :key="index" class="right-item">
        <view :id="`cont${index}`" :class="`bg${index} `">
          <view class="cate_item_box">
            <!-- <view class="cate_item_border">
                    <image
                      :src="
                        cateIconList.find((e) => v.title == e.title)
                          .imgUrl
                      "
                      mode="aspectFill"
                      :style="
                        cateIconList.find((e) => v.title == e.title)
                          .style
                      "
                    ></image>
                  </view> -->
            <view
              :class="`cate_item_name ${viewid == 'cont' + index ? 'hot' : ''}`"
              >{{ v.title }}</view
            >
          </view>

          <richDetail :detailInfo="{ content: detailInfo[v.valueName] }">
            <template #richHeadImg>
              <!-- <image :src="detailInfo.imgUrl" v-if="detailInfo.imgUrl" mode="widthFix" class="headImage"></image> -->
            </template>
          </richDetail>
        </view>
      </view>
    </scroll-view>

    <!-- <richDetail :detailInfo="detailInfo">

            <template #richHeadImg>
 <image :src="detailInfo.imgUrl" v-if="detailInfo.imgUrl" mode="widthFix" class="headImage"></image>
           
            </template>
          </richDetail>
           -->

    <!-- <view>{{ detailInfo.content }}</view> -->
  </view>
</template>

<script>
import courseDescription from "@/pages/component/commonComponents/list";
import richDetail from "@/pages/component/commonComponents/richDetail.vue";
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  props: ["type", "oid"],
  components: {
    courseDescription, //课程说明
    richDetail,
  },
  data() {
    return {
      timer: null,
      isLeftClick: false,
      isOpenRightButton: true,
      viewid: "",
      viewidIndex: 0,
      cateIconList: [
        {
          title: "购买须知",
          valueName: "buyRecord",
          url: "/pages/curriculum/cate/index",
          
        },
        {
          title: "使用须知",
          valueName: "useRecord",
          url: "/pages/curriculum/cate/index",
         
        },
        {
          title: "学习次序",
          valueName: "studyRecord",
          url: "/pages/curriculum/cate/index",
          
        },
        {
          title: "超  v",
          valueName: "vipRecord",
          url: "/pages/curriculum/cate/index",
          
        },
      ],
      options: {},
      detailInfo: {},
      playData: {},
      searchValue: "",

      distanceList: [], // 二级分类标题
      twoCateList: [], // 二级分类标题
      dataList: [{}, {}], // 方剂标题
      currentCateIndex: 0, // 当前选中的一级分类
      curTwoCateIndex: 0, // 当前选中的二级分类
      searchList: [], // 搜索结果数组
      showSearchList: false,
      userMes: {}, // 用户信息
      searchDisable: false, // 搜索不可用
      limitShow: false,
      limitTitle: "提示",
      limitContent: "",
      scrollViewHeight: 0,
      urlList: {
        list: "/sociology/course/getSociologyCourseRecord",
      },
    };
  },
  onLoad(options) {
    this.options = options;

    // this.getUserInfo()
    // this.getCateList()
  },
  onShow() {
    this.viewid = "cont0";
    this.viewidIndex = 0;
    this.getData();

    // this.getData()
    // this.getUserInfo()
    // this.getCateList()
  },
  onHide() {
    // this.showSearchList = false
    // this.searchList = []
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    close() {
      this.isOpenRightButton = false;
    },
    getDistanceToTop() {
      //获取右侧各部分距离顶部的距离
      let that = this;
      that.distanceList = [];
      let selectorQuery = uni.createSelectorQuery().in(this);
      const query = uni.createSelectorQuery().in(this);
      query
        .selectAll(".right-item")
        .boundingClientRect((data) => {
          data.forEach(function (rect) {
            that.distanceList.push(rect.top);
          });
          console.log("data at line 180:", data);
          // this.h = data.top+69
        })
        .exec();
    },

    // 元素滚动到顶部时，对应的左侧导航栏变为选中状态
    scrollEvt(e) {
      console.log("e at line 204:", e);
      // 点击左侧导航栏引起的滚动不做判断
      if (this.isLeftClick) {
        this.isLeftClick = false;
        return;
      }
      // // 防抖
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        let scrollTop = e.detail.scrollTop; //滚动的高度
        // 找到位于顶部元素的索引，距离大于滚动高度的第一个元素的上一个元素就是此时位于顶部的元素
        let index = this.distanceList.findIndex((it) => {
          // 滚动条的位置大于元素距离顶部位置的距离时，说明元素已经滑过了顶部
          return it > scrollTop;
        });

        console.log("index at line 218:", index);
        if (index == this.viewidIndex) return;
        this.viewidIndex = index;
        this.viewid = "cont" + index;
      }, 100);
    },

    getViewId(e) {
      this.isLeftClick = true;

      console.log("e at line 88:", e);
      this.viewid = "cont" + e.currentTarget.dataset.index;
      this.viewidIndex = e.currentTarget.dataset.index;
    },
    goCourseDescription(v) {
      uni.navigateTo({
        // url: '../bookShop/commodityDetail?id=' + item.id
        url: `/pages/courseInformation/courseDescription/detail?title=${v.nameCN}&oid=${v.oid}`,
      });
    },
    async getData() {
      console.log(this.$store.state, "88888");
      this.$http
        .request({
          url: this.urlList.list,
          method: "POST",
          data: {},
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          console.log("res at line 178:", res);

          this.detailInfo = res.result;
          await setTimeout(() => {
            this.getDistanceToTop();
          }, 100);

          // socket.init();
        });
    },

    // 放大图片
    previewImage(url) {
      console.log(url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },
    // getSearch() {
    // 	$http.request({
    // 		url: "book/prescript/searchPrescript",
    // 		method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
    // 		data: {
    // 			loadAnimate: 'none', // 请求加载动画
    // 			'keywords': this.searchValue,
    // 			type: this.currentCateIndex + 1
    // 		},
    // 		header: { //默认 无 说明：请求头
    // 			'Content-Type': 'application/json'
    // 		},
    // 	}).then(res => {
    // 		console.log(res, '搜索结果')
    // 		if (res.code == 0 && res.list.length >= 0) {
    // 			this.showSearchList = true
    // 			this.searchList = res.list
    // 		} else {
    // 			this.searchList = []
    // 		}
    // 	}).catch(e => {
    // 		// this.dataList = []
    // 		this.searchList = []
    // 		console.log(e)
    // 	})
    // },
    // search(res) {
    // 	console.log(res, 'res')
    // 	// uni.showToast({
    // 	// 	title: '搜索：' + res,
    // 	// 	icon: 'none'
    // 	// })
    // 	if (res == '') {
    // 		this.showSearchList = false
    // 		this.searchList = []
    // 	} else {
    // 		this.getSearch()
    // 	}

    // },
    // input(res) {
    // 	console.log('----input:', res)
    // 	if (res == '') {
    // 		this.searchList = []
    // 	} else {
    // 		this.getSearch()
    // 	}
    // },
    // clear(res) {
    // 	console.log('----clear:', res)
    // 	// uni.showToast({
    // 	// 	title: 'clear事件，清除值为：',
    // 	// 	icon: 'none'
    // 	// })
    // 	this.searchValue = ''
    // 	this.showSearchList = false
    // },
    // blur(res) {
    // 	// console.log('----blur:', res)
    // 	// if (res == '') {
    // 	// 	this.showSearchList = false
    // 	// 	this.searchList = []
    // 	// } else {
    // 	// 	this.getSearch()
    // 	// }
    // },
    // focus(e) {
    // 	console.log('----focus:')
    // 	// uni.showToast({
    // 	// 	title: 'focus事件，输出值为：' + e.value,
    // 	// 	icon: 'none'
    // 	// })
    // 	// 等于1 就是有权限
    // 	// this.showSearchList = true

    // },
    // cancel(res) {
    // 	uni.showToast({
    // 		title: '点击取消，输入值为：' + res.value,
    // 		icon: 'none'
    // 	})
    // }
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },
};
</script>

<style lang="scss" scoped>
@import '@/style/mixin.scss';
.commonPageBox {
  padding: 40rpx 0;
}
.contentBox {
  .headImage {
    width: 100%;
    height: 100%;
    margin-bottom: 20rpx;
  }
  .detail_title {
    padding: 0 20rpx !important;
  }
  .rich_box {
    padding: 20rpx;
    box-sizing: border-box;
    p {
      display: block;
      text-indent: 2em;
      letter-spacing: 2px !important;
      line-height: 46rpx;
    }
  }
}

.fixed {
  position: fixed;
  bottom: 10%;
  right: 10rpx;
  z-index: 1;

  overflow: hidden;
}

.openBox view {
  width: 160rpx;
  border-bottom: 1rpx solid #309995;
}
.openBox view:nth-last-child(1) {
  border: none !important;
}
.openBox {
  background-color: #B7E0E2;
  border: 2rpx solid #eee;
  width: 160rpx;
  line-height: 80rpx;
  box-shadow: 0 0px 10rpx 2px $themeColor;
  border-radius: 10rpx;
}
.scroll {
}

.scroll view {
  //   width: 100%;
  //   height: 1000rpx;
}
.rightButton {
  // background-color: #fff;
  font-size: 34rpx;
  text-align: center;
  // color: $themeColor;
}
.cate_item_box {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;

  padding: 0 20rpx;
  .cate_item_border {
    width: 60rpx;
    height: 78rpx;
    // padding: 10rpx;
    background-size: 100% 100%;
    // background-image: url("@/static/icon/homePage/cate_bg.png");
    border-radius: 4rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      // height: 56rpx;
    }
  }

  .cate_item_name {
    padding-top: 60rpx;
    width: 100%;
    // margin-left: 21rpx;
    font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
    font-weight: 500;
    // font-weight: normal;
    font-size: 52rpx;
    color: #000000;
    line-height: 80rpx;
    text-align: center;
  }
}
.hot {
  color: $themeColor !important;
}
.hotButton {
  background-color: $themeColor;
  color: #fff !important;
}
.closeBox {
  width: 80rpx;
  height: 80rpx;
  background-color: #fff;
  border-radius: 80rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 0px 10rpx 1px $themeColor;
  justify-content: center;
  overflow: hidden;
  image {
    width: 50rpx;
    height: 50rpx;
  }
}
.richDetail{
  padding: 20rpx;
}
</style>
