<template>
  <panel-card title="点位数量分析">
    <el-row>
      <el-col :span="12">
        <ve-pie :data="pieChartData" :extend="pieExtend" />
      </el-col>
      <el-col :span="12">
        <ve-bar :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings" />
      </el-col>
    </el-row>
  </panel-card>
  <!--  <div>-->
  <!--    <div class="flagBoxStyle">-->
  <!--      <div class="flagStyle" />-->
  <!--      <div>井数量分析</div>-->
  <!--    </div>-->
    <!--    <el-row :gutter="10">-->
    <!--      <el-col :span="12">-->
    <!--        <ve-pie-->
    <!--          :data="chartDataPie"-->
    <!--          :extend="extendPie"-->
    <!--        />-->
    <!--      </el-col>-->
    <!--      <el-col :span="12">-->
    <!--        <ve-bar-->
    <!--          :data="chartData"-->
    <!--          :grid="grid"-->
    <!--          :extend="extend"-->
    <!--          :settings="chartSettings"-->
    <!--        />-->
    <!--      </el-col>-->
    <!--    </el-row>-->
  </div>
</template>

<script>
import { deviceStaticsByOnline, wellStaticByBfzt, wellStaticByType } from '@/api/data/dataStatics'
import PanelCard from '@/components/BigData/Card/panelCard'
export default {
  name: 'WellCountView',
  components: { PanelCard },
  data() {
    return {
      // 饼状图
      pieExtend: {
        series: {
          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
          radius: '45%'
        }
      },
      pieChartSettings: {
        labelMap: {
          'bfzt': '布防状态',
          'wellCount': '点位数量'
        },
        dimension: 'bfzt',
        metrics: 'wellCount'
      },
      pieChartData: {
        columns: ['bfzt', 'wellCount'],
        rows: []
      },
      // 柱状图
      extend: {
        series: {
          label: { show: true, position: 'right' },
          barMaxWidth: 35
        }
      },
      grid: {
        right: 60
      },
      chartSettings: {
        itemStyle: {
          'barCategoryGap': 5
        },
        barWidth: 15,
        labelMap: {
          'wellTypeName': '点位类型',
          'wellCount': '点位数量'
        },
        dimension: ['wellTypeName'],
        metrics: ['wellCount']
      },
      chartData: {
        columns: ['wellTypeName', 'wellCount'],
        rows: []
      }
    }
  },
  created() {
    this.fetchBfcfData()
    this.fetchWellTypeData()
  },
  methods: {
    // 获取统计数据
    fetchBfcfData() {
      wellStaticByBfzt(this.listQuery).then(response => {
        const data = response.data
        this.pieChartData.rows = [
          { 'bfzt': '布防', 'wellCount': data.bfWell },
          { 'bfzt': '撤防', 'wellCount': data.cfWell }
        ]
      })
    },
    fetchWellTypeData() {
      wellStaticByType().then(response => {
        this.chartData.rows = response.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.flagBoxStyle {
  display: flex;
  margin-bottom: 20px;
}
.flagBoxStyle div:nth-child(2){
  line-height: 30px;
  font-weight: 600;
}
.flagStyle {
  width: 4px;
  height: 30px;
  margin-right: 6px;
  background: rgb(64 121 242);
}

</style>