<template>
   
  <view class="container commonPageBox commonDetailPage">
    <z-nav-bar
      title="我的课程"
      bgColor="#3AB3AE"
      fontColor="#fff"
      @backClick="backClick"
      :backState="3000"
    ></z-nav-bar>
    <!-- <u-sticky :offset-top="0">
     
      
    </u-sticky> -->
    <common-anchor-link
      :defaultShowTabs="true"
      v-if="currentCateIndex == 1"
      baseHeight="80"
      ref="commonAnchorLink"
      :allDataList="allDataList"
      :allTabList="allTabList"
      titleKey="title"
      dataListKey="courseList"
      :titleStyle="{}"
      :tabStyle="{
        background: '#f3faf3',
      }"
    >
      <template slot="tabs" slot-scope="slotProps">
        <common-sticky
          label="title"
          itemStyle="width:33%;padding-left: 15px; padding-right: 15px; height: 68rpx;"
          :list="cateList"
          :currentCateIndex="currentCateIndex"
          @handleselectCate="handleselectCate"
        ></common-sticky>
      </template>
      <template slot="otherContent" slot-scope="slotProps">
        <view style="padding-top: 80px" v-if="!$store.state.loadingShow">
          <u-alert
            style="width: 100%; z-index: 10"
            type="warning"
            :title="`尊贵的${
              vip.type == 1 ? '超级' : vip.type == 2 ? '吴门医述' : '众妙之门'
            }VIP会员,您的有效期到 ${
              vip.endTime ? vip.endTime.split(' ')[0] : ''
            }`"
            :show-icon="true"
            v-if="vip.type != 0 && currentCateIndex != 2"
          >
          </u-alert
        ></view>
      </template>

      <template slot="label" slot-scope="slotProps">
        <view class="content_title">{{ slotProps.title }}</view>
      </template>

      <template slot="contentList" slot-scope="slotProps">
        <curriculm-list
          :currentCateIndex="currentCateIndex"
          @refresh="getCourseDescriptionData()"
          :dataList="slotProps.dataList"
          :userInfo="userInfo"
        >
        </curriculm-list>
      </template>
    </common-anchor-link>

    <view
      v-else
      class="wrapper"
      :style="`width:100%;top:  ${45 + statusBarHeight}px !important;`"
    >
      <view
        class="tabs"
        id="tabs"
        :style="{
          top: `${45 + statusBarHeight}px !important`,
        }"
      >
        <common-sticky
          label="title"
          itemStyle="width:33%;padding-left: 15px; padding-right: 15px; height: 68rpx;"
          :list="cateList"
          :currentCateIndex="currentCateIndex"
          @handleselectCate="handleselectCate"
        ></common-sticky>
        <u-alert
          :style="{}"
          style="width: 100%; z-index: 10"
          type="warning"
          :title="`尊贵的${
            vip.type == 1 ? '超级' : vip.type == 2 ? '吴门医述' : '众妙之门'
          }VIP会员,您的有效期到 ${
            vip.endTime ? vip.endTime.split(' ')[0] : ''
          }`"
          :show-icon="true"
          v-if="vip.type != 0 && currentCateIndex != 2"
        >
        </u-alert>
      </view>
      <curriculm-list
        :style="`width:100%;padding:${50 + statusBarHeight}px 10px`"
        :currentCateIndex="currentCateIndex"
        @refresh="getCourseDescriptionData()"
        :dataList="dataList"
        :userInfo="userInfo"
      >
      </curriculm-list>
    </view>
  </view>
</template>

<script>
import curriculmList from "./list.vue";
import { mapState } from "vuex";
export default {
  components: {
    curriculmList, //课程价格
  },
  data() {
    return {
      indexList: [],
      dataList: [],
      allTabList: [],
      itemArr: [],
      distanceList: [],

      timer: null,
      isLeftClick: false,
      isOpenRightButton: true,
      viewid: "cont0",
      viewidIndex: 0,

      openCollapseList: [],
      cateIconList: [],
      fdButtonStyle: {
        width: "120rpx",
        "border-color": "$themeColor",
        color: "$themeColor",
        float: "right",
        "margin-right": "20rpx",
        "margin-left": "30rpx",
      },
      modalInfo: {},
      vip: {},
      show: false,
      playData: {},
      taiHuClassInfo: {},
      searchValue: "",
      // 一级分类标题1
      cateList: [
        {
          title: "我的课程",
          type: 1,
          apiUrl: "sociology/course/getUserCourseBuy",
        },
        {
          title: "正在学习",
          type: 0,
          apiUrl: "sociology/course/getUserCourseStudying",
        },
        {
          title: "过期课程",
          type: 2,
          apiUrl: "sociology/course/getCourseExpire",
        },
      ], // 一级分类标题1
      twoCateList: [], // 二级分类标题

      allDataList: [], // 方剂标题
      currentStatusIndex: 0, // 当前选中的一级分类
      currentCateIndex: 0, // 当前选中的一级分类
      curTwoCateIndex: 0, // 当前选中的二级分类
      searchList: [], // 搜索结果数组
      showSearchList: false,
      userMes: {}, // 用户信息
      selectCurriculum: {}, //
      searchDisable: false, // 搜索不可用
      limitShow: false,
      limitTitle: "提示",
      limitContent: "",
      scrollViewHeight: 0,
      urlList: {
        list: "sociology/course/getMyCourse",
        cancelCollection: "sociology/course/removeUserCourseStudying",
        collection: "sociology/course/addUserCourseStudying",
        getCateList: "sociology/home/getSociologyLabels", //消息
      },
      options: {},
      showTabs: false, // 默认吸顶的tab不显示
      currentTab: -1, // 由于初始化的uview的代码有bug，所以默认是-1，在第一次显示的时候，设置0，自动复位，防止错误
      list: [
        {
          label: "年龄",
          value: "19",
        },
        {
          label: "性别",
          value: "男",
        },
      ],
      distanceArr: [], // 每一个ID对应的scrollTop值
      tabs: [
        {
          id: "#baseInfo",
          name: "基本信息",
        },
        {
          id: "#company",
          name: "公司信息",
        },
        {
          id: "#money",
          name: "财务信息",
        },
        {
          id: "#process",
          name: "运营状况",
        },
        {
          id: "#layer",
          name: "法务部门",
        },
        {
          id: "#people",
          name: "人事部门",
        },
      ],
      isTabChange: false, // 防止在点击tab的时候，页面的滚动导致重复计算、抖动问题
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  // 监听页面滚动
  onPageScroll(event) {
    if (this.currentCateIndex == 1) {
      this.$refs.commonAnchorLink.pageScroll(event);
    }
  },
  async onLoad(options) {
    this.options = options;
    // await this.getUserInfo()
    await this.handleselectCate({ ...this.cateList[0], index: 0 }, 0);
    // this.getCourseDescriptionData();
    //
    // this.getCateList()
  },
  async onShow() {
    await this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.$http.post("common/user/getUserInfo").then((res) => {
        console.log("res at line 505:", res);
        if (res.result.userVip) {
          this.vip = res.result.userVip;
        } else {
          this.vip = { type: 0 };
        }
      });
    },
    close() {
      this.isOpenRightButton = false;
    },
    cancelCollection(row) {
      var that = this;
      this.$http
        .request({
          url: this.urlList.cancelCollection,
          method: "POST",
          data: {
            userId: this.userInfo.id,
            courseId: row.id,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          console.log(res, "7777777777777777777");

          if (res.code == 0) {
            await this.getCourseDescriptionData();
            // that.cateIconList = res.labels ? res.labels : [];
          }
        });
    },
    openCancelCollection(row) {
      this.signShow = true;
      this.selectCurriculum = row;
    },
    handlecollection(row) {
      console.log("row at line 452:", row);
      var that = this;
      this.$http
        .request({
          url: this.urlList.collection,
          method: "POST",
          data: {
            userId: this.userInfo.id,
            courseId: row.id,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          if (res.code == 0) {
            // await this.getCourseDescriptionData();
            // that.cateIconList = res.labels ? res.labels : [];
          }
        });
    },

    hancleModalConfirm() {
      var data = {
        values: {
          customerType: "D",
          token: uni.getStorageSync("token"),
          customerOid: uni.getStorageSync("customerOid"),
          ...this.taiHuClassInfo,
        },
      };
      // $mars.progressBegin('申请中...');
      // $mars.post(customerType, 'applyRelearn', data, function (ret) {
      //     api.hideProgress();

      //     fnLoadDataGrid();
      // });
    },

    goCourseDescription(v) {
      console.log(v);

      uni.navigateTo({
        // url: '../bookShop/commodityDetail?id=' + item.id
        url: `/pages/curriculum/order/curriculum/index?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
      });
    },
    async getCourseDescriptionData() {
      this.allDataList = [];

      this.allTabList = [];

      var data = {};

      var that = this;
      await this.$http
        .request({
          url: this.cateList[1].apiUrl,
          method: "POST",
          data: data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })

        .then(async (res) => {
          console.log("走的我的课程", "88888");
          that.allDataList = [...res.courseList];

          this.allTabList = this.allDataList.map((e) => {
            return { title: e.title };
          });
          setTimeout(async () => {
            await this.$refs.commonAnchorLink.getDistanceArr();
          }, 200);
        });
    },
    getStudyCourse() {
      this.dataList = [];
      var data = {};
      this.$http
        .request({
          url: this.cateList[0].apiUrl,
          method: "POST",
          data: data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })

        .then(async (res) => {
          this.dataList = [...res.courseList];
        });
    },
    getExpireCourse() {
      this.dataList = [];
      var data = {};
      this.$http
        .request({
          url: this.cateList[2].apiUrl,
          method: "POST",
          data: data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })

        .then(async (res) => {
          this.dataList = [...res.courseList];
        });
    },

    // 检查是有权限使用搜索功能
    checkDisable() {
      console.log("点击了");
    },
    // 显示无权限弹窗
    // showNoRights() {
    // 	let that = this
    // 	uni.showModal({
    // 		content: "",
    // 		confirmText: '好的',
    // 		showCancel: false,
    // 		success: function(res) {
    // 			if (res.confirm) {
    // 				// console.log('用户点击确定');
    // 				that.clear()
    // 			}
    // 		}
    // 	})
    // },
    // 获取用户详情

    async handleselectCate(item, index) {
      this.allDataList = [];
      this.allTabList = [];
      this.dataList = [];
      var data = [];
      console.log(item, index, 99999);
      var that = this;
      this.$nextTick(async () => {
        this.currentCateIndex = item.index;
        if (this.currentCateIndex == 1) {
          await this.getCourseDescriptionData();
        } else if (this.currentCateIndex == 0) {
          await this.getStudyCourse();
        } else if (this.currentCateIndex == 2) {
          await this.getExpireCourse();
        }
      });

      this.searchValue = "";
      this.searchList = [];
      this.showSearchList = false;
      // if (index != 2) {

      // uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
      // 	var height = rect.height
      // 	console.log('元素高度：',);

      // }).exec();

      // } else {
      // 	this.getJFList(dictType)
      // }

      return data;
    },
    async setOneCateIndex(item, index) {
      this.allDataList = [];
      console.log(index, 99999);
      var that = this;

      // if(this.userMes.tgdzPower == 0){
      // 	let that = this
      // 	uni.showModal({
      // 		content: "购买 针灸六经法要上册和下册 后方可使用此功能",
      // 		confirmText: '好的',
      // 		showCancel: false,
      // 		success: function(res) {
      // 			if (res.confirm) {
      // 				// console.log('用户点击确定');
      // 			}
      // 		}
      // 	})
      // 	return
      // }
      // if(item.title == "时辰取穴"){
      // 	uni.navigateTo({
      // 		url: "../timeAcupoint/timeAcupoint"
      // 	})
      // 	return
      // }

      this.currentStatusIndex = index;
      // this.currentCateIndex = 0

      this.searchValue = "";
      this.searchList = [];
      this.showSearchList = false;
      this.$nextTick(async () => {
        await that.getCourseDescriptionData();

        this.$forceUpdate();
      });

      // this.handleselectCate(this.cateList[this.currentCateIndex])
      // if (index != 2) {

      // uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
      // 	var height = rect.height
      // 	console.log('元素高度：',);

      // }).exec();

      // } else {
      // 	this.getJFList(dictType)
      // }
    },
    backClick() {
      if (this.options.backType == "order") {
        uni.switchTab({
          url: "/pages/homePage/index/index",
        });
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    transformData(inputData) {
      const result = {};
      inputData.forEach((item) => {
        const { letter } = item;
        if (!result[letter]) {
          result[letter] = [];
        }
        result[letter].push(item);
      });
      // const finalResult = Object.keys(result).map(key => ({ [key]: result[key] }));
      return result;
    },
    // getJFList(id) {
    // 	$http.request({
    // 		url: "book/prescript/prescriptListForJF",
    // 		method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
    // 		data: {
    // 			loadAnimate: 'none', // 请求加载动画
    // 			'categoryId': id
    // 		},
    // 		header: { //默认 无 说明：请求头
    // 			'Content-Type': 'application/json'
    // 		},
    // 	}).then(res => {
    // 		if (res.code == 0 && res.list.length > 0) {
    // 			this.twoCateList = []
    // 			this.dataList = this.transformData(res.list)
    // 			console.log('JF经方', this.dataList)
    // 		} else {
    // 			this.twoCateList = []
    // 			this.dataList = []
    // 		}
    // 	}).catch(e => {
    // 		this.twoCateList = []
    // 		this.dataList = []
    // 		console.log(e)
    // 	})
    // },

    // 放大图片
    previewImage(url) {
      console.log(url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },
  },
};
</script>

<style lang="scss">
.wrapper {
  background: white;
  position: absolute;
  height: 100vh;
  .header {
    height: 100rpx;
    background: orange;
    .bg {
      width: 100vw;
      height: 200rpx;
    }
  }
  .tabs {
    position: fixed;
    z-index: 970;

    background-color: #fff;
    width: 100vw;
    .tabsStyle {
      box-shadow: 0 2rpx 6rpx 0 rgba(153, 153, 153, 0.2);
      /deep/ {
        .u-tabs {
          box-shadow: 0px 4px 6px 0 rgba(153, 153, 153, 0.2);
        }
      }
    }
  }
  .section {
    width: 100%;
    padding: 0 0rpx;
    box-sizing: border-box;
    .top {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      .title {
        font-size: 40rpx;
        font-family:
          PingFangSC-Semibold,
          PingFang SC;
        font-weight: 600;
        color: #333333;
        margin-left: 30rpx;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: -30rpx;
          width: 14rpx;
          height: 77%;
          top: 10%;
          border-radius: 14rpx;
          background: #00bb84;
        }
      }

      .right {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20rpx;

        .dots {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 33rpx;
          width: 26rpx;
          align-items: center;
          padding: 10rpx 20rpx;
          margin-right: 4rpx;

          .dot {
            width: 9rpx;
            height: 9rpx;
            background: #000000;
            border-radius: 50%;
          }
        }

        .more_menu {
          position: absolute;
          top: 70rpx;
          right: 0;
          z-index: 99;
          background: white;
          padding: 0 20rpx;
          box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
          border-radius: 4rpx;

          .more_menu_item {
            font-size: 30rpx;
            padding: 24rpx 180rpx 24rpx 16rpx;
            white-space: nowrap;
          }

          .more_menu_item:not(:last-child) {
            border-bottom: 1rpx solid #dddddd;
          }
        }
      }
    }

    .content {
      background: #f8f8f9;
      border-radius: 30rpx;
      padding: 32rpx;
      margin-top: 20rpx;

      &_top {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-bottom: 24rpx;

        &_name {
          font-weight: bold;
          color: #333333;
          font-size: 32rpx;
        }

        &_ismySelf {
          background: #eeeeee;
          font-weight: 500;
          color: #999999;
          font-size: 24rpx;
          margin-left: 12rpx;
          padding: 6rpx 18rpx;
          border-radius: 10rpx;
        }
      }

      &_Info {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-bottom: 20rpx;
        margin-top: 20rpx;

        &_item {
          display: flex;
          flex-direction: column;
          flex: 1;
          text-align: center;

          &_label {
            text-align: center;
            font-size: 24rpx;
            font-weight: 300;
            color: #999999;
          }

          &_value {
            font-size: 34rpx;
            font-weight: bold;
            color: #333333;
            margin-top: 14rpx;
          }
        }

        &_item:not(:last-child) {
          position: relative;

          &::after {
            position: absolute;
            content: "";
            width: 1rpx;
            height: 70rpx;
            top: 20rpx;
            right: 0;
            background: #d8d8d8;
          }
        }
      }

      &_Info:not(:last-child) {
        border-bottom: 1rpx solid #d8d8d8;
      }

      &_remark {
        font-weight: 400;
        color: #333333;
        font-size: 24rpx;
        padding-top: 20rpx;
        text-align: justify;
        min-height: 40rpx;
      }

      &_list {
        &_item {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          padding: 20rpx 0;
          border-bottom: 1rpx solid #d8d8d8;

          &_label {
            font-size: 30rpx;
            font-weight: 500;
            color: #00bb84;
            white-space: nowrap;
            width: 180rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }

          &_value {
            font-size: 30rpx;
            font-weight: 400;
            color: #666666;
            flex: 1;
            margin-left: 40rpx;
            align-self: center;
            word-break: break-all;
            text-align: justify;
          }
        }

        &_empty {
          height: 180rpx;
          background: #f8f8f9;
          border-radius: 10rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          &_tip {
            font-size: 20rpx;
            font-weight: 400;
            color: #999999;
            margin-top: 20rpx;
            line-height: 30rpx;
          }

          image {
            width: 64rpx;
            height: 50rpx;
          }
        }

        &_emptyResult {
          height: 240rpx;

          image {
            width: 166rpx;
            height: 166rpx;
          }

          &_tip {
            margin-top: 0;
          }
        }
      }

      &.reset {
        padding: 0;
      }

      &_reportList {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20rpx;

        &_pack {
          width: 100%;
          height: calc(25vw - 30rpx);
          border-radius: 20rpx;
        }

        &_addImage {
          width: 100%;
          height: calc(25vw - 30rpx);
          background: #f8f8f9;
          border-radius: 20rpx;
          // border: 2rpx dashed #bbbbbb;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          &_icon {
            width: 60rpx;
            height: 48rpx;
          }

          &_tip {
            font-size: 20rpx;
            font-weight: 400;
            line-height: 30rpx;
            color: #999999;
            margin-top: 14rpx;
          }
        }
      }
    }

    .content_progress {
      background: initial;
      padding: 0 30rpx;
    }

    .content_result {
      background: initial;
      font-size: 30rpx;
      font-weight: 400;
      color: #666666;
      word-wrap: break-word;
      word-break: normal;
      line-height: 60rpx;
      letter-spacing: 2rpx;
      text-align: justify;
    }

    .content_report {
      background: initial;
      padding: 12rpx 0;
    }
  }

  .section:not(:first-child) {
    margin-top: 20rpx;
  }
}

.content_title {
  width: 100%;
  text-align: center;
  font-size: 30px;
}
/deep/.section:nth-child(1) {
  padding-top: 0 !important;
}
</style>
