<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>
    <h4 style="margin:100px 0 0">政策增加趋势</h4>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import {
  getPlatformData,
  getMonthPolicyCount,
} from '@/api/home/index';
export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart
  },
  data() {
    return {
      platData:{},
      lineChartData: {
        keys:[],
        expectedData:[]
      }
    };
  },
  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)
    })
  }
};
</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>
