<template>
  <div>
    <div v-if="shows" id="nav" class="nav" :class="{ 'fix-nav': navBarFixed }">
      <van-nav-bar
        title="疫苗接种"
        left-arrow
        left-text="返回"
        @click-left="onClickLeft"
      />
    </div>
    <div class="contents">
      <div
        id="main"
        style="width: 350px; height: 300px; margin: 12px auto; border-radius: 10px"
      ></div>
    </div>

    <div
      id="main2"
      style="width: 350px; height: 540px; margin: 20px auto"
      v-show="shows1 != infos1"
    ></div>
  </div>
</template>

<script>
import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      shows: false,
      infos: [],
      infos1: [],
      shows1: "",
      navBarFixed: false,
    };
  },
  methods: {
    getanalysis() {
      let myChart = echarts.init(document.getElementById("main"));
      this.$http
        .post(
          "http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/vaccination_statistics"
        )
        .then((res) => {
          console.log(res);
          // 指定图表的配置项和数据
          this.infos = res.data.data;
          // console.log(this.infos);
          var option = {
            backgroundColor: "#fff",
            borderRadius: [20, 20, 20, 20],
            title: {
              text: "疫苗接种统计",
              // left: "left",
              x: "25px",
              y: "15px",
            },
            tooltip: {
              show: true,
              trigger: "item",
              // formatter: "{a} <br/>{b} : {c}",
              // textStyle: {
              //   fontSize: 10,
              //   color: "#fff",
              // },
            },

            legend: {
              //设置小块标记
              // selectedMode:false,
              y: "bottom",
              x: "center",
              formatter: {},
            },
            calculable: true,
            series: [
              {
                // name: "",
                // type: "pie",
                // radius: ["50%", "80%"], //饼图的半径大小
                // // center: ["60%", "60%"], //饼图的位置
                // label: {
                //   //饼图图形上的文本颜色设置
                //   normal: {
                //     show: true,
                //     position: "inner", //标签的位置
                //     textStyle: {
                //       fontWeight: 300,
                //       fontSize: 16, //文字的字体大小
                //     },
                //     formatter: "{d}%", //设置百分比
                //   },
                // },
                name: "",
                type: "pie",
                radius: ["40%", "70%"],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: "center",
                  normal: {
                    show: true,
                    position: "inner", //标签的位置
                    textStyle: {
                      fontWeight: 100,
                      fontSize: 14, //文字的字体大小
                      color: "#fff",
                    },
                    formatter: "{d}%", //设置百分比
                  },
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: "20",
                    fontWeight: "bold",
                  },
                },
                labelLine: {
                  show: false,
                },
                data: [
                  {
                    value: this.infos.vaccination_first,
                    name: "接种第一剂",
                    // 配置映射图显示颜色
                    itemStyle: {
                      // 设置扇形的颜色
                      color: "#39f",
                      shadowBlur: 200,
                      shadowColor: "rgba(0, 0, 0, 0)",
                    },
                  }, //饼图图形颜色
                  {
                    value: this.infos.vaccination_second,
                    name: "接种第二剂",
                    // 配置映射图显示颜色
                    itemStyle: {
                      // 设置扇形的颜色
                      color: "#9ad12e",
                      shadowBlur: 200,
                      shadowColor: "rgba(0, 0, 0, 0)",
                    },
                  }, //饼图图形颜色
                  {
                    value: this.infos.not_vaccination,
                    name: "未接种疫苗",
                    Id: "2",
                    itemStyle: {
                      // 设置扇形的颜色
                      color: "red",
                      shadowBlur: 200,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                ],
              },
            ],
          };
          myChart.setOption(option);
          myChart.on("legendselectchanged", function (params) {
            // console.log("111");
            // console.log(param.data);
            // let id=param.data.Id
            // console.log(params.name);
            if(params.name=="未接种疫苗"){
              window.location.href = `#/zaoquan/yiqing/yiqing-weijiezhong`;
            }
            if(params.name=="接种第一剂"){
              // console.log("sss");
              let itsname=params.name
              // console.log(itsname);
              window.location.href = `#/zaoquan/yiqing/yiqing-diyiji?itsname=${itsname}`;
            }
          });
        });
    },
    getanalysis1() {
      let myChart1 = echarts.init(document.getElementById("main2"));
      this.$http
        .post(
          "http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/vaccination_statistics"
        )
        .then((res) => {
          // console.log(res);
          // 指定图表的配置项和数据
          this.infos1 = res.data.data.not_nat_section_list;
          // console.log(this.infos1);
          let numArr = [];
          let section_fullnameArr = [];
          let section_idArr = [];
          for (let i in this.infos1) {
            // console.log(this.not_nat_section_list[i].section_fullname);
            numArr.push(this.infos1[i].num);
            section_fullnameArr.push(this.infos1[i].section_fullname);
            section_idArr.push(this.infos1[i].section_id);
          }
          let array = [];
          for (let i = 0; i < numArr.length; i++) {
            for (let j = 0; j < section_fullnameArr.length; j++) {
              let obj = {};
              for (let k = 0; k < section_idArr.length; k++) {
                if (i == j && i == k && j == k) {
                  obj.name = section_fullnameArr[j];
                  obj.value = numArr[i];
                  obj.Id = section_idArr[k];
                  array.push(obj);
                }
              }
            }
          }
          // console.log(array);
          var option1 = {
            backgroundColor: "#fff",
            borderRadius: 9,
            title: {
              text: "未接种疫苗部门分布",
              // left: "left",
              x: "25px",
              y: "15px",
            },
            tooltip: {
              show: true,
              trigger: "item",
              // formatter: "{a} <br/>{b} : {c}",
            },
            textStyle: {
              fontSize: 10,
              color: "#fff",
            },
            legend: {
              //设置小块标记
              y: "70%",
              x: "center",
            },
            calculable: true,
            series: [
              {
                name: "",
                type: "pie",
                radius: ["50%", "80%"], //饼图的半径大小
                center: ["50%", "200px"], //饼图的位置
                label: {
                  //饼图图形上的文本颜色设置
                  normal: {
                    show: true,
                    position: "inner", //标签的位置
                    textStyle: {
                      fontWeight: 100,
                      fontSize: 14, //文字的字体大小
                      color: "#fff",
                    },
                    formatter: "{d}%", //设置百分比
                  },
                },
                data: array,
              },
            ],
          };
          myChart1.setOption(option1);
          myChart1.on("legendselectchanged", function (param) {
            // console.log("111");
            console.log(param.name);
            let its = param.name;
            // console.log(its);
            window.location.href = `#/zaoquan/yiqing/yiqing-bumen?its=${its}`;
          });
        });
    },
    watchScroll() {
      // 滚动的距离
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      // 容器的高度
      var offsetTop = document.querySelector("#nav").offsetHeight;

      console.log("scrollTop=>", scrollTop, "  offsetTop=>", offsetTop);

      //  滚动的距离如果大于了元素到顶部的距离时，实现吸顶效果
      if (scrollTop > offsetTop) {
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    },
    onClickLeft() {
      window.history.back();
    },
  },
  mounted() {
    document.body.style.backgroundColor = "#39f"; //背景色
    document.body.style.borderRadius = "20px";
    window.addEventListener("scroll", this.watchScroll);
    this.token = getAllUrlParams(window.location.href).token;
     this.tabbar=Boolean(getAllUrlParams(window.location.href).tabbar) ;
    this.shows=this.tabbar
    // console.log(this.token);
    this.getanalysis();
    this.getanalysis1();
  },
  destroyed() {
    // 移除事件监听
    window.removeEventListener("scroll", this.watchScroll);
  },
};
</script>

<style scoped>
>>> .van-nav-bar {
  background: #39f;
}
>>> .van-nav-bar__title {
  color: #fff;
}
>>> .van-nav-bar .van-icon {
  color: #fff;
}
>>> .van-nav-bar__text {
  color: #fff;
}
[class*="van-hairline"]:after {
  border: none;
}
element.style {
  border-radius: 20px;
}
>>> #zr_0 {
  border-radius: 20px;
}
>>> canvas {
  border-radius: 20px !important;
}
.nav {
  width: 100%;
  height: 30px;
  background-color: #666666;
}

.fix-nav {
  position: fixed;
  top: 0;
  z-index: 999;
}
</style>