<template>
  <view class="resettle o-h">
    <view class="seach">
      <view class="neibox">{{ $t("MN_T_1") }}</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">{{ $t("MY_ORD_50") }}</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"
        >
          <TreeChart4
            :style="{
              left: `${x}px`,
              top: `${y}px`,
              transform: `scale(${scale})`,
            }"
            :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);
              }
            "
          >
            {{ $t("MY_ORD_50") }}
          </view>
          <view class="top_red" @click="popShow = false">{{
            $t("N_I_241")
          }}</view>
        </view>
        <view class="typesBox">
          <view class="typeTitle" @click="listShow = true">{{
            $t("N_I_242")
          }}</view>
          <view class="choiceBox">
            <view class="inputbox" @click="listShow = true">
              <view class="">{{
                settleName ? settleName : $t("CK_KS_38")
              }}</view>
              <u-icon name="arrow-right" size="24rpx" color="#090000"></u-icon>
            </view>
          </view>
        </view>
        <view class="typesBox">
          <view class="typeTitle">{{ $t("w_0353") }}</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">{{
            $t("w_0257")
          }}</view>
          <view
            class="bottom_btn thebtn2"
            @click="
              () => {
                getDataList(), (popShow = false);
              }
            "
          >
            {{ $t("w_0035") }}
          </view>
        </view>
      </view>
      <u-picker
        :cancelText="$t('MN_F_31')"
        :confirmText="$t('MN_F_32')"
        @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 ww100 flex-dbox">
          <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">{{ $t("MN_F_18") }}</view>
            </view>
          </view>
          <view class="pop_center">
            <view class="center_flex">
              <view class="c1">{{ $t("MN_T_1") }}</view>
              <view class="c2">{{ popMould.memberCode }}</view>
            </view>
            <view class="center_flex">
              <view class="c1">{{ $t("CK_KS_14") }}</view>
              <view class="c2">{{ popMould.name }}</view>
            </view>
            <view class="center_flex">
              <view class="c1">{{ $t("MY_ORD_3") }}</view>
              <view class="c2">{{ popMould.payDate }}</view>
            </view>
          </view>
          <view class="pop_bottom">
            <view class="b_flex">
              <view class="bt1 bt1-s">{{ $t("fn_011") }}</view>
              <view class="bt1">{{ $t("MN_F_T_453") }}(PV)</view>
              <view class="bt1">{{ $t("MN_F_T_657") }}</view>
            </view>
            <view
              class="d-b-c border-b"
              v-for="(item, index) in popMould.levelMemberSettleList"
              :key="index"
            >
              <view class="btPlace" v-if="item.placeDept >= 4">
                {{ item.placeDept
                }}<span v-if="languages === 'en-US'">th</span> {{ "" }}
                {{ $t("fn_011") }}
              </view>
              <view class="btPlace" v-else>
                {{ item.placeDept }}{{ $t("fn_011") }}
              </view>
              <!-- <view class="btPlace">{{ $t('fn_010') }}{{ item.placeDept }}{{ $t('fn_011') }}</view> -->
              <view class="flex-1">
                <view class="b_flex">
                  <view class="bt2">{{ $t("ENU_MENU_102") }}</view>
                  <view class="bt2">{{ formatNum(item.newPv) }}</view>
                </view>
                <view class="b_flex">
                  <view class="bt2">{{ $t("N_I_103") }}</view>
                  <view class="bt2">{{ formatNum(item.sumPv) }}</view>
                </view>
                <view class="b_flex">
                  <view class="bt2">{{ $t("fn_089") }}</view>
                  <view class="bt2"
                    >{{ formatNum(item.abalance) }}
                    <text>/</text>
                    {{ formatNum(item.bbalance) }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="btn_box">
          <view class="small-btn" @click="downImage('Poster1')">{{
            $t("S_C_45")
          }}</view>
          <view class="small-text-btn" @click="copyText()">{{
            $t("N_I_243")
          }}</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 TreeChart4 from "@/components/architectures/resettleSO4.vue";
import Eposter from "@/components/architectures/Poster.vue";
export default {
  components: {
    TreeChart4,
    Eposter,
  },
  data() {
    return {
      avaerInfoList: [],
      treeData: [],
      queryParams: {
        memberSettlePeriodId: "", //期数
        memberCode: "", //会员编号
        level: 3, //代数
        type: 4,
      },
      memberSettlePeriodList: [], //期数
      popShow: false,
      listShow: false,
      settleName: "",
      data: {},
      size: 0.8,
      landscape: [],
      languages: "",
      popMould: {},
      isPop: false,
      touchStartPosition1: {
        x: 0,
        y: 0,
      },
      touchStartPosition2: {
        x: 0,
        y: 0,
      },
      initialDistance: 0,
      list: [],
      startX: 0,
      startY: 0,
      x: 0, // 元素的x坐标
      y: 0, // 元素的y坐标
      scale: 1, // 元素的缩放比例
      initialX: 0, // 元素的初始x坐标
      initialY: 0, // 元素的初始y坐标
    };
  },
  onLoad() {
    this.getAvarerInfo();
    // this.getDataList();
    this.languages = uni.getLocale();
  },
  methods: {
    //复制文字
    copyText() {
      let self = this;
      let md = self.popMould;
      let text = `${self.$t("MN_T_1")}：${md.memberCode} \n${self.$t(
        "CK_KS_14"
      )}：${md.name} \n${self.$t("MY_ORD_3")}：${md.payDate} \n${self.$t(
        "MN_F_T_453"
      )}(PV)  ${self.$t("MN_F_T_657")} \n`;
      if (md.levelMemberSettleList) {
        let addtext = "";
        md.levelMemberSettleList.forEach((item, index) => {
          addtext += `${self.$t("fn_010")}${item.placeDept}${self.$t(
            "fn_011"
          )}\n${self.$t("ENU_MENU_102")}  ${item.newPv}\n${self.$t(
            "N_I_103"
          )}  ${item.sumPv} \n${self.$t("fn_089")}  ${self.formatNum(
            item.abalance
          )}/${self.formatNum(item.bbalance)}\n`;
        });
        text += addtext;
      }
      uni.setClipboardData({
        data: text,
        success: function (res) {
          uni.getClipboardData({
            success: function (res) {
              uni.showToast({
                title: self.$t("MY_CK_29"),
              });
            },
          });
        },
      });
    },
    //下载图片
    downImage(elClass) {
      this.$refs.Eposter.createForElRect(elClass, false);
    },
    downloadImg() {
      let self = this;
      let element = document.querySelector(".Poster1");
      uni.showLoading({
        title: self.$t("w_0413"),
      });
      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: self.$t("fn_056"),
            duration: 2000,
          });
          uni.hideLoading();
        })
        .catch(function (error) {
          uni.hideLoading();
          uni.showModal({
            title: self.$t("w_0406"),
          });
        });
    },
    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);
    // 		console.log('--------------~~~~~~~~~~~~~~-------------');
    // 		console.log(this.initialDistance);
    // 	}
    // },
    // 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;
    // 	}
    // 	console.log(touch1);
    // 	console.log(touch2);
    // },
    // handleTouchEnd() {
    // 	this.touchStartPosition1 = {
    // 		x: 0,
    // 		y: 0
    // 	};
    // 	this.touchStartPosition2 = {
    // 		x: 0,
    // 		y: 0
    // 	};
    // 	this.initialDistance = 0;
    // },
    clickNode(e) {
      let self = this;
      if (e) {
        self._post(
          "member/manage/member-structure/get-url-base64",
          {
            countryUrl2: e.countryUrl2,
            settleCountryUrl2: e.settleCountryUrl2,
            avatarUrl: e.avatarUrl,
          },
          (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() {
      let self = this;
      self._get("member/api/member-structure/get-avatar-info", {}, (res) => {
        self.avaerInfoList = res.data;
      });
      self._get(
        "member/api/member-structure/get-member-settle-period",
        {},
        (res) => {
          self.memberSettlePeriodList = [res.data];
          let memberSettlePeriodLists = res.data;
          self.queryParams.memberSettlePeriodId =
            memberSettlePeriodLists[0].pkId;
          self.getDataList();
        }
      );
    },
    getDataList() {
      let self = this;
      let params = this.queryParams;
      self._get("/member/api/member-structure/az-framework", params, (res) => {
        self.data = res.data[0];
      });
    },
    clearAll() {
      this.popShow = false;
      this.settleName = "";
      this.queryParams = {
        memberSettlePeriodId: "", //期数
        memberCode: "", //会员编号
        level: 3, //代数
        type: 4,
      };
      this.getDataList();
    },
    handleTouchStart(event) {
      // 记录元素的初始位置
      this.initialX = event.changedTouches[0].clientX;
      this.initialY = event.changedTouches[0].clientY;
    },
    handleTouchMove(event) {
      if (event.touches.length === 2) {
        // 计算拖动的距离
        const deltaX = event.touches[0].clientX - event.touches[1].clientX;
        const deltaY = event.touches[0].clientY - event.touches[1].clientY;
        // 更新元素的位置和缩放比例
        this.x += deltaX;
        this.y += deltaY;
        // 根据滑动距离控制缩放比例
        this.scale += deltaY / 100;
      } else {
        // 计算拖动的距离
        const deltaX = event.changedTouches[0].clientX - this.initialX;
        const deltaY = event.changedTouches[0].clientY - this.initialY;
        // 更新元素的位置和缩放比例
        this.x += deltaX;
        this.y += deltaY;
      }

      // 更新元素的初始位置为最后一次拖动的结束位置
      this.initialX = event.touches[0].clientX;
      this.initialY = event.touches[0].clientY;
    },
    handleTouchEnd(event) {
      // 在这里记录第一次拖动的结束位置，以便第二次拖动时使用
      this.initialX = event.changedTouches[0].clientX;
      this.initialY = event.changedTouches[0].clientY;
    },
  },
};
</script>
<style lang="scss" scoped>
.flex-dbox {
  height: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.resettle::v-deep .u-popup__content {
  // max-height: 80vh;
}

.pop_bottom {
  height: 100%;
  overflow-y: auto;

  .btPlace {
    height: 220rpx;
    word-break: break-all;
    padding: 0 12rpx;
  }
}

.pop_bottom::-webkit-scrollbar {
  /*滚动条整体样式*/
  /*高宽分别对应横竖滚动条的尺寸*/
  display: block;
  width: 5rpx !important;
  height: 1rpx !important;
  -webkit-appearance: default-button;
}

.pop_bottom::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #909399;
  // background-image: -webkit-linear-gradient(45deg,
  //     rgba(255, 255, 255, 0.2) 25%,
  //     transparent 25%,
  //     transparent 50%,
  //     rgba(255, 255, 255, 0.2) 50%,
  //     rgba(255, 255, 255, 0.2) 75%,
  //     transparent 75%,
  //     transparent);
}

.pop_bottom::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}

.ispop_box {
  padding: 27rpx;
  padding-top: 60rpx;
  width: 670rpx;
  font-size: 24rpx;
  color: #333333;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  max-height: 80vh;

  .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;
        margin: 11rpx 18rpx;
        word-break: break-all;
      }
    }
  }

  .btn_box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    .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;

  .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;
  z-index: 99;

  .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 - 720rpx);
    margin-top: 25rpx;
    background-color: #ffffff;
    padding: 38rpx 0;

    border-radius: 20rpx;
  }

  .scoll_main {
    width: 700rpx;
    height: calc(100vh - 720rpx);
    overflow: hidden;
    // overflow: scroll;
    // overflow-x: auto;
    // overflow: auto;
  }
}
</style>
