<template>
  <view class="table pr" :style="'zoom:' + size + ';'">
    <view class="v-tr" style="display: flex">
      <view
        class="v-td"
        :class="{
          colspan: Array.isArray(treeData.children)
            ? treeData.children.length * 2
            : 1,
          parentLevel:
            Array.isArray(treeData.children) && treeData.children.length,
          extend:
            Array.isArray(treeData.children) &&
            treeData.children.length &&
            treeData.extend,
        }"
      >
        <view :class="{ node: true }">
          <view
            class="person"
            :class="Array.isArray(treeData.class) ? treeData.class : []"
          >
            <view class="Poster1">
              <view class="pop_top">
                <view class="pop_top">
                  <view>
                    <!-- <image
											crossorigin="anonymous"
											data-etype="image"
											:data-enode="treeData.avatarUrl"
											:src="'data:image/png;base64,' + treeData.avatarUrlBase64"
											mode="aspectFit"
											class="poster1"
										></image> -->
                    <image
                      crossorigin="anonymous"
                      data-etype="image"
                      :data-enode="treeData.avatarUrl"
                      :src="treeData.avatarUrlBase64"
                      mode="aspectFit"
                      class="poster1"
                    ></image>
                  </view>
                  <view>
                    <image
                      crossorigin="anonymous"
                      data-etype="image"
                      :data-enode="treeData.countryUrl2"
                      :src="treeData.countryUrl2Base64"
                      mode="aspectFit"
                      class="poster2"
                    ></image>
                  </view>
                </view>
                <view class="top_right">
                  <!-- <image
										crossorigin="anonymous"
										data-etype="image"
										:data-enode="treeData.settleCountryUrl2"
										:src="'data:image/png;base64,' + treeData.settleCountryUrl2Base64"
										mode="aspectFit"
										class="poster2"
									></image> -->
                  <!-- <image crossorigin="anonymous" data-etype="image"
										:data-enode="treeData.settleCountryUrl2" :src="treeData.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">{{ treeData.memberCode }}</view>
                </view>
                <view class="center_flex">
                  <view class="c1">{{ $t("CK_KS_14") }}</view>
                  <view class="c2">{{ treeData.name }}</view>
                </view>
                <view class="center_flex">
                  <view class="c1">{{ $t("PER_DA_15") }}</view>
                  <view class="c2">{{ treeData.gradeName }}</view>
                </view>
                <view class="center_flex">
                  <view class="c1">{{ $t("ENU_PER_TY_2") }}</view>
                  <view class="c2">{{ treeData.awardsName }}</view>
                </view>
              </view>
              <view class="pop_bottom">
                <view class="b_flex">
                  <view class="bt1 bt1-s"
                    >{{ $t("ENU_CONTROL_TYPE_1") }}(PV)</view
                  >
                  <view class="bt1">{{ treeData.newPv || 0 }}</view>
                </view>
                <view class="b_flex">
                  <view class="bt1 bt1-s">
                    {{ $t("MN_F_T_1013") + $t("N_I_106") }}({{
                      $t("w_0337")
                    }})</view
                  >
                  <view class="bt1">{{ treeData.sParentCount || 0 }}</view>
                </view>
                <!-- <view class="d-b-c border-b" v-for="(item, index) in treeData.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="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="flex_btn">
              <view
                @click.stop="copyText(treeData)"
                class="goTop_btn"
                style="background-color: #f37825"
              >
                {{ $t("N_I_243") }}
              </view>
              <view
                @click.stop="clickTop(treeData)"
                class="goTop_btn"
                style="background-color: #21c8f4"
              >
                {{ $t("N_I_245") }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="v-tr"
      v-if="
        Array.isArray(treeData.children) &&
        treeData.children.length &&
        treeData.extend
      "
    >
      <view
        v-for="(children, index) in treeData.children"
        :key="index"
        colspan="2"
        class="childLevel v-td"
      >
        <TreeChart
          :treeData="children"
          :left="0"
          :top="0"
          @click-node="clickNode"
          @click-top="clickTop"
        />
      </view>
    </view>
  </view>
</template>

<script>
import html2canvas from "html2canvas";
// import Eposter from '@/components/architectures/Poster.vue';
export default {
  components: {
    // Eposter
  },
  name: "TreeChart",
  props: ["treeData", "size"],
  data() {
    return {
      list: [],
      languages: "",
    };
  },

  onload() {
    this.languages = uni.getLocale();
  },
  methods: {
    //复制文字
    copyText(md) {
      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("PER_DA_15")}：${md.gradeName} \n${self.$t(
        "ENU_PER_TY_2"
      )}：${md.awardsName} \n${self.$t("ENU_CONTROL_TYPE_1")}(PV)：${
        md.newPv ||0
      } \n${self.$t("MN_F_T_1013") + self.$t("N_I_106")}(${self.$t(
        "w_0337"
      )})：${md.sParentCount||0}`;
      //   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"),
              });
            },
          });
        },
      });
    },
    toggleExtend: function (treeData) {
      treeData.extend = !treeData.extend;
      this.$forceUpdate();
    },
    clickTop(e) {
      this.$emit("click-top", e);
    },
  },
};
</script>

<style scoped lang="scss">
.btPlace {
  border: none;
  background: none;
}

.flex_btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  margin-top: 10rpx;

  .goTop_btn {
    padding: 10rpx 10rpx;
    border-radius: 8rpx;
    font-size: 22rpx;
    margin: 0 auto;
    width: 100rpx;
  }
}

.Poster1 {
  width: 600rpx;
  font-size: 24rpx;
  color: #333333;

  // background-color: pink;
  .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;
      }

      .bt1-s {
        width: 140rpx;
        flex: inherit;
      }

      .bt2 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 22rpx;
        flex: 1;
        background: none;
        border: none;
        // border-radius: 8rpx;
        padding: 12rpx;
        margin: 11rpx 18rpx;
        word-break: break-all;
      }
    }
  }

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

.f18 {
  font-size: 18rpx;
}

.pv-btn {
  width: 200rpx;
  height: 50rpx;
  background-color: #b2821e;
  color: #fff;
  font-size: 20rpx;
  line-height: 50rpx;
  display: flex;
  align-items: center;
  margin: auto;
  margin-top: 12rpx;
  margin-bottom: 12rpx;
}

.next-btn {
  border-radius: 50%;
  background: none;
  width: 40rpx;
  height: 40rpx;
  margin: auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
}

.v-tr {
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.v-td {
  position: relative;
  vertical-align: top;
  padding: 0 0 130rpx 0;
  text-align: center;
}

.extend_handle {
  position: absolute;
  left: 50%;
  bottom: 30rpx;
  width: 10rpx;
  height: 10rpx;
  padding: 10rpx;
  transform: translate3d(-30rpx, 0, 0);
  cursor: pointer;
}

.extend_handle:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 4rpx solid;
  border-color: #f2f2f2 #f2f2f2 transparent transparent;
  transform: rotateZ(135deg);
  transform-origin: 50% 50% 0;
  transition: transform ease 300ms;
}

.extend_handle:hover:before {
  border-color: #f2f2f2 #f2f2f2 transparent transparent;
}

.extend .extend_handle:before {
  transform: rotateZ(-45deg);
}

.extend::after {
  // content: '';
  position: absolute;
  left: 50%;
  bottom: 84rpx;
  height: 84rpx;
  border-left: 4rpx solid #f2f2f2;
  transform: translate3d(-2rpx, 0, 0);
}

.childLevel::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  height: 84rpx;
  border-left: 4rpx solid #f2f2f2;
  transform: translate3d(-2rpx, 0, 0);
}

.childLevel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -88rpx;
  border-top: 4rpx solid #f2f2f2;
}

.childLevel:first-child:before,
.childLevel:last-child:before {
  display: none;
}

.childLevel:first-child:after {
  left: 50%;
  height: 84rpx;
  border: 4rpx solid;
  border-color: #f2f2f2 transparent transparent #f2f2f2;
  border-radius: 6rpx 0 0 0;
  transform: translate3d(2rpx, 0, 0);
}

.childLevel:last-child:after {
  right: 50%;
  height: 84rpx;
  border: 4rpx solid;
  border-color: #f2f2f2 #f2f2f2 transparent transparent;
  border-radius: 0 6rpx 0 0;
  transform: translate3d(-2rpx, 0, 0);
}

.childLevel:first-child.childLevel:last-child::after {
  left: auto;
  border-radius: 0;
  border-color: transparent #f2f2f2 transparent transparent;
  transform: translate3d(2rpx, 0, 0);
}

.node {
  position: relative;
  display: inline-block;
  margin: 0 10rpx;
  box-sizing: border-box;
  text-align: center;
}

.node .person {
  position: relative;
  display: inline-block;
  z-index: 2;
  padding: 20rpx;
  background-color: #ffffff;
  border: 1px solid #eee;
  // box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 15rpx;
  font-size: 22rpx;
}

.person_flex {
  display: flex;
  padding: 10rpx 20rpx;
  box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.15);
  margin: 0rpx 0 20rpx 0;
}

.flex-p1 {
  margin: 0 5rpx;
}

.node .person .person-ava {
  width: 88rpx;
  height: 53rpx;
  border-radius: 10rpx;
}

.node .person .person-ava1 {
  width: 104rpx;
  height: 104rpx;
  border-radius: 50%;
}

.node .person .avat {
  display: block;
  width: 4em;
  height: 4em;
  margin: auto;
  overflow: hidden;
  background: #fff;
  border: 4px solid #f2f2f2;
  box-sizing: border-box;
  border-radius: 0.5em;
}

.node .person .avat img {
  width: 100%;
  height: 100%;
}

.node .person .name {
  display: block;
  margin: auto;
  overflow: hidden;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 20rpx;
  line-height: 1.5;
  padding-top: 24rpx;
}

.node .person .name-bottom {
  display: block;
  margin: auto;
  overflow: hidden;
  border-top: none;
  box-sizing: border-box;
  overflow: hidden;
}

.node .person .operation {
}

.node.hasMate::after {
  content: "";
  position: absolute;
  left: 2em;
  right: 2em;
  top: 2em;
  border-top: 4px solid #f2f2f2;
  z-index: 1;
}

/* 横板 */
.landscape {
  transform: translate(-100%, 0) rotate(-90deg);
  transform-origin: 100% 0;
}

.landscape .node {
  text-align: left;
  height: 8em;
  width: 8em;
}

.landscape .person {
  position: relative;
  transform: rotate(90deg);
  padding-left: 4.5em;
  height: 4em;
  top: 4em;
  left: -1em;
}

.landscape .person .avat {
  position: absolute;
  left: 0;
}

.landscape .person .name {
  height: 4em;
  line-height: 4em;
}

.landscape .hasMate {
  position: relative;
}

.landscape .hasMate .person {
  position: absolute;
}

.landscape .hasMate .person:first-child {
  left: auto;
  right: -4em;
}

.landscape .hasMate .person:last-child {
  left: -4em;
  margin-left: 0;
}
</style>
