<template>
  <!--金字塔分组表格-->
  <div class="pyramid-group">
    <el-table :data="tableList" :header-cell-style="rowClass" v-loading="loading">
      <el-table-column label="价值" width="140">
        <template #header>
          <div class="header">
            <span>消费休眠天数</span>
            <span>价值</span>
            <p class="line"></p>
          </div>
        </template>
        <template #default="{ row }">
          {{ row.gradeName || '--' }}
          ({{ row.gradeName == '核心' ? 1 : row.gradeName == '普通' ? 6 : 3 }})
          <el-tooltip placement="top">
            <template #content>
              <p class="m-b-5">消费周期 =  (最近消费日期 - 首次消费日期 + 1) / 365；</p>
              <p class="m-b-5">年平均消费次数 = 消费周期 / 有效消费次数；</p>
              <p>年平均消费金额 = 累计消费金额 / 消费周期；</p>
            </template>
            <i v-if="row.gradeName == '核心'" class="iconfont icon-QuestionCircleOutlined" />
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column v-for="(v, i) in tableHeader" :key="i" :prop="v.prop" :min-width="v.minWidth" :label="v.label" :formatter="v.formatter" :fixed="v.fixed">
        <template slot-scope="scope">
          <span v-if="v.formatter" v-html="v.formatter(scope.row)" @click="toDetail(scope.row, i)"></span>
          <span v-else>{{ scope.row[v.prop] || '--' }}</span>
          </template>
      </el-table-column>
    </el-table>
    <div class="unconsume-member">
      <span>{{ consumeList.gradeName }}</span>
      <card-item style="margin-right: 16px" v-for="(v, i) in consumeList.itemList" :key="i" :title="v.groupName" :count="v.memberCount" :data="consumeList" @toDetail="toDetail" :index="i" />
    </div>
    <div class="show-haoban">
      <h2>展示在好办</h2>
      <span class="tips">开启后，默认次日更新好办管理后台，如需立即更新，请至好办管理后台操作“同步”</span>
      <p>
        <span v-for="item in haobanList" :key="item.memberTagGradeId" class="switch-item">
          <span>{{ item.aliasName }}</span>
          <el-switch class="switch" v-model="item.hanbanShow" active-color="#2f54eb" @change="onChangeSwitch(item)" />
        </span>
      </p>
    </div>
  </div>
</template>

<script>
import { getRequest } from '@/api/api';
import cardItem from './card-item';
export default {
  components: {
    cardItem
  },
  data() {
    return {
      haobanList: [],
      tableList: [],
      tableHeader: [],
      consumeList: [], // 未消费会员
      loading: false
    };
  },
  created() {
    this.getTableHeader();
    this.getHaoBanData();
    this.getTableList();
  },
  methods: {
    getTableHeader() {
      this.tableHeader = [
        { label: '指标说明', prop: 'gradeDesc', minWidth: 160 },
        { label: '0-30（高活跃）', minWidth: 130, formatter(row) { return `<span style="color:#2f54eb;cursor:pointer">${row.itemList[0].memberCount }人</span>` }},
        { label: '31-90（活跃）', minWidth: 130, formatter(row) { return `<span style="color: #2f54eb;cursor:pointer">${row.itemList[1].memberCount }人</span>` } },
        { label: '91-180（边缘）', minWidth: 130, formatter(row) { return `<span style="color: #2f54eb;cursor:pointer">${row.itemList[2].memberCount }人</span>` } },
        { label: '181-1年（沉睡）', minWidth: 130, formatter(row) { return `<span style="color: #2f54eb;cursor:pointer">${row.itemList[3].memberCount }人</span>` } },
        { label: '1年-2年（流失）', minWidth: 130, formatter(row) { return `<span style="color: #2f54eb;cursor:pointer">${row.itemList[4].memberCount }人</span>` } },
        { label: '2年以上（Lost+）', minWidth: 140, formatter(row) { return `<span style="color: #2f54eb;cursor:pointer">${row.itemList[5].memberCount }人</span>` } },
      ]
    },
    async getHaoBanData() {
      const res = await getRequest('/memberTagGrade/gradeListNew', {});
      const { result } = res.data;
      this.haobanList = result;
    },
    async getTableList() {
      this.loading = true;
      const res = await getRequest('/memberTagGrade/gradeGroupListNew', {});
      const { result } = res.data;
      this.tableList = result.result.filter(el => el.gradeName != '未消费');
      this.consumeList = result.result.find(el => el.gradeName == '未消费');
      this.loading = false;
    },
    async onChangeSwitch(item) {
      const { hanbanShow, memberTagGradeId } = item;
      const params = { appStatus: Number(hanbanShow), memberTagGradeId };
      const { data } = await getRequest('/memberTagGrade/updateHanbanShow', params);
      if (data.errorCode != 1) return this.$message.error(data.message);
    },
    toDetail(row, index) {
      if (!this.$getButtonLimit(this.$buttonCode.memberTagGroupLevelDetail)) return;
      if (row.gradeName.includes('未消费')) {
        const item = row.itemList[index];
        this.$router.push(`/memberLevelDetail?memberTagGroupId=${item.memberTagGroupId}&aliasName=${item.groupName}`)
      } else {
        const item = row.itemList[--index];
        const { gradeName } = row;
        let { groupName } = item;
        const groupNameArr = groupName.replace(/[（|）]/g, ' ').split(' ');
        const time = !groupNameArr[0].includes('年') ? groupNameArr[0] + '天' : groupNameArr[0];
        const aliasName = gradeName + groupNameArr[1];
        this.$router.push(`/memberLevelDetail?memberTagGroupId=${item.memberTagGroupId}&aliasName=${aliasName}&time=${time}&type=${gradeName}`)
      }
    }
  }
};
</script>

<style lang="scss">
.pyramid-group {
  .header {
    display: flex;
    flex-direction: column;
    padding: 0;
    font-size: 13px;
    position: relative;
    span:first-child {
      text-align: right;
      margin-right: 6px;
    }
    span:last-of-type {
      margin-left: 16px;
    }
    .line {
      position: absolute;
      width: 170px;
      background: #dcdfe6;
      top: 0;
      left: -5px;
      height: 1px;
      transform-origin: left top;
      transform: rotate(29deg);
    }
  }
  th.el-table__cell {
    padding: 0 !important;
    &:nth-of-type(2) {
      .cell {
        padding: 0 20px !important;
      }
    }
    &:first-child {
      .cell {
        padding: 0 !important;
      }
    }
  }
  .el-table__cell {
    &:nth-of-type(2), &:first-child {
      border-right: 1px solid #dcdfe6;
    }
  }
  .unconsume-member {
    display: flex;
    align-items: center;
    margin-top: 16px;
    & > span {
      margin-left: 10px;
      margin-right: 56px;
      font-size: 14px;
    }
  }
  .show-haoban {
    margin-top: 30px;
    h2 {
      color: #303133;
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 7px;
      line-height: 22px;
    }
    .switch-item {
      display: inline-block;
      margin-right: 30px;
      margin-bottom: 20px;
      .switch {
        margin-left: 14px;
      }
    }
  }
  .tips {
    display: inline-block;
    font-size: 12px;
    color: #909399;
    margin-bottom: 20px;
  }
}
</style>
