<template>
  <view class="commonPageBox">
    <public-module></public-module>
    <view class="header_box"></view>
    <view class="main_content_box">
      <view class="curriculum_box">
        <view
          class="curriculum_item_box"
          v-for="(v, i) in curriculumList"
          @click="handleClickCurriculum(v)"
        >
          <!-- <view class="curriculum_item"> -->
          <image
            :src="v.imgUrl"
            mode="aspectFill"
            class="curriculum_item_img"
          ></image>
          <view class="curriculum_item_name">{{ v.name }}</view>
          <!-- </view> -->
        </view>
      </view>
      <view class="cate_box">
        <view
          class="cate_item_box"
          v-for="(v, i) in cateList"
          @click="handleClickCate(v)"
        >
          <view class="cate_item_border">
            <image
              :src="v.icon"
              mode="aspectFill"
              style="width: 59rpx; height: 59rpx"
            ></image>
          </view>
          <view class="cate_item_name">{{ v.title }}</view>
        </view>
      </view>
      <view class="flash_sale_box notice_box">
        <view class="flash_sale_top">
          <image
            class="miaoShaIcon noticeIcon"
            src="@/static/icon/homePage/notice.png"
            mode="aspectFill"
            style="width: 36rpx; height: 44rpx"
          ></image>
          <u-notice-bar
            :text="noticeList"
            style="background-color: none !important"
            class="miaoShaContent"
            icon=""
            direction="column"
            label="title"
            @click="goNotice"
          >
          </u-notice-bar>
          <!-- <view class="miaoShaContent" style="width: 100%;">
                        
                        {{ miaoShaContent }}
                    
                    
                    </view> -->
        </view>
      </view>

      <view class="flash_sale_box">
        <view class="flash_sale_top">
          <image
            class="miaoShaIcon"
            src="@/static/icon/homePage/miaosha.png"
            mode="aspectFill"
            style="width: 36rpx; height: 44rpx"
          ></image>
          <text class="miaoShaTitle">秒杀</text>
          <view class="miaoShaContent">
            <!-- {{ miaoShaContent }} -->
          </view>
          <image
            class="rightArrowIcon"
            src="@/static/icon/homePage/right_arrow.png"
            mode="aspectFill"
            style="width: 28rpx; height: 18rpx"
          ></image>
        </view>

        <view class="flash_sale_content" style="margin-top: 40rpx">
          <scroll-view scroll-x="true" class="scroll-X" style="">
            <view
              class="scroll-view-item flash_sale_content_item"
              @click="goGoodsDetail(v)"
              v-for="(v, i) in seckillLst"
            >
              <image class="book_image" :src="v.productImages" mode="aspectFit">
              </image>
              <view class="book_name">{{ v.productName }}</view>
            </view>
          </scroll-view>
        </view>
      </view>

      <view class="greenCardBox1 learning_box" v-if="studyList.length > 0">
        <view class="learning_box_top"
          ><view class="learning_top greenCardBoxTop PM_font"
            ><view class="titlebg">正在学习</view>
          </view></view
        >

        <view class="flash_sale_content greenCardBoxContent">
          <scroll-view scroll-x="true" class="scroll-X" style="">
            <!-- studyList -->
            <common-curriculum-list
              imgUrl="image"
              :isScroll="true"
              :isCondition="true"
              :dataList="studyList"
              @hancleClick="goCourseDescription"
              label="title"
            >
              <template slot="labelSlot" slot-scope="slotProps">
                <view class="related_courses_name hidden1">{{
                  slotProps.row.title
                }}</view>

                <!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
              </template>
            </common-curriculum-list>
            <!-- <view class="scroll-view-item flash_sale_content_item content_item"
                            v-for="(v, i) in flashSaleList">
                            <image class="book_image" src="@/static/icon/homePage/miaosha.png" mode="aspectFill">
                            </image>
                            <view class="book_name">中医生理学</view>
                        </view> -->
          </scroll-view>
        </view>
        <view class="learning_box_bottom"></view>
      </view>
      <view class="greenCardBox1 learning_box listening_box">
        <view class="learning_box_top"
          ><view class="learning_top greenCardBoxTop PM_font"
            ><view class="titlebg">欢迎试听</view>
          </view></view
        >

        <view class="flash_sale_content greenCardBoxContent">
          <scroll-view scroll-x="true" class="scroll-X" style="">
            <common-curriculum-list
              imgUrl="image"
              :isCondition="true"
              :dataList="flashSaleList"
              @hancleClick="goCourseDescription"
              label="title"
            >
              <template slot="labelSlot" slot-scope="slotProps">
                <view class="related_courses_name hidden1">{{
                  slotProps.row.title
                }}</view>

                <!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
              </template>
            </common-curriculum-list>
          </scroll-view>
        </view>
        <view class="learning_box_bottom"></view>
      </view>
      <view class="learning_box listening_box bottomBox">
        <view class="item_img" @click="handleGoApp">
          <image src="@/static/tab/bottom1.png" mode="aspectFill"></image>
        </view>
        <view class="item_img">
          <!-- <image src="@/static/tab/bg.png" mode="aspectFill"></image> -->
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "music",
  props: {},
  data() {
    return {
      noticeList: [], //秒杀列表
      seckillLst: [], //秒杀列表

      studyList: [], //正在学习
      dataInfo: {},
      flashSaleList: [], //试听
      miaoShaContent: "",
      cateList: [
        {
          title: "儒",
          url: "/pages/curriculum/cate/index",
          imgUrl: require("@/static/icon/homePage/cate_ru.png"),
          style: {
            width: "62rpx",
            height: "56rpx",
          },
        },
        // {
        // 	title: "释",
        // 	url: "/pages/curriculum/cate/index",
        // 	imgUrl: require("@/static/icon/homePage/cate_shi.png"),

        // 	style: {
        // 		width: "49rpx",
        // 		height: "61rpx",
        // 	},
        // },
        // {
        // 	title: "道",
        // 	url: "/pages/curriculum/cate/index",
        // 	imgUrl: require("@/static/icon/homePage/cate_dao.png"),

        // 	style: {
        // 		width: "59rpx",
        // 		height: "59rpx",
        // 	},
        // },
        {
          title: "医",
          url: "/pages/curriculum/cate/index",
          imgUrl: require("@/static/icon/homePage/cate_yi.png"),

          style: {
            width: "61rpx",
            height: "61rpx",
          },
        },
        {
          title: "美",
          url: "/pages/curriculum/cate/index",
          imgUrl: require("@/static/icon/homePage/cate_mei.png"),

          style: {
            width: "59rpx",
            height: "59rpx",
          },
        },
        {
          title: "文",
          url: "/pages/curriculum/cate/index",
          imgUrl: require("@/static/icon/homePage/cate_wen.png"),

          style: {
            width: "61rpx",
            height: "60rpx",
          },
        },
      ],
      curriculumList: [
        {
          name: "课程设置",
          url: "/pages/courseInformation/index/index",
          // url: "",
          imgUrl: require("@/static/icon/homePage/kcjg.png"),
        },
        {
          name: "我的课程",
          url: "/pages/curriculum/order/index/index",
          // url: "",
          imgUrl: require("@/static/icon/homePage/wdkc.png"),
        },
        {
          name: "吴门之光",
          url: "/pages/medicaldes/medicaldes",
          imgUrl: require("@/static/icon/homePage/wmzg.png"),
        },
      ],

      urlList: {
        list: "app/phoneDoctor.do?toHomePage",
        getSociologyLabels: "sociology/home/getSociologyLabels",
        getUserLateCourseList: "sociology/course/getUserLateCourseList",
        getMarketProductList: "sociology/product/getMarketProductList", //秒杀商品
        getMarketCourseList: "sociology/course/getMarketCourseList", //精彩试听
        getNotice: "common/message/listByPage", //消息
        getCateList: "sociology/home/getSociologyLabels", //消息
      },
    };
  },
  onReady() {},
  onLoad() {},
  async onShow() {
    console.log("at line 287:", this.userInfo);
    this.requestAll();
  },
  async onTabItemTap() {
    this.requestAll();
  },

  methods: {
    ...mapMutations(["setUserInfo"]),
    requestAll() {
      // 获取当前页面的栈
      this.$nextTick(async () => {
        await this.getData();
        await this.getCateList();
        await this.getSociologyLabels();
        await this.getMarketProductList();
        await this.getMarketCourseList();
        await this.getNotice();
      });
    },
    goNotice(index) {
      console.log("at line 297:", this.noticeList[index]);
      // var mynavData = JSON.stringify({
      //   ...this.noticeList[index],
      //   navTitle: this.noticeList[index].title,
      //   title: this.noticeList[index].title,
      // }); // 这里转换成 字符串
      uni.navigateTo({
        url: `/pages/homePage/index/noticeDetail?id=${this.noticeList[index].id}`,
      });
    },
    handleGoApp() {
      if (plus.os.name == "Android") {
        plus.runtime.launchApplication(
          {
            pname: "com.cn.nuttyreading",
          },
          function (e) {
            console.log("Open system default browser failed: " + e.message);
          }
        );
      } else if (plus.os.name == "iOS") {
        // plus.runtime.launchApplication(
        //   {
        //     action: "taobao://",
        //   },
        //   function (e) {
        //     console.log("Open system default browser failed: " + e.message);
        //   }
        // );
      }
    },
    async getData() {
      var that = this;

      this.$http.post(this.urlList.getUserLateCourseList).then(async (res) => {
        console.log(res, "7777777777777777777");

        if (res.code == 0) {
          that.studyList = res.page ? res.page : [];
        }
      });
    },
    async getCateList() {
      var that = this;
      this.$http
        .request({
          url: this.urlList.getCateList,
          method: "POST",
          data: {
            id: 0,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          console.log(res, "7777777777777777777");

          if (res.code == 0) {
            that.cateList = res.labels ? res.labels : [];
          }
        });
    },
    async getNotice() {
      var that = this;
      var data = {
        isBook: 0, //是否是疯子读书
        isMedical: 0, //是否是吴门医述
        isSociology: 1, //是否是众妙之门
      };
      this.$http
        .request({
          url: this.urlList.getNotice,
          method: "POST",
          data: data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          console.log(res, "7777777777777777777");

          var result = res.messages;

          console.log("result at line 332:", result);
          that.noticeList = res.messages ? result : [];
        });
    },
    async getMarketProductList() {
      var that = this;
      this.$http
        .request({
          url: this.urlList.getMarketProductList,
          method: "POST",
          data: {
            id: 1, //这个需要后台提供数值,比如秒杀商品
            limit: 10,
            page: 1,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })

        .then(async (res) => {
          console.log(res, "999");

          that.seckillLst = res.products.records ? res.products.records : [];
          that.$forceUpdate();
        });
    },
    async getMarketCourseList() {
      var that = this;

      this.$http
        .request({
          url: this.urlList.getMarketCourseList,
          method: "POST",
          data: {
            id: 4, //这个需要后台提供数值,比如秒杀商品
            limit: 10,
            page: 1,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })

        .then(async (res) => {
          console.log(res, "7777777777777777777");

          that.flashSaleList = res.courseList.records
            ? res.courseList.records
            : [];
        });
    },
    async getSociologyLabels() {
      var that = this;
      this.$http
        .request({
          url: this.urlList.getSociologyLabels,
          method: "POST",
          data: {
            id: 0,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          console.log(res.labels, "8888");
          that.cateList.forEach((e, i) => {
            var data = res.labels.filter((item) => item.title === e.title);
            console.log("data at line 315:", data);
            if (data.length > 0) {
              that.cateList[i] = {
                ...data[0],
                ...e,
              };
            }
          });
          that.$forceUpdate();
          console.log("this.cateList at line 314:", this.cateList);
        });
    },

    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}`,
      });
    },
    goGoodsDetail(v) {
      console.log(v);
      uni.navigateTo({
        // url: '../bookShop/commodityDetail?id=' + item.id
        url: `/pages/goods/index/index?navTitle=${v.title}&isMiaosha=1&title=${v.title}&id=${v.productId}`,
      });
    },

    handleClickCurriculum(v) {
      console.log(v);
      if (v.url) {
        uni.navigateTo({
          url: v.url,
        });
      } else {
        this.$commonJS.showToast("此功能暂未开放");
      }
    },
    handleClickCate(v) {
      console.log(v);
      uni.navigateTo({
        url: `/pages/curriculum/cate/index?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
      });
    },

    //关闭或开启 音乐
  },
  computed: {
    ...mapState(["userInfo"]),
    timer() {
      return calcTimer(this.userInfo.currentTime);
    },
    overTimer() {
      return calcTimer(this.userInfo.duration);
    },
    playStatus() {
      var playFlag = false;
      this.userInfo.playFlag !== undefined
        ? (playFlag = this.userInfo.playFlag)
        : "";
      console.log(playFlag, "playFlag");
      return playFlag;
    },
  },
  watch: {},
};
//时间换算
function calcTimer(timer) {
  if (timer === 0 || typeof timer !== "number") {
    return "00:00";
  }
  let mm = Math.floor(timer / 60);
  let ss = Math.floor(timer % 60);
  if (mm < 10) {
    mm = "0" + mm;
  }
  if (ss < 10) {
    ss = "0" + ss;
  }
  return mm + ":" + ss;
}
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";
.header_box {
  width: 100%;
  height: 350rpx;

  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background-size: 100% 100%;
  background-image: url("@/static/icon/homePage/header_bg.png");

  .logo {
    width: 146rpx;
    height: 183rpx;
    margin-top: 115rpx;
  }
}

.main_content_box {
  width: 100%;

  padding: 27rpx;
  box-sizing: border-box;
  // padding-top: 75rpx;

  .curriculum_box {
    width: 100%;
    // height: 198rpx;

    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0px 37rpx 17rpx;
    box-sizing: border-box;

    .curriculum_item_box {
      height: 100%;
      display: flex;
      align-items: center;

      .curriculum_item_img {
        width: 39rpx;
        height: 38rpx;
        float: left;
      }

      .curriculum_item_name {
        margin-top: -10rpx;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        font-size: 30rpx;
        color: #001b73;
        margin-left: 21rpx;
        // line-height: 46rpx;
      }
    }
  }

  .cate_box {
    width: 100%;
    height: 198rpx;
    background: $themeColor;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;

    background-size: 100% 100%;
    // background-image: url("@/static/icon/cate_bg.png");
    box-shadow: 0rpx 0rpx 6rpx 0rpx #f9f6ea;
    border-radius: 7rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20rpx 31rpx;
    box-sizing: border-box;

    .cate_item_box {
      min-width: 110rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .cate_item_border {
        width: 75rpx;
        height: 98rpx;
        background-size: 100% 100%;
        background-image: url("@/static/icon/homePage/cate_bg.png");
        border-radius: 4rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          // height: 56rpx;
        }
      }

      .cate_item_name {
        margin-top: 21rpx;
        font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;

        font-weight: normal;
        font-size: 43rpx;
        color: #000000;
        // line-height: 46rpx;
        text-align: center;
        color: #fff;
      }
    }
  }

  .flash_sale_box {
    width: 100%;
    margin-top: 33rpx;
    margin-bottom: 10rpx;

    .flash_sale_top {
      width: 100%;
      height: 61rpx;
      // background: #B7E0E2;
      background-color: rgba(188, 231, 223, 0.3);
      color: rgb(46, 103, 106);
      border-color: rgb(197, 227, 215);
      box-shadow: 0rpx 0rpx 4rpx 0rpx #fcf2f6;

      border-radius: 7rpx;
      padding: 3rpx 18rpx 3rpx 10rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      // margin-bottom: 21rpx;

      .miaoShaIcon {
        margin-right: 16rpx;
      }

      .miaoShaTitle {
        margin-right: 25rpx;

        font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
        font-weight: normal;
        font-size: 35rpx;
        color: #018f89;
        line-height: 46rpx;
      }

      .miaoShaContent {
        width: calc(100% - 172rpx);
        margin-top: 1rpx;
        font-family: Microsoft YaHei;
        font-weight: 600;
        font-size: 21rpx;
        color: #018f89;
        // line-height: 45rpx;
      }
    }
  }

  .flash_sale_content {
    width: 100%;
    display: flex;
    overflow: hidden;
    height: 254rpx;

    .flash_sale_content_item {
      display: inline-block;
      width: 165rpx;

      margin-right: 12rpx;
      overflow: hidden;
    }

    .book_image {
      width: 165rpx;
      height: 192rpx;
      border-radius: 10rpx;
      background-color: #f5f5f5;
    }

    .book_name {
      font-family: MicrosoftYaHei;
      font-weight: 600;
      font-size: 30rpx;
      line-height: 30rpx;
      color: #000000;
      text-align: center;
      margin-top: 18rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.learning_box_top {
  width: 100%;
  height: 40rpx;
  margin: 40rpx 0;
  margin-bottom: 0;
  background-repeat: no-repeat;

  background-size: 100% 100%;
  padding-left: 60rpx;
  background-image: url("@/static/icon/borderTopBg.png");
}
.learning_box_bottom {
  width: 100%;
  margin-top: 0;

  height: 40rpx;
  margin: 40rpx 0;
  background-repeat: no-repeat;

  background-size: 100% 100%;
  padding-left: 60rpx;
  background-image: url("@/static/icon/borderBottomBg.png");
}
.greenCardBox1 {
  margin-top: 80rpx;
  margin-bottom: 120rpx;

  .greenCardBoxTop {
    width: 100%;
    background: linear-gradient(
        130deg,
        rgb(46, 103, 106) 0%,
        rgb(114, 173, 146) 100%
      )
      text;
    text-align: center;
    line-height: 80rpx;
    padding-left: -20rpx;
    display: flex;
    margin-bottom: 60rpx;
    align-items: center;
    justify-content: center;
    // background-color: $themeColor;

    padding: 0 22rpx;
    box-sizing: border-box;
    font-size: 36rpx;
    .titlebg {
      width: 300rpx;
      height: 90rpx;
      text-align: left;
      padding-left: 54rpx;
      margin-top: -16rpx;
      margin-left: -50rpx;
      background-repeat: no-repeat;

      background-size: 100% 100%;
      //   padding-left: 60rpx;
      background-image: url("@/static/icon/homeTitle1.png");
    }

    .userBox {
      display: flex;
      align-items: center;

      .user_img {
        width: 49rpx;
        height: 49rpx;
        border-radius: 100%;
        margin-right: 14rpx;
      }

      .name {
        font-family: MicrosoftYaHei;
        font-weight: 600;
        font-size: 21rpx;
        color: #ffffff;
      }
    }
  }

  .greenCardBoxContent {
    border: 10rpx solid;
    border-radius: 50rpx;
    border-image: linear-gradient(to right, #cdb17a, #ebdbcc) 0.5;
    clip-path: inset(0px round 10rpx);
    animation: huerotate 6s infinite linear;
    filter: hue-rotate(360deg);

    width: 100%;
    display: flex;
    overflow: hidden;
    height: auto;
    padding: 24rpx 19rpx 5rpx;
    box-sizing: border-box;
    margin-top: 60rpx;

    .content_item {
      display: inline-block;
      width: 317rpx;

      margin-right: 26rpx;
      overflow: hidden;
    }

    .book_image {
      width: 317rpx;
      height: 146rpx;
      border-radius: 10rpx;
      // background-color: #919191;
    }

    .book_name {
      font-family: MicrosoftYaHei;
      font-weight: 600;
      font-size: 23rpx;
      color: #000000;
      line-height: 23rpx;
      text-align: left;
      margin-top: 14rpx;
    }
  }

  .right {
    width: 160rpx;
    height: 37rpx;
    // background: #0037EB;
    border-radius: 7rpx;

    font-family: MicrosoftYaHei;
    font-weight: 600;
    font-size: 26rpx;
    color: #ffffff;
    line-height: 37rpx;
    text-align: center;
  }
}

.scroll-X {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

.learning_box {
  // height: 298rpx;

  .learning_user_box {
    display: flex;
    align-items: center;

    .learning_user_img {
      width: 49rpx;
      height: 49rpx;
      border-radius: 100%;
      margin-right: 14rpx;
    }

    .name {
      font-family: MicrosoftYaHei;
      font-weight: 600;
      font-size: 21rpx;
      color: #ffffff;
    }
  }

  .right {
    background-color: #f0ba00;
  }
}

.listening_box {
  // height: 298rpx;

  .right {
    background-color: #0037eb;
  }
}

.commonPageBox {
  // padding-bottom: 50rpx;
  // box-sizing: border-box;
}

.noticeIcon {
  width: 20rpx;
}

.u-notice-bar {
  background-color: transparent !important;
}

.bottomBox {
  width: 100%;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item_img {
    width: 48% !important;
    height: 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
.notice_box {
  border: 2rpx solid rgb(197, 227, 215);

  // background-repeat: no-repeat;

  // background-size: 100% 100%;
  // padding-left: 60rpx;
  // background-image: url("@/static/icon/noticebg.png");
}
</style>
