<template>
  <view class="commonPageBox commonDetailPage" style="background-color: #fff">
    <template v-show="!screenLoading">
      <z-nav-bar title="教学内容"></z-nav-bar>

      <view
        class="contentBox curriculum_box"
        :style="`height:calc(100% - ${60 + statusBarHeight}px !important;${
          isFullScreen ? 'background:#000' : ''
        }`"
      >
        <view
          :style="`background:#000;height:200px;`"
          v-if="videoArray.length > 0"
        >
          <common-video
            :isfresh="isfresh"
            v-if="isfresh"
            :secondCountDown="secondCountDown"
            @handleFresh="handleFresh"
            @changeScreen="changeScreen"
            @changeScreenLoading="changeScreenLoading"
            ref="commonVideo"
            :currentVideoId="currentVideoId"
            :currentVideoIndex="currentVideoIndex"
            :curriculumData="{...curriculumData,curriculumImgUrl:options.curriculumImgUrl}"
          >
          </common-video>
          <view style="color: #fff"></view>
        </view>

        <scroll-view
          scroll-y="true"
          class="scroll-Y"
        >
          <view class="" style="padding: 20rpx; font-size: 34rpx; color: #333"
            >课程：{{ options.navTitle }}
          </view>
          <view style="padding: 20rpx; margin-bottom: 40rpx">
            章节： {{ curriculumData.title }}
          </view>
          <view
            v-if="videoArray.length > 0"
            class="PM_font"
            style="padding: 20rpx; font-size: 40rpx; color: #294a97"
            >视频教学</view
          >
          <view class="scroll-view-item">
            <common-curriculum-video
              v-if="videoArray.length > 0"
              :detailInfo="curriculumData"
              :currentVideo="currentVideo"
              :dataList="videoArray"
              @open="changeVideo"
            >
            </common-curriculum-video>
          </view>

          <view
            class="PM_font"
            style="padding: 20rpx; font-size: 40rpx; color: #333"
            >文章简介</view
          >
          <view class="scroll-view-item" style="padding-bottom: 80rpx;">
            <common-rich-detail :detailInfo="{ ...curriculumData, title: '' }">
              <image
                v-if="curriculumData.imgUrl"
                @click="previewImage(curriculumData.imgUrl)"
                :src="curriculumData.imgUrl"
                mode="widthFix"
                class="headImage"
              ></image>
            </common-rich-detail>
          </view>
        </scroll-view>
        <p class="aui-text-danger">
          本课程版权归天津众妙之门科技有限公司所有，翻版必究!
        </p>
      </view>
    </template>

    <view
      style="
        background-color: red;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      "
      v-show="screenLoading"
    >
    </view>
  </view>
</template>

<script>
import courseDescription from "@/pages/component/commonComponents/list";
import curriculumMp3 from "./mp3Detail.vue";
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  components: {
    courseDescription, //课程说明
    curriculumMp3, //mp3
  },
  data() {
    return {
      secondCountDown: 10,
      isFullScreen: false,
      screenLoading: false,
      isfresh: false,
      currentCateIndex: 0,
      currentVideo: {},
      videoList: {},
      isOpenMp3: false,
      praise: "",
      reward: "",
      commentLst: [],
      correlationiList: [
		  
	  ],
      options: {},
      videoArrayHW: [],
      videoArray: [],
      relatedCoursesList: [], //相关课程
      medicalCasesList: [], //相关医案
      curriculumData: {},
      curriculumInfo: {},
      fdButtonStyle: {
        width: "120rpx",
        "border-color": "#000",
        color: "#000",
        float: "right",
        "margin-right": "20rpx",
        "margin-left": "30rpx",
      },
      modalInfo: {},

      show: false,
      playData: {},
      taiHuClassInfo: {},
      searchValue: "",
      ordersTabs: [
        {
          name: "视频教学",

          type: "1",
        },
        {
          name: "文章简介",
          type: "2",
        },
      ], // 一级分类标题1
      cateList: [], // 一级分类标题1
      twoCateList: [], // 二级分类标题
      dataList: [], // 方剂标题
      allDataList: [], // 方剂标题
      currentStatusIndex: 0, // 当前选中的一级分类

      curTwoCateIndex: 0, // 当前选中的二级分类
      searchList: [], // 搜索结果数组
      showSearchList: false,
      userMes: {}, // 用户信息
      searchDisable: false, // 搜索不可用
      limitShow: false,

      limitTitle: "提示",
      limitContent: "",
      scrollViewHeight: 0,
      urlList: {
        detail: "sociology/course/getCourseCatalogueChapterDetail",
        checkVideo: "sociology/course/checkVideo",
        curriculumInfo: "app/phone.do?getCourseInfo",
      },
      currentVideoId: null,
      currentVideoIndex: null,
      currentSelectVideoId: null,
      currentSelectVideo: {},
    };
  },
  onLoad(options) {
    this.options = options;
    this.getCourseDescriptionData();

    this.screenLoading = false;
    this.currentCateIndex = 0;
  },
  onHide() {},
  onShow() {},
  computed: {
    ...mapState(["userInfo"]),
  },
  watch: {
    currentVideoId() {
      this.currentVideoIndex = this.videoArray.findIndex(
        (e) => e.id == this.currentVideoId,
      );
      console.log(
        "that.currentVideoIndex at line 3401111111111111:",
        this.currentVideoIndex,
      );
    },
  },
  methods: {
    changeScreenLoading(status) {
      this.screenLoading = status;
    },
    changeScreen(status) {
      this.isFullScreen = status;
    },
    ordersTabCLi(data) {
      console.log("i at line 312:", data);
      this.currentCateIndex = data.index;
      this.$forceUpdate();
    },
    handleFresh(status) {
      this.isfresh = status;
      this.$forceUpdate();
    },
    changeVideo(data) {
      if (data.id != this.currentVideo.id) {
        this.isfresh = false;
        this.$nextTick(() => {
          this.currentVideo = data;
          this.currentVideoId = data.id;

          this.isfresh = true;
        });
      }
    },
    hancleModalCancel() {
      this.show = false;
    },
    handleClickMore(v, i, status) {
      this.$set(this.correlationiList[i], "isOpen", status);
    },
    hancleModalConfirm() {
      var data = {
        values: {
          customerType: "D",
          token: uni.getStorageSync("token"),
          customerOid: uni.getStorageSync("customerOid"),
          ...this.taiHuClassInfo,
        },
      };
    },
    async getCourseDescriptionData() {
      this.isfresh = false;
      var data = {
        id: this.options.id,
        load: false,
      };
      var that = this;
      $http.request({
          url: that.urlList.detail,
          method: "POST",
          data,
          header: {
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          that.curriculumData = res.data.detail;
          that.videoArray = res.data.videos;
          if (that.videoArray.length > 0) {
            that.currentVideo = that.videoArray[0];
            that.currentVideoId = that.videoArray[0].id;

            that.isfresh = true;
          }
        });
    },
    getPriceData() {
      var that = this;
      setTimeout(() => {
        that.$nextTick(() => {
          that.$refs.priceDetail.getData();
        });
      }, 100);
    },
    // 检查是有权限使用搜索功能
    checkDisable() {},

    // 获取用户详情
    getUserInfo() {
      // 用户详情
      if (this.userInfo.id != undefined) {
        this.$http.post("book/user/info/" + this.userInfo.id).then((res) => {
          this.userMes = res.user;
          this.getCateList();
        });
      }
    },

    async handleselectCate(item, index) {
      this.dataList = [];
      var data = [];

      var that = this;
      this.$http
        .post(this.urlList.curriculumInfo, {
          customerType: "D",
          token: uni.getStorageSync("token"),
          customerOid: uni.getStorageSync("customerOid"),
          oid: item.coid,
        })
        .then(async (res) => {
          that.curriculumInfo = res.obj;
          that.dataList = res.obj.courseList;
        });

      this.searchValue = "";
      this.searchList = [];
      this.showSearchList = false;

      return data;
    },
    async setOneCateIndex(item, index) {
      this.allDataList = [];

      var that = this;

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

    transformData(inputData) {
      const result = {};
      inputData.forEach((item) => {
        const { letter } = item;
        if (!result[letter]) {
          result[letter] = [];
        }
        result[letter].push(item);
      });
      return result;
    },

    getCateList(id) {
      id ? "" : (id = 0);
      this.twoCateList = [];
      this.curTwoCateIndex = 0;
    },

    // 放大图片
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
			  
          },
        },
      });
    },
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/mixin.scss";
.searchList {
  .item {
    font-size: 28rpx;
    padding: 20rpx;
    border-bottom: 1px solid #dadbde;
  }
}

.scroll-view_H {
  background-color: #fff;
  white-space: nowrap;
  padding: 10rpx;
}

.contentBox {
  height: 100vh;

  .statusList {
    padding: 10rpx;
    box-sizing: border-box;
    justify-content: space-between;

    text {
      text-align: center;
      display: inline-block;
      width: 32%;
      padding: 20rpx 0;
      font-size: 34rpx;
      border-radius: 10rpx;
    }

    .cur {
      background-color: $themeColor;
      color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }

  .twoCateList {
    font-size: 28rpx;
    margin-top: 20rpx;

    .grid-text {
      padding: 10rpx 0rpx;
      text-align: center;
    }

    .cur {
      color: $themeColor;
    }

    // .u-grid-list{border: 0.5px solid #dadbde;}
  }

  .dataList {
    font-size: 26rpx;
    // margin-top: 20rpx;
    // padding: 32rpx 0rpx;
    border-radius: 10rpx;
    background-color: #f8f9fa;
    box-sizing: border-box;

    .JFtitleItem {
      background-color: #ffffff;
      padding: 20rpx 10rpx;
      width: 100%;
      border-bottom: 0.5px solid #f8f9fa;
    }

    .wmzhimg {
      width: 220rpx;
      height: 220rpx;
    }
  }
}

.search_box {
  margin: 0 auto;
  overflow: hidden;
  align-items: center;
  width: calc(100% - 10px);
  margin-top: 20rpx;
  margin-bottom: 20rpx;

  .search {
    height: 56upx;
    display: flex;
    width: 86%;
    margin: 0 auto;
    align-items: center;
    padding: 0upx 40upx;
    background-color: #fff;
    border-radius: 20upx;
    box-shadow: 0 0px 10px 1px $themeColor;
  }

  .prompt {
    color: #838383;
    font-size: 24rpx;
  }
}

.flexbox {
  display: flex;
}

.uni-modal .uni-modal__bd {
  text-align: left;
}

.limiTy {
  font-size: 28rpx;
  line-height: 46rpx;
}

.chImage {
  height: 100rpx;
}

.dataList {
  height: 100%;
}

.titleList2 {
  height: calc(100% - 150rpx);
}

.priceDetail {
  height: calc(100% - 180rpx) !important;
  padding: 0rpx 0;
  box-sizing: border-box;
}

.componentPage {
  height: calc(100% - 90rpx) !important;
}

.dateReminder {
  width: 100%;
  font-size: 24rpx;
  text-align: right;
  line-height: 40rpx;
}

.fdButtonBox {
  border: 1rpx solid $themeColor;
  background-color: $themeColor;
  color: #fff;
  // width: 100%;
  float: right;
  padding: 4rpx 14rpx;
  font-size: 24rpx;
  font-weight: 500;
  line-height: 30rpx;
  border-radius: 10rpx;
  box-sizing: border-box;

  // margin-top: 20rpx;
  // display: flex;
  // align-items: center;
}

.headImage {
  // height: 400rpx !important;
}

.commonDetailPage {
}

.curriulum_box {
  margin-top: 20rpx;
  width: 100%;

  .curriulum_title_box {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    background-color: #fff;

    .curriulum_title {
      width: calc(100% - 80rpx);

      font-size: 32rpx;
      line-height: 40rpx;
      padding: 20rpx;
      box-sizing: border-box;
    }
  }
}

/deep/.scroll-view-item:nth-child(2n-1) {
  background-color: transparent !important;
}

.dataList {
  height: auto !important;
}

.small_class_teaching_box {
  width: 100%;
  margin-top: 20rpx;
  background: #b7e0e2;

  .small_class_teaching_top {
    padding: 20rpx 20rpx 0 10rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // background: #EDFCF7;
    color: #8f8e8e;

    // box-shadow: 0px 0px 6rpx 0px #E9DCCC;
    .icon1 {
      width: 50rpx;
      height: 50rpx;
    }

    .small_class_teaching_top_left {
      display: flex;
      align-items: center;
      color: #018f89;

      font-family: MicrosoftYaHei;
    }
  }

  .small_class_teaching_content {
    margin-top: 20rpx;
    // background: #EDFCF7;
    padding-bottom: 10rpx;

    .top {
      padding: 20rpx 20rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 4rpx solid #fff;

      .top_item {
        width: 23%;
        font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
        font-weight: normal;
        font-size: 34rpx;
        color: #018f89;
        line-height: 80rpx;
        background: #cef8ea;
        text-align: center;
        border-radius: 10rpx;
        box-shadow: 0px 0px 6rpx 0px #e9dccc;
      }
    }

    .schedule {
      width: 100%;
      overflow: hidden;
      padding: 20rpx 20rpx;
      box-sizing: border-box;
      align-items: center;
      color: #018f89;

      font-family: MicrosoftYaHei;

      .icon_box {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 0rpx;

        .icon1 {
          width: 50rpx;
          height: 50rpx;
          margin-right: 10rpx;
        }
      }

      .progress_box {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;

        .progress_icon {
          width: calc(100% - 240rpx);
        }

        .icon1 {
          width: 60rpx;
          height: 60rpx;
          margin: 0 20rpx;
        }

        .icon2 {
          width: 140rpx;
          height: 100rpx;
          position: absolute;
          right: 0;
          // margin-top: -20rpx;
        }
      }
    }
  }
}

.related_courses_box {
  background-color: #fff;

  .small_class_teaching_content {
    padding: 10rpx 20rpx;
    box-sizing: border-box;
  }
}

.related_courses_name {
  display: inline-block;
  width: calc(100% - 150rpx) !important;

  .aui-text-danger {
    display: inline-block;
    float: right;
  }
}

.curriculum_box {
  .curriculum_title {
    padding: 20rpx 40rpx 0;
    font-size: 38rpx;
    line-height: 66rpx;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 20rpx;
  }
}

.aui-text-danger{
	width:100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center; 
	position: fixed; 
	bottom: 0rpx;
	background: #fff;
}
.curriculum_content {
  background-color: #fff;
  padding-bottom: 40rpx;

  .richDetail {
    height: auto !important;
    margin-bottom: 20rpx;
  }
}

.dianzan_box {
  width: calc(100% - 80rpx);
  margin: 0 auto;
  padding: 20rpx 20rpx;
  color: #6e6e6e;
  font-weight: 600;
  text-align: justify;
  background: #f4fffb;

  border-radius: 10rpx;
  box-shadow: 0px 0px 6rpx 0px #e9dccc;
}

.dashang_box {
  color: #ff5521;
  background: #fff7f4;
  box-shadow: 0px 0px 6rpx 0px rgba(255, 85, 33, 0.4);
}

.correlation_box {
  background-color: #fff;
  padding-bottom: 40rpx;

  .title {
    font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
    font-weight: normal;
    font-size: 40rpx;
    color: #018f89;
  }

  .more {
    font-size: 24rpx;
  }

  .close {
    text-align: center;
    color: #b0b0b0;
    line-height: 40rpx;
    margin-top: 10rpx;
    // padding-bottom: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
