<template>
  <!-- 会员分析 -->
  <div class="member-analysis fullcontainer">
    <div class="inner-box">
      <div class="title">
        <span class="txt">会员分析</span>
        <vue-gic-store :projectName="projectName" :showStoreDialog="showStoreDialog" @selectStore="selectStore"></vue-gic-store>
        <vue-gic-group :groupVisible="groupVisible" @closeGroup="closeGroup" @passGroupName="passName"></vue-gic-group>
      </div>
      <div class="choose-store">
        选择门店：
        <div class="all-group choose-box" @click="showGroup">
          {{groupName}}
          <i class="el-icon-caret-bottom el-icon"></i>
        </div>
        <div class="all-store choose-box" @click="showStore">
          {{storeName}}
          <i class="el-icon-caret-bottom el-icon"></i>
        </div>
      </div>
      <!-- 会员分析数据 -->
      <div class="member-data">
        <div class="member-item member-center">
          <div class="box">
            <p class="member-value">{{memberData.total}}</p>
            <p class="member-txt">会员总数</p>
          </div>
        </div>
        <div class="member-item member-middle">
          <div class="box">
            <p class="member-value">{{memberData.yesterdayNewMember}}</p>
            <p class="member-txt">昨日新增</p>
          </div>
          <div class="box">
            <p class="member-value">{{memberData.todayNewMember}}</p>
            <p class="member-txt">今日新增</p>
          </div>
          <div class="box">
            <p class="member-value">{{parseInt(memberData.lastMonthNewMember, 10).toFixed(2)}}%</p>
            <p class="member-txt">昨日会员率</p>
          </div>
          <div class="box">
            <p class="member-value">{{parseInt(memberData.lastMonthNewMember, 10).toFixed(2)}}%</p>
            <p class="member-txt">今日会员率</p>
          </div>
        </div>
        <div class="member-item member-last">
          <div class="box">
            <p class="member-value">{{memberData.lastMonthNewMember}}</p>
            <p class="member-txt">上月新增</p>
          </div>
          <div class="box">
            <p class="member-value">{{memberData.currentMonthNewMember}}</p>
            <p class="member-txt">本月新增</p>
            </div>
          <div class="box">
            <p class="member-value">{{(memberData.currentMonth).toFixed(2)}}%</p>
            <p class="member-txt">上月会员率</p>
          </div>
          <div class="box">
            <p class="member-value">{{(memberData.currentMonth).toFixed(2)}}%</p>
            <p class="member-txt">本月会员率</p>
          </div>
        </div>
      </div>

      <!-- 会员画像 -->
      <div class="member-chart">
        <div class="chart-item">
          <div class="list">
            <div class="list-title">年龄</div>
            <div class="chart-data" ref="ageBox">
              <member-age-chart :charData="serverData" v-if="serverData.length" :id="c1" :width="containerWidth"></member-age-chart>
            </div>
          </div>
          <div class="list">
            <div class="list-title">出生月份/星座</div>
            <div class="chart-data">
              <div class="star-box" ref="starBox">
                <star-chart :charData="starData"  v-if="starData.length" :id="star" :width="starWidth"></star-chart>
              </div>
              <ul class="borth-ul" v-if="borthData.length">
                <li
                  v-for="(item, index) in borthData"
                  :key="index"
                  class="borth-li">
                  <span class="borth-span borth-width">{{item.keyword}}月</span>
                  <span class="borth-span borth-width">{{((item.value / borthTotal) * 100).toFixed(2)}}%</span>
                  <span class="borth-span">{{item.value}}人</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="chart-item">
          <div class="list">
            <div class="list-title">性别</div>
            <div class="chart-data" ref="genderBox">
              <gender-chart :charData="genderData" :id="gender" :width="genderWidth" v-if="genderData.length"></gender-chart>
            </div>
          </div>
          <div class="list">
            <div class="list-title">会员等级</div>
            <div class="chart-data" ref="levelBox">
              <level-chart :charData="levelData" :id="level" :width="levelWidth" v-if="levelData.length"></level-chart>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { 
    memberCount, 
    memberPercent,
    memberAgeChart,
    memberStarChart,
    memberBorthChart,
    memberSexChart,
    memberGradeChart
  } from "@/request/api";
import VueGicGroup from '@/common/vueGicGroup';
import MemberAgeChart from "../chart/MemberAgeChart";
import StarChart from "../chart/StarChart";
import GenderChart from "../chart/GenderChart";
import LevelChart from "../chart/LevelChart";

export default {
  name: 'member-analysis',
  components: {
    VueGicGroup,
    MemberAgeChart,
    StarChart,
    GenderChart,
    LevelChart
  },
  data() {
    return{
      projectName: 'member',
      groupName: '所有分组',
      storeName: '所有门店',
      showStoreDialog: false,
      groupVisible: false,
      groupId: '',
      storeId: '',
      c1: 'agebox',
      star: 'starbox',
      containerWidth: null,
      starWidth: null,
      borthTotal: null,
      // 年龄图表数据
      serverData: [
      ],
      // 星座图表数据
      starData: [

      ],
      // 出生年月数据
      borthData: [

        ],
      // 会员数据
      memberData: {
        total: 0,
        todayNewMember: 0,
        yesterdayNewMember: 0,
        currentMonthNewMember: 0,
        lastMonthNewMember: 0,
        currentMonth: 0,
        today: 0,
        lastMonth: 0,
        yesterday: 0
      },
      // 男女人数
      genderData: [],
      gender: 'genderbox',
      genderWidth: null,
      levelData: [],
      level: 'levelbox',
      levelWidth: null
    };
  },
  created() {
    this.getData();
    this.memberCharts();
  },
  mounted() {
    this.borthTotal = this.borthData.reduce((total, ele) => {
      return total + ele.value;
    }, 0);

    this.containerWidth = this.$refs.ageBox.clientWidth;
    this.starWidth = this.$refs.starBox.clientWidth;
    this.genderWidth = this.$refs.starBox.clientWidth;
    this.levelWidth = this.$refs.levelBox.clientWidth;
  },
  methods: {
    async getData() {
      const dataRate = {
        groupId: this.groupId,
        storeId: this.storeId
      };
      // 会员相关统计
      let member = await memberCount(dataRate);
      if (member.errorCode === 0) {
        this.memberData.total = member.result.totalMember; // 会员总数
        this.memberData.todayNewMember = member.result.todayNewMember; // 今日新增会员数
        this.memberData.yesterdayNewMember = member.result.yesterdayNewMember; // 昨日会员数新增
        this.memberData.currentMonthNewMember = member.result.currentMonthNewMember; // 本月新增
        this.memberData.lastMonthNewMember = member.result.lastMonthNewMember; // 上月新增
      }

      // 会员率
      let memberPrecent = await memberPercent(dataRate);
      if (memberPrecent.errorCode === 0) {
        this.memberData.currentMonth = memberPrecent.result.currentMonth; // 本月会员率
        this.memberData.yesterday = memberPrecent.result.yesterday; // 昨日会员率
        this.memberData.today = memberPrecent.result.today; // 今日会员率
        this.memberData.lastMonth = memberPrecent.result.lastMonth; // 上月会员率
      }
    },
    // 会员画像图表
    async memberCharts() {
      const param = {
        groupId: this.groupId,
        storeId: this.storeId
      };
      if (!!param.storeId) {
        param.groupId = '';
      }
      let age = await memberAgeChart({...param, kpiName: 'statistics-age-all' });
      if (age.errorCode === 0) {
      }
      let star = await memberStarChart({...param, kpiName: 'statistics-star-all' });
      if (star.errorCode === 0) {
      }
      let borth = await memberBorthChart({...param, kpiName: 'statistics-month-all' });
      if (borth.errorCode === 0) {
      }
      let sex = await memberSexChart();
      if (sex.errorCode === 0) {
        console.log(sex.result);
        this.genderData = sex.result;
      }
      let grade = await memberGradeChart({...param, kpiName: 'statistics-grade-all' });
      if (grade.errorCode === 0) {
        this.levelData = grade.result;
      }
    },
    // 分组选择
    showGroup() {
      this.groupVisible = !this.groupVisible;
    },
    passName(val) {
      this.groupVisible = false;
      this.groupName = val.storeGroupName; // 名字 
      this.groupId = val.storeGroupId; // Id
      this.getData();
    },
    closeGroup(val) {
      // 关闭弹框
      this.groupVisible = val;
    },
    // 门店选择
    showStore() {
      this.showStoreDialog = true;
    },
    // 子组件触发方法
    selectStore(val) {
      // 模拟检查数据
      this.showStoreDialog = false;
    }
  }
};
</script>

<style lang="stylus" scoped>
.member-analysis {
  background-color: #fff;

  .inner-box {
    overflow: hidden;
    margin: 0 30px;

    .title {
      height: 40px;
      margin-top: 10px;
      border-bottom: 1px solid #ddd;

      .txt {
        display: inline-block;
        font-size: 14px;
        line-height: 15px;
        height: 15px;
        padding-left: 10px;
        border-left: 2px solid #04143a;
      }
    }
  }
}

.choose-store {
  margin-top: 20px;
  margin-left: 10px;
  font-size: 12px;

  .choose-box {
    display: inline-block;
    margin: 0 10px;
    padding-left: 10px;
    width: 120px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #dcdfe6;
    border-raduis: 3px;
    box-sizing: border-box;
    cursor: pointer;

    .el-icon {
      float: right;
      line-height: 32px;
      margin-right: 5px;
    }
  }
}

.member-data {
  display: flex;
  margin-top: 20px;
  height: 190px;

  .member-item {
    flex: 1;
    display: flex;
    border-radius: 2px;
    margin: 10px;

    .box {
      .member-txt {
        font-size: 14px;
        color: #fff;
        margin: 0;
        padding: 5px 0;
      }

      .member-value {
        margin: 0;
        padding: 5px 0;
        text-align: center;
        font-size: 28px;
        color: #fff;
      }
    }
  }

  .member-center {
    justify-content: center;
    align-items: center;
    background-color: #1496EC;
  }

  .member-middle {
    background-color: #13C2C2;
    flex-wrap: wrap;

    .box {
      width: 50%;

      .member-txt {
        text-align: center;
      }
    }
  }

  .member-last {
    flex-wrap: wrap;
    background-color: #2FC25B;

    .box {
      width: 50%;

      .member-txt {
        text-align: center;
      }
    }
  }
}

.member-chart {
  .chart-item {
    display: flex;

    .list {
      flex: 1;
      margin: 10px;
      border: 1px solid #e1e6eb;

      .list-title {
        height: 26px;
        line-height: 26px;
        padding: 8px;
        font-size: 14px;
        background-color: #f5f6fa;
        border-bottom: 1px solid #e1e6eb;
      }

      .chart-data {
        min-height: 300px;

        .star-box {
          display: inline-block;
          vertical-align: middle;
          width: 60%;
        }
        .borth-ul {
          display: inline-block;
          margin-left: 20px;
          vertical-align: middle;
          .borth-li {
            margin-top: 10px;
            margin-bottom: 10px;
            font-size: 14px;
            .borth-span {
              display: inline-block;
              margin: 0 20px;
            }
            .borth-width {
              width: 60px;
            }
          }
        }
      }
    }
  }
}
</style>
