<template>
  <div class="ecology">
    <div class="shadow">
      <Breadcrumb :breadData="breadData"></Breadcrumb>
    </div>
    <el-row :gutter="20" class="mt20">
      <el-col :sm="12" :xs="24">
        <div class="clear-water unify-item shadow" ref="left_one" id="left_one" style="height: 640px;">
          <h3 class="module-tit">深化碧水行动</h3>
          <ul>
            <li v-for="(item, index) in clear_water_info" :key="index" style="margin-top:35px">
              <p class="cw-classify">{{ item.classify }}</p>
              <div class="cw-progress">
                <el-progress
                  type="circle"
                  :percentage="100"
                  :stroke-width="12"
                  :show-text="false"
                ></el-progress>
                <p>{{ item.num }}个</p>
              </div>
              <div class="cw-percentage">
                <p class="cw-per-num">{{ item.current_num }}</p>
                <p class="cw-per-text">{{ item.name }}</p>
              </div>
              <div class="cw-compare">
                <p>目标</p>
                <p class="cw-com-per">{{ item.target_num }}</p>
                <p>同比</p>
                <p class="cw-com-desc">上升{{ item.compare_num }}个百分点</p>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :sm="12" :xs="24">
        <div class="air-quality unify-item  shadow" ref="right_one" id="right_one" style="height: 640px">
          <h3 class="module-tit">空气质量巩固提升行动</h3>
          <div class="aq-map">
            <img src="../assets/images/qingtian.jpg" alt=""/>
            <div class="aq-exponent">
              <p>空气质量指数</p>
              <ul class="aq-list">
                <li v-for="(item, index) in aqList" :key="index">
                  <i :style="{ 'background-color': item.bgc }"></i>
                  <span>{{ item.name }}</span>
                </li>
              </ul>
            </div>
          </div>
          <ul class="aq-desc">
            <li v-for="(item, index) in aq_desc_info" :key="index">
              <p class="aq-desc-name">{{ item.name }}</p>
              <div class="aq-desc-con">
                <div class="aq-desc-tb">
                  <div class="aq-desc-icon">
                    <i class="iconfont" :class="item.icon"></i>
                  </div>
                  <div>
                    <p style="color: #1bd68a">
                      上升{{ Math.abs(item.compare_num) }}个百分点
                    </p>
                    <span>同比</span>
                  </div>
                </div>
                <div class="aq-desc-tb">
                  <div>
                    <p style="color: #1492ff; font-size: 18px">
                      {{ item.current_num }}
                    </p>
                    <span>日均值</span>
                  </div>
                  <div>
                    <p style="color: #1492ff; font-size: 18px">
                      {{ item.target_num }}
                    </p>
                    <span>目标</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="12" :xs="24">
        <div class="no-waste unify-item  shadow" style="height:250px;">
          <h3 class="module-tit">无废城市建设</h3>
          <ul class="nw-con">
            <li
              v-for="(item, index) in no_waste_info"
              :key="index"
              :class="{ 'nw-task-first': index == 100 }"
             style="margin-left:0px !important">
              <h4 class="nw-task-name">{{ item.name }}</h4>
              <div class="nw-task-num">
                <div class="nw-task-current">
                  <p>{{ item.current_num }}</p>
                  <span>已完成</span>
                </div>
                <div class="nw-task-target">
                  <p>{{ item.target_num }}</p>
                  <span>目标</span>
                </div>
                <div class="nw-task-compare">
                  <p>上升{{ item.compare_num }}个百分点</p>
                  <span>同比</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :sm="12" :xs="24">
        <div class="beautiful-rivers unify-item  shadow" style="height:250px">
          <h3 class="module-tit">美丽河湖库</h3>
          <ul class="br-con">
            <li v-for="(item, index) in br_info" :key="index">
              <h4>{{ item.name }}</h4>
              <div class="br-task-num">
                <div class="br-task-current">
                  <div class="br-task-pro">
                    <el-progress
                      type="circle"
                      :percentage="93"
                      :stroke-width="8"
                      :show-text="false"
                    ></el-progress>
                    <i class="iconfont icon-hehu" style="color: #cbebfc"></i>
                  </div>
                  <div>
                    <p style="color: #1492ff; font-size: 18px">
                      {{ item.current_num }}
                    </p>
                    <span>问题整改率</span>
                  </div>
                </div>
                <div class="br-task-target">
                  <div class="br-task-pro">
                    <el-progress
                      type="circle"
                      :percentage="93"
                      :stroke-width="8"
                      :show-text="false"
                      :color="'#ffc149'"
                    ></el-progress>
                    <i class="iconfont icon-hehu" style="color: #fce8c3"></i>
                  </div>
                  <div>
                    <p style="color: #ffc149; font-size: 18px">
                      {{ item.target_num }}
                    </p>
                    <span>目标</span>
                  </div>
                </div>
                <div class="br-task-compare">
                  <i class="iconfont icon-shangsheng"></i>
                  <div>
                    <p style="color: #1bd68a; font-size: 18px; min-width:140px">
                      上升{{ item.compare_num }}个百分点
                    </p>
                    <span>环比</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="12" :xs="24">
        <div class="unify-item shadow">
          <h3 class="module-tit">政府工作报告任务落实</h3>
          <Tree :treeData="treeData"></Tree>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import Breadcrumb from "../components/Breadcrumb.vue";

    import Tree from "../components/Tree.vue";
    import {messageFun} from "../util/jianquan";


    export default {
        name: "ecology",
        components: {Tree, Breadcrumb},
        data() {
            return {
                breadData: {
                    page_name: "生态文明",
                    annual_target: "暂无数据",
                    leading: "青田县环保局",
                },
                aqList: [
                    {
                        name: "优",
                        bgc: "#10D485",
                    },
                    {
                        name: "良",
                        bgc: "#189CFF",
                    },
                    {
                        name: "轻度污染",
                        bgc: "#2A6FFF",
                    },
                    {
                        name: "中度污染",
                        bgc: "#FFA72A",
                    },
                    {
                        name: "重度污染",
                        bgc: "#FF842A",
                    },
                ],
                clear_water_info: [
                    {
                        classify: "国考断面",
                        num: 3,
                        name: "优Ⅲ类",
                        current_num: "100%",
                        target_num: "100%",
                        compare_num: 0.5,
                    },
                    {
                        classify: "省控断面",
                        num: 5,
                        name: "优Ⅲ类",
                        current_num: "100%",
                        target_num: "100%",
                        compare_num: 0.5,
                    },
                    {
                        classify: "饮用水水源地",
                        num: 1,
                        name: "优Ⅲ类",
                        current_num: "100%",
                        target_num: "100%",
                        compare_num: 0.5,
                    },
                ],
                aq_desc_info: [
                    {
                        name: "空气优良天数比",
                        target_num: "98.0%",
                        current_num: "99.3%",
                        compare_num: 1.3,
                        icon: "icon-kongqiyouliang",
                    },
                    {
                        name: "PM2.5浓度",
                        target_num: 20,
                        current_num: 22,
                        compare_num: 5,
                        icon: "icon-pm",
                    },
                ],
                no_waste_info: [

                    // {
                    //     name: "医疗废物收集处置率",
                    //     target_num: "100%",
                    //     current_num: "100%",
                    //     compare_num: 0.5,
                    // },
                    {
                        name: "医城镇垃圾分类覆盖面",
                        target_num: "100%",
                        current_num: "80%",
                        compare_num: 0.5,
                    },
                ],
                br_info: [
                    {
                        name: "河湖问题整改",
                        target_num: "93.3%",
                        current_num: "95.3%",
                        compare_num: 0.5,
                    },
                    // {
                    //     name: "河湖问题整改",
                    //     target_num: "93.3%",
                    //     current_num: "95.3%",
                    //     compare_num: 0.5,
                    // },
                ],
                ecological_creation_info: [
                    {
                        name: "市级生态文明建设示范市（县）",
                        num: "24个",
                        icon: "icon-gongyuzhuzhai",
                    },
                    {
                        name: "县市区级生态文明建设示范市（县）",
                        num: "61个",
                        icon: "icon-chengshi1",
                    },
                    {
                        name: '绿水青山就是"金山银山"实践创新基地',
                        num: "24个",
                        icon: "icon-shanshui",
                    },
                ],
                treeData: [
                    {
                        name: "深化碧水行动",
                        children: [
                            {
                                name: "“污水零直排区创建”",
                                status: '正常'
                            },
                            {
                                name: "美丽河湖创建",
                                status: '正常'
                            },
                            {
                                name: "城镇垃圾无害化处置率达100%",
                                status: '正常'
                            },
                            {
                                name: "砂石料行业整治提升",
                                status: '正常'
                            },
                            {
                                name: "涉林垦造耕地问题整改",
                                status: '正常'
                            },
                            {
                                name: "松材线虫病防治和美丽林相建设",
                                status: '正常'
                            },
                            {
                                name: "污水处理厂清洁化改造",
                                status: '正常'
                            },
                            {
                                name: "绿色矿山创建",
                                status: '正常'
                            }
                        ],
                    },
                ],
            };
        },
        created(){

            // this.$erd.listenTo(this.$refs.right_one, (element) => {
            //     debugger
            //     var width = element.offsetWidth;
            //     var height = element.offsetHeight;
            //     console.log("height="+height);
            // });
        },
        mounted() {
            this.listenMessage();
            window.parent.postMessage(document.body.scrollHeight, '*');
            window.onresize = () => {
                return (() => {
                    window.parent.postMessage(document.body.scrollHeight, '*');
                })();
            };
            window.addEventListener("resize", function (e) {
                window.parent.postMessage(document.body.scrollHeight, '*');
            });



            //
            //
            // this.$refs.left_one.style.height=t+"px";
        },

        methods: {
            listenMessage() {
                window.addEventListener('message', this.bindThis.bind(this));
            },
            async bindThis(e) {
                const query = this.$route.query;
                if (query.debug == "true") {
                    return;
                }
                const ret = await messageFun(e);
                if (ret == false) {
                    this.$router.push("err");
                }
            },
        }
    };
</script>

<style lang="scss" scoped>
  .ecology {

    width: calc(100% - 40px);
    margin: 0px auto;
    padding: 20px;
    // background: #666
  }

  //公共样式
  .module-tit {
    font-size: 20px;
    padding: 16px 0 12px 12px;
    font-weight: 600;
    position: relative;
  }

  .module-tit::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 16px;
    width: 4px;
    height: 28px;
    background-color: #1492ff;
  }

  .unify-item {
    box-sizing: border-box;
    padding: 0 20px 12px;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .shadow {
    box-shadow: 0 2px 12px 0 #ccc;
  }

  //当前页面样式
  .clear-water {
    ul {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 130px;
        background-color: #fafafa;
        margin-bottom: 20px;
        color: #333;

        .cw-classify {
          width: 30px;
          height: 130px;
          text-align: center;
          background-color: #e1f1ff;
          color: #1492ff;
          display: flex;
          padding: 0 8px;
          align-items: center;
        }

        .cw-progress {
          position: relative;

          > > > .el-progress-circle {
            width: 100px !important;
            height: 100px !important;
          }

          > p {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 18px;
          }
        }

        .cw-percentage {
          .cw-per-num {
            font-size: 20px;
            color: #1492ff;
            font-weight: 600;
            margin-bottom: 8px;
          }

          .cw-per-text {
            font-size: 18px;
          }
        }

        .cw-compare {
          width: 35%;
          padding-left: 20px;
          box-sizing: border-box;
          border-left: 1px solid #eee;

          .cw-com-per {
            color: #1492ff;
            margin: 8px 0 12px;
          }

          .cw-com-desc {
            color: #1bd68a;
            margin: 5px 0;
          }
        }
      }
    }
  }

  .air-quality {
    .aq-map {
      display: flex;
      justify-content: space-around;
      align-items: center;

      img {
        width: 40%;
        height: auto;
      }

      .aq-exponent {
        p {
          font-size: 18px;
          font-weight: 600;
        }
      }
    }

    .aq-list {
      margin: 20px 0;

      li {
        display: flex;
        align-items: center;
        padding: 8px 0;

        i {
          display: block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 8px;
        }
      }
    }

    .aq-desc {
      display: flex;
      justify-content: space-around;
      margin-top: 12px;
      color: #333;

      li {
        width: 47%;
        background-color: #fafafa;

        .aq-desc-name {
          color: #1492ff;
          height: 36px;
          text-align: center;
          line-height: 36px;
          border-radius: 2px;
          background-color: #e1f1ff;
        }

        .aq-desc-con {
          padding: 20px 0 0;

          i {
            color: #1492ff;
            font-size: 24px;
            line-height: 46px;
          }

          .aq-desc-tb {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 0 12px;

            > div {
              width: 45%;
            }

            .aq-desc-icon {
              width: 46px;
              height: 46px;
              border-radius: 50%;
              background-color: #e7f5ff;
              text-align: center;
            }
          }
        }
      }
    }
  }

  .no-waste {
    .nw-con {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        padding: 12px 10px;
        background-color: #eefbff;
        width: 46%;
        box-sizing: border-box;
        color: #333;

        .nw-task-name {
          font-size: 18px;
          font-weight: 600;
          color: #000;
        }

        .nw-task-num {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin: 12px 0;

          p {
            font-size: 18px;
            margin: 5px 0;
          }

          .nw-task-current {
            width: 20%;

            p {
              color: #1492ff;
            }
          }

          .nw-task-target {
            width: 20%;

            p {
              color: #ffc149;
            }
          }

          .nw-task-compare {
            width: 45%;
            min-width:140px;

            p {
              color: #1bd68a;
            }
          }
        }
      }

      .nw-task-first {
        width: 100%;
        background-color: #fffcee;
        margin-bottom: 20px;
      }
    }
  }

  .beautiful-rivers {
    .br-con {
      li {
        padding: 12px 20px;
        background-color: #fbfbfb;
        margin-bottom: 12px;
        color: #333;

        h4 {
          font-weight: 600;
          font-size: 18px;
          color: #000;
        }

        .br-task-num {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 0;

          > > > .el-progress-circle {
            width: 60px !important;
            height: 60px !important;
          }

          & > div {
            display: flex;
            align-items: center;
            width: 30%;
          }

          .br-task-pro {
            position: relative;
            margin-right: 8px;

            i {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 24px;
            }
          }

          .br-task-compare {
            min-width:140px;
            i {
              font-size: 42px;
              color: #1bd68a;
              margin-right: 8px;
            }
          }
        }
      }
    }
  }

  .ecological-creation {
    .ec-con {
      display: flex;
      justify-content: space-between;

      li {
        width: 30%;
        background-color: #f1f3f5;
        padding: 12px;
        text-align: center;
        color: #333;
        box-sizing: border-box;

        i {
          font-size: 44px;
          color: #1492ff;
        }
      }
    }
  }
</style>
