<template>
  <div class="statistics">
    <div class="area">
      <i>可选范围</i>
      <span class="separat">/</span>
      <AiAreaPicker ref="area" class="aiArea" :areaId="areaId" :name.sync="addressArea" mode="custom"
                    @select="onChange">
        <span class="label" v-if="addressArea">{{ addressArea }}</span>
        <i v-else>请选择</i>
      </AiAreaPicker>
    </div>
    <div class="charts-wrapper">
      <div class="total">
        <div class="total-item">
          <h2>{{ info.jths }}</h2>
          <p>检测家庭户数</p>
        </div>
        <div class="total-item">
          <h2>{{ info.zrs }}</h2>
          <p>监测对象总人数</p>
        </div>
      </div>
      <div class="charts">
        <h2>近半年风险人数变化趋势</h2>
        <div id="chart1" style="height: 400rpx"></div>
      </div>
      <div class="total middle-total">
        <div class="total-item">
          <h2>{{ info['饮水安全'] || 0 }}</h2>
          <p>住房安全</p>
        </div>
        <div class="total-item">
          <h2>{{ info['饮水安全'] || 0 }}</h2>
          <p>饮水安全</p>
        </div>
        <div class="total-item">
          <h2>{{ info['失学辍学'] || 0 }}</h2>
          <p>失学辍学</p>
        </div>
        <div class="total-item">
          <h2>{{ info['医疗保险'] || 0 }}</h2>
          <p>医疗保险</p>
        </div>
      </div>
      <div class="charts">
        <h2>风险类型排行TOP10</h2>
        <div id="chart3" style="height: 400rpx"></div>
      </div>
      <div class="charts">
        <h2>风险消除方式</h2>
        <div id="chart4" style="height: 400rpx"></div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'statistics',

  data() {
    return {
      addressAreaId: '',
      addressArea: '',
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      areaId: '',
      info: {},
      pageShow: false
    }
  },


  created() {
    this.areaId = this.$store.state.user.areaId
    this.addressAreaId = this.$store.state.user.areaId
    this.addressArea = this.$store.state.user.areaName
  },

  mounted() {
    window.scrollTo(0, 0)
    this.chart1 = echarts.init(document.getElementById('chart1'))
    this.chart4 = echarts.init(document.getElementById('chart4'))
    this.chart3 = echarts.init(document.getElementById('chart3'))

    this.$dict.load(['fpRiskType', 'fpRiskEliminationMethod']).then(() => {
      this.getInfo()
    })
  },

  methods: {
    reload() {
      this.$nextTick(() => {
        this.getInfo()
      })
    },

    onChange(e) {
      this.addressAreaId = e.id

      this.$nextTick(() => {
        this.reload()
      })
    },

    initChart1(data) {
      const x = data.map(v => v.m)
      const v = data.map(v => v.c)
      const option = {
        color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
        xAxis: {
          type: 'category',
          data: x,
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: 'solid',
              color: '#f5f5f5'
            }
          },
          axisLabel: {
            align: 'center',
            padding: [2, 0, 0, 0],
            interval: 0,
            fontSize: 14,
            color: '#999'
          },
          axisTick: {
            length: 1,
            show: true
          },
          boundaryGap: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#aaa'
            }
          }
        },
        grid: {
          top: '4%',
          left: '4%',
          right: '6%',
          bottom: '0%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          boundaryGap: true,
          axisTick: {
            length: 1,
            show: true
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: 'solid',
              color: '#f5f5f5'
            }
          },
          nameTextStyle: {
            color: '#f5f5f5',
            align: 'left'
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: 'solid',
              color: '#aaa'
            }
          },
          axisLabel: {
            color: '#999'
          }
        },
        series: [
          {
            data: v,
            type: 'line'
          }
        ]
      }

      this.chart1.setOption(option)
    },

    initChart3(data) {
      const y = data.map(v => this.$dict.getLabel('fpRiskType', v.risk_type) || '其他')
      const v = data.map(v => v.c)
      const option = {
        tooltip: {},
        color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
        grid: {
          top: '4%',
          left: '4%',
          right: '6%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: 'solid',
              color: '#f5f5f5'
            }
          },
          axisTick: {
            length: 1,
            show: true
          },
          axisLabel: {
            align: 'center',
            padding: [2, 0, 0, 0],
            interval: 0,
            fontSize: 14,
            color: '#999'
          },
          boundaryGap: true,
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: 'solid',
              color: '#aaa'
            }
          },
        },
        yAxis: {
          type: 'category',
          data: y,
          boundaryGap: true,
          axisTick: {
            length: 0,
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#e9e9e9'],
              width: 1,
              type: 'solid'
            }
          },
          nameTextStyle: {
            color: '#999',
            align: 'left'
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: 'solid',
              color: '#aaa'
            }
          },
          axisLabel: {
            color: '#999'
          }
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            data: v
          }
        ]
      }

      this.chart3.setOption(option)
    },

    initChart4(data) {
      const values = data.map(v => {
        return {
          value: v.c,
          name: this.$dict.getLabel('fpRiskEliminationMethod', v.risk_elimination_method) || '其他'
        }
      })
      const option = {
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '40px',
          containLabel: true
        },
        color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
        series: [
          {
            name: '本月纳入监测人群属性分析',
            type: 'pie',
            radius: ['40%', '70%'],
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            data: values
          }
        ]
      }

      this.chart4.setOption(option)
    },

    getInfo() {
      this.$http.post(`/app/apppreventionreturntopoverty/statistics-prtp?areaId=${this.addressAreaId}`).then(res => {
        if (res.code === 0) {
          this.info = res.data
          this.initChart1(res.data['近半年趋势'])
          this.initChart3(res.data['风险类型排行'])
          this.initChart4(res.data['风险消除方式'])
        }
      })
    }
  }
}
</script>

<style lang="scss">
.statistics {
  padding: 112px 0 120px;

  .area {
    display: flex;
    position: fixed;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    padding: 0 32px;
    height: 112px;
    color: #333333;
    font-size: 30px;
    background: #fff;

    .separat {
      padding: 0 8px;
    }

    i {
      color: #3F8DF5;
      font-size: 30px;
      font-style: normal;
    }

    span {
      color: #333333;
      font-size: 30px;
    }
  }

  .charts-wrapper {
    position: relative;
    z-index: 1;
    padding: 0 32px;

    .total {
      display: flex;
      align-items: center;
      height: 200px;
      margin-top: 32px;
      background: #FFFFFF;
      border-radius: 8px;

      .total-item {
        flex: 1;
        text-align: center;

        h2 {
          font-size: 64px;
          color: #3192F4;
        }

        p {
          margin-top: 10px;
          color: #999999;
          font-size: 28px;
        }
      }
    }

    .middle-total {
      height: 160px;

      h2 {
        font-size: 48px !important;
      }

      p {
        margin-top: 8px !important;
      }
    }

    .charts {
      margin-top: 32px;
      background: #FFFFFF;
      border-radius: 8px;

      & > h2 {
        height: 96px;
        line-height: 96px;
        padding: 0 32px;
        color: #333333;
        font-size: 32px;
        border-bottom: 1px solid #DDDDDD;
      }

      & > div {
        width: 686px;
        margin: 0 auto;
        padding: 32px 0;
      }
    }
  }
}
</style>
