<template>
  <view class="commonPageBox">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <z-nav-bar title="我的湖分" bgColor="rgb(36 142 234)" fontColor="#fff">
      <!-- <uni-icons type="bars" class="topRight" slot="right" @click="showDrawer('showRight')"   size="22"></uni-icons> -->
    </z-nav-bar>
    <view class="xiugai">
      <common-list
        :dataList="tabList"
        @hancleClick="handleClickTab"
        label="name"
      >
        <template slot="rightSlot" slot-scope="slotProps">
          <text
            class="fdButtonBox aui-text-success"
            style="
              line-height: 40rpx;
              font-size: 36rpx;
              float: right;
              color: #258feb !important;
              font-weight: bold;
            "
            >{{ slotProps.row.score }}</text
          >
        </template>
      </common-list>
    </view>
    <u-popup mode="bottom" :show="show" border-radius="10">
      <view class="content" style="height: 50vh">
        <p style="height: 90rpx" class="popupTitle">
          {{ currentData.name }} 湖分记录
        </p>
        <scroll-view scroll-y="true" style="height: calc(100% - 210rpx)">
          <view style="padding: 20rpx; box-sizing: border-box">
            <!-- <view v-for="index in 20" :key="index"> 第{{ index }}个Item </view> -->
            <view class="AC_con">
              <!-- <view class="AC_jilu PM_font">湖分记录</view> -->
              <common-list
                :dataList="MoneyRecord"
                isCondition="true"
                isNoIcon="true"
                label="orderType"
              >
                <template slot="labelSlot" slot-scope="slotProps">
                  <view class="label_content AC_List">
                    <view class="left">
                      <view class="title"
                        ><view class="AC_time"
                          >{{ slotProps.row.createTime }}
                        </view></view
                      >
                    </view>
                    <view
                      :class="`right ${slotProps.row.score > 0 ? 'Hot' : ''}`"
                    >
                      <text
                        v-if="slotProps.row.score > 0"
                        style="color: #258feb"
                        >+</text
                      >
                      <text style="color: #258feb">{{
                        slotProps.row.score
                      }}</text> </view
                    ><view class="AC_mark" v-if="slotProps.row.detail">{{
                      slotProps.row.detail
                    }}</view>
                  </view>
                  <!-- <text  class="order" style="font-size: 12px;" v-if="slotProps.row.relationId" @click="goClick(slotProps.row.relationId)">订单详情</text> -->
                </template>
              </common-list>
            </view>
          </view>
        </scroll-view>
        <view class="confrim-btn">
          <u-button
            style="
              width: 90%;
              margin: 0 auto;
              margin-top: 20rpx;
              color: #1d1d1d;
              border: 1rpx solid #a0a0a0;
            "
            @click="show = false"
            >关闭</u-button
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
var clear;
import { mapState } from "vuex";
export default {
  data() {
    return {
      tabList: [],
      MoneyRecord: [],
      pageList: [],
      show: false,
      currentData: {},
    };
  },
  //第一次加载
  onLoad(e) {
    
    // 隐藏原生的tabbar
    uni.hideTabBar();
  },
  computed: {
    ...mapState(["userInfo"]),
    videoHTML() {
      return `<video class="video-box" poster="http://ehh-public-01.oss-cn-beijing.aliyuncs.com/wumenyishu-image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240606110049.jpg" src="${this.videoUrl}"  enable-danmu danmu-btn controls style="width:100%;height:320rpx"></video>`;
    },
  },
  //页面显示
  onShow() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
    this.getData();
  },
  onUnload() {
    // #ifdef APP-PLUS
    plus.screen.lockOrientation("portrait-primary"); // 清除横屏
    // #endif
    this.showTemp = true;
    this.videoContext = null;
  },
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  components: {
    // curriculumVideo,
  },
  //方法
  methods: {
    async handleClickTab(e) {
      this.currentData = e;
      console.log("e at line 78:", e);
      await this.gethufenData();
      this.show = true;
      console.log(e);
      this.$forceUpdate();

      // this.tabList = e;
    },
    getPointsType(type) {
      var str = "";

      switch (type) {
        case "01":
          return "在线教学";

        case "03":
          return "学术期刊";

        case "05":
          return "太湖讲堂";

        case "07":
          return "创作技术";

        case "11":
          return "注册邀请";

        case "13":
          return "课程邀请";
      }
    },
    async gethufenData(type) {
      await this.$http
        .request({
          url: "common/userContribution/getUserContributionByType",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            current: 1,
            limit: 999999,
            type: this.currentData.type,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log("res at line 296:", res.list);
          if (res.code == 0 && res.list.records.length > 0) {
            this.MoneyRecord = [];
            this.MoneyRecord = res.list.records;
          } else {
            this.MoneyRecord = [];
          }
        })
        .catch((e) => {
          console.log(e, "报错");
        });
    },
    async getData() {
      await this.$http
        .post("common/userContribution/getUserContribution")
        .then((res) => {
          console.log("res at line 296:", res.list);
          if (res.code == 0 && res.list.length > 0) {
            this.tabList = [];
            this.tabList = res.list.map((e) => {
              return { ...e, name: this.getPointsType(e.type) };
            });
          } else {
            this.tabList = [];
          }
        })
        .catch((e) => {
          console.log(e, "报错");
        });
    },
  },
};
</script>

<style scoped lang="scss">
.AC_List {
  overflow: hidden;

  .left {
    width: calc(100% - 200rpx) !important;
    // font-weight: 700;
    float: left;
    color: #333;
    font-size: 38rpx;
    line-height: 40rpx;
  }
  .right {
    display: block;
    width: 200rpx !important;
    float: right;
    text-align: right;
    font-size: 38rpx;
    // font-weight: 700;
    color: #333;
  }

  //   border-bottom: 1px solid #eee;
  //   padding: 40rpx 10rpx;

  .AC_title {
    font-size: 32rpx;
    margin-bottom: 20rpx;

    view {
      float: right;
      font-size: 34rpx;
      font-weight: bold;
    }
  }

  .AC_mark {
    width: 100%;
    font-size: 28rpx;
    margin-top: 10rpx;
    margin-bottom: 15rpx;
    // white-space: nowrap;
    color: #343434;
    float: left;
    overflow: hidden;
  }

  .AC_time {
    // width: 100%;
    color: #909090;
    font-size: 28rpx;
  }
}
.popupTitle {
  padding-top: 10rpx;

  box-sizing: border-box;
  font-size: 42rpx;
  // font-weight: bold;
  text-align: center;
  font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
  line-height: 60rpx;
  color: rgb(36, 142, 234);
}
.grid-text {
  font-size: 28rpx;
  margin-top: 4rpx;
}
.commonPageBox {
  height: 100vh;
  // background-image: url("@/static/icon/mine_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: linear-gradient(
    -60deg,
    #fdf0ed 0%,
    #bfe3f0 40%,
    #e4eefa 60%,
    #bfe3f0 80%,
    #fdf0ed 100%
  );
  // background-color: #d8f8e4 !important;
}
.xiugai {
  border-radius: 20rpx !important;
  margin: 20rpx;
  // padding:0 40rpx;
  background: #f0f9fb;

  .nav_list {
    background-color: #b7e0e2;
    padding: 15rpx 0 15rpx 10rpx;
    display: flex;
    align-items: center;
    font-size: 22rpx;
    position: relative;
    font-weight: bold;
    border-bottom: 1px solid #e5e5e5;

    &:active {
      background-color: #f5f5f5;
    }

    text {
      color: #333;
      margin-left: 10rpx;
    }

    &::after {
      content: "";
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 30rpx;
      height: 30rpx;
      background-image: url("@/static/icon/icon_right.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  .nav_list:nth-last-child(1) {
    border-bottom: 0;
  }
}
</style>
