<template>
  <view>
    <view class="seach">
      <view class="neibox"> 会员编号 </view>
      <view class="seach_i">
        <u--input class="these" v-model="queryParams.memberCode">
          <template slot="suffix">
            <view class="seatch_r">
              <u-icon
                @click="getDataList"
                name="search"
                size="22"
                color="#fff"
              ></u-icon>
            </view>
          </template>
        </u--input>
      </view>
      <view class="neibox" @click="popShow = true"> 筛选 </view>
    </view>
    <view class="mainbox">
      <view class="main_top">
        <view
          class="top_flex"
          v-for="(item, index) in avaerInfoList"
          :key="index"
        >
          <img class="theimg" :src="item.value" alt="" />
          <view class="fle2">{{ item.name }}</view>
        </view>
      </view>

      <view class="main_bottom">
        <view
          class="scoll_main"
          ref="scrollMain"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
        >
          <TreeChart3
            :size="size"
            :json="data"
            :class="{ landscape: landscape.length }"
            @click-node="clickNode"
            @click-top="clickTop"
          />
        </view>
      </view>
    </view>
    <u-popup
      :show="popShow"
      mode="right"
      @close="popShow = false"
      :closeOnClickOverlay="false"
    >
      <view class="rightPopup">
        <view class="popup_top">
          <view
            @click="
              () => {
                getDataList(), (popShow = false);
              }
            "
            >筛选</view
          >
          <view class="top_red" @click="popShow = false">{{
            '返回'
          }}</view>
        </view>
        <view class="typesBox">
          <view class="typeTitle" @click="listShow = true"> 结算期数 </view>
          <view class="choiceBox">
            <view class="inputbox" @click="listShow = true">
              <view class="">
                {{ settleName ? settleName : "请选择" }}
              </view>
              <u-icon name="arrow-right" size="24rpx" color="#090000"></u-icon>
            </view>
          </view>
        </view>
        <view class="typesBox">
          <view class="typeTitle"> 代数 </view>
          <view class="choiceBox">
            <u--input
              v-model="queryParams.level"
              style="
                background-color: rgba(255, 234, 233, 0.65);
                border-color: rgba(255, 234, 233, 0.65) !important;
              "
              placeholder="请输入"
              border="surround"
              shape="circle"
            ></u--input>
          </view>
        </view>

        <view class="popup_bottom">
          <view class="bottom_btn thebtn1" @click="clearAll">清空筛选条件</view>
          <view
            class="bottom_btn thebtn2"
            @click="
              () => {
                getDataList(), (popShow = false);
              }
            "
            >{{ '确定' }}
          </view>
        </view>
      </view>
      <u-picker
        @cancel="listShow = false"
        :show="listShow"
        ref="uPicker"
        :columns="memberSettlePeriodList"
        @confirm="confirm"
        keyName="settleDate"
      ></u-picker>
    </u-popup>
    <u-popup
      :show="isPop"
      closeable
      mode="center"
      round="10"
      @close="isPop = false"
    >
      <view class="ispop_box">
        <view class="Poster1">
          <view class="pop_top">
            <view class="pop_top">
              <view>
                <image
                  crossorigin="anonymous"
                  data-etype="image"
                  :data-enode="popMould.avatarUrl"
                  :src="'data:image/png;base64,' + popMould.avatarUrlBase64"
                  mode="aspectFit"
                  class="poster1"
                ></image>
              </view>
              <view>
                <image
                  crossorigin="anonymous"
                  data-etype="image"
                  :data-enode="popMould.countryUrl2"
                  :src="'data:image/png;base64,' + popMould.countryUrl2Base64"
                  mode="aspectFit"
                  class="poster2"
                ></image>
              </view>
            </view>
            <view class="top_right">
              <image
                crossorigin="anonymous"
                data-etype="image"
                :data-enode="popMould.settleCountryUrl2"
                :src="
                  'data:image/png;base64,' + popMould.settleCountryUrl2Base64
                "
                mode="aspectFit"
                class="poster2"
              ></image>
              <view style="margin-top: 18rpx"> 结算国家 </view>
            </view>
          </view>
          <view class="pop_center">
            <view class="center_flex">
              <view class="c1">会员编号</view>
              <view class="c2">{{ popMould.memberCode }}</view>
            </view>
            <view class="center_flex">
              <view class="c1">会员姓名</view>
              <view class="c2">{{ popMould.name }}</view>
            </view>
            <view class="center_flex">
              <view class="c1">支付时间</view>
              <view class="c2">{{ popMould.payDate }}</view>
            </view>
          </view>
          <view class="pop_bottom">
            <view class="b_flex">
              <view class="bt1">类型</view>
              <view class="bt1">直推</view>
              <view class="bt1">团队</view>
            </view>
            <view class="b_flex">
              <view class="bt2">人数</view>
              <view class="bt2">{{ popMould.directPushNumber }}</view>
              <view class="bt2">{{ popMould.teamNumber }}</view>
            </view>
            <view class="b_flex">
              <view class="bt2">业绩($)</view>
              <view class="bt2">{{ popMould.newPerformancePv }}</view>
              <view class="bt2">{{ popMould.teamHistoryPerformancePv   }}</view>
            </view>
            <!-- <view class="b_flex">
							<view class="bt2">人数</view>
							<view class="bt2">{{popMould.directPushNumber}}</view>
							<view class="bt2">{{popMould.newPerformancePv}}</view>
						</view>
						<view class="b_flex">
							<view class="bt2">业绩($)</view>
							<view class="bt2">{{popMould.teamNumber}}</view>
							<view class="bt2">{{popMould.teamHistoryPerformancePv }}</view>
						</view> -->
          </view>
        </view>
        <view class="btn_box">
          <view class="small-btn" @click="downImage('Poster1')">下载图片</view>
          <view class="small-text-btn" @click="copyText()">复制文字</view>
        </view>
      </view>
    </u-popup>
    <Eposter
      width="750"
      height="1334"
      :list="list"
      backgroundColor="rgb(255, 255, 255)"
      @on-success="onSuccess"
      ref="Eposter"
    >
    </Eposter>
  </view>
</template>

<script>
import html2canvas from "html2canvas";
import TreeChart3 from "@/components/architectures/recommendSO3.vue";
import Eposter from "@/components/architectures/Poster.vue";
import * as arc from "@/api/architecture.js";
export default {
  components: {
    TreeChart3,
    Eposter,
  },
  data() {
    return {
      avaerInfoList: [],
      treeData: [],
      queryParams: {
        memberSettlePeriodId: "", //期数
        memberCode: "", //会员编号
        level: 3, //代数
      },
      memberSettlePeriodList: [], //期数
      popShow: false,
      listShow: false,
      settleName: "",
      data: {},
      size: 1,
      landscape: [],
      popMould: {},
      isPop: false,
      touchStartPosition1: {
        x: 0,
        y: 0,
      },
      touchStartPosition2: {
        x: 0,
        y: 0,
      },
      initialDistance: 0,
      list: [],
    };
  },
  onLoad() {
    this.getAvarerInfo();
    this.getDataList();
  },
  methods: {
    //复制文字
    copyText() {
      let self = this;
      let md = self.popMould;
      let text = `会员编号：${md.memberCode} \n会员姓名：${md.name}\n支付时间：${md.payDate} \n类型  直推  团队 \n人数  ${md.directPushNumber}  ${md.newPerformancePv} \n业绩($)  ${md.teamNumber}  ${md.teamHistoryPerformancePv }  \n`;
      uni.setClipboardData({
        data: text,
        success: function (res) {
          uni.getClipboardData({
            success: function (res) {
              uni.showToast({
                title: "复制成功",
              });
            },
          });
        },
      });
    },
    //下载图片
    downImage(elClass) {
      this.$refs.Eposter.createForElRect(elClass, false);
    },
    downloadImg() {
      let self = this;
      let element = document.querySelector(".Poster1");
      uni.showLoading({
        title: "图片保存中",
      });
      html2canvas(element)
        .then(function (canvas) {
          let dataURL = canvas.toDataURL("image/jpeg");
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = dataURL;
          link.download = "image.jpg";
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          uni.showToast({
            icon: "none",
            title: "保存成功",
            duration: 2000,
          });
          uni.hideLoading();
        })
        .catch(function (error) {
          uni.hideLoading();
          uni.showModal({
            title: "保存失败",
          });
        });
    },
    onSuccess(val) {
      this.posterImg = val;
      this.downloadImg(this.posterImg);
    },

    handleTouchStart(event) {
      const touch1 = event.touches[0];
      const touch2 = event.touches[1];
      if (touch2) {
        this.touchStartPosition1 = {
          x: touch1.pageX,
          y: touch1.pageY,
        };
        this.touchStartPosition2 = {
          x: touch2.pageX,
          y: touch2.pageY,
        };
        this.initialDistance = Math.hypot(
          touch2.pageX - touch1.pageX,
          touch2.pageY - touch1.pageY
        );
      }
    },
    handleTouchMove(event) {
      const touch1 = event.touches[0];
      const touch2 = event.touches[1];
      if (touch2) {
        const currentDistance = Math.hypot(
          touch2.pageX - touch1.pageX,
          touch2.pageY - touch1.pageY
        );
        const scale = currentDistance / this.initialDistance;
        this.size = this.size * scale;
      }
    },
    handleTouchEnd() {
      this.touchStartPosition1 = {
        x: 0,
        y: 0,
      };
      this.touchStartPosition2 = {
        x: 0,
        y: 0,
      };
      this.initialDistance = 0;
    },
    clickNode(e) {
      let self = this;
      if (e) {
        arc
          .getUrlBase({
            countryUrl2: e.countryUrl2,
            settleCountryUrl2: e.settleCountryUrl2,
            avatarUrl: e.avatarUrl,
          })
          .then((res) => {
            self.popMould = e;
            self.popMould.countryUrl2Base64 = res.countryUrl2Base64;
            self.popMould.settleCountryUrl2Base64 = res.settleCountryUrl2Base64;
            self.popMould.avatarUrlBase64 = res.avatarUrlBase64;
            self.isPop = true;
          });
      }
    },
    clickTop(e) {
      let that = this;
      if (e) {
        that.queryParams.memberCode = e.memberCode;
        that.getDataList();
      }
    },
    confirm(e) {
      this.queryParams.memberSettlePeriodId = e.value[0].pkId;
      this.settleName = e.value[0].settleDate;
      this.listShow = false;
    },
    getAvarerInfo() {
      arc.getAvarerInfo().then((res) => {
        this.avaerInfoList = res.data;
      });
      arc.getMemberSettlePeriod().then((res) => {
        this.memberSettlePeriodList = [res.data];
      });
    },
    getDataList() {
      arc.getTjFramework(this.queryParams).then((res) => {
        this.data = res.data[0];
      });
    },
    clearAll() {
      this.popShow = false;
      this.settleName = "";
      this.queryParams = {
        memberSettlePeriodId: "", //期数
        memberCode: "", //会员编号
        level: 3, //代数
      };
      this.getDataList();
    },
  },
};
</script>
<style lang="scss" scoped>
.ispop_box {
  padding: 27rpx;
  padding-top: 60rpx;
  width: 670rpx;
  font-size: 24rpx;
  color: #333333;

  .pop_top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .poster1 {
      height: 88rpx;
      width: 88rpx;
    }

    .poster2 {
      width: 88rpx;
      height: 54rpx;
      border-radius: 10rpx;
      margin-left: 20rpx;
    }

    .top_right {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  .pop_center {
    .center_flex {
      display: flex;
      align-items: center;
      margin-top: 20rpx;

      .c1 {
        width: 20%;
      }

      .c2 {
        width: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f3f3f3;
        border: 2rpx solid #eeeeee;
        border-radius: 8rpx;
        padding: 10rpx 0;
      }
    }
  }

  .pop_bottom {
    margin: 20rpx 0;
    border-top: 2rpx solid #eeeeee;
    border-top: 2rpx solid #eeeeee;

    .b_flex {
      display: flex;

      .bt1 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 22rpx;
        flex: 1;
      }

      .bt2 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 22rpx;
        flex: 1;
        background: #f3f3f3;
        border: 2rpx solid #eeeeee;
        border-radius: 8rpx;
        padding: 12rpx 0;
        margin: 11rpx 18rpx;
      }
    }
  }

  .btn_box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .small-btn {
      width: 312rpx;
      height: 72rpx;
      background: #fb3024;
      border-radius: 34rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .small-text-btn {
      width: 312rpx;
      height: 72rpx;
      border: 1px solid #fb3024;
      border-radius: 34rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #fb3024;
    }
  }
}

.operate-btnboxs {
  padding: 29rpx 26rpx;
  background-color: #ffffff;

  .d-c-c {
    display: flex;
    align-items: center;
    justify-content: center;

    .operate-btn {
      width: 64rpx;
      height: 64rpx;
      margin: 5rpx;
      // background: #F2F2F2;
      border-radius: 5rpx;
      padding: 0;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.rightPopup {
  width: 645rpx;
  height: 100%;
  overflow: auto;

  .popup_top {
    padding: 25rpx;
    background-color: rgba(255, 234, 233, 0.65);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;

    .top_red {
      color: #fb3024;
    }
  }

  .popup_bottom {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;

    .bottom_btn {
      flex: 1;
      padding: 20rpx 0;
      text-align: center;
      font-size: 28rpx;
    }

    .thebtn1 {
      background-color: rgba(255, 234, 233, 0.65);
      color: #333333;
    }

    .thebtn2 {
      background-color: #fb3024;
      color: #ffffff;
    }
  }

  .typesBox {
    margin-top: 40rpx;

    .typeTitle {
      padding: 0 24rpx;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
    }

    .choiceBox {
      padding: 0 12rpx;
      display: flex;
      margin-top: 17rpx;
      align-items: center;
      flex-wrap: wrap;

      .inputbox {
        font-size: 26rpx;
        width: 100%;
        padding: 20rpx 32rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 234, 233, 0.65);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .flex_btn {
        background-color: rgba(255, 234, 233, 0.65);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14rpx 48rpx;
        border-radius: 26rpx;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin: 17rpx 5rpx;
      }

      .timesbtn {
        flex: 1;
      }

      .selectbtn {
        background-color: #c8161d;
        color: #ffffff;
      }
    }
  }
}

.seach {
  background: #fff;
  overflow: hidden;
  padding: 20rpx 23rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-bottom: 2rpx solid #eee;

  .these {
    border: none;
    padding: 10rpx 0 !important;
  }

  .seach_i {
    padding: 0 20rpx;
    border-radius: 34rpx;
    background: #fff;
    flex: 1;
    background: #f5f6f8;
    margin: 0 20rpx;
  }

  .neibox {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #999999;
  }

  .seatch_r {
    background: #fb3024;
    border-radius: 50%;
    padding: 8rpx;
  }
}

.mainbox {
  padding: 26rpx 22rpx;

  .main_top {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 20rpx 4rpx;
    display: flex;
    flex-wrap: wrap;

    .top_flex {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 15rpx 20rpx;
      // justify-content: center;
      width: 98rpx;

      .theimg {
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
      }

      .flex2 {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
      }
    }
  }

  .main_bottom {
    width: 100%;
    height: calc(100vh - 600rpx);
    margin-top: 25rpx;
    background-color: #ffffff;
    padding: 38rpx 0;

    border-radius: 20rpx;
  }

  .scoll_main {
    width: 700rpx;
    height: calc(100vh - 600rpx);
    overflow: auto;

    // overflow: scroll;
    // overflow-x: auto;
  }
}
</style>