<template><page-meta
  :page-font-size="$baseFontSize() + 'px'"
  :root-font-size="$baseFontSize() + 'px'"
></page-meta>
  <view class="commonPageBox" style="">
    <public-module></public-module>

    <view class="header_box">
      <view class="header_bg" :style="`margin-top:${statusBarHeight * 2}rpx`">
        <text class="PM_font" style="color: #7f2000;">太湖公益</text>
      </view>
    </view>
    <!-- <view class="header_box">
      <view class="header_bg" :style="`margin-top:${statusBarHeight * 2}rpx`">
        <text class="PM_font" style="margin-left: 100rpx">太湖公益</text>
      </view>
    </view> -->
    <!-- height: calc(100vh - 100px); -->

    <view
      class="main_content_box"
      :style="`height:calc(100vh - ${(120 + statusBarHeight) * 2}rpx)`"
    >
      <view class="curriculum_box cate_box">
        <view
          :style="`background-image: url('${
            currentCate == i ? v.activeImage : v.image
          }');color:${currentCate == i ? '#fff' : '#3ab3ae'} !important;`"
          class="curriculum_item_box icon_bg"
          v-for="(v, i) in curriculumList"
          @click="handleClickCurriculum(v, i)"
        >
          <!-- <view class="curriculum_item"> -->
          <!-- <image
            :src="v.imgUrl"
            mode="aspectFill"
            class="curriculum_item_img"
          ></image> -->
          <view
            class="curriculum_item_name"
            style="margin-left: 100rpx"
            :style="`;color:${currentCate == i ? '#fff' : v.color} !important;`"
            >{{ 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.imgUrl" mode="aspectFill" :style="v.style"></image>
          </view>
          <view class="cate_item_name">{{ v.title }}</view>
        </view>
      </view> -->

      <view class="flash_sale_box" v-if="currentCate == 0">
        <view class="flash_sale_content">
          <scroll-view
            scroll-y="true"
            class="scroll-Y"
            style="height: 100%;width: 100%;"
            @scrolltolower="onReachBottom1"
          >
            <view
              class="scroll-view-item flash_sale_content_item"
              @click="goGoodsDetail(v)"
              v-for="(v, i) in goodsList"
            >
              <image class="book_image" :src="v.productImages" mode="aspectFit">
              </image>
              <!--   <view class="active_price" v-if="v.activityPrice > 0">
                <text>秒杀</text>
              </view>-->

              <view class="book_content">
                <view class="book_name">{{ v.productName }}</view>
                <view class="bottom">
                  <view class="book_price">
                    <view class="book_price_current">
                      <text class="price_icon">￥</text>
                      <text class="price">{{
                        v.activityPrice > 0 ? v.activityPrice : v.price
                      }}</text></view
                    >
                    <view class="book_price_old" v-if="v.activityPrice > 0"
                      >原价：{{ v.price }}</view
                    >
                  </view>
                  <view class="sumSales">已售：{{ v.sumSales }}</view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <view class="flash_sale_box" v-if="currentCate == 1">
        <view class="flash_sale_content">
          <common-list
            style="height: 100%;width: 100%;"
            noDataIcon="data"
            :isCondition="true"
            @lower="onReachBottom2"
            :pagination="pagination"
            :dataList="noticeList"
            @hancleClick="gotoDetail"
            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-list>
        </view>
      </view>
    </view>
    <!-- <view style="padding-bottom: 20rpx">
        <u-back-top
          :scroll-top="scrollTop"
          bottom="60"
          :customStyle="bgiStyle"
          :iconStyle="iconStyle"
        >
        </u-back-top>
      </view> -->
  </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "music",
  props: {},
  data() {
    return {
      scrollTop: 0,

      bgiStyle: {
        background: "#bbe5d8",
      },
      iconStyle: {
        fontSize: "40rpx",
        fontWeight: "bold",
        color: "#54a966",
      },
      noticeList: [], //秒杀列表
      goodsList: [], //秒杀列表

      studyList: [], //正在学习
      dataInfo: {},
      flashSaleList: [], //试听
      miaoShaContent: "",

      curriculumList: [
        {
          name: "太湖商品",
          url: "/pages/courseInformation/index/index",
          color: "#d93737",
          // url: "",
          image: require("@/static/icon/taihuicon2.png"),
          activeImage: require("@/static/icon/taihuicon2_active.png"),
        },
        {
          name: "太湖之光",
          url: "/pages/curriculum/order/index/index",
          color: "#3ab3ae",
          // url: "",
          image: require("@/static/icon/taihuicon1.png"),
          activeImage: require("@/static/icon/taihuicon1_active.png"),
        },
        // {
        //   name: "吴门之光",
        //   url: "/pages/medicaldes/medicaldes",
        //   imgUrl: require("@/static/icon/homePage/wmzg.png"),
        // },
      ],
      pagination1: {
        // 请求参数
        page: 1, //页码
        limit: 20, //每页显示
        total: 0, //总条数
      },
      pagination: {
        // 请求参数
        page: 1, //页码
        limit: 20, //每页显示
        total: 0, //总条数
      },
      urlList: {
        list: "app/phoneDoctor.do?toHomePage",

        getGoodsList: "common/taihuWelfare/getTaihuWelfareProductList", //秒杀商品

        article: "common/taihuWelfare/getTaihuWelfareArticleList", //消息
      },
    };
  },
  onReady() {},
  onLoad() {},
  async onShow() {
    this.currentCate = 0;

    console.log("at line 287:", this.userInfo);
    this.requestAll();
  },
  async onTabItemTap() {
    this.currentCate = 0;

    console.log("at line 287:", this.userInfo);
    this.requestAll();
  },

  methods: {
    ...mapMutations(["setUserInfo"]),
    onReachBottom1() {
      // 上拉加载
      // 当列表数量不大于或等于总数量，则再次调用接口请求数据
      // if (this.currentCate == 0) {
      if (this.goodsList.length >= this.pagination1.total) return;
      this.pagination1.page++;
      this.getGoodsList();
      // }
    },
    onReachBottom2() {
      // 上拉加载
      // 当列表数量不大于或等于总数量，则再次调用接口请求数据
      // if (this.currentCate == 1) {
      if (this.noticeList.length >= this.pagination.total) return;
      this.pagination.page++;
      this.getArticle();
      // }
    },
    gotoDetail(data) {
      uni.navigateTo({
        url: `/pages/homePage/index/noticeDetail?id=${data.id}&type=taihu`,
      });
    },
    requestAll() {
      // 获取当前页面的栈
      this.$nextTick(async () => {
        this.pagination1 = {
          // 请求参数
          page: 1, //页码
          limit: 20, //每页显示
          total: 0, //总条数
        };
        this.goodsList = [];
        
        await this.getGoodsList();
        // await this.getSociologyLabels();
      });
    },

    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 getArticle() {
      if (this.pagination.page == 1) {
        this.noticeList = [];
      }
      var that = this;
      var data = {
        ...this.pagination,
      };
      this.$http
        .request({
          url: this.urlList.article,
          method: "POST",
          data: data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          console.log(res, "7777777777777777777");
          var that = this;

          // console.log("result at line 332:", result);
          // that.noticeList = res.page ? result : [];

          that.pagination.total = res.page.total;
          if (res.page.total == 0) {
            // this.isLoadingHide = true;
          }
          if (res.code == 0 && res.page && res.page.records.length > 0) {
            that.noticeList = that.noticeList.concat(res.page.records);
            that.$forceUpdate();
          } else {
            //
          }
          // if (res.page.records.length != 10) {
          //   that.status = 1;
          // } else {
          //   that.status = 0;
          // }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    async getGoodsList() {
      var that = this;
    
      this.$http
        .request({
          url: this.urlList.getGoodsList,
          method: "POST",
          data: this.pagination1,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })

        .then(async (res) => {
          console.log(res, "999");
          var that = this;
          if(this.pagination1.page==1){
          this.goodsList = [];
        }
          // console.log("result at line 332:", result);
          // that.noticeList = res.page ? result : [];

          that.pagination1.total = res.page.total;
          if (res.page.total == 0) {
            // this.isLoadingHide = true;
          }
          if (res.code == 0 && res.page && res.page.records.length > 0) {
            that.goodsList = that.goodsList.concat(res.page.records);
            that.$forceUpdate();
          } else {
            //
          }
          // that.goodsList = 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=0&title=${v.title}&id=${v.productId}`,
      });
    },

    async handleClickCurriculum(v, index) {
      this.currentCate = index;
      if (index == 0) {
        this.pagination1 = {
          // 请求参数
          page: 1, //页码
          limit: 20, //每页显示
          total: 0, //总条数
        };

        this.goodsList = [];
        await this.getGoodsList();
      }
      if (index == 1) {
        this.pagination = {
          // 请求参数
          page: 1, //页码
          limit: 20, //每页显示
          total: 0, //总条数
        };

        this.noticeList = [];
        await this.getArticle();
      }
      this.$forceUpdate();
      console.log(v);
      //if (v.url) {
      //uni.navigateTo({
      // url: v.url,
      //});
      //} else {
      //this.$commonJS.showToast("此功能暂未开放");
      //}
    },
    handleClickCate(v) {
      console.log(v);
      uni.navigateTo({
        url: `${v.url}?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: 260rpx;
 

  display: flex;
  justify-content: center;
  overflow: hidden;

  color: #fff;
  font-size: 80rpx;
  line-height: 260rpx;
}
.cate_box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  padding-top: 40rpx;

  .icon_bg {
    width: 48%;
    height: 80rpx;
    line-height: 80rpx;

    background-repeat: no-repeat;

    background-size: 100% 100%;

    color: #018f89;
    font-size: 48rpx;
  }
}

.main_content_box {
  width: 100%;
  margin-top: 0rpx;
  background-color: rgba(255, 255, 255, 0.65);
  padding: 27rpx;
  //   padding-top: 0rpx;
  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;
      }
    }
  }

  .flash_sale_box {
    height: calc(100% - 100rpx);
    // animation: example1 1s ease-out 0s backwards;
    width: 100%;
    margin-top: 33rpx;
    margin-bottom: 10rpx;

    .flash_sale_top {
      width: 100%;
      height: 61rpx;
      background: #b7e0e2;
      box-shadow: 0rpx 0rpx 6rpx 0rpx #e9dccc;
      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: 100%;

    .flash_sale_content_item {
      position: relative;
      display: inline-block;
      width: 48%;
      //   height: 300rpx;
      background-color: #fff;
      float: left;
      border-radius: 10rpx;
      //   overflow: hidden;

      margin-right: 4%;
      overflow: hidden;
      margin-bottom: 20rpx;
    }
    .active_price {
      position: absolute;
      top: 0rpx;
      right: 0rpx;
      width: 70rpx;
      height: 72rpx;
      background-repeat: no-repeat;
      line-height: 50rpx;
      background-size: 100% 100%;
      background-image: url("@/static/icon/taihuactiveprice.png");

      color: #fff;
      font-size: 20rpx;
      font-weight: bold;
      text-align: center;
      //   margin-top: -10rpx;
      //   box-shadow: 0 0 30px 0 rgb(255, 255, 255);
    }
    .flash_sale_content_item:nth-child(2n) {
      margin-right: 0;
    }
    .book_image {
      width: 100%;
      height: 192rpx;
      //   border-radius: 10rpx;
      background-color: #e9e9e9;
    }
    .book_content {
      padding: 20rpx 15rpx 10rpx;
    }
    .book_name {
      font-family: MicrosoftYaHei;
      font-weight: 600;
      font-size: 24rpx;
      line-height: 24rpx;
      height: 50rpx;
      color: #020001;
      //   text-align: center;
      //   margin-top: 18rpx;
      letter-spacing: 1rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

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

.commonPageBox {
  // background-image: linear-gradient(
  //   to bottom,
  //   #fff7ea 25%,
  //   #fffdf5 50%,
  //   #fffdfc 75%
  // );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("@/static/icon/taihubg.png");

  // background-size: 100% 100%; background-repeat: no-repeat;background-image: url('@/static/icon/taihubg.png');
  // 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%;
    }
  }
}
.book_price {
  display: flex;
  align-items: center;
}
.book_price_current {
  color: #ff5b36;
  font-weight: bold;
  .price_icon {
    font-size: 22rpx;
  }
}
.book_price_old {
  color: #9c9a9b;
  font-size: 20rpx;
  margin-left: 10rpx;
  //  margin-top: -4rpx;
  font-weight: normal;
  text-decoration: line-through;
}
.sumSales {
  color: #6c6c6c;
  font-size: 20rpx;

  font-weight: normal;
}
.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/deep/.list_item {
  background-color: #fff;
  display: flex;
  align-items: center !important;
  border-bottom: none;
  padding: 10rpx 0 !important;
  padding-right: 10rpx !important;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  padding-left: 20rpx !important;
  font-size: 24rpx;
  font-weight: bold;
  color: #020001;
  .rightArrow {
    width: 28rpx;
    height: 28rpx;
  }
  .titleItem {
  }
}
/deep/.scroll-view-item:nth-child(2n-1) {
  // background-color: #B7E0E2 !important;
  background-color: #fff !important;
}
</style>
