<template>
  <div class="live">
    <div class="main">
      <Breadcrumb :breadData="breadData"></Breadcrumb>
      <el-row :gutter="20" class="mt20">
        <el-col :xs="24" :sm="12" :md="12" :lg="12">
          <div class="task">
            <div class="task-census">
              <div class="flex column acenter">
                <i
                  class="iconfont mb5 icon-huanzhuangtu1"
                  style="color: #1492ff"
                ></i>
                110项任务
              </div>
              <div class="flex column acenter">
                <i
                  class="iconfont mb5 icon-zhengchang"
                  style="color: #6495fa"
                ></i>
                正常0项
              </div>
              <div class="flex column acenter">
                <i class="iconfont mb5 icon-jingshi" style="color: #ff8401"></i>
                预警0项
              </div>
              <div class="flex column acenter">
                <i class="iconfont mb5 icon-zhihou" style="color: #e96c5c"></i>
                滞后0项
              </div>
            </div>
            <el-row class="task-desc" :gutter="0">
              <el-col
                v-for="(item, index) in task_info"
                :key="index"
                :xs="24"
                :sm="24"
                :md="24"
                :lg="12"
                class="lis"
              >
                <p class="task-name">
                  <i
                    class="iconfont icon-yuan"
                    style="color: #1492ff; font-weight: 600; font-size: 18px"
                  ></i
                  >{{ item.task_name }}
                </p>
                <div class="quota-con">
                  <div
                    class="quota-item"
                    v-for="(qitem, qindex) in item.quota_info"
                    :key="qindex"
                  >
                    <p class="quota-name">{{ qitem.quota_name }}</p>
                    <p class="quota-value">
                      目标值:<span>{{ qitem.target_value }}</span> 当前进度:{{
                        qitem.current_value
                      }}
                    </p>
                    <div class="quota-progress">
                      进度:
                      <el-progress
                        :percentage="50"
                        :stroke-width="10"
                      ></el-progress>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <!-- <ul class="task-desc">
              <li v-for="(item, index) in task_info" :key="index">
                <p class="task-name">
                  <i
                    class="iconfont icon-yuan"
                    style="color: #1492ff; font-weight: 600; font-size: 18px"
                  ></i
                  >{{ item.task_name }}
                </p>
                <div class="quota-con">
                  <div
                    class="quota-item"
                    v-for="(qitem, qindex) in item.quota_info"
                    :key="qindex"
                  >
                    <p class="quota-name">{{ qitem.quota_name }}</p>
                    <p class="quota-value">
                      目标值:<span>{{ qitem.target_value }}</span> 当前进度:{{
                        qitem.current_value
                      }}
                    </p>
                    <div class="quota-progress">
                      进度:
                      <el-progress
                        :percentage="50"
                        :stroke-width="10"
                      ></el-progress>
                    </div>
                  </div>
                </div>
              </li>
            </ul> -->
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12">
          <div class="xzzj unify-item">
            <h4 class="module-tit">学在</h4>
            <el-row class="uls" :gutter="10">
              <el-col
                class="lis"
                :xs="12"
                :sm="12"
                :md="8"
                :lg="8"
                v-for="(item, index) in xzzj_info"
                :key="index"
              >
                <div
                  :class="[
                    { 'is-active': isActive == index },
                    { 'xz-disabled': index != 0 },
                  ]"
                >
                  <p v-if="index == 0">{{ item.name }}</p>
                  <el-tooltip
                    v-else
                    class="item"
                    effect="effect"
                    content="建设中..."
                    popper-class="sy-tooltip"
                    placement="top"
                    :visible-arrow="false"
                  >
                    <p>{{ item.name }}</p>
                  </el-tooltip>
                </div>
              </el-col>
            </el-row>
            <div id="bar_1" style="width: 100%; height: 300px"></div>
          </div>
          <div class="hlw unify-item">
            <h4 class="module-tit">互联网+医疗健康</h4>
            <el-row class="uls" :gutter="10">
              <el-col
                class="lis"
                :xs="12"
                :sm="12"
                :md="8"
                :lg="8"
                v-for="(item, index) in hlw_info"
                :key="index"
              >
                <div
                  :class="[
                    { 'is-active': isActive == index },
                    { 'hlw-disabled': index != 0 },
                  ]"
                >
                  <p v-if="index == 0">{{ item.name }}</p>
                  <el-tooltip
                    v-else
                    class="item"
                    effect="effect"
                    content="建设中..."
                    popper-class="sy-tooltip"
                    placement="top"
                    :visible-arrow="false"
                  >
                    <p>{{ item.name }}</p>
                  </el-tooltip>
                </div>
              </el-col>
            </el-row>
            <div id="bar_2" style="width: 100%; height: 300px"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
let one, two;
import Breadcrumb from "../components/Breadcrumb.vue";
export default {
  components: { Breadcrumb },
  name: "live",
  data() {
    return {
      breadData: {
        page_name: "民生保障",
        annual_target: "暂无数据",
        leading: "县发展和改革局",
      },
      task_info: [
        {
          task_name: "幼有所育",
          quota_info: [
            {
              quota_name: "每千人托位数",
              target_value: 2.5,
              current_value: "...",
            },
            {
              quota_name: "3岁以下婴幼儿托育机构覆盖率",
              target_value: "35%",
              current_value: "...",
            },
          ],
        },
        {
          task_name: "学有所教",
          quota_info: [
            {
              quota_name: "儿童青少年学生近视率下降数",
              target_value: "1%",
              current_value: "...",
            },
            {
              quota_name: "一、二级幼儿园覆盖率",
              target_value: "70%",
              current_value: "...",
            },
          ],
        },
        {
          task_name: "劳有所得",
          quota_info: [
            {
              quota_name: "退役军人专场招聘活动举办次数",
              target_value: 3,
              current_value: "...",
            },
            {
              quota_name: "重点人群流感疫苗免费接种人数",
              target_value: 8000,
              current_value: "...",
            },
          ],
        },
        {
          task_name: "老有所得",
          quota_info: [
            {
              quota_name: "每万老年人拥有持证养老护理员数",
              target_value: 17,
              current_value: "...",
            },
            {
              quota_name: "护理型床位占养老机构床位比例",
              target_value: "54%",
              current_value: "...",
            },
          ],
        },
        {
          task_name: "弱有所扶",
          quota_info: [
            {
              quota_name: "未成年人救助保护机构覆盖率",
              target_value: "30%",
              current_value: "...",
            },
            {
              quota_name: "新建乡镇(街道)未成年人保护工作站数量",
              target_value: 2,
              current_value: "...",
            },
          ],
        },
        {
          task_name: "住有所居",
          quota_info: [
            {
              quota_name: "新开工棚户区改造数",
              target_value: "...",
              current_value: "...",
            },
          ],
        },
        {
          task_name: "文有所化",
          quota_info: [
            {
              quota_name: "县级台电视频道高清率",
              target_value: "75%",
              current_value: "...",
            },
          ],
        },
      ],
      xzzj_info: [
        {
          name: "贯通学校数量",
        },
        {
          name: "幼儿园入学人数",
        },
        {
          name: "义务教育入学人数",
        },
        {
          name: "证书证明办件量",
        },
        {
          name: "资助学生人数",
        },
        {
          name: "考试优待人数",
        },
      ],
      isActive: 0,
      hlw_info: [
        {
          name: "预约挂号",
        },
        {
          name: "电子健康卡",
        },
        {
          name: "检验报告查询",
        },
        {
          name: "医学影像查询",
        },
        {
          name: "电子健康档案",
        },
      ],
      isActiveh: 0,
    };
  },
  mounted() {
    this.init_bar_1();
    this.init_bar_2();
    window.addEventListener("resize", function (e) {
      window.parent.postMessage(document.body.scrollHeight, '*');
    });
  },
  methods: {
    xtab(i) {
      this.isActive = i;
    },
    init_bar_1() {
      if (one != null && one != "" && one != undefined) {
        one.dispose(); //销毁
      }
      one = this.$echarts.init(document.getElementById("bar_1"));
      one.setOption({
        tooltip: {
          show: true, // 是否显示提示框,默认为true
          trigger: "item", // 数据项图形触发
          axisPointer: {
            // 指示样式
            type: "shadow",
            axis: "auto",
          },
          padding: 5,
          textStyle: {
            // 提示框内容的样式
            color: "#666",
          },
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#666",
            },
          },
          axisLabel: {
            rotate: 30,
            interval: 0,
            formatter: function (params) {
              var val = "";
              if (params.length > 4) {
                val = params.substr(0, 4) + "...";
                return val;
              } else {
                return params;
              }
            },
          },
          show: true, // 是否显示
          position: "bottom", // x轴的位置
          offset: 0, // x轴相对于默认位置的偏移
          nameLocation: "end", // 轴名称相对位置
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#666",
            fontSize: 16,
          },
          data: [
            "高中",
            "初中",
            "小学",
            "公办幼儿园",
            "成人文化技术学校",
            "教师进修学校",
            "青田电大",
          ],
        },
        yAxis: {
          show: true, // 是否显示
          position: "left", // y轴位置
          offset: 0, // y轴相对于默认位置的偏移
          type: "value", // 轴类型,默认为 ‘category’
          name: "库存量", // 轴名称
          nameLocation: "end", // 轴名称相对位置value
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#fff",
            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
          },
          nameGap: 15, // 坐标轴名称与轴线之间的距离
          nameRotate: 270, // 坐标轴名字旋转
          splitArea: {
            // 网格区域
            show: false, // 是否显示,默认为false
          },
        },
        series: [
          {
            name: "学校数量", // 序列名称
            type: "bar", // 类型
            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
            label: {
              // 图形上的文本标签
              show: false,
              position: "insideTop", // 相对位置
              rotate: 0, // 旋转角度
              color: "#999",
            },
            itemStyle: {
              // 图形的形状
              color: "#48A1FF",
            },
            barWidth: 20, // 柱形的宽度
            barCategoryGap: "10%", // 柱形的间距
            data: [3, 5, 21, 3, 4, 1, 1],
          },
        ],
      });
      window.addEventListener("resize", () => {
        one.resize();
      });
    },
    htab(i) {
      this.isActiveh = i;
    },
    init_bar_2() {
      if (two != null && two != "" && two != undefined) {
        two.dispose(); //销毁
      }
      two = this.$echarts.init(document.getElementById("bar_2"));
      two.setOption({
        // ---- legend ----
        // legend: {
        //   type: "plain", // 图列类型,默认为 'plain'
        //   top: "1%", // 图列相对容器的位置 top\bottom\left\right
        //   left: "1%",
        //   textStyle: {
        //     // 图列内容样式
        //     color: "#333", // 字体颜色
        //     backgroundColor: "black", // 字体背景色
        //   },
        //   data: [
        //     // 图列内容
        //     {
        //       name: "库存量",
        //       icon: "circle",
        //       textStyle: {
        //         color: "#333", // 单独设置某一个图列的颜色
        //         backgroundColor: "transparent", // 单独设置某一个图列的字体背景色
        //       },
        //     },
        //   ],
        // },
        // ---  提示框 ----
        tooltip: {
          show: true, // 是否显示提示框,默认为true
          trigger: "item", // 数据项图形触发
          axisPointer: {
            // 指示样式
            type: "shadow",
            axis: "auto",
          },
          padding: 5,
          textStyle: {
            // 提示框内容的样式
            color: "#666",
          },
        },
        // ---- gird区域 ---
        //  ------  X轴 ------
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#666",
            },
          },
          axisLabel: {
            rotate: 30,
            interval: 0,
            formatter: function (params) {
              var val = "";
              if (params.length > 4) {
                val = params.substr(0, 4) + "...";
                return val;
              } else {
                return params;
              }
            },
          },
          show: true, // 是否显示
          position: "bottom", // x轴的位置
          offset: 0, // x轴相对于默认位置的偏移
          nameLocation: "end", // 轴名称相对位置
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#999",
            // fontSize: 14,
          },
          data: [
            "莲都",
            "龙泉",
            "青田",
            "松阳",
            "庆元",
            "缙云",
            "遂昌",
            "云和",
            "景宁",
            "开发区",
          ],
        },
        //   ------   y轴  ----------
        yAxis: {
          show: true, // 是否显示
          position: "left", // y轴位置
          offset: 0, // y轴相对于默认位置的偏移
          type: "value", // 轴类型,默认为 ‘category’
          name: "库存量", // 轴名称
          nameLocation: "end", // 轴名称相对位置value
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#fff",
            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
          },
          nameGap: 15, // 坐标轴名称与轴线之间的距离
          nameRotate: 270, // 坐标轴名字旋转
          splitArea: {
            // 网格区域
            show: false, // 是否显示,默认为false
          },
        },
        //  -------   内容数据 -------
        series: [
          {
            name: "实例值", // 序列名称
            type: "bar", // 类型
            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
            label: {
              // 图形上的文本标签
              show: false,
              position: "insideTop", // 相对位置
              rotate: 0, // 旋转角度
              color: "#999",
            },
            itemStyle: {
              // 图形的形状
              color: "#48A1FF",
            },
            barWidth: 15, // 柱形的宽度
            barCategoryGap: "10%", // 柱形的间距
            data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
          },
        ],
      });
      window.addEventListener("resize", () => {
        two.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@media screen and(min-width:1200px) {
  #app {
    width: 1200px;
    background: #efefef !important;
  }
  .main {
    width: 1200px !important;
  }
}
.main {
  width: calc(100% - 20px);
  margin: 0px auto;
  padding: 20px 0px 0px;
}
.task {
  .task-census {
    border-radius: 4px;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 12px 20px;
    justify-content: space-around;
    background-color: #fff;
  }
  .task-desc {
    margin-top: 20px;
    .lis {
      border-radius: 4px;
      background-color: #fff;
      margin-bottom: 20px;
      padding: 12px;
      .task-name {
        font-size: 20px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .quota-item {
        margin: 12px 0;
        color: #333;
        .quota-name {
          font-size: 18px;
          font-weight: 600;
        }
        .quota-value {
          color: #666;
          margin: 8px 0;
          span {
            color: #1492ff;
            font-weight: 600;
            margin-right: 20px;
          }
        }
        .quota-progress {
          color: #333;
          display: flex;
          align-items: center;
          width: 100%;
        }
      }
    }
  }
}
.xzzj {
  .uls {
    margin: 15px 0 0;
    .lis {
      line-height: 45px;
      text-align: center;
      margin: 0 0 20px 0;
      cursor: pointer;
      color: #333;
    }
    .xz-disabled {
      color: #999;
      background: #ddd;
    }
    .is-active {
      background-color: #1492ff;
      color: #fff;
    }
  }
}
.hlw {
  .uls {
    margin: 12px 0 0;
    .lis {
      line-height: 45px;
      text-align: center;
      margin: 0 0 20px 0;
      cursor: pointer;
      color: #333;
    }
    .hlw-disabled {
      color: #999;
      background-color: #ddd;
    }
    .is-active {
      background-color: #1492ff;
      color: #fff;
    }
  }
}
.mb5 {
  margin-bottom: 5px;
}
</style>
<style>
/* @media only screen and (max-width: 767px) {
  .el-col-xs-12 {
    width: 49% !important;
}
} */
.el-progress {
  width: 80% !important;
}
.el-progress__text {
  color: #1492ff;
}
</style>