<template>
  <div class="main">
    <div class="markTitle">
      <view class="markLeft">
        <span class="mark">{{ memberPoint || "" }}</span>
        <span class="text">可用积分</span>
      </view>

      <view class="markRight" @click="handleMarkRule">积分规则</view>
    </div>

    <div class="detailBox">
      <div
        style="
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
        "
      >
        <div class="tabBox">
          <div class="title">积分明细</div>

          <div class="tabs">
            <div
              :class="
                selectTab === item.value ? 'tabItem selectTab' : 'tabItem'
              "
              v-for="(item, index) in tabList"
              :key="index"
              @click="handleChangeSelectTab(item.value)"
            >
              {{ item.label || "" }}
            </div>
          </div>
        </div>
        <div class="signIn" @click="signIn" v-if="showSgign">签到</div>
      </div>

      <div class="markList">
        <div
          style="width: 100%; height: 100%"
          v-if="showList && showList.length > 0"
        >
          <div class="markItem" v-for="(item, index) in showList" :key="index">
            <div class="itemTitle">
              <image
                class="titleIcon"
                src="https://eshangtech.com/wanmeiyizhanImg/home/markIcon.svg"
              />
              <span class="label">{{ item.label || "-" }}获取</span>
              <span class="value">{{ item.obtain || "-" }}</span>
              <span class="label">已使用</span>
              <span class="value">{{ item.consume || "-" }}</span>
            </div>
            <div
              class="childrenList"
              v-if="item.children && item.children.length > 0"
            >
              <div
                class="itemContent"
                v-for="(subItem, subIndex) in item.children"
                :key="subIndex"
              >
                <div class="top">
                  <div class="topLeft">
                    {{ subItem.SERVERPART_NAME + subItem.SHOPNAME }}
                  </div>
                  <div class="topRight">
                    <span class="unit">{{
                      subItem.POINT_TYPE > 0
                        ? "+"
                        : subItem.POINT_TYPE < 0
                        ? "-"
                        : ""
                    }}</span>
                    <span class="value">{{
                      subItem.CURRENT_POINT || "-"
                    }}</span>
                  </div>
                </div>
                <div class="bottom">{{ subItem.OPERATE_DATE || "-" }}</div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="width: 100%; height: 100%"
          v-if="!(showList && showList.length > 0)"
        >
          <no-data :text="'您暂无积分记录'" :isShow="true" />
        </div>
      </div>
    </div>

    <div class="consumption" v-if="false">
      <div class="consumption-card">
        <div class="card-block">
          <div>
            <div>可用积分</div>
            <div class="amount">{{ memberPoint }}</div>
          </div>

          <navigator
            open-type="redirect"
            url="/pages/homeFn/consumption/index"
            class="jump-btn"
          >
            消费记录
            <image
              src="https://eshangtech.com/ShopICO/consumption/to-other.png"
              style="width: 25rpx; height: 25rpx"
              mode="aspectFit"
            ></image>
          </navigator>
        </div>
      </div>

      <div class="consumption-title">
        <div>本月积分</div>
        <div class="consumption-title-des">
          获取:
          <span style="margin-right: 16rpx" class="colorGr">{{
            pageMsg.SumGetPoint
          }}</span>
          使用: <span class="colorOr">{{ pageMsg.SumUsePoint }}</span>
        </div>
      </div>
      <div class="consumption-content" v-if="pageMsg.List.length > 0">
        <block v-for="(unit, i) in pageMsg.List" :key="i">
          <!-- <p class="consumption-content-date">{{unit.date}}</p> -->
          <div class="consumption-content-unit">
            <div class="cp-u-left">
              <!-- <i class='ico-shop'></i> -->
              <div>
                <p class="cp-u-title">
                  {{ unit.SERVERPART_NAME + unit.SHOPNAME }}
                </p>

                <p class="cp-u-type">{{ unit.OPERATE_DATE }}</p>
              </div>
            </div>
            <div>
              <p
                class="cp-u-price"
                :class="{
                  colorOr: unit.POINT_TYPE < 0,
                  colorGr: unit.POINT_TYPE > 0,
                }"
              >
                {{ unit.POINT_TYPE * unit.CURRENT_POINT }}
              </p>
            </div>
          </div>
        </block>
      </div>
      <div v-if="loadingType == 0">
        <no-data :text="'您暂无积分记录'" :isShow="pageMsg.List.length > 0" />
      </div>
    </div>
  </div>
</template>

<script>
import noData from "../../../components/noData.vue";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      loadingType: 1,
      searchByDate: 0,
      memberPoint: 0, // 可用积分
      searchTime: [],
      consumptionRecord: [],
      timeFlag: 0,
      pageMsg: {
        List: [],
        pageSize: 16,
        pageIndex: 1,
        isLoadMore: true,
        SumGetPoint: 0,
        SumUsePoint: 0,
      },
      showPicker: false,
      tabList: [
        { label: "全部", value: 0 },
        { label: "获取", value: 1 },
        { label: "消耗", value: 2 },
      ],
      selectTab: 0,
      allList: [],
      showList: [],
      showSgign: true,
    };
  },
  components: {
    noData,
  },
  computed: {
    ...mapGetters(["user"]),
  },
  methods: {
    // 跳转积分规则
    handleMarkRule() {
      uni.navigateTo({
        url: "/pages/memberBenefits/index",
      });
    },
    // 修改选择的列表
    handleChangeSelectTab(value) {
      this.selectTab = value;
      this.showList = this.allList[value];
      console.log("this.showList", this.showList);
      this.$forceUpdate;
    },
    getConsuptionRecord() {
      let _this = this;

      _this.$api
        .getCoop({
          action_type: "GetPointRecord",
          pageSize: 999999,
          pageIndex: 1,
          isSum: 1,
          // starDate: _this.searchTime[0],
          // endDate: _this.searchTime[1]
        })
        .then(function (res) {
          console.log("res321312", res);
          uni.hideLoading();
          _this.pageMsg.SumUsePoint = res.Data.SumUsePoint;
          _this.pageMsg.SumGetPoint = res.Data.SumGetPoint;
          _this.handleSetTypeList(res.Data.List);

          // _this.pageMsg.List =
          //   _this.pageMsg.pageIndex === 1
          //     ? res.Data.List
          //     : _this.pageMsg.List.concat(res.Data.List);
          // _this.pageMsg.SumUsePoint = res.Data.SumUsePoint;
          // _this.pageMsg.SumGetPoint = res.Data.SumGetPoint;
          // console.log("_this.pageMsg", _this.pageMsg);
          // if (res.Data.List.length < _this.pageMsg.pageSize) {
          //   _this.pageMsg.isLoadMore = false;
          // }
          // _this.loadingType = 0;
          // _this.$forceUpdate();
        });
    },
    // 将数据按照全部、获取、消耗
    handleSetTypeList(list) {
      // 按顺序为全部、获取、消耗
      let allList = [[], [], []];
      if (list && list.length > 0) {
        list.forEach((item) => {
          allList[0].push(item);
          if (item.POINT_TYPE > 0) {
            allList[1].push(item);
          }
          if (item.POINT_TYPE < 0) {
            allList[2].push(item);
          }
        });
      }
      console.log("allList", allList);
      let res = [];
      allList.forEach((item) => {
        let newItem = this.handleListGetMonth(item);
        res.push(newItem);
      });
      console.log("res", res);

      this.allList = res;
      this.showList = res[this.selectTab];
    },
    // 将传入的数组变成 一个月份一个月份的
    handleListGetMonth(list) {
      let res = [];
      let monthTypeList = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          const date = new Date(item.OPERATE_DATE);
          let y = date.getFullYear();
          let m = date.getMonth() + 1;
          if (m < 10) {
            m = "0" + m;
          }
          let time = `${y}${m}`;
          if (monthTypeList.indexOf(time) === -1) {
            monthTypeList.push(time);
            res.push({
              label: time,
              children: [item],
            });
          } else {
            let index = monthTypeList.indexOf(time);
            res[index].children.push(item);
          }
        });
      }
      if (res && res.length > 0) {
        res.forEach((item) => {
          // 获取
          let obtain = 0;
          // 消耗
          let consume = 0;
          if (item.children && item.children.length > 0) {
            item.children.forEach((item) => {
              if (item.POINT_TYPE > 0) {
                obtain += item.CURRENT_POINT;
              }
              if (item.POINT_TYPE < 0) {
                consume += item.CURRENT_POINT;
              }
            });
          }
          item.obtain = obtain;
          item.consume = consume;
        });
      }
      console.log("res3213", res);
      return res;
    },
    getToday() {
      let _this = this;
      _this.searchTime[0] = _this.$utils.cutDate(new Date(), "YYYY/MM/DD");
      _this.searchTime[1] = _this.$utils.cutDate(new Date(), "YYYY/MM/DD");
      _this.getConsuptionRecord();
    },
    getWeek() {
      let _this = this;
      _this.searchTime[0] = _this.$utils.cutDate(
        new Date(),
        "YYYY/MM/DD",
        -(new Date().getDay() - 1)
      );
      _this.searchTime[1] = _this.$utils.cutDate(new Date(), "YYYY/MM/DD");
      _this.getConsuptionRecord();
    },
    getMonth() {
      let _this = this;
      _this.searchTime[0] = _this.$utils.cutDate(
        new Date(),
        "YYYY/MM/DD",
        -(new Date().getDate() - 1)
      );
      _this.searchTime[1] = _this.$utils.cutDate(new Date(), "YYYY/MM/DD");
      _this.getConsuptionRecord();
    },
    onShowDatePicker(f) {
      // 显示
      this.showPicker = true;
      this.timeFlag = f;
    },
    onSelected(data) {
      // 选择
      this.searchTime[this.timeFlag] = data.value;
    },
    getMemberPoint() {
      // 获取会员积分
      let _this = this;

      this.$api
        .getCoop({
          action_type: "GetMemberPoint",
        })
        .then(function (rs) {
          _this.memberPoint = rs.Data.MEMBERSHIP_POINT || 0;
        });
    },
    signIn() {
      // 签到
      let _this = this;
      if (this.user.MEMBERSHIP_MOBILEPHONE) {
        _this.$api
          .getCoop({
            action_type: "signIn",
          })
          .then((res) => {
            if (res.ResultCode === "100") {
              _this.BonusPoint = res.Data.Bonus_Point;
              _this.$api
                .getCoop({
                  action_type: "getConsecutiveSignIn",
                })
                .then((rs) => {
                  uni.showToast({
                    title: "签到成功！",
                    icon: "none",
                  });
                  this.getMonth();
                  this.getMemberPoint();
                });
            } else if (res.ResultCode === "101") {
              // _this.isShowSign = 2;

              uni.showToast({
                title: "今日已签到！",
                icon: "none",
              });
            } else {
              uni.showModal({
                content: res.ResultDesc,
                showCancel: false,
                success: (res) => {
                  if (res.confirm) {
                  }
                },
              });
            }
          });
      } else {
        this.isShow = true;
      }
    },
  },
  onLoad() {
    this.loadingType = 1; // 正在在加载
    uni.showLoading({ title: "加载中" });
    this.getMonth();
    this.getMemberPoint();
    // this.getMemberInfo()consumption/consumption_bg.png
    let signTime = uni.getStorageSync("signTime");
    let signDataLine = new Date(signTime).getTime();
    let nowTime = new Date().getTime();
    if (nowTime < signDataLine) {
      this.showSgign = false;
    }
  },
  onShow() {
    this.pageMsg.pageIndex = 1;
  },
  onReachBottom() {
    if (this.pageMsg.isLoadMore) {
      this.pageMsg.pageIndex += 1;
      this.getConsuptionRecord();
    }
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  background: #f5f5f5;
  .markTitle {
    width: 100%;
    padding: 16rpx 40rpx;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .markLeft {
      .mark {
        font-family: "DINAlternate";
        font-weight: bold;
        font-size: 72rpx;
        color: #ba922f;
        line-height: 84rpx;
        text-align: left;
        font-style: normal;
      }
      .text {
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: 24rpx;
        color: #716f69;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        margin-left: 8rpx;
      }
    }
    .markRight {
      font-family: "PingFangSC";
      font-weight: 400;
      font-size: 24rpx;
      color: #ba922f;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      margin-left: 8rpx;
    }
  }

  .detailBox {
    width: 100%;
    height: 100vh;
    background: #fff;
    box-sizing: border-box;
    padding: 24rpx 32rpx;
    .tabBox {
      padding-bottom: 34rpx;
      border-bottom: 1px solid #f0f0f0;
      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #130f05;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
        margin-bottom: 16rpx;
      }

      .tabs {
        width: 100%;
        display: flex;
        align-items: center;
        .tabItem {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          padding: 8rpx 24rpx;
          background: #f5f6f7;
          border-radius: 4rpx;
          margin-right: 24rpx;
        }

        .selectTab {
          color: #ffffff;
          background: #ba922f;
        }
      }
    }

    .signIn {
      background: #ba922f;
      border-radius: 4rpx;
      padding: 8rpx 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
    }

    .markList {
      width: 100%;
      height: calc(100% - 184rpx);
      margin-top: 32rpx;
      box-sizing: border-box;
      overflow-y: auto;

      .markItem {
        width: 100%;
        margin-bottom: 48rpx;
        .itemTitle {
          display: flex;
          align-items: center;
          .titleIcon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
          }
          .label {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #130f05;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            margin-right: 8rpx;
          }
          .value {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #ba922f;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            margin-right: 32rpx;
          }
        }
        .childrenList {
          width: 100%;
          .itemContent {
            box-sizing: border-box;
            padding: 24rpx 0;
            border-bottom: 1px solid #f0f0f0;
            .top {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 4rpx;
              .topLeft {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #130f05;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
                display: inline-block;
                width: 80%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .topRight {
                .unit {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #ba922f;
                  line-height: 40rpx;
                  text-align: right;
                  font-style: normal;
                }
                .value {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #ba922f;
                  line-height: 40rpx;
                  text-align: right;
                  font-style: normal;
                }
              }
            }
            .bottom {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 22rpx;
              color: #716f69;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
      }
    }
    .markList::-webkit-scrollbar {
      display: none;
    }
  }
}

.consumption {
  background: #f5f5f5;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.consumption-card {
  font-size: 32rpx;
  text-align: center;
  color: #fff;
  width: 100%;
  height: 284rpx;
  background: url("https://eshangtech.com/ShopICO/consumption/i-bg.png")
    no-repeat center;
  background-size: contain;
  box-sizing: border-box;
  padding: 68rpx 50rpx 68rpx 80rpx;
}

.card-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount {
  color: #fff;
  text-align: left;
  font-size: 60rpx;
  margin-top: 20rpx;
}

.jump-btn {
  background: url("https://eshangtech.com/ShopICO/consumption/i-btn.png")
    no-repeat center;
  width: 190rpx;
  height: 68rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  background-size: contain;
  border-radius: 34rpx;
  justify-content: center;
}

.consumption-history {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.consumption-history > div {
  width: 50%;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
}

.consumption-history > div:first-child {
  border-right: 2px solid #fff;
}

.consumption-history > div span {
  display: block;
}

.consumption-btn-box {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 0;
  background-color: #fff;
}

.consumption-btn {
  width: 210rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  text-align: center;
  color: #fff;
  background-color: #4aa3f5;
  box-shadow: 0 0 8rpx #4aa3f5;
}

.consumption-search-box {
  background-color: #fff;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
}

.search-by-date {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  height: 80rpx;
}

.ico-timer {
  /* background url(../../../static/img/zq.png) no-repeat center */
  background-size: contain;
  height: 45rpx;
  width: 45rpx;
  margin-right: 8rpx;
}

.search-content-unit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  padding: 0 40rpx;
}

.search-content-unit + .search-content-unit {
  border-top: 1rpx solid #eee;
}

.date-color {
  color: #4aa3f5;
}

.consumption-title {
  padding: 0 32rpx;
  font-size: 32rpx;
  font-weight: bolder;
  margin-top: 48rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.consumption-title-des {
  font-size: 28rpx;
  font-weight: normal;
}

.consumption-content {
  /* background-color #fff */
  padding-bottom: 20rpx;
}

.consumption-content-date {
  color: #999;
  font-size: 12px;
  padding-bottom: 10rpx;
  padding-left: 40rpx;
}

.consumption-content-unit {
  display: flex;
  padding: 0 32rpx;
  line-height: 42rpx;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-top: 28rpx;
}

.ico-shop {
  /* background url(../../../static/img/xiaofei_shop.png) no-repeat center */
  background-size: contain;
  height: 72rpx;
  width: 72rpx;
  margin-right: 8rpx;
}

.cp-u-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.cp-u-title {
  font-size: 28rpx;
  color: #494949;
}

.cp-u-type {
  font-size: 24rpx;
  color: #939393;
}

.colorOr {
  color: #de7e42;
}

.colorGr {
  color: #45ab58;
}

.cp-u-price {
  text-align: right;
  font-size: 32rpx;
}
</style>
