<template>
  <div class="full"  style="z-index: 9;">
    <!-- 左部视图 -->
    <div class="left-view">
      <dv-border-box-11 title="人口年龄结构图" class="animate__animated animate__backInLeft animate__faster" ref="border3"
        style="height: 70%;" :color="color" :backgroundColor="backgroundColor">
        <div style="height: 4%;"></div>
        <dv-border-box-1 style="height: 96%;">
          <div class="full center" style="flex-direction: column">
            <div id="personAgeOption" style="width: 90%;height: 88%;"></div>
          </div>
        </dv-border-box-1>
      </dv-border-box-11>

      <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster" style="height: 30%" :color="color"
        :backgroundColor="backgroundColor">
        <dv-border-box-1 style="height: 100%;">
          <div style="padding: 10px;width: 100%;height: 100%;padding-top: 20px;">
            <div id="personSourceOption" style="height: 100%;width: 100%;"></div>
          </div>
        </dv-border-box-1>
      </dv-border-box-12>
    </div>

    <!-- 底部视图 -->
    <div class="bottom-view">
      <dv-border-box-12 style="position: relative;height: 100%" class="animate__animated animate__backInLeft animate__faster"
         :color="color" :backgroundColor="backgroundColor">
        <dv-border-box-1>
          <div style="padding: 10px;width: 100%;height: 100%;padding-top: 20px;">
            <div id="personChangeOption" style="height: 90%;width: 100%;"></div>
          </div>
        </dv-border-box-1>

        <div style="position: absolute;top: 6%;right: 4%;">
          <el-select @change="selectChange" size="mini" popper-class="popperClass1" v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>

      </dv-border-box-12>
    </div>

    <!-- 右部视图 -->
    <div class="right-view">
      <dv-border-box-12 class="animate__animated animate__backInRight animate__faster" style="height: 45%"
        :color="color" :backgroundColor="backgroundColor">
        <dv-border-box-1 style="height: 100%;">
          <div style="padding: 10px;width: 100%;height: 100%;padding-top: 20px;">
            <div id="proportionOfKeyPersonnel" style="height: 100%;width: 100%;"></div>
          </div>
        </dv-border-box-1>
      </dv-border-box-12>
      <dv-border-box-12 class="animate__animated animate__backInRight animate__faster" style="height: 55%"
        :color="color" :backgroundColor="backgroundColor">
        <dv-border-box-1 style="height: 100%;">
          <div style="text-align: center;padding-top: 15px;font-size: 20px;" :style="{color:fontColor}">
            特殊人员变化
          </div>
          <div style="padding: 10px;width: 100%;height: 100%;padding-top: 20px;">
            <div id="specialPersonnelChange" style="height: 90%;width: 100%;"></div>
          </div>
        </dv-border-box-1>
      </dv-border-box-12>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        fontColor: "#00f9cf",
        backgroundColor: "rgba(15, 33, 70, 0.6)",
        color: ['#0f234a', '#2b496a'],

        options: [{
          value: 'month',
          label: '最近一个月'
        }, {
          value: 'year',
          label: '最近一年'
        }],
        value: 'month'
      }
    },
    mounted() {
      let _this = this
      setTimeout(() => {
        _this.getOption()
      }, 100)
    },
    methods: {
      getOption() {
        this.getPersonAgeOption()
        this.getPersonSourceOption()
        this.getPersonChangeOption()
        this.getSpecialPersonnelChange()
        this.getProportionOfKeyPersonnel()
      },
      selectChange(e){
          this.getPersonChangeOption(e)
      },
      getSpecialPersonnelChange() {
        var myChart = this.$echarts.init(document.getElementById('specialPersonnelChange'));
        let option = {

          textStyle: {
            color: "#fff"
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['重点人员', '关爱人员', '服务人员'],
            textStyle: {
              color: "#fff"
            },
          },
          grid: {
            left: '0%',
            right: '5%',
            bottom: '8%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
          },
          xAxis: {
            type: 'category',
            data: ['2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12', '2021-01', '2021-02'],
          },
          color: ['#3cb2ef', '#9fe080', '#5470c6'],
          series: [{
              name: '重点人员',
              type: 'bar',
              data: [6, 0, 10, 96, 23, 87, 20, 26, 10]
            },
            {
              name: '关爱人员',
              type: 'bar',
              data: [96, 10, 0, 30, 0, 23, 6, 12, 26]
            },
            {
              name: '服务人员',
              type: 'bar',
              data: [56, 20, 90, 35, 43, 0, 56, 45, 36]
            }
          ]
        };
        myChart.setOption(option);
      },
      getProportionOfKeyPersonnel() {
        var myChart = this.$echarts.init(document.getElementById('proportionOfKeyPersonnel'));
        let option = {
          title: {
            text: '重点人员比例',
            left: 'center',
            textStyle: {
              color: this.fontColor,
            },
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: {
              color: "#fff"
            },
          },
          color: ['#37a2da', '#32c5e9', '#67e0e3', '#32c5e9', '#ffdb5c', '#9fe080', '#5c7caf'],
          series: [{
            name: '重点人员',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 5,
                name: '矫正人员',
              },
              {
                value: 0,
                name: '刑释人员'
              },
              {
                value: 0,
                name: '吸毒人员'
              },
              {
                value: 2,
                name: '精神病人'
              },
              {
                value: 0,
                name: '艾滋病人'
              },
              {
                value: 6,
                name: '信访人员'
              },
              {
                value: 4,
                name: '重点青少年'
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
        myChart.setOption(option);
      },
      getPersonChangeOption(type='month') {
        var myChart = this.$echarts.init(document.getElementById('personChangeOption'));
        let nameList=[]
        let valueList={}
        if (type=='month') {
          nameList=['05-02', '05-03', '05-04', '05-05', '05-06', '05-07', '05-08', '05-09', '05-10',
              '05-11', '05-12', '05-13', '05-14', '05-15', '05-16', '05-17', '05-18', '05-19', '05-20',
              '05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28', '05-29', '05-30'
            ]
          valueList={
            permanent:[0, 0, 0, 0, 0, 3, 4, 13, 0, 0, 1, 1, 0, 0, 0, 0, 9, 8, 0, 4, 5, 0, 0, 8, 0, 5, 12, 4, 0, 0],
            flow:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 1, 4, 5, 0, 0, 8, 0, 5, 5, 2, 0, 0],
            overseas:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        }else{
          nameList=['2020-07','2020-08','2020-09','2020-10','2020-11','2020-12','2021-01','2021-02','2021-03','2021-04',
          '2021-05','2021-06'
          ]
          valueList={
            permanent:[0, 0, 0, 0,3187, 1, 0, 0 , 0, 0, 0, 0],
            flow:[0, 0, 0, 0, 210, 4, 0, 0, 0, 0, 0, 0],
            overseas:[0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0]
          }
        }
        let option = {
          title: {
            text: '小区人口变化',
            textStyle: {
              color: this.fontColor
            },
          },
          smooth: true,
          textStyle: {
            color: "#fff"
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['常住人口', '流动人口', '境外人口'],
            textStyle: {
              color: "#fff"
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '4%',
            containLabel: true
          },
          color: ['#37a2da', '#32c5e9', '#9fe080'],
          xAxis: {
            splitLine: {
              show: false
            },
            type: 'category',
            boundaryGap: false,
            data: nameList,
          },
          yAxis: {
            splitLine: {
              show: false
            },
            type: 'value'
          },
          series: [{
              name: '常住人口',
              type: 'line',
              stack: '人数',
              smooth: true,
              data: valueList.permanent
            },
            {
              name: '流动人口',
              type: 'line',
              stack: '人数',
              smooth: true,
              data: valueList.flow
            },
            {
              name: '境外人口',
              type: 'line',
              stack: '人数',
              smooth: true,
              data: valueList.overseas
            }
          ]
        };
        myChart.setOption(option);
      },
      getPersonSourceOption() {
        var myChart = this.$echarts.init(document.getElementById('personSourceOption'));
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          title: {
            text: '人员来源统计',
            left: 'left',
            textStyle: {
              color: this.fontColor
            },
          },
          textStyle: {
            color: "#fff"
          },
          legend: {
            data: ['男', '女'],
            textStyle: {
              color: "#fff"
            }
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['宁夏', '陕西', '安徽', '黑龙江', '山西']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              name: '男',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [1833, 0, 0, 0, 0]
            },
            {
              name: '女',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [1680, 0, 0, 0, 0]
            }
          ]
        };
        myChart.setOption(option);
      },
      getPersonAgeOption() {
        var myChart = this.$echarts.init(document.getElementById('personAgeOption'));
        let option = {
          textStyle: {
            color: "#fff"
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            textStyle: {
              color: '#ffffff' //字体颜色
            },
            data: ['男性', '女性']
          },
          grid: {
            left: '2%',
            right: '4%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            splitLine: {
              show: false
            },
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['0-4', '5-9', '10-14', '15-19',
              '20-24', '25-29', '30-34', '35-39',
              '40-44', '45-49', '50-54', '55-59',
              '60-64', '65-69', '70-74', '75-79',
              '80-84', '85-89', '>=90', '未知'
            ]
          },
          series: [{
              name: '男性',
              type: 'bar',
              data: [94, 149, 183, 118, 120, 174, 248, 185, 137, 150, 144, 149, 57, 55, 36, 30, 17, 10, 0]
            },
            {
              name: '女性',
              type: 'bar',
              data: [70, 151, 134, 112, 103, 187, 213, 144, 114, 146, 151, 137, 60, 56, 41, 30, 17, 1, 2]
            }
          ]
        };
        myChart.setOption(option);
      }
    }
  }
</script>

<style>
  .popperClass1 {
    background-color: #fff !important;
    z-index: 9999 !important;
    color: #FFFFFF !important;
    border-color: #fff !important
  }
</style>

<style lang="scss" scoped>
  ::v-deep {
    .el-input__inner {
      color: #fff;
      border-color: rgba(104, 141, 199, 0.7);
      background-color: rgba(104, 141, 199, 0.7);
      width: 105px;
      height: 25px;
      border-radius: 0;
      text-align: center;
    }
    .el-input__suffix {
        right: 0px;
        transition: all .3s;
        pointer-events: none;
    }

    .el-select-dropdown__item {
        font-size: 14px;
        padding: 0 20px;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #FFFFFF;
        height: 34px;
        line-height: 34px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
    }
  }


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

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

  //右视图
  .right-view {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 22%;
    height: 85%;
  }

  // 左视图
  .left-view {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 22%;
    height: 85%;

    .person_age {
      height: 350px;

      .content {
        display: flex;
        justify-content: center;
        align-items: center;

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

  }

  .bottom-view {
    position: absolute;
    bottom: 0;
    left: 22%;
    right: 22%;
    height: calc(24%);
  }
</style>
