<template>
  <div class="container">
    <div class="statistics-box">
      <div class="statistics-item">
        <div class="img-icon">
          <img src="../../assets/images/all-home-page/icon1.png" class="imgw"/>
        </div>
        <div class="statistics-desc">
          <div class="s-title">重点人群总数</div>
          <div class="s-num">{{ keyPersonTotal }}<span class="s-unit">人</span></div>
        </div>
      </div>
      <div class="statistics-item" style="cursor: pointer" @click="togo('/special/peopleInfo2')">
        <div class="img-icon">
          <img src="../../assets/images/all-home-page/icon2.png" class="imgw"/>
        </div>
        <div class="statistics-desc">
          <div class="s-title">刑满释放人员</div>
          <div class="s-num">{{ sysTypeObj.sysType2 }}<span class="s-unit">人</span></div>
        </div>
      </div>
      <div class="statistics-item" style="cursor: pointer" @click="togo('/special/peopleInfo3')">
        <div class="img-icon">
          <img src="../../assets/images/all-home-page/icon3.png" class="imgw"/>
        </div>
        <div class="statistics-desc">
          <div class="s-title">严重精神障碍患者</div>
          <div class="s-num">{{ sysTypeObj.sysType3 }}<span class="s-unit">人</span></div>
        </div>
      </div>
      <div class="statistics-item" style="cursor: pointer" @click="togo('/special/peopleInfo1')">
        <div class="img-icon">
          <img src="../../assets/images/all-home-page/icon6.png" class="imgw"/>
        </div>
        <div class="statistics-desc">
          <div class="s-title">“三失一偏”人员</div>
          <div class="s-num">{{ sysTypeObj.sysType1 }}<span class="s-unit">人</span></div>
        </div>
      </div>
      <div class="statistics-item" style="cursor: pointer" @click="togo('/special/peopleInfo4')">
        <div class="img-icon">
          <img src="../../assets/images/all-home-page/icon4.png" class="imgw"/>
        </div>
        <div class="statistics-desc">
          <div class="s-title">涉重点信访事项人员</div>
          <div class="s-num">{{ sysTypeObj.sysType4 }}<span class="s-unit">人</span></div>
        </div>
      </div>
      <div class="statistics-item" style="cursor: pointer" @click="togo('/special/peopleInfo5')">
        <div class="img-icon">
          <img src="../../assets/images/all-home-page/icon5.png" class="imgw"/>
        </div>
        <div class="statistics-desc">
          <div class="s-title">涉重点涉法涉诉类矛盾人员</div>
          <div class="s-num">{{ sysTypeObj.sysType5 }}<span class="s-unit">人</span></div>
        </div>
      </div>
    </div>
    <div class="statistics-bar">
      <div class="statistics-bar-top">
        <div class="statistics-bar-top-i" style="cursor: pointer" @click="togo('/special/peopleInfoByRiskLevel', 1)">
          <div class="i-top">{{ levelObj.level1.per }}<span class="i-top-unit">%</span></div>
          <div class="i-center">涉一级矛盾风险人员</div>
          <div class="i-bottom">{{ levelObj.level1.num }}<span class="i-bottom-unit">人</span></div>
        </div>
        <div class="statistics-bar-top-ii" style="cursor: pointer" @click="togo('/special/peopleInfoByRiskLevel', 2)">
          <div class="i-top-ii">{{ levelObj.level2.per }}<span class="i-top-unit-ii">%</span></div>
          <div class="i-center">涉二级矛盾风险人员</div>
          <div class="i-bottom-ii">{{ levelObj.level2.num }}<span class="i-bottom-unit-ii">人</span></div>
        </div>
        <div class="statistics-bar-top-iii" style="cursor: pointer" @click="togo('/special/peopleInfoByRiskLevel', 3)">
          <div class="i-top-iii">{{ levelObj.level3.per }}<span class="i-top-unit-iii">%</span></div>
          <div class="i-center">涉三级矛盾风险人员</div>
          <div class="i-bottom-iii">{{ levelObj.level3.num }}<span class="i-bottom-unit-iii">人</span></div>
        </div>
      </div>
      <div class="statistics-bar-bottom">
        <div class="statistics-bar-bottom-title">涉矛盾风险人员总数</div>
        <div class="statistics-bar-bottom-num">{{ levelObj.levelTotal }}<span
          class="statistics-bar-bottom-unit">人</span>
        </div>
      </div>
    </div>
    <div class="statistics-pie">
      <div class="pie1" ref="main">
        <div class="bar-title">
          <div class="flexc" style="padding-left: 16px">
            <div class="dot-css"></div>
            <div class="dot-title">各类别重点人群地区分布</div>
          </div>
          <div>
            <Select v-model="barType" style="width:170px" @on-change="changeType">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
        </div>
        <div style="width: 100%;height: 100%;" id="bar1"></div>
      </div>
      <div class="pie1" ref="main">
        <div class="flexc" style="padding-left: 16px">
          <div class="dot-css"></div>
          <!-- <div class="dot-title">重点人群年龄分布</div> -->
          <!-- 假页 -->
          <div class="dot-title">各类别重点人群高度关注情形</div>
        </div>
        <div style="width: 100%;height: 100%;" id="pie1"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  findKeyPersonStatistics,
  keyPersonStatisticsForTypeAll,
  findKeyPersonStatisticsForType,
  // keyPersonStatisticsForCity,
  // keyPersonStatisticsForAge,
  keyPersonStatisticsForRiskLevel,
  keyPersonStatisticsForChunk
} from '@/api/home-page.js'

export default {
  name: 'key-groups',
  data () {
    return {
      width: '',
      cityList: [{
        value: '0',
        label: '全部人员'
      },
      {
        value: '2',
        label: '刑满释放人员'
      },
      {
        value: '3',
        label: '严重精神障碍患者'
      },
      {
        value: '4',
        label: '涉重点信访事项人员'
      },
      {
        value: '5',
        label: '涉重点涉法涉诉类矛盾人员'
      },
      {
        value: '1',
        label: '“三失一偏”人员'
      }
      ],
      barType: '0',
      keyPersonTotal: 0,
      sysTypeObj: {
        sysType1: 0,
        sysType2: 0,
        sysType3: 0,
        sysType4: 0,
        sysType5: 0
      },
      levelObj: {
        level1: {
          num: 0,
          per: '0'
        },
        level2: {
          num: 0,
          per: '0'
        },
        level3: {
          num: 0,
          per: '0'
        },
        levelTotal: 0
      },
      pie1Chart: null,
      pie2Chart: null,
      bar1Chart: null
    }
  },
  props: {},
  components: {},
  methods: {
    getInit () {
      keyPersonStatisticsForTypeAll().then(res => {
        if (res.data.errcode === 0) {
          this.keyPersonTotal = res.data.data.count
          return
        }
        this.$Message.error(res.data.errmsg)
      })
      findKeyPersonStatisticsForType().then(res => {
        if (res.data.errcode === 0) {
          res.data.data.forEach(item => {
            for (let i = 1; i < 6; i++) {
              if (item.sysType === i.toString()) {
                this.sysTypeObj[`sysType${i}`] = item.count
              }
            }
          })
          return
        }
        this.$Message.error(res.data.errmsg)
      })
      keyPersonStatisticsForRiskLevel().then(res => {
        if (res.data.errcode === 0) {
          this.levelObj.levelTotal = parseInt(res.data.data['1+2+3'])
          this.levelObj.level1.num = parseInt(res.data.data['1']) || 0
          this.levelObj.level2.num = parseInt(res.data.data['2']) || 0
          this.levelObj.level3.num = parseInt(res.data.data['3']) || 0
          this.levelObj.level1.per = this.utilNum((this.levelObj.level1.num / this.levelObj.levelTotal * 100) ||
            '0')
          this.levelObj.level2.per = this.utilNum((this.levelObj.level2.num / this.levelObj.levelTotal * 100) ||
            '0')
          this.levelObj.level3.per = this.utilNum((this.levelObj.level3.num / this.levelObj.levelTotal * 100) ||
            '0')
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    utilNum (v) {
      const vStr = v.toString()
      if (vStr.indexOf('.') > -1) {
        return v.toFixed(2)
      } else {
        return v
      }
    },
    checkoutPadding (p) {
      this.$nextTick(function () {
        // let odiv = document.getElementsByClassName('content-layout-v3 ivu-layout')
        // odiv[0].style.padding = p
        const odiv = document.querySelector('.content-layout-v3')
        console.log(odiv, 'odiv')
      })
      // odiv.children[1].style.padding = p
      // odiv.children[1].style.background = '#f6f6f6'
    },
    getPie1 () {
      // 基于准备好的dom，初始化echarts实例
      this.width = this.$refs.main.offsetWidth
      this.pie1Chart = this.$echarts.init(document.getElementById('pie1'))
      // keyPersonStatisticsForAge().then(res => {
      findKeyPersonStatistics().then(res => {
        if (res.data.errcode === 0) {
          console.log('===========')
          console.log(res.data.data)
          console.log('===========')
          // 指定图表的配置项和数据
          var option = {
            tooltip: {
              trigger: 'item',
              formatter: '{b}: {d}%,{c}个',
              position: 'inside'
            },
            legend: {
              top: '25%',
              orient: 'vertical', // 图例的排列方向，'horizontal' 水平排列，'vertical' 垂直排列
              right: '10%' // 图例的位置，这里是设置到左侧
              // textStyle: {
              //   color: '#ff0000' // 将图例文字颜色设置为红色
              // }
            },
            color: ['#B70000', '#FF0000', '#FFA592', '#FFD500', 'gray'],
            series: [{
              name: '人数',
              type: 'pie',
              center: ['30%', '50%'],
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 6
              },
              label: {
                show: false,
                formatter: '{b}: {d}%',
                position: 'inside'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                // { value: res.data.data['0-18'], name: '18岁以下' },
                // { value: res.data.data['19-40'], name: '18~40岁' },
                // { value: res.data.data['41-60'], name: '40~60岁' },
                // { value: res.data.data['60+'], name: '60岁以上' }
                // 假页
                {
                  value: res.data.data[0].count,
                  name: '刑满释放人员'
                },
                {
                  value: res.data.data[1].count,
                  name: '严重精神障碍患者'
                },
                {
                  value: res.data.data[2].count,
                  name: '“三失一偏”人员'
                },
                {
                  value: res.data.data[3].count,
                  name: '涉重点信访事项人员'
                },
                {
                  value: res.data.data[4].count,
                  name: '涉重点涉法涉诉类矛盾人员'
                }
              ]
            }]
          }
          // 使用刚指定的配置项和数据显示图表。
          this.pie1Chart.setOption(option)
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getPie2 () {
      // 基于准备好的dom，初始化echarts实例
      this.width = this.$refs.main.offsetWidth
      this.pie2Chart = this.$echarts.init(document.getElementById('pie2'))
      keyPersonStatisticsForChunk().then(res => {
        if (res.data.errcode === 0) {
          let dataList = res.data.data.map(item => {
            return {
              value: item.count || 0,
              name: item.cityName
            }
          })

          // 指定图表的配置项和数据
          var option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '15%',
              orient: 'vertical', // 图例的排列方向，'horizontal' 水平排列，'vertical' 垂直排列
              right: '1%' // 图例的位置，这里是设置到左侧
              // textStyle: {
              //   color: '#ff0000' // 将图例文字颜色设置为红色
              // }
            },
            color: ['#FFD500', '#FF1A76', '#FF9100', '#6DBBFF', '#12CE69', '#116ED8', '#8F4AA8'],
            series: [{
              name: '人数',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 6
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: dataList
            }]
          }
          // 使用刚指定的配置项和数据显示图表。
          this.pie2Chart.setOption(option)
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    changeType () {
      this.getBar1()
    },
    getBar1 () {
      // 基于准备好的dom，初始化echarts实例
      this.width = this.$refs.main.offsetWidth
      this.bar1Chart = this.$echarts.init(document.getElementById('bar1'))
      let param = {
        sysType: this.barType
      }
      if (this.barType === '0') {
        delete param.sysType
      }
      keyPersonStatisticsForChunk(param).then(res => {
        if (res.data.errcode === 0) {
          let xData = []
          let yData = []
          res.data.data.forEach(item => {
            xData.push(item.cityName)
            yData.push(item.count || 0)
          })
          // 指定图表的配置项和数据
          var option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              show: false
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [{
              type: 'category',
              data: xData,
              axisLabel: {
                rotate: 30
              }
            }],
            yAxis: [{
              type: 'value',
              axisLine: {
                show: false // 隐藏Y轴的轴线
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#E6E6E6',
                  type: 'dashed' // 设置网格线为虚线
                }
              }
            }],
            series: [{
              name: '人数',
              type: 'bar',
              color: '#209EFF',
              barWidth: 30, // 柱图宽度
              emphasis: {
                focus: 'series'
              },
              itemStyle: {
                normal: {
                  barBorderRadius: [5, 5, 0, 0] // [左上角, 右上角, 右下角, 左下角]
                }
              },
              data: yData
            }]
          }
          // 使用刚指定的配置项和数据显示图表。
          this.bar1Chart.setOption(option)
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    togo (url, type) {
      const route = {
        path: url
      }
      if (type !== undefined) {
        route.query = {
          type: type
        }
      }
      this.$router.push(route)
    }
  },
  watch: {},
  mounted () {
    this.checkoutPadding(0)
    this.getInit()
    window.onresize = () => {
      setTimeout(() => {
        this.pie1Chart.resize()
        this.pie2Chart.resize()
        this.bar1Chart.resize()
        this.getPie1()
        // this.getPie2()
        this.getBar1()
      }, 500)
    }
    setTimeout(() => {
      this.getPie1()
      // this.getPie2()
      this.getBar1()
    }, 500)
  }
}
</script>

<style scoped>
/deep/ ivu-layout-content {
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.statistics-box {
  width: 100%;
  display: flex;
}

.statistics-item {
  /*border: 1px solid black;*/
  width: calc(17% - 20px);
  margin-right: 20px;
  padding: 35px 0px 35px 30px;
  display: flex;
  align-items: center;
  align-content: center;
  align-self: center;
  border-radius: 16px;
  background: #fff;
}

.statistics-item:last-child {
  margin-right: 0px;
}

.img-icon {
  width: 50px;
  height: 50px;
  background: #f2f8ff;
}

.imgw {
  width: 100%;
  height: 100%;
}

.statistics-desc {
  display: flex;
  flex-direction: column;
  margin-left: 16px;
}

.s-title {
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #2e3038;
}

.s-num {
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 18px;
  text-align: left;
  color: #2c3564;
}

.statistics-bar {
  margin-top: 20px;
  border-radius: 16px;
  background: #fff;
  padding: 30px;
}

.statistics-bar-top {
  display: flex;
}

.statistics-bar-top-i {
  display: flex;
  /* width: calc(66% - 8px); */
  width: 33%;
  margin-right: 8px;
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(246.01deg, #ff8181 0%, #fff 100%);
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.statistics-bar-top-ii {
  display: flex;
  /* width: calc(20% - 8px); */
  width: 33%;
  margin-right: 8px;
  background: linear-gradient(236.56deg, #ffe923 0%, #fffdf8 100%);
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 10px;
}

.statistics-bar-top-iii {
  display: flex;
  /* width: calc(14%); */
  width: 33%;
  background: linear-gradient(207.31deg, #9fd5ff 0%, #f9fdff 100%);
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 10px;
}

.i-top {
  color: #ff9e9e;
  font-size: 36px;
  font-face: Montserrat;
  font-weight: 400;
  letter-spacing: 0;
  position: relative;
}

.i-top-ii {
  color: #c6bb7f;
  font-size: 36px;
  font-face: Montserrat;
  font-weight: 400;
  letter-spacing: 0;
  position: relative;
}

.i-top-iii {
  color: #9fd5ff;
  font-size: 36px;
  font-face: Montserrat;
  font-weight: 400;
  letter-spacing: 0;
  position: relative;
}

.i-center {
  margin-top: 14px;
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #2e3038;
}

.i-bottom {
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 18px;
  /*text-align: right;*/
  color: #c53535;
}

.i-bottom-ii {
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 18px;
  /*text-align: right;*/
  color: #ee9f45;
}

.i-bottom-iii {
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 18px;
  /*text-align: right;*/
  color: #209eff;
}

.i-top-unit {
  color: #ff9e9e;
  font-size: 20px;
  margin-bottom: 10px;
  font-face: Montserrat;
  font-weight: 400;
  letter-spacing: 0;
  position: absolute;
  margin-top: 4px;
}

.i-top-unit-ii {
  color: #c6bb7f;
  font-size: 20px;
  margin-bottom: 10px;
  font-face: Montserrat;
  font-weight: 400;
  letter-spacing: 0;
  position: absolute;
  margin-top: 4px;
}

.i-top-unit-iii {
  color: #9fd5ff;
  font-size: 20px;
  margin-bottom: 10px;
  font-face: Montserrat;
  font-weight: 400;
  letter-spacing: 0;
  position: absolute;
  margin-top: 4px;
}

.i-bottom-unit {
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 10px;
  text-align: left;
  color: #ff9e9e;
  margin-left: 5px;
}

.i-bottom-unit-ii {
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 10px;
  text-align: left;
  color: #c6bb7f;
  margin-left: 5px;
}

.i-bottom-unit-iii {
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 10px;
  text-align: left;
  color: #9fd5ff;
  margin-left: 5px;
}

.statistics-pie {
  padding-top: 50px;
  padding-bottom: 50px;
  border-radius: 16px;
  background: #fff;
  margin-top: 20px;
  display: flex;
}

.pie1 {
  width: 50%;
  height: 244px;
}

.bar {
  width: 100%;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  margin-top: 20px;
}

.bar1 {
  width: 100%;
  height: 233px;
}

.statistics-bar-bottom {
  margin-top: 16px;
  display: flex;
  align-items: center;
  align-self: center;
  align-content: center;
}

.statistics-bar-bottom-title {
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #2e3038;
}

.statistics-bar-bottom-num {
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 18px;
  /*text-align: right;*/
  color: #209eff;
  margin-left: 24px;
}

.statistics-bar-bottom-unit {
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 10px;
  text-align: left;
  color: #c3cddb;
}

.bar-title {
  display: flex;
  align-content: center;
  align-self: center;
  align-items: center;
  justify-content: space-between;
}

.flexc {
  display: flex;
  align-content: center;
  align-self: center;
  align-items: center;
}

.dot-css {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #209eff;
}

.dot-title {
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  color: #000;
  margin-left: 8px;
}

/deep/ .ivu-select-selection {
  height: 100%;
  border-color: #209eff;
}

/deep/ .ivu-select-selected-value {
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 14px;
  /*text-align: center;*/
  color: #209eff;
}

/deep/ .ivu-select-arrow {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  /*background: #e8f3ff;*/
  color: #209eff;
  padding-top: 2px;
}
</style>
