<template>
  <view
    class="container commonPageBox commonDetailPage"
    style="height: auto !important"
  >
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <!-- <z-nav-bar :title="pageTitle ? pageTitle : '课程详情'"> -->
    <z-nav-bar title="课程介绍">
      <!-- <view class="curseSet" slot="right" @click="newOnShare">
			<uni-icons type="redo" size="26"></uni-icons><text style="font-size: 26rpx;"></text> 分享课程
		</view> -->
    </z-nav-bar>

    <view class="contentBox commonPageContentBox">
      <u-alert
        v-if="goBuyTitle && isAndorid"
        style="
          background: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
          position: fixed;
          left: 0;
          width: 100%;
          z-index: 10;
        "
        type="warning"
        @click="handleClickGetVip"
        :title="goBuyTitle"
        :show-icon="true"
      >
        <template slot="rightSlot" slot-scope="slotProps">
          <text class="saveBtn vipBtn flexbox buyBtn" v-if="goBuyType == 0">
            立即购买
          </text>
          <text class="flexbox" style="color: #f0f0f0" v-if="goBuyType == 1">
            立即续费
          </text>
          <text class="saveBtn vipBtn flexbox" style="padding: 8rpx;font-size: 24rpx;"  v-if="goBuyType == 2">
            立即升级
          </text>
          <text class="saveBtn vipBtn flexbox" style="padding: 8rpx;font-size: 24rpx;" v-if="goBuyType == 3">
            立即升级
          </text>

          <view> </view>
        </template>
      </u-alert>

      <!--  <scroll-view scroll-y="true" class="scroll-Y"> -->
      <view class="curseImg" style="padding-top: 80rpx">
        <image
          v-if="!course.image"
          src="/static/nobg.jpg"
          mode="widthFix"
        ></image>
        <image v-else :src="course.image" mode="widthFix"></image>
      </view>
      <view class="containerBg1">
        <view class="course_info_box">
          <view class="course_info">
            <view class="flexbox course_title" v-if="course.id">
              <text class="courseTitle title">{{ course.title }}</text>

              <!-- <view class="start_learn_btn PM_font"
								@click="onPageJump('/pages/course/myCourseLearn', course.id)">进入学习</view> -->
            </view>
            <view
              class="containerBg"
              v-if="course.content && course.content != ''"
            >
              <view class="prof">
                <view
                  style="position: relative; display: flex; align-items: center"
                >
                  <view
                    :class="`${isHideCourseInfo ? 'hidden2' : ''}`"
                    style="width: calc(100% - 50rpx); font-size: 30rpx"
                    v-html="course.content"
                  >
                  </view>
                  <text
                    @click="isHideCourseInfo = !isHideCourseInfo"
                    style="
                      position: absolute;
                      bottom: 0;
                      right: 0;
                      color: #838588;
                    "
                  >
                    {{ isHideCourseInfo ? "展开" : "收起" }}
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="containerBg2">
        <!-- 目录 -->
        <view
          :class="[
            'coursePart',
            'flexbox',
            userMsg.vip != 0 ? 'vipBgColor' : '',
          ]"
          v-if="librayList.length > 1"
        >
          <view
            :class="['item', 'flexbox', curId == item.id ? 'active' : '']"
            v-for="(item, index) in librayList"
            :key="index"
            @click="clicklib(item, index)"
          >
            <view class=""
              ><text>{{ item.title }}</text></view
            >
          </view>
        </view>
        <!-- end -->
        <template v-if="librayList[curIndex]">
          <view
            :class="['endBox', userMsg.vip != 0 ? 'vipBgColor' : '']"
            v-if="librayList[curIndex].isBuy == 1 || userMsg.vip != 0"
          >
            <!-- 已经可以观看的情况 -->
            <view class="box">
              <view class="flexbox" v-if="userMsg.vip != 0">
                <!-- vip到期时间 -->
                <text
                  >VIP畅学权益有效期截止到：{{ userMsg.userVip.endTime }}
                </text>
                <!-- <uni-tag type="warning" text="去学习"></uni-tag> -->
              </view>
              <view class="flexbox" v-else>
                <template v-if="librayList[curIndex].startTime == null">
                  <text>当前目录还未开始学习</text>
                </template>
                <template v-else>
                  <!-- 实际购买课程到期时间 -->
                  <text style="line-height: 50rpx"
                    >课程有效期截止到：{{ librayList[curIndex].endTime }}
                  </text>
                  <!-- 自己买的可以续费 -->
                  <text
                    class="xufeiBtn"
                    @click="handleClickGetGoodsList(librayList[curIndex])"
                    >续费</text
                  >
                </template>
              </view>
            </view>
          </view>
          <view v-else style="padding: 20rpx; padding-bottom: 0">
            <view class="libOther">
              <!-- 没有观看权限的时候 -->
              <view class="text">
                您未购买此目录课程或已到期，购买后或开通超级VIP
                即可学习本目录课程
              </view>
              <view class="tag-view flex_box">
                <u-button
                  class="btn"
                  type="warning"
                  size="small"
                  @click="handleClickGetGoodsList(librayList[curIndex])"
                  text="购买课程"
                ></u-button>
                <u-button
                  size="small"
                  v-if="isAndorid"
                  class="btn"
                  type="primary"
                  @click="onPageJump('/pages/mine/vip/index')"
                  text="开通VIP"
                ></u-button>
                <!-- <uni-tag   size="normal" style="margin-left: 20rpx;" text="" type="success" /> -->
              </view>
            </view>
          </view>
        </template>

        <view class="shiting_content">
          <view
            :class="[
              'chapter_content',
              userMsg.vip != 0 ? 'vipchapter_content' : '',
            ]"
            v-if="chapterList.length > 0"
          >
            <view class="vipSee" v-if="userMsg && userMsg.vip != 0">
              <text>VIP畅学权益生效中</text>
            </view>
            <view
              @click="gotoDetail(item, index)"
              class="item"
              v-for="(item, index) in chapterList"
              :key="index"
            >
              <view class="item_videoList">
                <view class="flexbox" style="align-items: center">
                  <view
                    :class="[
                      'textBox',
                      'flex_box',
                      librayList[curIndex].isBuy == 0 ? 'lock' : '',
                    ]"
                  >
                    <text class="hidden1">{{ item.title }}</text>
                    <!-- {{item.isAudition}}-{{librayList[curIndex].isBuy}}-{{userMsg.vip}} -->
                    <uni-tag
                      v-if="
                        item.isAudition == 1 &&
                        librayList[curIndex].isBuy == 0 &&
                        userMsg.vip == 0
                      "
                      style="margin-left: 10rpx"
                      :inverted="true"
                      text="试听"
                      size="mini"
                      type="success"
                    />
                    <template
                      v-if="
                        (librayList[curIndex] &&
                          librayList[curIndex].isBuy == 1) ||
                        userMsg.vip != 0
                      "
                    >
                      <uni-tag
                        v-if="item.isLearned == 0"
                        style="margin-left: 10rpx"
                        :inverted="true"
                        text="未学"
                        size="mini"
                        type="primary"
                      />
                      <uni-tag
                        v-if="item.isLearned == 1"
                        style="margin-left: 10rpx"
                        :inverted="true"
                        text="已学"
                        size="mini"
                        type="success"
                      />
                    </template>
                  </view>
                  <view class="shitingTag">
                    <u-icon
                      v-if="
                        librayList[curIndex].isBuy == 0 &&
                        userMsg.vip == 0 &&
                        item.isAudition == 0
                      "
                      name="lock"
                      color="#258feb"
                      size="28"
                    ></u-icon>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-else>暂无章节内容</view>
        </view>
      </view>
      <view class="completionBg">
        <uni-section
          class="mb-10"
          style="padding: 0 20rpx"
          title="学习进度"
          type="line"
          v-if="librayList.length > 0 && librayList[curIndex].completion > 0"
        >
          <view class="progress-box">
            <progress
              :percent="librayList[curIndex].completion"
              show-info
              stroke-width="3"
            />
          </view>
        </uni-section>
      </view>
      <view class="linkPro" v-if="tjProList.length > 0">
        <uni-section
          style="padding: 0 20rpx"
          class="mb-10 graybg"
          title="相关书籍"
          type="line"
        >
          <!-- <template v-slot:right>
						<span class="more" @click="pageJupm()">查看更多 >></span>
					</template> -->
        </uni-section>
        <view class="list supermarketBox">
          <scroll-view class="scroll-view_H" scroll-x="true">
            <view
              class="item"
              v-for="(item, index) in tjProList"
              :key="index"
              @click="goToGoodsList(item)"
            >
              <view class="imgcontainer">
                <image :src="item.productImages" mode="aspectFit"></image>
              </view>
              <view class="name">
                {{ item.productName }}
              </view>

              <view
                class="price"
                v-if="item.activityPrice && item.activityPrice > 0"
              >
                ￥{{ item.activityPrice }}
              </view>
              <view class="price" v-else> ￥{{ item.price }} </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <view style="background: rgba(255, 255, 255, 0.85) !important">
        <uni-section
          style="padding: 0 20rpx"
          class="mb-10 graybg"
          title="留言板"
          type="line"
        >
          <template v-slot:right>
            <view class="flexbox" style="align-items: center" @click="addSay()">
              <u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
              <text>发布留言</text>
            </view>
          </template>
        </uni-section>
        <view class="liuyanBox">
          <view class="" v-if="sayList.length > 0">
            <commentsList
              :sayList="sayList"
              @support="support"
              @showSayModule="showSayModule"
            >
            </commentsList>
          </view>
          <u-divider v-show="status == 2" text="已加载全部"></u-divider>
          <u-divider v-show="status == 3" text="暂无留言数据"></u-divider>
          <u-divider v-show="status == 1" text="加载中..."></u-divider>
        </view>
      </view>

      <u-popup key="1" :show="pricespop" :round="10" @close="closePup">
        <view class="proListPrice" v-if="proPriceList.length > 0">
          <view class="title"> 请选择 </view>
          <view class="list">
            <view
              :class="['item', curProId == item.productId ? 'active' : '']"
              v-for="(item, index) in proPriceList"
              :key="index"
              @click="choosePrice(item)"
            >
              {{ item.productName }} - ￥{{ item.price }}
            </view>
          </view>
          <view class="tbn flexbox" style="padding-bottom: 20px">
            <view class="saveBtnss gouwuche flexbox" @click="">
              <uni-icons type="cart" size="28" style="color: #666"></uni-icons>
              <text>加入购物车</text>
            </view>
            <view
              style="margin-left: 40rpx"
              class="saveBtnss buybtn flexbox"
              @click="openBuyInfoModal"
            >
              <u-icon name="bag" color="#fff" size="28"></u-icon>
              <text>立即购买</text>
            </view>
          </view>
        </view>
      </u-popup>
      <view>
        <u-back-top
          :scroll-top="scrollTop"
          bottom="150"
          :customStyle="bgiStyle"
          :iconStyle="iconStyle"
        ></u-back-top>
      </view>
      <!-- </view> -->
      <!-- 评论弹出 -->
      <u-popup key="2" :show="sayVisible" :round="10" @close="sayclose">
        <view class="contentBox" style="padding: 20rpx">
          <view class="" v-if="fatherSay.id != undefined">
            <view class="" style="font-size: 26rpx; margin-bottom: 20rpx">
              <text>回复@：{{ fatherSay.user.name }} 的留言</text>
            </view>
          </view>
          <view class="input_addIcon flexbox">
            <view class="editorBox">
              <editor
                id="editor"
                class="ql-container"
                placeholder="~ 和谐社会 友善发言 ~"
                show-img-size
                show-img-toolbar
                show-img-resize
                @statuschange="onStatusChange"
                :read-only="readOnly"
                @ready="onEditorReady"
              >
              </editor>
            </view>
            <view class="icon flexbox">
              <u-icon
                v-show="!showEdit"
                @click="chooseImg"
                name="plus"
                color="#2979ff"
                size="28"
              ></u-icon>
              <u-icon
                v-show="showEdit"
                @click="editEditor"
                name="edit-pen"
                color="#2979ff"
                size="28"
              ></u-icon>
            </view>
          </view>
          <!-- 选择表情还是图片 -->
          <view class="chooseImgType flexbox" v-if="showImgType">
            <view class="emojiBtn item flexbox" @click="addEmoji">
              <view class="">
                <view class="img">
                  <image src="@/static/biaoqing.png" mode="aspectFit"></image>
                </view>
                <view class="ss">
                  <text class="addEmoji">表情</text>
                </view>
              </view>
            </view>
            <view
              @click="checkPermision"
              class="picBtn item flexbox"
              v-show="uploadPicLIst.length < 3"
            >
              <view class="" style="">
                <u-upload
                  @afterRead="addPic"
                  @delete="deletePic"
                  multiple
                  :maxCount="3"
                  width="40"
                  height="40"
                  :previewFullImage="true"
                >
                </u-upload>
              </view>

              <!-- <view class="">
								<uni-icons type="image" size="30" style="color: #666;"></uni-icons>
							</view>							
							<view class="ss">
							<text >图片</text>
							</view> -->
            </view>
          </view>
          <!-- 上传的图片 -->
          <view class="" v-if="uploadPicLIst.length > 0">
            <view class="" style="text-align: right">
              <text style="font-size: 24rpx; color: #999"
                >最多可上传3张图片哦</text
              >
            </view>

            <view class="upimgList flexbox">
              <view
                class="item"
                v-for="(item, index) in uploadPicLIst"
                :key="index"
              >
                <view class="imgbox" style="overflow: hidden">
                  <image
                    @click="previewImage(item.url)"
                    :src="item.url"
                    mode="widthFix"
                  >
                  </image>
                </view>
                <span @click="deletePic(item, index)">×</span>
              </view>
            </view>
          </view>
          <!-- 表情 -->
          <view class="emoji" v-if="showEmoji">
            <!-- <text class="" @click="closeEmoji">关闭</text> -->
            <emotion
              @emotion="handleEmj"
              :height="220"
              :windowWidth="windowWidth"
            >
            </emotion>
          </view>
          <view class="sbmitBox">
            <button @click="submitSay" type="default">发 布</button>
          </view>
        </view>
      </u-popup>
    </view>

    <common-select-goods
      ref="commonSelectGoods"
      :selectGoodsData="selectGoodsData"
      :goodsList="goodsList"
      :buyOptions="buyOptions"
      :customButtonGroup1="customButtonGroup1"
      @selectGoods="handleClickSelectGoods"
      @onHandleClickBuy="
        $refs.commonSelectGoods.close();
        protocolShow = true;
      "
    ></common-select-goods>
    <u-popup :show="protocolShow" mode="center" round="6">
      <view class="popup_box">
        <view class="title">温馨提示</view>
        <view class="content">
          <view class="center">
            用户您好，本软件对于一个用户名及密码仅允许一部电子设备登陆，多部设备使用同一用户名操作软件的行为属于违规操作，发现违规一次将提出警告，再次违规您的用户名将被封号，无法正常登陆，如因此对您使用带来不便，敬请谅解。<br />
            课程购买之后一年内不打开，此一年内不会计算有效学习时间，一年后会自动开始计算有效学习时间。<br />
            本课程一经购买，暂不支持退款，敬请谅解。<br />

            <view style="color: red; font-weight: bold"> 注: </view>
            <view>
              1.手机、pad、电脑均为可登陆电子设备，均有唯一标识码，一个用户名仅允许在一个手机或一个ipad或一个电脑登陆，请根据您的使用习惯自行选择。<br />
              2.如若申请变更登陆设备请联系客服，<br />
              客服电话:13110039505;022-24142321<br />
              客服微信号:yilujiankangkefu<br />
              3.如因违反上述使用规定...概不退款，本公司保留追究用户相关法律责任的权利。<br />
              4.点击“同意”按钮即表示您同意遵守以上条款。
            </view>
          </view>
          <view class="bottom">
            <view class="button_box">
              <u-button
                size="small"
                text="不同意"
                @click="protocolShow = false"
              ></u-button>
              <u-button
                text="同意"
                color="#258feb"
                size="small"
                @click="onHandleClickBuy"
              ></u-button>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <public-module></public-module>
    <uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
      <uni-popup-share @select="haveSelected"></uni-popup-share>
    </uni-popup>
    <z-navigation></z-navigation>
  </view>
</template>

<script>
// import musicPlay from '@/components/music.vue'
import commentsList from "@/components/commentsList.vue";
import emojiList1 from "../../bkhumor-emojiplus/emoji/biaoqin.js";
import emotion from "@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue";
import $http from "@/config/requestConfig.js";
import permission from "@/js_sdk/wa-permission/permission.js";
var clear;
import { mapState } from "vuex";
export default {
  data() {
    return {
      goodsList: [],
      currentCateIndex: 0,
      protocolShow: false,
      ordersTabs: [
        {
          name: "简介",
          value: 0,
        },
        {
          name: "目录",
          value: 1,
        },
        {
          name: "留言板",
          value: 2,
        },
      ],
      isHideCourseInfo: false,
      goBuyTitle: "",
      goBuyType: "",
      playData: {},
      vip: {},
      catalogueId: null,
      fixed: false,
      bgiStyle: {
        background: "#fff",
      },
      iconStyle: {
        fontSize: "40rpx",
        fontWeight: "bold",
        color: "#258feb",
      },
      tjProList: [],
      userMsg: {}, // 用户信息
      scrollTop: 0,
      activeStyle: {
        color: "#333",
        fontWeight: "bold",
        transform: "scale(1.2)",
        // backgroundColor: '#258feb'
      },
      pricespop: false,
      subList: [],
      scrollable: false,
      pageTitle: null,
      courseList: [],
      course: {},
      librayList: [], // 目录列表
      curId: null,
      curIndex: 0,
      proPriceList: [],
      fold: true,
      curProId: null,
      sayVisible: false,
      chapterList: [],
      // 评论
      readOnly: false,
      formats: {},
      htmlContent: "", // 内容
      showEmoji: false,
      showImgType: false,
      showEdit: false,
      showPicsList: false,
      windowWidth: 0,
      uploadPicLIst: [], // 上传的图片列表
      courseId: null,
      sayList: [],
      pPage: 0,
      totalP: 0,
      status: 88,
      loadFlag: false,
      fatherSay: {},
      fatherIndex: null,
      supportFlag: false,
      selectGoodsData: {},

      buyOptions: [
        // {
        // 		icon: 'chat',
        // 		text: '客服'
        // 	},
        // {
        //     icon: 'shop',
        //     text: '店铺',
        //     // info: 2,
        //     infoBackgroundColor: '#007aff',
        //     infoColor: "#f5f5f5"
        // },
        //  {
        // 	icon: 'cart',
        // 	text: '购物车',
        // 	info: 2
        // }
      ],
      customButtonGroup1: [
        {
          with: 200,
          text: "立即购买",
          backgroundColor: "linear-gradient(90deg, #3C77BE 0%,#258feb 100%)",
          color: "#fff",
        },
      ],
      urlList: {
        list: "sociology/course/getCourseDetail",
        goodsList: "sociology/product/getProductListForCourse",
        startStudyForMF: "sociology/course/startStudyForMF",
      },
      isAndorid: true,
      oprateOsName: "",
    };
  },
  //第一次加载
  onLoad(e) {
    // 隐藏原生的tabbar
    uni.hideTabBar();
    this.windowWidth = uni.getSystemInfoSync().windowWidth;
    // this.pageTitle = e.title
    console.log(e, "传入分类id");
    this.getUserInfo();
    this.courseId = e.id;
    // this.getCateList(this.courseId)
    // await this.getData(e.id);
    this.getSayList();
    this.getOS();
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
    if (this.scrollTop > 500) {
      this.fixed = true;
    } else {
      this.fixed = false;
    }
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  //页面显示
  async onShow() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
    console.log("this.courseId", this.courseId);
    await this.getData(this.courseId);
    // #ifdef APP-PLUS
    plus.screen.unlockOrientation();
    plus.screen.lockOrientation("portrait-primary");
    // #endif
  },
  onUnload() {
    this.selectGoodsData = {};
    this.protocolShow = false;
    this.$refs.commonSelectGoods.close();
    // this.showSearchList = false
    // this.searchList = []
  },
  onHide() {
    this.selectGoodsData = {};
    this.protocolShow = false;
    // this.handleClickClose();
    this.$refs.commonSelectGoods.close();
    // this.showSearchList = false
    // this.searchList = []
  },
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    console.log("触底");
    if (this.status != 2 && this.status != 3) {
      this.getSayList();
    }
  },
  components: {
    // musicPlay
    emotion,
    commentsList,
  },
  //方法
  methods: {
    // 获得操作系统
    getOS() {
      let oprateOs = "";
      oprateOs = uni.getSystemInfoSync().platform;
      this.oprateOsName = uni.getSystemInfoSync().platform;
      console.log("oprateOs", oprateOs);
      if (oprateOs == "android") {
        this.isAndorid = true;
      } else {
        this.isAndorid = false;
      }
    },
    async checkPermision() {
      var result = await permission.premissionCheck("CAMERA_EXTERNAL_STORAGE");
      if (result != 1) {
        return false;
      }
    },
    haveSelected(data) {
      console.log(data, " 选择的是");
      if (data.index == 0) {
        // 分享到好友
        uni.share({
          provider: "weixin",
          scene: "WXSceneSession",
          type: 0,
          href: this.$apkUrl,
          title: `${this.course.title}这门课程讲的不错，快来围观吧-吴门医述app`,
          summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
          imageUrl: "static/icon/home_icon_logo.png",
          success: function (res) {
            console.log("success:" + JSON.stringify(res));
          },
          fail: function (err) {
            console.log("fail:" + JSON.stringify(err));
          },
        });
      } else if (data.index == 1) {
        // 分享到朋友圈
        uni.share({
          provider: "weixin",
          scene: "WXSceneTimeline",
          type: 0,
          href: this.$apkUrl,
          title: `${this.course.title}这门课程讲的不错，快来围观吧-吴门医述app`,
          summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
          imageUrl: "static/icon/home_icon_logo.png",
          success: function (res) {
            console.log("success:" + JSON.stringify(res));
          },
          fail: function (err) {
            console.log("fail:" + JSON.stringify(err));
          },
        });
      }
    },
    newOnShare() {
      this.$refs.share.open();
    },
    goToGoodsList(data) {
      if (data.delFlag == -1) {
        this.$commonJS.showToast("商品已下架");
      } else {
        uni.navigateTo({
          // url: '../bookShop/commodityDetail?id=' + item.id
          url: `/pages/goods/index/index?navTitle=''&title=''&id=${data.productId}`,
        });
      }
    },
    handleClickGetVip() {
      uni.navigateTo({
        url: "/pages/mine/vip/index",
      });
    },
    getNumber(num) {
      if (num >= 10) {
        return num;
      } else {
        return `0${num}`;
      }
    },
    //课程详情
    async gotoDetail(v, courseIndex) {
      console.log("准备进入学习页面", v);
      this.currentCateIndex = courseIndex;
      let _myurl = "";
      // if(this.oprateOsName == 'ios'){
      // 	_myurl = '/pages/course/chapterDetail'
      // }else{
      // h5 和安卓
      _myurl = "/pages/course/chapterDetailAndorid";
      // }
      if (
        this.librayList[this.curIndex].isBuy == 1 ||
        v.isAudition == 1 ||
        this.vip.type == "1" ||
        this.vip.type == "2"
      ) {
        let noRecored = false;
        v.isAudition == 1 &&
        this.userMsg.vip == 0 &&
        this.librayList[this.curIndex].isBuy == 0
          ? (noRecored = true)
          : "";
        uni.navigateTo({
          url: `${_myurl}?navTitle=${this.pageTitle}&title=${v.title}&id=${v.id}&conditions=${v.conditions}&noRecored=${noRecored}`,
        });
      } else {
        this.$commonJS.showToast("请先购买课程");
      }
    },
    handleClickSelectGoods(data) {
      this.selectGoodsData = data;
      this.$forceUpdate();
    },
    onHandleClickBuy(e) {
      console.log("this.selectGoodsData at line 589:", this.selectGoodsData);

      var mynavData = JSON.stringify({
        goods: [this.selectGoodsData],
        typeId: 0,
        navTitle: this.course.title,
        title: this.course.title,
        // sourceType: "curriculum",
      }); // 这里转换成 字符串
      uni.navigateTo({
        url: `/pages/goods/order/index?data=${mynavData}`,
      });
      // }
    },
    openBuyInfoModal() {
      this.pricespop = false;
      this.protocolShow = true;
    },
    //获取相关关联课程商品
    handleClickGetGoodsList(v) {
      // console.log("data at line 313:", data);

      if (v.type == 0) {
        //免费

        this.$http
          .request({
            url: this.urlList.startStudyForMF,
            method: "POST",
            data: {
              catalogueId: v.id,
            },
            header: {
              //默认 无 说明：请求头
              "Content-Type": "application/json",
            },
          })
          .then(async (res) => {
            console.log("res at line 493:", res);
            if (res.code == 0) {
              this.getCourseDescriptionData();
              // this.$commonJS.showToast("");
            }
            this.$forceUpdate();
          });
      } else {
        this.$http
          .request({
            url: this.urlList.goodsList,
            method: "POST",
            data: {
              id: v.id,
            },
            header: {
              //默认 无 说明：请求头
              "Content-Type": "application/json",
            },
          })
          .then(async (res) => {
            if (res.productList.length > 0) {
              this.goodsList = res.productList;
              this.selectGoodsData = this.goodsList[0];
              this.$refs.commonSelectGoods.open();
              this.show = true;
            } else {
              this.$commonJS.showToast("此课程暂无购买方式");
            }

            this.$forceUpdate();
          });
      }
    },
    getUserInfo() {
      this.$http.post("common/user/getUserInfo").then((res) => {
        console.log("res at line 505:", res);
        this.userMsg = res.result;
        if (res.result.userVip) {
          this.vip = res.result.userVip;
        } else {
          this.vip = {
            type: 0,
          };
        }
      });
    },
    // 评论
    showSayModule(data) {
      console.log(data, "父级收到值了");
      this.fatherSay = data.item;
      this.fatherIndex = data.index;
      console.log(this.fatherSay, this.fatherIndex, "父级收到值了");
      this.sayVisible = true;
    },
    // 点赞
    support(data) {
      console.log(data, "父级收到值了吗？");
      let _obj = {
        ...data,
      }; // index,index1,val

      if (this.supportFlag) {
        uni.showToast({
          title: "操作太快了，歇一下吧~",
          icon: "non",
        });
        return;
      }
      this.supportFlag = true;
      if (!_obj.val.support) {
        $http
          .request({
            url: "common/courseGuestbook/addCourseGuestbookSupport",
            method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
            data: {
              userId: this.userInfo.id,
              guestbookId: _obj.val.id,
            },
            header: {
              //默认 无 说明：请求头
              "Content-Type": "application/json",
            },
          })
          .then((res) => {
            // console.log('sayList =>', res);
            uni.showToast({
              title: "点赞成功",
              icon: "success",
            });
            if (_obj.index1 == "one") {
              // 一级
              this.sayList[_obj.index].support = true;
              this.sayList[_obj.index].supportCount++;
            }
            if (
              _obj.index1 != undefined &&
              _obj.index1 != null &&
              _obj.index1 != "one"
            ) {
              this.sayList[_obj.index1].Bchildren[_obj.index].support = true;
              this.sayList[_obj.index1].Bchildren[_obj.index].supportCount++;
            }
            this.supportFlag = false;
          })
          .catch((e) => {
            uni.showToast({
              title: "点赞失败",
              icon: "error",
            });
            console.log(e, "e");
            this.supportFlag = false;
          });
      } else {
        $http
          .request({
            url: "common/courseGuestbook/cancelCourseGuestbookSupport",
            method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
            data: {
              userId: this.userInfo.id,
              guestbookId: _obj.val.id,
            },
            header: {
              //默认 无 说明：请求头
              "Content-Type": "application/json",
            },
          })
          .then((res) => {
            // console.log('sayList =>', res);
            uni.showToast({
              title: "取消成功",
              icon: "success",
            });
            if (index1 == "one") {
              // 一级
              this.sayList[_obj.index].support = false;
              this.sayList[_obj.index].supportCount--;
            }
            if (
              _obj.index1 != undefined &&
              _obj.index1 != null &&
              _obj.index1 != "one"
            ) {
              this.sayList[_obj.index1].Bchildren[_obj.index].support = false;
              this.sayList[_obj.index1].Bchildren[_obj.index].supportCount--;
            }
            this.supportFlag = false;
          })
          .catch((e) => {
            uni.showToast({
              title: "取消失败",
              icon: "error",
            });
            this.supportFlag = false;
          });
      }
    },
    // 获取内容
    getHtml() {
      return new Promise((resolve, reject) => {
        this.editorCtx.getContents({
          success: (res) => {
            resolve(res);
          },
          fail: (error) => {
            reject(err);
          },
        });
      });
    },
    // 提交
    async submitSay() {
      // await console.log(this.getHtml())
      let data = await this.getHtml();
      this.htmlContent = data.html;
      console.log(data, this.htmlContent, "this.htmlContent--++++");

      if (
        (this.htmlContent == "" || this.htmlContent == "<p><br></p>") &&
        this.uploadPicLIst.length == 0
      ) {
        uni.showToast({
          icon: "none",
          title: "您未输入内容哦",
        });
        return;
      }

      let images = "";
      if (this.uploadPicLIst.length > 0) {
        let list = this.uploadPicLIst.map((item) => item.url);

        images = list.join();
      }
      console.log(images, "images");
      let forUserId = null;
      let pid = 0;
      forUserId = this.userInfo.id;
      if (this.fatherSay.id != undefined) {
        forUserId = this.fatherSay.user.id;
        pid = this.fatherSay.id;
      }
      console.log(this.fatherIndex, "this.fatherIndex");
      // return false
      $http
        .request({
          url: "common/courseGuestbook/addCourseGuestbook",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            type: 0, //类型0课程1章节
            courseId: this.courseId,
            chapterId: "",
            pid: pid,
            userId: this.userInfo.id,
            forUserId: forUserId,
            content: this.htmlContent, //内容
            images: images, //图片的合集，逗号分隔
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.htmlContent = "";
            this.uploadPicLIst = [];
            this.editorCtx.clear();
            uni.showToast({
              icon: "success",
              title: "提交成功",
            });
          }
          let _obj = {
            ...res.courseGuestbook,
          };
          _obj.children = [];
          _obj.Bchildren = [];
          if (_obj.images != "") {
            _obj.imgList = _obj.images.split(",");
          } else {
            _obj.imgList = [];
          }

          console.log(
            this.sayList[this.fatherIndex],
            "this.fatherSay.cIndex------------"
          );
          if (this.fatherIndex != undefined && this.fatherIndex != null) {
            // 二级
            this.sayList[this.fatherIndex].children.push(_obj);
            this.sayList[this.fatherIndex].Bchildren.unshift(_obj);
          } else {
            // 一级
            this.sayList.unshift(_obj);
            console.log(_obj, "_obj返回的一级");
          }
          this.sayVisible = false;
          this.fatherSay = {};
          this.fatherIndex = null;
          // this.getSayList()
          // 获得的新实例，插入到数组的前面
        })
        .catch((e) => {
          uni.showToast({
            icon: "error",
            title: "提交失败",
          });
          console.log("提交报错", e);
        });
    },
    // 查询课程的评论
    getSayList() {
      this.status = 1;
      if (this.loadFlag) {
        console.log("有未完成的进程");
        return;
      }
      this.loadFlag = true;
      this.pPage++;
      $http
        .request({
          url: "common/courseGuestbook/getCourseGuestbookList",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            limit: 15,
            page: this.pPage,
            courseId: this.courseId,
            chapterId: "",
            userId: this.userInfo.id, //登陆人id，用与判断评论是否被登陆人点赞
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log("sayList =>", res);
          if (res.code == 0) {
            if (res.page.records.length > 0) {
              let myList = res.page.records;
              this.totalP = res.page.total;
              myList.map((item) => {
                if (item.images != "") {
                  item.imgList = item.images.split(",");
                }
                if (item.children.length > 0) {
                  item.Bchildren = item.children.slice(0, 5);
                } else {
                  item.Bchildren = [];
                }
              });
              this.sayList = this.sayList.concat(myList);
              // console.log('this.sayList处理后 =》 ', this.sayList)
              if (res.page.pages > this.pPage) {
                this.status = 0;
              } else {
                this.status = 2;
              }
            } else {
              this.status = 3; // 暂无数据
            }
          }
          this.loadFlag = false;
        })
        .catch((e) => {
          console.log("获取留言失败");
          this.loadFlag = false;
        });
    },
    previewImage(url) {
      console.log(url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },
    deletePic(val, i) {
      console.log("删除图片");
      this.uploadPicLIst.splice(i, 1);
    },
    addPic(e) {
      console.log("添加图片");
      let that = this;
      for (var i = 0; i < e.file.length; i++) {
        //console.log(i,e.file[i].url)
        uni.uploadFile({
          url: this.$baseUrl + "oss/fileoss",
          filePath: e.file[i].url,
          //files:e.file,
          name: "file",
          formData: {},
          success: (res) => {
            that.uploadPicLIst.push({
              url: JSON.parse(res.data).url,
            });
            // this.showPicsList = true
            console.log(that.uploadPicLIst, "that.uploadPicLIst");
          },
          fail: (error) => {
            console.log("上传失败", error);
          },
        });
      }
    },
    // 获得输入的表情数组
    handleEmj(i) {
      console.log(i, "i---------");
      this.editorCtx.insertImage({
        src: i.emotion,
        alt: "图像",
        success: function () {
          console.log("insert image success");
        },
      });
    },
    chooseImg() {
      this.showImgType = true;
      this.showEdit = true;
      uni.hideKeyboard(); // 隐藏键盘
    },
    editEditor() {
      this.showImgType = false;
      this.showEdit = false;
      this.showEmoji = false;
      // 显示键盘
    },
    closeEmoji() {
      this.showEmoji = false;
      this.showEdit = false;
    },
    addEmoji() {
      this.showEmoji = true;
      this.showImgType = false;
      // this.showEdit = true
    },
    onStatusChange(e) {
      const formats = e.detail;
      this.formats = formats;
    },
    readOnlyChange() {
      this.readOnly = !this.readOnly;
    },
    onEditorReady() {
      // // #ifdef MP-BAIDU
      // this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
      // // #endif

      // #ifdef APP-PLUS || MP-WEIXIN || H5
      uni
        .createSelectorQuery()
        .select("#editor")
        .context((res) => {
          this.editorCtx = res.context;
          this.editorCtx.clear();
          this.editorCtx.setContents(res.context);
        })
        .exec();
      // #endif
    },
    // end
    addSay(fIndex, item) {
      this.sayVisible = true;
      if (item) {
        this.fatherSay = item;
        this.fatherSay.cIndex = fIndex;
      }
      console.log("fatherSay =>", this.fatherSay);
    },
    sayclose() {
      this.sayVisible = false;
      this.fatherSay = {};
      this.fatherIndex = null;
    },
    goToLearn() {
      uni.navigateTo({
        url: `/pages/course/myCourseLearn?id=${this.course.id}`,
      });
    },
    async getData(id) {
      this.courseList = [];
      // console.log("at line 1167:", "调用了几次");
      var that = this;

      await $http
        .request({
          url: "sociology/course/getCourseDetail",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            id: id,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          if (res.code == 0) {
            this.course = res.data.course;
            //0 购买 1 续费 2 升级
            // console.log("this.vip.type at line 1045:", this.vip);
            switch (this.vip.type) {
              case 0:
                this.goBuyTitle = "购买VIP,即可免费观看吴门医述所有课程";
                this.goBuyType = 0;
                break;
              case 1:
                var vipName = "";
                if (this.vip.type == 1) {
                  vipName = "超级VIP";
                }

                //超级VIP
                this.goBuyTitle = `尊贵的${vipName},您的有效期到 ${
                  this.vip.endTime && this.vip.endTime.split(" ")[0]
                }`;
                this.goBuyType = 1;
                break;
              case 2:
                var vipName = "";

                if (this.vip.type == 2) {
                  vipName = "吴门医述VIP";
                }
                //超级VIP
                this.goBuyTitle = `尊贵的${vipName},您的有效期到 ${
                  this.vip.endTime && this.vip.endTime.split(" ")[0]
                }`;
                this.goBuyType = 2;
                break;

              case 3:
                //众妙之门
                this.goBuyTitle =
                  "尊贵的众妙之门VIP,升级至超级VIP,即可免费观看吴门医述所有课程";

                this.goBuyType = 2;
                break;
            }
            this.$forceUpdate();
            this.pageTitle = this.course.title;
            this.librayList = [...res.data.catalogues];
            console.log("获取课程详情=》", res.data);
            // for (let i = 0; i < that.librayList.length; i++) {
            //   var list = await that.getChapterList(that.librayList[i]);
            //   console.log("list at line 1222:", list);
            //   that.courseList[i] = [...list];
            //   // console.log("that.courseList at line 1238:", that.courseList);
            // }
            that.$forceUpdate();
            if (this.librayList.length > 0) {
              if (this.catalogueId) {
                this.curId = this.catalogueId;
                let _list = this.librayList;
                _list = _list.map((item) => item.id);
                // console.log('_list过滤后的_list',_list);
                this.curIndex = _list.findIndex(
                  (element) => element == this.catalogueId
                );
                console.log(
                  "其他页面返回来，_list过滤后的curIndex",
                  this.curIndex,
                  this.catalogueId
                );
              } else {
                this.catalogueId = this.librayList[0].id;
                this.curId = this.librayList[0].id;
                this.curIndex = 0;
                console.log("首次加载");
              }

              this.chapterList = await this.getChapterList(this.catalogueId);
              // console.log('目录列表', this.librayList)
              // console.log('外面得到的方法列表', this.chapterList);
              if (
                res.data.shopProductList &&
                res.data.shopProductList.length > 0
              ) {
                this.tjProList = res.data.shopProductList;
              } else {
                this.tjProList;
              }
              // console.log("list at line 1233:", list);
            }
          }
        })
        .catch((e) => {
          console.log(e, "获取目录数据报错");
        });
    },
    goBuy() {
      $http
        .request({
          url: "sociology/product/getProductListForCourse",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            id: this.curId,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code == 0) {
            if (res.productList.length > 0) {
              this.proPriceList = res.productList;
              this.curProId = this.proPriceList[0].productId;
              this.selectGoodsData = this.goodsList[0];
            } else {
              this.proPriceList = [];
            }
          }
        })
        .catch((e) => {
          console.log(e, "获取商品列表报错");
        });

      this.pricespop = true;
    },
    closePup() {
      this.pricespop = false;
      this.proPriceList = [];
    },
    choosePrice(item) {
      this.selectGoodsData = item;
      // console.log(item, 'choosePrice')
      this.curProId = item.productId;
    },
    async chooseChapter(item, index) {
      if (item.isAudition == 1) {
        // 未购买仅试听
        // let data = null
        this.courseList[index].tryListen = await this.getPath(item, index);
        console.log(this.courseList, "1*********");

        // 					uni.navigateTo({
        // 						url: `/pages/course/learn?courseId=${this.course.id}&catalogueId
        // =${this.curId}&chapterId=${item.id}`
        // 					})
      }
    },
    async getPath(item, index) {
      var datas = [];
      await $http
        .request({
          url: "sociology/course/getCourseCatalogueChapterDetail",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            id: item.id,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          datas = res.data.videos;
          console.log(res);
        });
      console.log("datas at line 1300:", datas);
      return datas;
    },
    async clicklib(item, index) {
      if (item.id == this.curId) {
        return;
      }
      this.catalogueId = item.id;
      this.curIndex = index;
      this.curId = item.id;
      this.chapterList = await this.getChapterList(item.id);
    },
    toZhedie() {
      this.fold = true;
    },
    tozhankai() {
      this.fold = false;
    },
    async getChapterList(v) {
      var list = [];
      var that = this;

      await $http
        .request({
          url: "sociology/course/getCourseCatalogueChapterList",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            id: v,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          if (res.code == 0 && res.chapterList.length > 0) {
            list = res.chapterList;
            // console.log("方法里面得到的章节列表:", list);
          } else {
            list = [];
          }
          this.$forceUpdate();
        });
      // console.log("list at line 1375:", list);
      return list;
    },
    // 跳转
    onPageJump(url, id) {
      uni.navigateTo({
        url: `${url}?id=${id}`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";

.completionBg {
  padding: 10rpx 0;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.endBox {
  // @include theme("vipbtnbg");
  color: #333;
  font-size: 26rpx;
  // margin: 20rpx 0;
  padding: 10rpx 20rpx;
  .box {
    // background-color: #258feb;
  }
  .flexbox {
    justify-content: space-between;
  }
}

::v-deep .contentBox {
  .ql-editor {
    font-size: 26rpx;
    font-style: normal;
    min-height: 50rpx !important;
    padding: 20rpx;
  }

  img {
    max-width: 260rpx;
  }

  .u-upload__button {
    margin: 0 auto;
  }
}

.firstLeve {
  padding-bottom: 10rpx;
  border-bottom: 1px solid #f7f8f9;
}

.loadMore {
  text-align: center;
  margin-bottom: 20rpx;

  text {
    color: $themeColor;
    font-size: 26rpx;
  }
}

.boxB {
  margin-left: 60rpx;
  margin-top: 20rpx;
  background-color: #f7f8f9;
  padding-top: 20rpx;
  padding-left: 10rpx;

  .imgbox {
    width: 40rpx !important;
    height: 40rpx !important;
  }

  .contentBox {
    width: calc(100% - 60rpx);
  }

  // .img{	width: 60rpx;
  // 	height: 60rpx;
  // 	image{width:60rpx; height: 60rpx; border-radius: 100%;}
  // }
}

.chooseImgType {
  margin-top: 20rpx;

  .item {
    text-align: center;
    margin-right: 20rpx;
    padding: 10rpx;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    width: 60px;
    border: 1px solid #eee;
    height: 60px;
    text-align: center;
    border-radius: 20rpx;
    background-color: #f4f5f7;

    // background-color: red;
    text {
      font-size: 24rpx;
      display: inline-block;
      width: 100%;
      margin-top: -10rpx;
    }

    .img {
      margin: 0 auto;
    }

    .ss {
      line-height: 20rpx;
      color: #666;
    }
  }
}

.xufeiBtn {
  display: block;
  line-height: 50rpx;
  height: 50rpx;
  padding: 0 10rpx;
  border: 1px solid #333;
  border-radius: 10rpx;
}

.libOther {
  border: 1px solid #fff;
  border-radius: 10rpx;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 10rpx;

  .text {
    font-size: 26rpx;
    line-height: 40rpx;
    margin-bottom: 20rpx;
    color: #fff;
  }
}

.tag-view {
  justify-content: center;
  margin-bottom: 20rpx;

  .btn {
    width: 40%;
    margin: 0 20rpx;
  }
}

.sbmitBox {
  button {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    @include theme("btn_bg");
    color: #fff;
  }
}

.upimgList {
  margin-top: 15px;

  .item {
    border: 1px solid #eee;
    padding: 10rpx;
    margin-right: 20rpx;
    width: 100rpx;
    height: 100rpx;
    position: relative;

    .imgbox {
      height: 100rpx;
      overflow: hidden;
    }

    image {
      width: 100%;
      height: 100rpx;
    }

    span {
      display: inline-block;
      width: 20px;
      height: 20px;
      position: absolute;
      right: -10px;
      top: -10px;
      z-index: 1;
      border: 1px solid #eee;
      border-radius: 20rpx;
      background-color: #fff;
      line-height: 20px;
      font-size: 26rpx;
      text-align: center;
    }
  }
}

.emojiBtn {
  .img {
    width: 50rpx;
    height: 50rpx;

    image {
      width: 100%;
      height: 50rpx;
    }
  }
}

.editorBox {
  width: calc(100vw - 100rpx);
}

.ql-container {
  min-height: 50rpx !important;
  height: auto !important;
  border: 1px solid #eee;
  border-radius: 50rpx;
}

.contentBox {
  padding: 0 0rpx;

  .icon {
    width: 80rpx;
    justify-content: center;
    margin-left: 10rpx;
    height: 80rpx;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 50rpx;
  }

  .addEmoji {
    margin-right: 20rpx;
  }

  .imagesList {
    margin-top: 20rpx;

    .item {
      margin-right: 20rpx;
    }
  }
}

//

.liuyanBox {
  padding: 0 20rpx;
  margin-top: 20rpx;

  .contentBoxfirstLeve {
    width: calc(100% - 70rpx);
  }
}

.vipSee {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 24rpx;
  background-image: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
  // @include theme("btn_bg");
  color: #fff;
  padding: 10rpx;
  border-radius: 0 50rpx 50rpx 0;
}

.leve {
  margin-bottom: 20rpx;

  .imgbox {
    border: 1px solid #eee;
    margin-right: 10rpx;
    width: 60rpx;
    height: 60rpx;
    border-radius: 100%;
    overflow: hidden;
  }

  .contentBox {
    font-size: 24rpx;

    .name {
      color: #999;
      @include toe();
    }

    .content {
      color: #333;
      font-size: 26rpx;
      margin-top: 10rpx;
    }

    .others {
      margin-top: 10rpx;
      color: #999;
      align-items: center;

      .dianzan {
        align-items: center;
      }

      .pinglun {
        align-items: center;
        margin-left: 10rpx;
        margin-right: 20rpx;
      }
    }
  }
}

.showFew {
  .icon_item1 {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
}

.showAll {
  .icon_item {
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  }
}

.fold {
  // 折叠状态
  height: 500rpx;
  overflow: hidden;
}

.linkPro {
  margin-bottom: 20rpx;
  background: rgba(255, 255, 255, 0.85) !important;

  // padding:0 20rpx;
  .more {
    font-size: 24rpx;
    color: #666;
  }
}

.zhezhe {
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  background-position: left bottom;
  background-image: url(@/static/zhedieBg.png);
  background-repeat: repeat-x;

  .icon {
    justify-content: center;
  }

  text {
    color: $themeColor;
    font-size: 26rpx;
  }
}

.graybg {
  // background-color: $containerColor;
}

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

  .item {
    padding: 10rpx;
    overflow: hidden;
    display: inline-block;
    padding-bottom: 0;
    width: 210rpx !important;
    margin-right: 8rpx;
    border-radius: 10rpx;

    image {
      display: block;
      width: 100%;
      height: 260rpx;
    }

    .bookName {
      display: block;
      margin-top: 6rpx;
      color: #666;
      font-size: 24rpx;
      white-space: nowrap;
      overflow-x: hidden;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.proListPrice {
  text-align: center;

  .title {
    font-size: 28rpx;
    margin: 10px 0;
  }

  .list {
    padding: 0 10px;
    padding-bottom: 20rpx;

    .item {
      font-size: 26rpx;
      color: #333;
      margin-bottom: 10rpx;
      line-height: 80rpx;
      border-radius: 50rpx;
      border: 1px solid #eee;
    }

    .item.active {
      color: $themeColor;
      border: 1px solid $themeColor;
    }

    .item:last-child {
      // border-bottom: none
    }
  }

  .tbn {
    justify-content: center;
  }

  .buybtn {
    background-color: #00d8df;
    margin: 0;
    margin-right: 20rpx;

    text {
      color: #fff;
    }
  }

  .saveBtnss {
    align-items: center;
    justify-content: center;
    height: 80rpx;

    // width: 46%;
    overflow: hidden;
    border-radius: 50rpx;

    text {
      padding-left: 10rpx;
      font-size: 28rpx;
    }
  }

  .gouwuche {
    border: 1px solid #666;
    padding-right: 20rpx;

    text {
      // color: #fff;
    }
  }
}

.vipBtn {
  @include theme("vipbtnbg");
  border-radius: 100rpx;
  justify-content: center;
  width: auto;
  padding: 0 20rpx;
  color: #fff;
  margin: 10rpx auto;
}

.buyBtn {
  background: #f42c32 !important;
  // background:
}

.buyBox {
  // position: fixed;
  // z-index: 2;
  // bottom: 100rpx;
  // left: 0;
  @include pleft_right(4px);
  // @include mshadow(10px, 1);
  padding: 20rpx 10rpx;
  width: 100%;
  font-size: 28rpx;
  flex-wrap: wrap;
  background-image: linear-gradient(
    60deg,
    #e0e9f6 0%,
    #ece6fa 30%,
    #d7e8f0 60%,
    #fff 100%
  );
  // background: rgba(255, 255, 255, 0.9);

  .item {
    width: 100%;
    text-align: center;
    line-height: 70rpx !important;
  }

  .tbn {
    align-items: center;
  }

  .buybtn {
    color: #fff;
  }
}

.supermarketBox {
  @include pleft_right(5px);

  .borderbb {
    background-image: linear-gradient(180deg, #468aff 0%, #46c0ff 100%);
    @include pleft_right(10px);
    border-radius: 20rpx;
    @include ptop_bottm(10px);
    @include mshadow(10px, 1);
  }

  .name {
    font-size: 24rpx;
    @include toe();
    margin-top: 10rpx;
  }

  .price {
    // text-align: center;
    font-size: 26rpx;
    font-weight: bold;
    color: $themeColor;
    padding-top: 10rpx;
  }

  .tips {
    margin-top: 10px;
    background-color: #e9f0ff;
    padding: 5px;
    border-radius: 5px;
    font-size: 24rpx;

    text {
      font-weight: bold;
      color: $themeColor;
    }
  }
}

.curseImg {
  image {
    width: 100%;
    height: 500rpx;
  }
}

.courseList {
  position: relative;
  padding-bottom: 50px;
  // background-color: #fff;
  // padding: 0 20rpx;
  background-image: linear-gradient(0deg, #e9f0ff 0%, #fbfbff 100%);

  .item {
    padding: 0 20rpx;
    font-size: 26rpx;
    // min-height: 96rpx;
    overflow: hidden;
    line-height: 96rpx;
    border-bottom: 1px solid #ececec;

    text {
      @include toe();
    }
  }
}

.containerBg1 {
  border-top: 1px solid #fff;
  margin-top: -4rpx;
  //   position: relative;
  z-index: 1;

  border-radius: 30rpx 30rpx 0 0;
  // background-color: #fff;
  //   overflow: hidden;
}

.containerBg {
  // background-color: #f4f7ff;
  //   overflow: hidden;
  padding: 0 20rpx;
  padding-bottom: 40rpx;
}

.buyBox {
}

.vipBgColor {
  // background-color: #8265f9 !important;
}

.coursePart {
  margin-top: 20rpx;
  @include ptop_bottm(10px);
  border-radius: 20rpx 20rpx 0 0;
  @include pleft_right(10px);
  align-items: flex-end;
  // @include mshadow(10px, 1);
  margin-top: 20rpx;
  padding: 0 20rpx;
  padding-top: 20rpx;
  // background-color: $themeColor;

  .item {
    justify-content: center;
    align-items: center;
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 16rpx 0;
    margin-right: 10rpx;
    border-radius: 20rpx 20rpx 0 0;
    border: 1px solid #fff;
    border-bottom: none;
    background-color: rgba(0, 0, 0, 0.4);

    text {
      font-size: 30rpx;
    }
  }

  .item:last-child {
    margin-right: 0;
  }

  .item.active {
    // background-color: #fbfbff;
    background-color: $themeColor;
    color: #fff;
    padding: 20rpx 0 !important;

    text {
      font-size: 36rpx !important;
    }
  }
}

.btnContainer {
  border-top: 1px solid #cac6e1;
  margin-top: 20rpx;
  padding-top: 20rpx;
  justify-content: space-between;

  margin-bottom: 20rpx;
}

.buybtn {
  border-radius: 100rpx;
  justify-content: center;
  width: 150px;
  margin: 10rpx auto;
  @include theme("btn_bg");
}

.priceBox {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20rpx;
  padding: 10px;
  margin-bottom: 10px;
  justify-content: space-between;
  // border-top: 1rpx solid #e7e7e7;
  // border-bottom: 1rpx solid #e7e7e7;
  padding: 10px 0;

  .price {
    width: 100%;
    text-align: center;
  }

  .price:first-child {
    border-right: 1px solid #cac6e1;
  }
}

.prof {
  font-size: 26rpx;
  line-height: 50rpx;
  padding: 10rpx 0;
  color: #333;
  // background-color: #f0f0f0;
  // margin-bottom: 10rpx;
}

.catalogueTitle {
  justify-content: space-between;
  overflow: hidden;
  // background-image: linear-gradient(108deg, #cae9f9 0%, #e1f6fc8c 50%);

  // background-image: linear-gradient(180deg, #cfe0ff 0%, #fff 50%);
  // padding: 0 20rpx;
  font-size: 40rpx;

  .learnBtn {
    margin-bottom: 20rpx;
    width: 150rpx;
    text-align: center;
    border: 1px solid $themeColor;
    color: $themeColor;
    line-height: 60rpx;
    height: 60rpx;
    font-size: 28rpx;
    margin-top: 40rpx;
  }

  .price {
    color: #ff582e;
    font-size: 32rpx;

    i {
      font-style: normal;
      font-size: 60rpx;
      font-weight: bold;
    }
  }

  .title {
    display: block;
    font-size: 30rpx;
    margin-top: 20rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .saveBtn {
    align-items: center;
    justify-content: center;
    height: 80rpx;
    background-color: #00d8df;
    // width: 46%;
    overflow: hidden;
    border-radius: 30rpx;

    text {
      padding-left: 10rpx;
      font-size: 28rpx;
      color: #fff;
    }
  }
}

.curseSet {
  margin-right: 10px;
}

.shitingLIst {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .item {
    align-items: center;
    border: none !important;
    line-height: 30rpx !important;
    margin-right: 20rpx;
  }
}

.flexbox {
  display: flex;
}

.imgcontainer {
  background-color: $imgBg;
}

.fdButtonBox {
  border-radius: 50rpx !important;
  border: 1rpx solid $themeColor;
  background-color: $themeColor;
  color: #fff !important;
  // 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;
}

.fdButtonBoxRed {
  border: 1rpx solid red;
  background-color: red;
  padding: 8rpx 14rpx;
  font-size: 28rpx;
  color: #fff !important;
}

/deep/.u-alert--warning--light {
  background-color: none !important;
}

/deep/.u-alert__text--warning--light {
  color: #fff !important;
}

/deep/.u-alert {
  background: none !important;
}

/deep/.u-icon__icon--warning {
  color: #fff !important;
}
/deep/.uni-tag {
  border-width: 2rpx !important;
}
/deep/.uni-section {
  background: transparent !important;
}

/deep/.uni-section .uni-section-header {
  padding-top: 10rpx !important;
  padding-bottom: 10rpx !important;
}

/deep/.uni-section .uni-section-header {
  padding-left: 0rpx !important;
  //   padding-bottom: 10rpx !important;
}

.chapter_title {
  width: 100%;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  position: relative;

  // justify-content: space-between;
  .top {
    width: 100%;
    display: flex;
    align-items: center;

    .left {
      display: flex;
      align-items: center;
    }

    .right {
      // float: right;
      position: absolute;
      right: 0;
    }
  }

  .not_purchased {
    position: relative;

    .spot {
      width: 8rpx;
      height: 8rpx;
      position: absolute;
      right: -4rpx;
      border-radius: 8rpx;
      background-color: #33435d;
      bottom: -4rpx;
    }

    color: #33435d;
    margin-left: 20rpx;
    font-size: 24rpx;
    padding: 0 20rpx;
    border-bottom: 2rpx dotted #33435d;

    text {
      margin: 0 10rpx;
      letter-spacing: 1rpx;
    }
  }
}

.course_title {
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

.courseTitle {
  width: calc(100% - 220rpx);
  padding: 20rpx;
  font-size: 38rpx;
  font-weight: bold;
  // background-image: url(@/static/bg1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.start_learn_btn {
  width: 200rpx;
  height: 60rpx;
  margin-right: 10rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  font-size: 36rpx;
  background-image: url(@/static/icon/start_learn_btn.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.popup_box {
  padding-bottom: 20rpx;
  width: 85vw;
  overflow: hidden;
  position: relative;
  height: auto;

  .title {
    font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
    font-weight: normal;
    font-size: 46rpx;
    color: $themeColor;
    background-color: #f5f5f5;
    //   line-height: 46rpx;
    padding: 20rpx;
    //   border-leradius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .content {
    font-size: 26rpx;
    letter-spacing: 0.15rpx;
    padding: 20rpx;
    color: #3f3f3f;

    .top {
      margin: 30rpx 0;
    }

    .center {
      line-height: 40rpx;
      // padding:0 10rpx;
    }

    .bottom {
      width: 100%;
      margin-top: 60rpx;

      font-size: 24rpx;
      line-height: 26rpx;
      color: #b0b0b0;
    }
  }

  .button_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;

    .u-button {
      margin-left: 40rpx;
    }

    .u-button:nth-child(1) {
      margin-left: 0;
    }
  }
}

.subLine {
  * {
    display: inline !important;
  }
}

.item_videoList {
  padding: 10rpx 0;
  width: 100%;
  // display: flex;
  align-items: center;
  justify-content: space-between;

  .textBox {
    padding: 20rpx 0;
    align-items: center;
    justify-content: start;
    width: 100%;
    font-size: 28rpx;

    text {
      color: #1e2f3e;
    }
  }

  .textBox.lock {
    width: calc(100% - 60rpx);
  }

  .shitingTag {
    display: flex;
  }
}

.commonDetailPage {
}

.course_info_box {
  margin-bottom: 10rpx;

  // padding:20rpx;
  .course_info {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background: #f2f8ff;
    // border-radius:20rpx;
    overflow: hidden;
  }
}

.catalogue_title {
  background: linear-gradient(130deg, #162a4f 0%, #1e4c7d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 42rpx;
  font-weight: bold;
  letter-spacing: 4rpx;

  // border:4rpx solid #1FB2F8;
  // box-shadow: 0 2px 12px 0 rgba(255,255,255,.1);
  // border-radius:40rpx;
  // color:#fff;
  // width:200rpx;
  // height:70rpx;
  // display:inline-block;
  // padding:10rpx 20rpx;
}

.vipchapter_content {
  position: relative;
  padding-top: 50rpx !important;
  background-color: #f2e6ff !important;
  background-image: none !important;
  border-color: #6429db !important;
}

.chapter_content {
  padding: 20rpx;
  border: 4rpx solid #fffffc;
  background-image: linear-gradient(52deg, #e8f6ff 0%, #e3f2fe 50%);
  box-shadow: 0px 0px 10px 0px #89c8e9 !important;
  border-top-right-radius: 40rpx;
  border-bottom-left-radius: 40rpx;

  .item {
    border-bottom: 1px solid #fff;
  }

  .videoList {
    // padding:0 20rpx;
    display: flex;
    align-items: center;

    // justify-content: space-between;
    .video_item {
      width: 24%;
      font-size: 22rpx;
      margin: 10rpx 0;
      background: rgba(255, 255, 255, 0.85);
      box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.1);
      border-radius: 10rpx;
      padding: 10rpx 20rpx;
      margin-right: 1%;

      color: #333;
      letter-spacing: 2rpx;
    }
  }
}

.line {
  width: 16rpx;
  height: 50rpx;
  border-top-right-radius: 12rpx;
  border-bottom-right-radius: 12rpx;
  margin-right: 20rpx;
  background-image: linear-gradient(108deg, #2786eb 0%, #35a6ff 100%);
}

.containerBg2 {
  // padding-top: 40rpx;
  // margin-top: 100rpx;
  background: linear-gradient(108deg, #c3e7ff 0%, #59bafe 100%) !important;

  .shiting {
    line-height: 100rpx;
    background: linear-gradient(130deg, #4fa1fd 0%, #12f3ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20rpx;
    // background-image: linear-gradient(108deg, #4FA1FD 100%, #4FA1FD 0%);
    // border:4rpx solid #1FB2F8;
    // box-shadow: 0 2px 12px 0 rgba(255,255,255,.1);
    // border-radius:40rpx;
    color: #fff;
    // width:200rpx;
    // height:70rpx;
    // display:inline-block;
    // padding:10rpx 20rpx;
    font-size: 72rpx;
    text-align: center;
  }

  .shiting_content {
    padding: 20rpx;
  }
}
</style>
