<template>
  <div class="index_page app-container">
    <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->
    <h4>平台数据统计</h4>
    <div class="list">
      <div class="item">
        <div>
          <span>客户总数</span>
          <span>{{platData.userCount}}</span>
        </div>
      </div>
      <div class="item">
        <div>
          <span>政策总数</span>
          <span>{{platData.policyCount}}</span>
        </div>
      </div>
      <div class="item">
        <div>
          <span>需求总数</span>
          <span>{{platData.needCount}}</span>
        </div>
      </div>
      <div class="item">
        <div>
          <span>成果总数</span>
          <span>{{platData.resultCount}}</span>
        </div>
      </div>
      <div class="item">
        <div>
          <span>解读总数</span>
          <span>{{platData.readCount}}</span>
        </div>
      </div>
    </div>
    <el-row :gutter="50">
      <el-col :span="12">
        <h4 style="margin:100px 0 0">政策解读趋势</h4>
        <line-chart :chart-data="lineChartData" />
      </el-col>
      <el-col :span="12">
        <h4 style="margin:100px 0 0">需求成果趋势</h4>
        <line-chart :chart-data="lineChartData2" />
      </el-col>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <h4 style="margin:100px 0 0">客户增加趋势</h4>
      <line-chart :chart-data="lineChartData3" />
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {
  getPlatformData,
  getMonthPolicyCount,
  getMonthNeedCount,
  getMonthReadCount,
  getMonthResultCount,
  getMonthUserCount
} from '@/api/home/index';
export default {
  name: 'Index',
  components: {
    // PanelGroup,
    LineChart,
    // RaddarChart,
    // PieChart,
    // BarChart
  },
  data() {
    return {
      platData:{},
      lineChartData: {
        arr:["政策", "解读"],
        keys:[],
        expectedData:[],
        actualData: []
      },
      lineChartData2: {
        arr:["需求", "成果"],
        keys:[],
        expectedData:[],
        actualData: []
      },
      lineChartData3: {
        arr:['客户'],
        keys:[],
        expectedData:[],
        actualData: []
      }
    };
  },
  methods:{
    handleSetLineChartData(type) {
      // this.lineChartData = lineChartData[type]
    }
  },
  created(){
    getPlatformData().then(({data})=>{
      this.platData = data
    })
    // 政策增加趋势
    getMonthPolicyCount().then(({data})=>{
      this.lineChartData.keys = Object.keys(data)
      this.lineChartData.expectedData = Object.values(data)
      // 解读增加趋势
      getMonthReadCount().then(({data:res})=>{
        this.lineChartData.actualData = Object.values(res)
      })
    })
    // 需求增加趋势
    getMonthNeedCount().then(({data})=>{
      this.lineChartData2.keys = Object.keys(data)
      this.lineChartData2.expectedData = Object.values(data)
      // 成果增加趋势
      getMonthResultCount().then(({data:res})=>{
        this.lineChartData2.actualData = Object.values(res)
      })
    }),
    // 客户增加趋势
    getMonthUserCount().then(({data})=>{
      this.lineChartData3.keys = Object.keys(data)
      this.lineChartData3.expectedData = Object.values(data)
    })
  }
};
</script>
<style lang="scss" scoped>
  .index_page{
    h4{
      padding-left: 10px;
      border-left: 4px solid #ff944b;
    }
    .list{
      display: flex;
      justify-content: space-around;
      .item{
        border-radius: 6px;
        width: 240px;
        height: 110px;
        margin-right: 15px;
        background-color: red;
        background: url(~@/assets/image/01.png) no-repeat center center;
        background-size: 100%;
        div{
          height: 100%;
          color: #fff;
          display: flex;
          flex-direction: column;
          margin-top: 30px;
          margin-left: 30px;
          span:nth-child(2){
            margin-top: 15px;
            font-size: 18px;
            font-weight: bold;
          }
        }
      }
      .item:nth-child(2){
        background-image: url(~@/assets/image/02.png);
      }
      .item:nth-child(3){
        background-image: url(~@/assets/image/03.png);
      }
      .item:nth-child(4){
        background-image: url(~@/assets/image/04.png);
      }
      .item:nth-child(5){
        background-image: url(~@/assets/image/05.png);
      }
    }
  }
</style>
