<template>
  <div class="container">
    <!--<well-statics-by-dept ref="bydept"/>-->
    <div v-if="hasPerm('/statics/wellStaticsByPDept')" class="app-container">
      <div class="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="chartdept" :data="chartData" :settings="chartSettings"/>
            </div>
          </el-col>
          <el-col :span="10" >
            <div class="chart-body" style="margin: 70px 20px">
              <el-table :data="chartData.rows" border show-summary>
                <el-table-column :label="chartSettings.labelMap['pidName']" prop="pidName"/>
                <el-table-column :label="chartSettings.labelMap['wellCount']" prop="wellCount"/>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--<well-statics-by-police ref="bypolice"/>-->
    <div v-if="hasPerm('/statics/wellStaticsByDept')" class="app-container">
      <div class="chart-container">
        <el-row>
          <div class="chart-title">按派出所统计闸井数量</div>
        </el-row>
        <el-row>
          <el-col :span="4" :offset="10">
            <el-select v-model="value" placeholder="请选择" style=" margin: auto;margin-top: 20px;" @change="changePid">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-col>
        </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>
  </div>
</template>

<script>
import WellStaticsByDept from './modules/wellStaticsByDept'
import WellStaticsByPolice from './modules/wellStaticsByPolice'
import { wellStaticByDept, wellStaticByPolice } from '@/api/dataStatics'

export default {
  name: 'WellStatics',
  components: { WellStaticsByDept, WellStaticsByPolice },
  data() {
    return {
      activeName: 'byDept',
      chartSettings: {
        labelMap: {
          'pidName': '分局',
          'wellCount': '闸井数量'
        }
      },
      chartData: {
        columns: ['pidName', 'wellCount'],
        rows: []
      },
      chartSettingsByPolice: {
        labelMap: {
          'deptName': '派出所',
          'wellCount': '闸井数量'
        }
      },
      chartDataByPolice: {
        columns: ['deptName', 'wellCount'],
        rows: []
      },
      options: [{
        value: '110091000000',
        label: '天安门分局'
      }, {
        value: '110101000000',
        label: '东城分局'
      }, {
        value: '110102000000',
        label: '西城分局'
      }],
      value: '110091000000'
    }
  },
  created() {
    this.fetchData1()
    this.fetchData2()
  },
  methods: {
    fetchData1() {
      // this.chartData.rows = [
      //   { 'pidName': '天安门分局', 'wellCount': 343 },
      //   { 'pidName': '东城分局', 'wellCount': 200 },
      //   { 'pidName': '西城分局', 'wellCount': 100 }
      // ]
      wellStaticByDept().then(response => {
        this.chartData.rows = response.data
      })
    },
    fetchData2() {
      const params = {
        pid: this.value
      }
      // this.chartDataByPolice.rows = [
      //   { 'deptName': '天安门派出所', 'wellCount': 343 },
      //   { 'deptName': '东城派出所', 'wellCount': 200 },
      //   { 'deptName': '西城派出所', 'wellCount': 100 }
      // ]
      wellStaticByPolice(params).then(response => {
        this.chartDataByPolice.rows = response.data
      })
    },
    changePid() {
      this.fetchData2()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .container{
    padding: 5px;
  }
  .app-container{
    padding: 5px 10px 10px 10px;
    .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>