<template>
<div class="chart-index">
  <el-row class="top-info"  :gutter="20">
    <el-col :span="8" v-if="checkedReport.includes('total_number_of_users')">
      <card label="总用户">{{echartsInfo.selectUserCount}}</card>
    </el-col>
    <el-col :span="8" v-if="checkedReport.includes('total_number_of_registered_users')">
      <card label="总注册用户">{{echartsInfo.selectRegisteredCount}}</card>
    </el-col>
    <el-col :span="8" v-if="checkedReport.includes('total_number_of_registered_users')">
      <card label="最近7天新增" @click.native="toNewUsers" class="under-line" >{{echartsInfo.selectRecentlyCount}}</card>
    </el-col>
  </el-row>
  <user-source mode="report" subtitle="最近七天" @click.native="toUserSource"  v-if="checkedReport.includes('user_source')"></user-source>
  <user-behavior class="marginTB" mode="lines" :select-building="true" @click.native="toBehaviorAnalysis" subtitle="最近七天" v-if="checkedReport.includes('user_behavior')"></user-behavior>
 <el-row :gutter="20">
    <el-col :span="12" v-if="checkedReport.includes('active_users')">
      <user-active></user-active>
    </el-col>
    <el-col :span="12"  v-if="checkedReport.includes('conversion_rate')">
      <user-conversion></user-conversion>
    </el-col>
    <el-col :span="12" v-if="checkedReport.includes('sex_ratio')">
      <user-sex></user-sex>
    </el-col>
    <el-col :span="12" v-if="checkedReport.includes('urban_distribution')">
      <user-city></user-city>
    </el-col>
  </el-row>
  <new-users class="marginTB" mode="table" v-if="checkedReport.includes('number_of_new_users')"></new-users>
  <intentional-customers class="marginTB" v-if="checkedReport.includes('intentional_user')"></intentional-customers>
</div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import apis from "../../config/api";
import { mapState } from "vuex";
import Echarts from "echarts";
const { mapActions: mapReportActions } = createNamespacedHelpers("report");
const {
  mapState: mapIndexEchartsState,
  mapActions: mapIndexEchartsActions
} = createNamespacedHelpers("indexEcharts");

export default {
  components: {
    Card: () => import('./components/Card'),
    UserSource: () => import('./components/UserSource'),
    UserBehavior: () => import('./components/UserBehavior'),
    UserActive: () => import('./components/UserActive'),
    UserConversion: () => import('./components/UserConversion'),
    UserSex: () => import('./components/UserSex'),
    UserCity: () => import('./components/UserCity'),
    NewUsers: () => import('./components/NewUsers'),
    IntentionalCustomers: () => import('./components/IntentionalCustomers'),
  },
  data() {
    return {
        pageNavi: {
            current: 1,
            size: 200,
            total: 0
        },
        checkedReport: [] // 是否展示报表
    };
  },
  computed: {
    ...mapIndexEchartsState({
      echartsInfo: x => x.echartsInfo
    })
  },
  methods: {
    ...mapIndexEchartsActions(["getIndexEcharts", "setDetailNull"]),
    ...mapReportActions(["getReportList", "getReportCheckedList", "saveCheckedReport"]),
    initPage() {
      this.setDetailNull();
      this.getIndexEcharts().then(window.console.log);;
    },
    toNewUsers() {
      this.$router.push({ name: "newUsers" });
    },
    toUserSource() {
      this.$router.push({ name: "userSource" });
    },
    toBehaviorAnalysis() {
      this.$router.push({ name: "behaviorAnalysis" });
    },
    getCheckedList() { // 获取是否展示报表
          const pageNumber = this.pageNavi.current || 1;
          const pageSize = this.pageNavi.size;
          this.getReportCheckedList({
              pageNumber,
              pageSize
          }).then(res => {
             const { records, ...pageNavi } = res;

             this.checkedReport = (records || []).map((x) => x.reportCode);
             this.pageNavi = pageNavi;
          }).catch(err => {
                  this.$notify.error(err.msg || err.message);
          });
    }
  },
  mounted() {
    this.initPage();
    this.getCheckedList()
  }
};
</script>

<style lang="scss" scoped>
.chart-index {
  background-color: transparent !important;
}

p {
  margin: 0;
}

.marginTB {
  margin: 20px 0;
}

.top-info {
  margin: 20px 0;
  .grid-content {
    background-color: #044281;
    text-align: center;
    color: #fff;
    padding: 26px 0;
    border-radius: 4px;
    p {
      font-size: 24px;
      margin: 0;
      line-height: 40px;
    }
    span {
      font-size: 16px;
    }
  }
}
.title {
  line-height: 40px;
  font-size: 22px;
  font-weight: 600;
}
.title-desc {
  font-size: 16px;
  color: #888;
  margin-bottom: 6px;
}
.under-line {
  text-decoration: underline;
}
</style>


