<template>
  <div  class="full">
    <!--  污水处理清情况   -->
    <div style="flex-direction: column;width: 22%;height: 30%;background: linear-gradient(to right,rgba(0,0,0,0.8),rgba(0,0,0,0.2));top: 10%;left: 1%" class="position-absolute center">
      <div style="width: 90%;height: 15%;justify-content: left;" class="center title">
        生活及工业污水处理量
      </div>
      <div style="width: 100%;height: 75%;" class="center">
        <div style="width: 50%;height: 100%">
          <div class="center" style="width: 100%;height: 25%;color: #e8ff2c">工业污水</div>
          <div class="center" style="width: 100%;height: 75%">
            <dv-water-level-pond :config="config" style="width:120px;height:160px" />
          </div>
        </div>
        <div style="width: 50%;height: 100%">
          <div class="center" style="width: 100%;height: 25%;color: #e8ff2c">生活污水</div>
          <div class="center" style="width: 100%;height: 75%">
            <dv-water-level-pond :config="config2" style="width:120px;height:160px" />
          </div>
        </div>
      </div>
    </div>
    <!-- 年度总处理污水量对比-->
    <div class="position-absolute center"
    style="width: 25%;height: 30%;background: linear-gradient(to right,rgba(0,0,0,0.8),rgba(0,0,0,0.5));top: 42%;left: 1%">
      <div id="chartsTotal" class="full"></div>
    </div>
    <!-- 市区可回收不可回收投放点-->
    <div class="position-absolute center"
         style="width: 30%;height: 15%;background: linear-gradient(to right,rgba(26,106,86,0.8),rgba(0,0,0,0.5));top: 73%;left: 1%">
      <div  class="full center" style="flex-direction: column">
        <div style="width: 100%;height: 50%;color: #3cc68a;font-size: 25px;font-weight: bold" class="center click">可回收垃圾投放点</div>
        <div style="width: 100%;height: 50%;color: #009bc1;font-size: 25px;font-weight: bold" class="center click">不可回收垃圾投放点</div>
      </div>
    </div>
    <!-- 卫生设施情况 -->
    <div class="center position-absolute"
    style="width: 50%;height: 10%;top: 20%;left: 25%;background: linear-gradient(to bottom,rgba(26,106,86,0.8),rgba(0,0,0,0.5))">
      <div v-for="(item,index) of iconList" :key="item" style="width: 16%;height: 100%;">
        <div style="width: 100%;height: 60%" class="center"
        :style="{
          background: 'url(/icon/weisheng/'+index+'.png) no-repeat center/40%'
        }"></div>
        <div style="width: 100%;height: 15%;color: #dddddd;font-weight: bold" class="center">{{item.name}}</div>
        <div style="width: 100%;height: 25%;color: #950706;font-weight: bold;font-size: 25px" class="center">{{item.text}}</div>
      </div>
    </div>
    <!-- 垃圾处理方式占比 -->
    <div class="center position-absolute"
    style="top: 10%;width: 23%;height: 40%;right: 1%;flex-direction: column"
    >
      <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" class="full">
        <div class="full center" style="flex-direction: column">
          <div style="width: 90%;height: 20%;justify-content: left" class="title center">垃圾处理方式占比</div>
          <div style="width: 100%;height: 80%" id="type"></div>
        </div>
      </dv-border-box-8>
    </div>
    <!-- 往年垃圾处理总量 -->
    <div class="center position-absolute"
         style="top: 51%;width: 25%;height: 35%;right: 1%;flex-direction: column"
    >
      <dv-border-box-4 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" class="full">
        <div class="full center" style="flex-direction: column">
          <div style="width: 90%;height: 20%;justify-content: left" class="title center">往年垃圾处理总量</div>
          <div style="width: 100%;height: 80%" id="years"></div>
        </div>
      </dv-border-box-4>
    </div>

  </div>
</template>

<script>
  import Charts, {changeDefaultConfig} from "@jiaminghi/charts";
  import CountIn from "../../components/count-in/count-in";
  export default {
        name: "EnvironmentProtection",
        components: {CountIn},
        data(){
          return{
            config: {
              data: [20],
              shape: 'round',
              colors: ['#dd2e21','#dddddd','#dddddd']
            },
            config2: {
              data: [78],
              shape: 'round',
              colors: ['#29dd4d','#dddddd','#dddddd']
            },
            chartsTotal: {},
            type: {},
            years: {},
            iconList: [
              {name: '填埋场',text: '5个'},
              {name: '垃圾中转站',text: '95座'},
              {name: '垃圾堆存点',text: '283个'},
              {name: '垃圾车',text: '363辆'},
              {name: '环卫工人',text: '675人'},
              {name: '垃圾桶',text: '4034个'},
            ],
          }
        },
        mounted() {
        this.initCharts();
        this.onload();
      },
        methods: {
      initCharts(){
        this.newCharts("chartsTotal","chartsTotal");
        this.newCharts("type","type");
        this.newCharts("years","years");
      },
      newCharts(id,propertyName){
        const container = document.getElementById(id)
        let myChart = new Charts(container);
        this[propertyName] = myChart;
      },
      setOption(){
        this.chartsTotal.setOption({
          title: {
            text: '年度总处理水量对比',
            style: {
              fill: '#5fe9c8',
              fontSize: 17,
              fontWeight: 'bold',
              textAlign: 'center',
              textBaseline: 'bottom'
            }
          },
          xAxis: {
            name: '月份',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
            nameTextStyle: {
              fill: '#5fe9c8',
              fontSize: 10
            },
            axisLabel:{
              style:  {
                fill: '#5fe9c8',
                fontSize: 12
              }}
          },
          yAxis: {
            name: '处理水量',
            data: 'value',
            nameTextStyle: {
              fill: '#5fe9c8',
              fontSize: 10
            },
            axisLabel:{
              style:  {
                fill: '#5fe9c8',
                fontSize: 12
              }}
          },
          series: [
            {
              data: [1200, 2230, 1900, 2100, 3500, 4200, 3985,1200, 2230, 1900, 2100, 3500, 4200, 3985],
              type: 'bar',
              gradient: {
                color: ['#37a2da', '#67e0e3']
              },
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            }
          ]
        });
        this.type.setOption({
          title: {
            text: '垃圾处理方式分布',
            style: {
              fill: '#5fe9c8',
              fontSize: 17,
              fontWeight: 'bold',
              textAlign: 'center',
              textBaseline: 'bottom'
            }
          },
          series: [
            {
              type: 'pie',
              data: [
                { name: '卫生填埋', value: 0.15 },
                { name: '分类回收', value: 0.45 },
                { name: '高温堆肥', value: 0.15 },
                { name: '焚烧', value: 0.15 },
              ],
              insideLabel: {
                show: true
              },
              outsideLabel: {
                style: {
                  fill: '#5081e9',
                  fontSize: 17,
                  fontWeight: 'bold',
                  textAlign: 'center',
                  textBaseline: 'bottom'
                }
              }
            }
          ]
        });
        this.years.setOption({
          title: {
            text: '往年垃圾处理总量',
            style: {
              fill: '#5fe9c8',
              fontSize: 17,
              fontWeight: 'bold',
              textAlign: 'center',
              textBaseline: 'bottom'
            }
          },
          xAxis: {
            data: 'value',
            nameTextStyle: {
              fill: '#5fe9c8',
              fontSize: 10
            },
            axisLabel:{
              style:  {
                fill: '#5fe9c8',
                fontSize: 12
              }}
          },
          yAxis: {
            data: ['2020', '2019', '2018', '2017', '2016'],
            nameTextStyle: {
              fill: '#5fe9c8',
              fontSize: 10
            },
            axisLabel:{
              style:  {
                fill: '#5fe9c8',
                fontSize: 12
              }}
          },
          series:[
            {
              name: '可回收垃圾',
              data: [4100, 220, 1900, 2100, 3500, 4200, 3985],
              type: 'bar',
              animationCurve: 'easeOutBack'
            },
            {
              name: '不可回收垃圾',
              data: [4300, 2230, 1900, 2100, 3500, 4200, 3985],
              type: 'bar',
              animationCurve: 'easeOutBack'
            }
          ]
        })
      },
      onload(){
        changeDefaultConfig('color',['rgb(208,200,21)','#747373','#6e6138','rgba(70,103,83,0.59)','#674a2c','#621752']);
        this.setOption();
      },
    }
    }
</script>

<style scoped>
  .full{
    width: 100%;
    height: 100%;
  }
  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .position-absolute{
    position: absolute;
  }
  .title{
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
  .click{
    cursor: pointer;
  }
  .click:hover{
    transform: translate(2px,2px);
  }
</style>
