<template>
  <div class="app-container">
    <div class="ring-chart-container">
      <el-row>
        <div class="chart-title">按派出所统计闸井数量</div>
      </el-row>
      <el-row>
        <el-col :span="11" :offset="1">
          <div class="chart-body">
            <ve-pie ref="chartpolice" :data="chartDataByPolice" :settings="chartSettingsByPolice"/>
          </div>
        </el-col>
        <el-col :span="10" >
          <div class="chart-body" style="margin: 70px 20px">
            <el-table :data="chartDataByPolice.rows" border show-summary>
              <el-table-column :label="chartSettingsByPolice.labelMap['deptName']" prop="deptName"/>
              <el-table-column :label="chartSettingsByPolice.labelMap['wellCount']" prop="wellCount"/>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WellStaticsByPolice',
  data() {
    return {
      chartSettingsByPolice: {
        labelMap: {
          'deptName': '派出所',
          'wellCount': '闸井数量'
        }
      },
      chartDataByPolice: {
        columns: ['deptName', 'wellCount'],
        rows: []
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      console.log('wellStaticsByPolice fetchData')
      this.chartDataByPolice.rows = [
        { 'deptName': '天安门派出所', 'wellCount': 343 },
        { 'deptName': '东城派出所', 'wellCount': 200 },
        { 'deptName': '西城派出所', 'wellCount': 100 }
      ]
      this.$refs.chartpolice.echarts.resize()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container{
    padding: 5px 10px 10px 10px;
    .ring-chart-container{
      padding:0px;
      border: 1px solid #d3dce6;
      .chart-tools{
        background-color: #f2f2f2;
        line-height: 35px;
        padding-left: 10px;
        padding-right: 5px;
        .chart-tool-button{
          padding: 5px;
          line-height: 16px;
          margin-top:5px;
          font-size:13px;
        }
        .chart-tool-button:hover{
          background-color: #8cc5ff;
          cursor: pointer;
          color:white
        }
        .chart-tool-button:active{
          background-color: #8cc5ff;
          color:white
        }
        .editor--datetimerange.el-input__inner{
          width: 300px;
        }
      }

      .chart-body{
        padding:15px;
        margin-top: 20px;
      }
    }
  }
  .chart-title{
    margin: auto;
    text-align: center;
    margin-top: 15px;
    font-size: 20px;
    line-height: 30px;
  }
</style>