<template>
  <scroll-view class="strategy" scroll-y>
    <view class="strategy-container">
      <view class="strategy-container-progress">
        <view class="progress-text-info">
          <text class="desc">{{ pageData.title || "当前成长值" }}</text>
          <text class="point">{{ pageData.currentPoint || 0 }}</text>
          <text class="text">{{ pageData.exceedText || "超过0%用户" }}</text>
          <view v-if="pageData.levelIntervalPointText" class="notice">{{
            pageData.levelIntervalPointText
          }}</view>
        </view>

        <canvas id="canvas" class="progress-canvas" type="2d" />
        <view class="progress-detail" @click="toUrl('/subPackages/common/member/progressDetail')"
          >成长值明细</view
        >
      </view>
      <view class="strategy-container-detail">
        <view class="strategy-container-detail-title">{{ pointModule.title || "分值构成" }}</view>
        <view class="strategy-container-detail-content">
          <template v-for="(item, index) in pointModule.points">
            <view :key="index" class="detail-item">
              <view class="line1">
                <image
                  class="line1-icon"
                  style="width: 20rpx;height: 24rpx;"
                  :src="item.pic"
                  mode="widthFix"
                />
                <text class="line1-text">{{ item.title || "" }}</text>
              </view>
              <view class="line2">
                <text class="number">{{ item.point || 0 }}</text>
                <text class="unit">分</text>
              </view>
            </view>
            <view :key="`plus-${index}`" class="detail-item plus">
              <view class="line1">
                <text class="line1-text">+</text>
              </view>
            </view>
          </template>
        </view>
      </view>
      <view
        v-if="pointTaskModule.taskList && pointTaskModule.taskList.length"
        class="strategy-container-mission"
      >
        <view class="strategy-container-mission-title">
          {{ pointTaskModule.title || "会员成长攻略" }}
        </view>
        <view class="strategy-container-mission-subtitle">
          {{ pointTaskModule.desc || "任务成长值每月11号统一发放" }}
        </view>
        <view class="strategy-container-mission-list">
          <view v-for="(val, key) in pointTaskModule.taskList" :key="key" class="list-item">
            <view class="list-item-desc">
              <view class="icon">
                <view class="img">
                  <image :src="val.pic" style="width: 100%;height: auto" mode="widthFix" />
                </view>
              </view>
              <view class="desc">{{ val.name || "" }}</view>
            </view>
            <button class="list-item-operation" @click="toUrl(val.jumpUrl)">
              {{ val.buttonText || "去完成" }}
            </button>
          </view>
        </view>
      </view>
      <view v-if="qaList.length" class="strategy-container-qa">
        <view v-for="(item, index) in qaList" :key="index" class="qa-item">
          <view class="qa-item-q" @click="toggle(index)">
            <view class="desc">{{ item.questionTitle }}</view>
            <view
              class="iconfont"
              :class="{
                'icon-arrow-down': toggleIndexArr.indexOf(index) == -1,
                'icon-arrow-up': toggleIndexArr.indexOf(index) > -1
              }"
            />
          </view>
          <view v-show="toggleIndexArr.indexOf(index) > -1" class="qa-item-a">
            {{ item.questionReply }}
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script>
import { queryPointDetail } from "@/api/member.api";
import { jumpToUrl as toUrl } from "@/mixins/common";
export default {
  data() {
    return {
      level: 1,
      circlePointX: 0, // 圆心X轴
      circlePointY: 0, // 圆心Y轴
      circleRadius: 0, // 圆形半径
      dpr: 0, // 屏幕像素比例
      pageData: {},
      levelStepInfo: [],
      toggleIndexArr: [],
      qaList: [],
      pointModule: {}, // 分值构成
      pointTaskModule: {} // 会员成长任务
    };
  },
  onShow() {
    this.getPointDetail();
  },
  methods: {
    async getPointDetail() {
      const [data] = await queryPointDetail();
      const { userLevels, questionModule, pointModule, pointTaskModule, level } = data;
      this.level = level || 1;
      this.qaList = questionModule?.questionList || [];
      this.pointModule = pointModule || {};
      this.levelStepInfo = userLevels || [];
      this.pointTaskModule = pointTaskModule || {};
      this.pageData = data;
      this.draw();
    },
    draw() {
      const query = wx.createSelectorQuery();
      query
        .select("#canvas")
        .fields({ node: true, size: true })
        .exec(res => {
          const canvas = res[0].node;
          const ctx = canvas.getContext("2d");
          const levelNum = this.levelStepInfo.length; // 等级数量
          const unit = 360 / ((levelNum - 1) * 2); // 获取单等级的角度
          this.dpr = wx.getSystemInfoSync().pixelRatio; // 获取屏幕像素比
          canvas.width = res[0].width * this.dpr;
          canvas.height = res[0].height * this.dpr;
          // 设置绘制圆心
          this.circlePointX = canvas.width / 2;
          this.circlePointY = canvas.height - 36 * this.dpr;
          this.circleRadius = 136 * this.dpr;
          // 绘制灰色半圆弧
          this.drawBackgroundCircle(ctx);
          // 绘制当前等级内的圆弧
          this.drawBackgroundCircleHigtLight(ctx, unit);
          // 绘制等级对应的圆点
          this.drawLevelPoint(ctx, unit);
          // 根据屏幕dpr进行缩放
          ctx.scale(this.dpr, this.dpr);
          ctx.save();
        });
    },
    drawBackgroundCircle(ctx) {
      // 绘制灰色半圆弧
      ctx.beginPath();
      ctx.arc(this.circlePointX, this.circlePointY, this.circleRadius, 0, Math.PI, 1);
      ctx.strokeStyle = "#393C45";
      ctx.lineWidth = 10;
      ctx.stroke();
    },
    drawBackgroundCircleHigtLight(ctx, unit) {
      // 绘制等级进度
      ctx.beginPath();
      ctx.fillStyle = "#393C45";
      ctx.strokeStyle = "#FF9A64";
      ctx.arc(
        this.circlePointX,
        this.circlePointY,
        this.circleRadius,
        Math.PI,
        Math.PI + (unit * (this.level - 1) * Math.PI) / 180,
        0
      );
      ctx.stroke();
    },
    drawLevelPoint(ctx, unit) {
      // 绘制等级圆点
      for (let i = 0; i <= 360; i += unit) {
        //获得圆上坐标
        if (180 + unit * (this.level - 1) >= i) {
          ctx.fillStyle = "#FF9A64";
        } else {
          ctx.fillStyle = "#393C45";
        }
        ctx.beginPath();
        let x = Math.cos(((Math.PI * 2) / 360) * i) * this.circleRadius,
          y = Math.sin(((Math.PI * 2) / 360) * i) * this.circleRadius;
        ctx.arc(this.circlePointX + x, this.circlePointY + y, 16, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
        // 绘制会员名称与积分
        this.drawLevelNameAndPoint(
          ctx,
          i == 180 ? 1 : i == 360 || i == 0 ? 2 : 3,
          this.circlePointX + x,
          this.circlePointY + y,
          i,
          unit
        );
      }
    },
    drawLevelNameAndPoint(ctx, posiType, x, y, angle, angleUnit) {
      ctx.fillStyle = "#fff";
      ctx.font = `${12 * this.dpr}px PingFangSC-Regular`;
      let startAngle = 180;
      for (let i = 0; i < this.levelStepInfo.length; i++) {
        if (angle === startAngle + angleUnit * i) {
          const normalLevelInfo = `${this.levelStepInfo[i].levelName} ${this.levelStepInfo[i].lowPoint}`;
          let measureName = ctx.measureText(this.levelStepInfo[i].levelName);
          let measurePoint = ctx.measureText(this.levelStepInfo[i].lowPoint);
          let measureNameAndPoint = ctx.measureText(normalLevelInfo);
          if (posiType == 1) {
            // 弧形首
            ctx.fillText(this.levelStepInfo[i].levelName, x - measureName.width / 2, y + 60);
            ctx.fillText(this.levelStepInfo[i].lowPoint, x - measurePoint.width / 2, y + 100);
            return;
          } else if (posiType == 2) {
            // 弧形尾
            ctx.fillText(this.levelStepInfo[i].levelName, x - measureName.width / 2, y + 60);
            ctx.fillText(this.levelStepInfo[i].lowPoint, x - measurePoint.width / 2, y + 100);
          } else if (angle < 270) {
            // 左半弧
            ctx.fillText(normalLevelInfo, x - measureNameAndPoint.width - 20, y - 30);
            return;
          } else if (angle > 270) {
            // 右半弧
            ctx.fillText(normalLevelInfo, x + 20, y - 30);
            return;
          } else {
            // 弧顶
            ctx.fillText(normalLevelInfo, x - measureNameAndPoint.width / 2, y - 40);
          }
        }
      }
    },
    toUrl,
    toggle(index) {
      // 展开/收起qa
      this.toggleIndexArr.indexOf(index) == -1
        ? this.toggleIndexArr.push(index)
        : this.toggleIndexArr.splice(this.toggleIndexArr.indexOf(index), 1);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/var.scss";
@mixin baseStyle {
  background: $white;
  width: 100%;
  border-radius: 24rpx;
  padding: 20rpx;
}
.strategy {
  width: 100%;
  height: 100%;
  &-container {
    padding: 0 $padding-md;
    background-color: rgb(247, 247, 247);
    background-image: url("https://img.lkbang.net/xcx/memberCenter/grow_strategy_bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    &-progress {
      position: relative;
      width: 100%;
      height: 442rpx;
      margin-bottom: 34rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      .progress-text-info {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 170rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .desc {
          @include text-size(24);
          color: #949494;
        }
        .point {
          font-weight: $font-weight-bold;
          @include text-size(60);
          color: #ffa676;
          margin: 12rpx 0;
        }
        .text {
          @include text-size(24);
          color: $white;
        }
        .notice {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 50rpx;
          height: 50rpx;
          padding: 0 34rpx;
          background: #2c2f44;
          border-radius: 38rpx;
          opacity: 0.63;
          @include text-size(24);
          color: $white;
        }
      }
      .progress-canvas {
        width: 100%;
        height: 410rpx;
      }
      .progress-detail {
        position: absolute;
        right: -32rpx;
        top: 24rpx;
        font-size: 24rpx;
        color: $white;
        height: 60rpx;
        line-height: 60rpx;
        width: 164rpx;
        text-align: center;
        background: #2c2f44;
        border-radius: 15px 0 0 15px;
      }
    }
    &-detail {
      @include baseStyle();
      height: 250rpx;
      margin-bottom: $padding-md;
      &-title {
        text-align: center;
        @include text-size(32);
        color: $black;
        margin-bottom: $padding-sm;
      }
      &-content {
        width: 100%;
        display: flex;
        justify-content: center;
        .detail-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          &.plus {
            margin: 0 $padding-sm;
            &:last-child {
              display: none;
            }
          }
          .line1 {
            display: flex;
            align-items: center;
            &-icon {
              margin-right: $padding-unit;
            }
            &-text {
              @include text-size(28);
              color: $black;
            }
          }
          .line2 {
            margin-top: 18rpx;
            color: $black;
            .number {
              @include text-size(48);
              font-weight: $font-weight-bold;
            }
            .unit {
              @include text-size(24);
            }
          }
        }
      }
    }
    &-mission {
      @include baseStyle();
      margin-bottom: $padding-md;
      &-title {
        @include text-size(32);
        color: $black;
        font-weight: $font-weight-bold;
      }
      &-subtitle {
        margin: $padding-unit 0 $padding-lg;
        @include text-size(24);
        color: $gray-5;
      }
      &-list {
        width: 100%;
        .list-item {
          width: 100%;
          height: 88rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: $padding-md;
          &-desc {
            flex: 1;
            display: flex;
            align-items: center;
            padding-right: $padding-unit;
            min-width: 0;
            .icon {
              flex-shrink: 0;
              width: 88rpx;
              height: 88rpx;
              margin-right: $padding-xs;
              background-image: url(https://img.lkbang.net/xcx/memberCenter/mission_icon.png);
              background-size: cover;
              display: flex;
              align-items: center;
              justify-content: center;
              .img {
                width: 100%;
                height: 100%;
              }
            }
            .desc {
              flex: 1;
              flex-shrink: 0;
              font-weight: $font-weight-bold;
              @include text-size(28);
              color: $black;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          &-operation {
            margin: 0;
            flex-shrink: 0;
            width: 164rpx;
            height: 60rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(270deg, #facc82 0%, #fbd99a 100%);
            border-radius: 30rpx;
            font-weight: $font-weight-bold;
            @include text-size(24);
            color: #895c1b;
          }
        }
      }
    }
    &-qa {
      @include baseStyle();
      .qa-item {
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid #ececec;
        &-q {
          display: flex;
          justify-content: space-between;
          .desc {
            @include text-size(28);
            color: $black;
          }
          .iconfont {
            color: $gray-5;
            @include text-size(24);
          }
        }
        &-a {
          margin-top: 20rpx;
          @include text-size(24);
          color: $gray-5;
        }
        margin-top: $padding-sm;
        &:last-child {
          border: 0;
        }
        &:first-child {
          margin-top: 0;
        }
      }
    }
  }
}
</style>
