<template>
  <div class="full" style="z-index: 9;">
    <!-- 左视图 -->
    <div class="left-view">
      <dv-border-box-6 class="animate__animated animate__backInLeft animate__faster" ref="border3" style="height: 58%;"
        :color="color" :backgroundColor="backgroundColor">
        <dv-border-box-8 style="height: 100%;">
          <dv-border-box-1>
            <div class="full center" style="flex-direction: column">
              <div class="title">
                党员人数变化
                <dv-decoration-5 style="width:350px;height:20px;" />
              </div>
              <div id="numChange" style="width: 90%;height: 90%;"></div>
            </div>
          </dv-border-box-1>
        </dv-border-box-8>
      </dv-border-box-6>
      <dv-border-box-6 class="animate__animated animate__backInLeft animate__faster" ref="border3" style="height: 40%;"
        :color="color" :backgroundColor="backgroundColor">
        <dv-border-box-8 :reverse="true" style="height: 98%;width: 98%;">
          <dv-border-box-1 style="height: 100%;">
            <div class="center full" style="padding-top: 50px;">
              <div id="partyAge" style="width: 90%;height: 100%;"></div>
            </div>
          </dv-border-box-1>
        </dv-border-box-8>
      </dv-border-box-6>
    </div>

    <!-- 底部视图 -->
    <div class="bottom-view">
      <dv-border-box-4 style="width: 100%;height: 100%;position: relative;" :color="['#00f9cf', '#2b496a']"
        :backgroundColor="backgroundColor" class="animate__animated animate__backInLeft animate__faster">
        <div class="full center" style="flex-direction: column">
          <div class="title" style="margin-bottom: -50px;display: flex;">
            <dv-decoration-3 style="width:150px;height:30px;margin-right: 10px;" />
            党员学历统计
            <dv-decoration-3 style="width:150px;height:30px;margin-left: 10px;" />
          </div>
          <div id="educationOption" style="width: 100%;height: 90%;"></div>
        </div>
        <dv-decoration-4 :color="['#4ed0dc', '#4ed0dc']"
          style="width:2px;height:85%;position: absolute;right: 2%;top: 10%;" />
        <dv-decoration-4 :color="['#4ed0dc', '#4ed0dc']" :reverse="true"
          style="width:93%;height:5px;position: absolute;bottom: 1%;left: 5%;" />
      </dv-border-box-4>
    </div>

  <!-- 右部视图 -->
    <div class="right-view">

      <dv-border-box-6 class="animate__animated animate__backInRight animate__faster"
        backgroundColor="rgba(15, 33, 70, 0.7)" :color="['#00f9cf', '#2b496a']" style="width: 100%;height: 55%;position: relative;">
        <dv-border-box-8 :color="['#2b496a', '#00f9cf']" :reverse="true" style="height: 100%;">
          <dv-border-box-1 >
            <div class="full center" style="flex-direction: column">
              <div class="title">
                党员人数变化
                <dv-decoration-5 style="width:350px;height:20px;" />
              </div>
              <dv-scroll-ranking-board :config="ageConfig" style="width:80%;height:80%" />
            </div>
          </dv-border-box-1>
        </dv-border-box-8>
      </dv-border-box-6>

      <dv-border-box-5 class="animate__animated animate__backInRight animate__faster"
        style="width: 100%;height: 35%;position: relative;" :backgroundColor="backgroundColor"
        :color="['#00f9cf', '#2b496a']">
        <div class="center full" style="flex-direction:column;padding-top: 10px;">
          <div class="title" style="margin-bottom: -20px;display: flex;justify-content: center;">
            <dv-decoration-1 style="width:30%;height:30px;" />
            党员性别占比
            <dv-decoration-1 style="width:30%;height:30px;" />
          </div>
          <div id="genderOption" style="width: 90%;height: 90%;"></div>
        </div>
        <dv-decoration-4 :color="['#4ed0dc', '#4ed0dc']" :reverse="true"
          style="width:80%;height:5px;position: absolute;bottom: 1%;left: 5%;" />
      </dv-border-box-5>
    </div>

  </div>
</template>

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

      }
    },
    mounted() {
      this.getOption()
    },
    methods: {
      getOption() {
        this.getNumchangeOption()
        this.getPartyAgeOption()
        this.getEducationOption()
        this.getGenderOption()
        this.getAgeOption()
      },
      getAgeOption() {
        this.ageConfig = {
          data: [{
              name: '21-25岁',
              value: 23
            },
            {
              name: '26-30岁',
              value: 62
            },
            {
              name: '31-35岁',
              value: 63
            },
            {
              name: '36-40岁',
              value: 24
            },
            {
              name: '41-45岁',
              value: 12
            },
            {
              name: '46-50岁',
              value: 16
            },
            {
              name: '51-55岁',
              value: 8
            },
            {
              name: '56-60岁',
              value: 54
            },
            {
              name: '60岁以上',
              value: 2
            }
          ],
          rowNum: 7,
          unit: '人'
        }
      },
      getGenderOption() {
        var myChart = this.$echarts.init(document.getElementById('genderOption'));
        let option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: {
              color: "#fff"
            },
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 68,
                name: '男'
              },
              {
                value: 21,
                name: '女'
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
        myChart.setOption(option);
      },
      getEducationOption() {
        var myChart = this.$echarts.init(document.getElementById('educationOption'));
        let option = {
           tooltip: {
             trigger: 'axis'
           },
          textStyle: {
            color: "#fff"
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '4%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['博士', '研究生', '大学本科', '大专',
              '中专中技', '技工学校', '高中',"初中","小学","文盲半文盲"]
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data:[
              {
                value:23,
                itemStyle: {
                  color: '#37a2da'
                }
              },
              {
                value:26,
                itemStyle: {
                  color: '#32c5e9'
                }
              },
              {
                value:23,
                itemStyle: {
                  color: '#67e0e3'
                }
              },
              {
                value:32,
                itemStyle: {
                  color: '#32c5e9'
                }
              },
              {
                value:56,
                itemStyle: {
                  color: '#26c3be'
                }
              },
              {
                value:32,
                itemStyle: {
                  color: '#91cc75'
                }
              },
              {
                value:42,
                itemStyle: {
                  color: '#2be3dd'
                }
              },
              {
                value:12,
                itemStyle: {
                  color: '#64afe9'
                }
              },
              {
                value:8,
                itemStyle: {
                  color: '#00aaff'
                }
              },
              {
                value:0,
                itemStyle: {
                  color: '#64afe9'
                }
              },
            ],
            type: 'bar'
          }]
        };
        myChart.setOption(option);
      },

      getPartyAgeOption() {
        var myChart = this.$echarts.init(document.getElementById('partyAge'));
        let option = {
          color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
          title: {
            text: '党员党龄统计',
            textStyle: {
              color: this.fontColor
            }
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            data: ['人数'],
            textStyle: {
              color: "#fff"
            }
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '2%',
            containLabel: true
          },
          radar: [{
            indicator: [{
                text: '5年以下',
              },
              {
                text: '5-20年',
              },
              {
                text: '20-30年',
              },
              {
                text: '30-40年',
              },
              {
                text: '40年以上',
              }
            ],
            radius: 80,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            name: {
              textStyle: {
                color: '#ffffff'
              }
            },
            splitArea: {
              areaStyle: {
                color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)'
              }
            }
          }],
          series: [{
            name: '雷达图',
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4
              }
            },
            data: [{
              value: [6, 38, 20, 5, 2],
              name: '人数'
            }]
          }]
        };
        myChart.setOption(option);
      },
      getNumchangeOption() {
        var myChart = this.$echarts.init(document.getElementById('numChange'));
        let option = {
          textStyle: {
            color: "#fff"
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['正式党员', '预备党员'],
            textStyle: {
              color: "#fff"
            },
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '4%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
          },
          xAxis: {
            type: 'category',
            data: ['2020-07', '2020-08', '2020-09', '2020-10',
              '2020-11', '2020-12', '2021-01', '2021-02', '2021-03',
              '2021-04', '2021-05', '2021-06'
            ],
          },
          color: ['#167ee0', '#2aa854'],
          series: [{
              name: '正式党员',
              type: 'bar',
              data: [0, 0, 0, 0, 49, 0, 0, 0, 0, 0, 20, 0, ]
            },
            {
              name: '预备党员',
              type: 'bar',
              data: [0, 0, 0, 0, 17, 0, 0, 0, 0, 0, 2, 0, ]
            }
          ]
        };
        myChart.setOption(option);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .full {
    width: 100%;
    height: 100%;
  }

  .title {
    text-align: center;
    padding: 15px 0;
    font-size: 20px;
    color: #fff;
    font-weight: 800;
  }

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

  .left-view {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 22%;
    height: 88%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

  }

  .bottom-view {
    position: absolute;
    bottom: 0%;
    left: 22%;
    right: 22%;
    height: 24%;
  }

  .right-view {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 23%;
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
</style>
