<template>
  <div>
    <c-title :hide="false" :text="page_title" tolink="detailed"></c-title>
    <div class="content-box" v-if="is_show">
      <!--顶部用户信息-->
      <div class="user box-item">
        <div class="user-img">
          <img class="user-img-icon" :src="user.avatar_image" />
        </div>
        <div class="user_name">{{ user.username }}</div>
        <div class="user_id">ID：{{ user.uid }}</div>
      </div>
      <!--可提现金额&团队人数-->
      <div class="money-and-team box-item">
        <div class="team-block" @click="goToPage('withdrawal')">
          <div class="team-block-title">
            可提现(元)<i class="fa fa-angle-right"></i>
          </div>
          <div class="team-block-money">{{ income }}</div>
        </div>
        <div class="team-block" @click="goToPage('myRelationship')">
          <div class="team-block-title">
            团队总数<i class="fa fa-angle-right"></i>
          </div>
          <div class="team-block-money">{{ team_total }}</div>
        </div>
      </div>
      <!--统计信息-->
      <div class="statistics box-item">
        <!--顶部内容-->
        <div class="statistics-top">
          <div class="top-block">
            <div class="top-title">累计收入(元)</div>
            <div class="top-income">{{ total_income }}</div>
          </div>
          <div class="top-block">
            <div class="top-title" @click="goToPage('incomedetails')">
              收入明细<i class="fa fa-angle-right"></i>
            </div>
          </div>
        </div>
        <!--统计列表-->
        <div class="statistic-list">
          <div class="list-box" v-for="(item,index) in statistics" :key="index" @click="detailsGoToPage(item)">
            <div class="box-title">{{ item.title }}</div>
            <div class="box-num">{{ item.num }}</div>
          </div>
        </div>
      </div>
      <!--常用工具-->
      <div class="tool-title">常用工具</div>
      <div class="tool-content box-item">
        <div class="tool-block" v-for="(item,index) in tool_list" :key="index" @click="toolGoToPage(item.path_name)">
          <div class="tool-left">
            <img class="tool-icon" :src="require('../../../assets/images/weight_value/' + item.icon)" />
          </div>
          <div class="tool-right">
            <div class="right-title">{{ item.title }}</div>
            <div class="right-desc">{{ item.sub_title }}</div>
          </div>
        </div>
      </div>
    </div>

    <!--  海报部分  -->
    <yz-goodsposter v-model="posterShow" :posterData="poster_Data" :defaultImg="poster" :width="`18.875rem`" v-on:finish="uploadImageM"></yz-goodsposter>
    <!--  海报部分  end  -->
  </div>
</template>
<script>
import yzGoodsposter from "components/ui_components/yz_goodsPoster";
export default {
  components:{
    yzGoodsposter,
  },
  data() {
    return {
      page_title: '',
      page_params: {},
      is_show: false,
      user: {},
      statistics: {},
      income: 0,
      total_income: 0,
      team_total: 0,
      // 常用工具列表
      tool_list:[
        { title: '我的权重值', sub_title: '查看权重值', icon: '001.png', path_name: 'weight_value' },
        { title: '我的典藏', sub_title: '我的画作', icon: '002.png', path_name: 'collection_room' },
        { title: '我的客户', sub_title: '团队客户明细', icon: '003.png', path_name: 'myRelationship' },
        { title: '分享二维码', sub_title: '生成分享码', icon: '004.png', path_name: 'qrcode' },
        { title: '团队业绩', sub_title: '团队累计业绩', icon: '005.png', path_name: 'incomedetails' },
      ],
      // 海报
      posterShow: false,
      poster: "",
      poster_Data: {
        poster_data: null,
        background: {}
      },

    };
  },
  activated() {
    let _this = this;
    _this.page_params = Object.assign(_this.$route.params, _this.$route.query);
    _this.getData();
  },
  methods: {
    // 数据获取
    getData() {
      let _this = this;
      let params = {
        team_level_id: _this.page_params.team_level_id
      };
      $http.get("plugin.weight-value.api.index.get-center-data", params, "加载中...").then((res) => {
        if (parseInt(res.result) === 1) {
          let data = res.data;
          let title = data.level_name || '经纪人';
          _this.page_title = document.title = (title + '中心');
          _this.user = data.user;
          _this.statistics = data.statistics;
          _this.income = data.income;
          _this.total_income =  data.total_income;
          _this.team_total = data.team_total;

          _this.is_show = true;
        }
      }).catch((error) => {});
    },
    // 跳转页面
    goToPage(key, params = {}, query = {}) {
      if(key) this.$router.push(this.fun.getUrl(key, params, query));
    },
    // 统计明细跳转处理
    detailsGoToPage(info){
      let _this = this;
      if(info.key_name){
        let query = {
          key_name: info.key_name || '',
          team_level_id: _this.page_params.team_level_id
        };
        this.goToPage('weight_value_detailed',{},query);
      }
    },
    // 工具跳转处理
    toolGoToPage(pathName){
      if(pathName === 'weight_value') this.goToPage('weight_value',{},{ team_level_id: this.page_params.team_level_id});
      else if(pathName === 'qrcode') this.getPoster();
      else this.goToPage(pathName);
    },
    // 生成分享二维码海报
    getPoster(e) {
      let _this = this;
      $http.get("member.qrcode.get-poster", {}, {})
        .then(res => {
          if (parseInt(res.result) === 1) {
            _this.isNewPosterPlugin = res.data.new || false;
            let center_show = !isNaN(parseInt(res.data.center_show)) ? parseInt(res.data.center_show) : 0;
            if (center_show === 0) {
              //0 返回的默认图片
              _this.poster = res.data.image_url;
              _this.posterShow = true;
            } else if (center_show === 1) {
              //前端生成
              _this.poster_Data.background.src = res.data.background_url || res.data.background;
              _this.poster_Data.background.type = "background";
              _this.poster_Data.poster_data = res.data.style_data;
              _this.poster_id = res.data.id;
              _this.posterShow = true;
            } else if (center_show === 2) {
              //部分关注二维码不支持跨域，走老接口
              _this.toastPoster = _this.$toast({
                duration: -1, // 持续展示 toast
                message: "正在为您生成海报中"
              });
              _this.openQrCode_old(e);
            }
          }
        })
        .catch((error) => {});
    },
    openQrCode_old(e) {
      if (!this.poster) {
        if (!this.timer) {
          this.getPoster_oldApi(e);
          this.timer = setInterval(() => {
            this.getPoster_oldApi(e);
          }, 3000);
        }
      } else {
        clearInterval(this.timer);
        this.toastPoster.clear();
      }
    },
    getPoster_oldApi(e) {
      $http.get("member.poster").then(
        response => {
          if (response.result === 1) {
            this.poster = response.data.image_url;
            if (this.poster) this.clearPostetInterval();
          } else {
            this.$toast(response.msg);
            this.clearPostetInterval();
          }
        },
        response => {
          this.clearPostetInterval();
        }
      );
    },

  }
};
</script>
<style lang="scss" scoped>
.content-box {
  --item-about-margin-: 15px;
  --item-width-: calc(100% - (var(--item-about-margin-) * 2));

  background: rgba(255, 220, 47, 0.82);
  width: 100vw;
  padding-top: var(--item-about-margin-);
  min-height: calc(100vh - 40px);
  background: url('../../../assets/images/weight_value/home_bg.jpg') no-repeat;
  background-size: 100% auto;

  // 公共内容
  .box-item {
    margin-left: var(--item-about-margin-);
    margin-right: var(--item-about-margin-);
    margin-bottom: var(--item-about-margin-);
    width: var(--item-width-);
    background: #fff;
    padding: 15px 20px;
    border-radius: 10px;
  }
  // 顶部用户信息
  .user {
    --user-height-: 30px;
    --user-spacing-: 10px;

    height: var(--user-height-);
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    background: none !important;
    padding: 0!important;
    .user-img {
      width: var(--user-height-);
      height: var(--user-height-);
      border-radius: 50%;
      overflow: hidden;
      margin-right: var(--user-spacing-);
      .user-img-icon {
        width: 100% !important;
        height: 100% !important;
      }
    }
    .user_name {
      margin-right: var(--user-spacing-);
      font-size: 14px;
      font-weight: bold;
    }
    .user_id {
      margin-right: var(--user-spacing-);
      background: #aa9884;
      font-size: 13px;
      padding: 0 10px;
      height: 20px;
      line-height: 20px;
      border-radius: 50px;
      color: #ffffff;
    }
  }
  // 可提现金额&团队人数
  .money-and-team {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;

    .team-block {
      width: 50%;
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      .team-block-title{
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        color: #606060;
        i{
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          font-size: 20px;
        }
      }
      .team-block-money{
        font-weight: bold;
        font-size: 17px;
      }
    }
  }
  // 统计信息
  .statistics {
    .statistics-top {
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;

      .top-block {
        text-align: left;

        .top-title {
          font-size: 12px;
          height: 20px;
          line-height: 20px;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: center;
          color: #606060;

          i {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 20px;
          }
        }

        .top-income {
          font-weight: bold;
          font-size: 17px;
        }
      }
    }
    .statistic-list {
      width: calc(100% + 40px);
      position: relative;
      left: -20px;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: wrap;
      .list-box {
        width: calc(100% / 3);
        height: 70px;
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        .box-title {
          font-size: 12px;
          height: 20px;
          line-height: 20px;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: center;
          color: #606060;
        }
        .box-num {
          font-weight: bold;
          font-size: 17px;
        }
      }
    }
  }
  //常用工具
  .tool-title{
    padding: 0 20px;
    padding-bottom: 15px;
    font-weight: bold;
    font-size: 17px;
    text-align: left;
  }
  .tool-content{
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    .tool-block{
      --tool-block-height-: 50px;

      width: 50%;
      height: var(--tool-block-height-);
      margin-bottom: 15px;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;

      .tool-left{
        width: var(--tool-block-height-);
        height: var(--tool-block-height-);
        display: inline-flex;
        .tool-icon{
          width: 45% !important;
          height: 45% !important;
        }
      }
      .tool-right{
        text-align: left;
        .right-title{
          font-weight: 600;
          font-size: 14px;
        }
        .right-desc{
          font-size: 12px;
          color: #a0a3ae;
        }
      }
    }
    /* 使用选择器重置最后一行的格子下边距为0 */
    .tool-block:nth-child(2n+1):nth-last-child(-n+2),
    .tool-block:nth-child(2n+1):nth-last-child(-n+2)~.tool-block{
      margin-bottom: 0!important;
    }
  }
}
</style>