<!--  -->
<template>
  <div class="">
    <div class="main">
      <div class="minHeader shadow">
        <Breadcrumb :breadData="breadData"></Breadcrumb>
        <!-- <div class="card__headers flex between xxgl">

          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }"
              ><a href="https://szzf.qingtian.gov.cn:18080">首页</a></el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/' }"
              >电子健康证明</el-breadcrumb-item
            >
          </el-breadcrumb>
          <div class="flex acenter">
            <i class="el-icon-office-building mr12"></i>
            <p class="c3">牵头单位: 县疫情防控办 县卫生健康局</p>
          </div>
        </div>
        <div class="flex acenter pr20 pb12">
          <img src="../assets/images/target.png" class="icon28" />
          <div class="flex acenter">
            <div class="flex acenter eltxtx">
              <span class="c3 c149 fs18">年度目标</span>
              <div class="cline"></div>
            </div>
            <div class="c3">暂无数据</div>
          </div>
        </div> -->
      </div>
      <div class="minTop shadow mt20">
        <div class="flex between card__header">
          <p class="fs20 c3 b">体检机构管理</p>
        </div>
        <div class="w100 card__header flex tijg acenter">
          <el-table :data="tableInfo">
            <el-table-column prop="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="name" label="体检机构名称" width="150">
            </el-table-column>
            <el-table-column prop="allow_id" label="执业许可证号">
            </el-table-column>
            <el-table-column prop="address" label="机构地址"></el-table-column>
          </el-table>
          <div style="width: 400px">
            <div id="main1" style="max-width: 100%; height: 400px"></div>
          </div>
        </div>
      </div>
      <div class="minTop shadow mt20">
        <div class="flex between card__header">
          <p class="fs20 c3 b">从业人员信息</p>
        </div>
        <div class="w100">
          <div id="main2" style="max-width: 100%; height: 400px"></div>
        </div>
      </div>
      <div class="minTop shadow mt20">
        <div class="flex between card__header">
          <p class="fs20 c3 b">健康证信息</p>
        </div>
        <div class="w100 card__header">
          <el-table :data="tableData" border style="width: 100%" height="500px">
            <el-table-column prop="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="name" label="行政划分" width="80">
            </el-table-column>
            <el-table-column prop="fzs" label="发证数"></el-table-column>
            <el-table-column prop="yxzs" label="有效数"></el-table-column>
            <el-table-column prop="spscjy" label="食品生产经营">
              <el-table-column prop="spscjy1" label="发证数"></el-table-column>
              <el-table-column prop="spscjy2" label="有效证数">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="ggcsfw" label="公共场所服务">
              <el-table-column prop="ggcsfw1" label="发证数"></el-table-column>
              <el-table-column prop="ggcsfw2" label="有效证数">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="shyys" label="生活饮用水">
              <el-table-column prop="shyys1" label="发证数"></el-table-column>
              <el-table-column prop="shyys2" label="有效证数">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="jzry" label="家政人员">
              <el-table-column prop="jzry1" label="发证数"></el-table-column>
              <el-table-column prop="jzry2" label="有效证数"></el-table-column>
            </el-table-column>
            <el-table-column prop="hzpsc" label="化妆品生产">
              <el-table-column prop="hzpsc1" label="发证数"></el-table-column>
              <el-table-column prop="hzpsc2" label="有效证数">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="xdpsc" label="消毒产品生产">
              <el-table-column prop="xdpsc1" label="发证数"></el-table-column>
              <el-table-column prop="xdpsc2" label="有效证数">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="cyjjzxd" label="餐饮具集中消毒">
              <el-table-column prop="cyjjzxd1" label="发证数">
              </el-table-column>
              <el-table-column prop="cyjjzxd2" label="有效证数">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="ypsc" label="药品生产">
              <el-table-column prop="ypsc1" label="发证数"></el-table-column>
              <el-table-column prop="ypsc2" label="有效证数"></el-table-column>
            </el-table-column>
            <el-table-column prop="ylqxsc" label="医疗器械生产">
              <el-table-column prop="ylqxsc1" label="发证数"></el-table-column>
              <el-table-column prop="ylqxsc2" label="有效证数">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="spggcs" label="食品/公共场所">
              <el-table-column prop="spggcs1" label="发证数"></el-table-column>
              <el-table-column prop="spggcs2" label="有效证数">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="qt" label="其他">
              <el-table-column prop="qt1" label="发证数"></el-table-column>
              <el-table-column prop="qt2" label="有效证数"></el-table-column>
            </el-table-column>
            <el-table-column prop="tyjgby" label="托幼机构保育">
              <el-table-column prop="tyjgby1" label="发证数"></el-table-column>
              <el-table-column prop="tyjgby2" label="有效证数">
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    import {tableData, tableInfo} from "@/assets/js/data.js";
    import Breadcrumb from "../components/Breadcrumb.vue";
    import geoJson from '@/assets/json/qingtian.json'
    import {messageFun} from '../util/jianquan'

    let one, two;
    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {
            Breadcrumb
        },
        data() {
            //这里存放数据
            return {
                breadData: {
                    page_name: "电子健康证明",
                    annual_target:
                        "暂无数据",
                    leading: "县疫情防控办 县卫生健康局",
                },
                tableData: tableData,
                tableInfo: tableInfo,
            };
        },
        mounted() {
            this.listenMessage();
            let _this = this;
            this.initChart1();
            this.initChart2();
            window.parent.postMessage(document.body.scrollHeight, '*');
            window.addEventListener("resize", function (e) {
                window.parent.postMessage(document.body.scrollHeight, '*');
                window.parent.postMessage(document.body.scrollHeight, '*');
            });
            // window.onresize = () => {
            //   return (() => {
            //     _this.initChart1();
            //     _this.initChart2();
            //   })();
            // };
        },
        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");
                }
            },
            initChart1() {
                if (one != null && one != "" && one != undefined) {
                    one.dispose(); //销毁
                }
                one = this.$echarts.init(document.getElementById("main1"));
                this.$echarts.registerMap("青田县", geoJson, {});
                var geoCoordMap = {
                    青田万康口腔诊所: [120.303531, 28.13867],
                    青田中学卫生室: [120.327555, 28.112671],
                    青田中山诊所: [120.402735, 28.168119],
                    青田二院: [120.395389, 28.160624],
                    青田仁德医院: [120.2911164100647, 28.13983215729029],
                    青田仁济中医门诊部: [120.297364, 28.141048],
                    青田仁济医院: [120.337052, 28.093176],
                    青田佳吉口腔门诊部: [120.294649, 28.146659],
                    青田万康口青田俞荣达西医诊所腔诊所: [120.397821, 28.163797],
                    青田健玲口腔诊所: [120.285431, 28.13896],
                };
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value),
                            });
                        }
                    }
                    return res;
                };
                var option = {
                    tooltip: {
                        trigger: "item",
                        formatter: function (params) {
                            // console.log(params);
                            var res = "机构名称:" + params.data.name + "<br/>";
                            return res;
                        },
                    },
                    series: [
                        {
                            name: "医院",
                            type: "scatter",
                            mapType: "lishui",
                            coordinateSystem: "geo",
                            data: convertData([
                                {name: "青田万康口腔诊所", value: 1},
                                {name: "青田中学卫生室", value: 2},
                                {name: "青田中山诊所", value: 3},
                                {name: "青田二院", value: 4},
                                {name: "青田仁德医院", value: 5},
                                {name: "青田仁济中医门诊部", value: 6},
                                {name: "青田仁济医院", value: 7},
                                {name: "青田佳吉口腔门诊部", value: 8},
                                {name: "青田万康口青田俞荣达西医诊所腔诊所", value: 9},
                                {name: "青田健玲口腔诊所", value: 10},
                            ]),
                            encode: {
                                value: 2,
                            },
                            zlevel: 10,
                            symbol: "pin",
                            symbolSize: 20,
                            label: {
                                normal: {
                                    show: true, //显示市区标签
                                    textStyle: {color: "#c71585"}, //省份标签字体颜色
                                },
                                emphasis: {
                                    //对应的鼠标悬浮效果
                                    show: true, //关闭文字 （这东西有问题得关）
                                    textStyle: {color: "#800080"},
                                },
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 1, //区域边框宽度
                                    borderColor: "#009fe8", //区域边框颜色
                                    areaColor: "#ffefd5", //区域颜色
                                },
                                emphasis: {
                                    show: true,
                                    borderWidth: 0.5,
                                    borderColor: "#4b0082",
                                    areaColor: "#f47920",
                                },
                            },
                        },
                    ],
                    geo: {
                        map: "青田县",
                        itemStyle: {
                            borderColor: "#1492ff",
                            areaColor: "#edf4ff",
                        },
                        label: {
                            show: true,
                        },
                    },
                };
                one.setOption(option);
                window.addEventListener('resize', () => {
                    one.resize()
                })
            },
            initChart2() {
                if (two != null && two != "" && two != undefined) {
                    two.dispose(); //销毁
                }
                two = this.$echarts.init(document.getElementById("main2"));
                two.setOption({
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                        },
                    },
                    legend: {
                        data: ["体检人数", "食品生产经营", "公共场所服务", "生活饮用水"],
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "5%",
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: "category",
                            data: [
                                "东源中心院",
                                "山口中心院",
                                "油竹新区卫生院",
                                "中医院",
                                "青田二院",
                                "江南医院",
                                "腊口中心院",
                                "船寮中心院",
                                "康馨医院",
                                "青田县人民医院温溪分院",
                            ],
                            axisLabel: {
                                textStyle: {
                                    color: "#333", //坐标值得具体的颜色
                                    fontSize: 14,
                                },
                                width: 100,
                                overflow: "break",
                                interval: 0,
                            },
                        },
                    ],
                    yAxis: [
                        {
                            type: "value",
                            name: "人数",
                        },
                    ],
                    series: [
                        {
                            name: "体检人数",
                            type: "bar",
                            emphasis: {
                                focus: "series",
                            },
                            data: [282, 188, 448, 1186, 535, 908, 291, 474, 2410, 736],
                        },
                        {
                            name: "食品生产经营",
                            type: "bar",
                            stack: "职业",
                            emphasis: {
                                focus: "series",
                            },
                            data: [259, 186, 360, 797, 493, 628, 252, 449, 1807, 457],
                        },
                        {
                            name: "公共场所服务",
                            type: "bar",
                            stack: "职业",
                            emphasis: {
                                focus: "series",
                            },
                            data: [15, 1, 88, 388, 38, 272, 20, 16, 570, 102],
                        },
                        {
                            name: "生活饮用水",
                            type: "bar",
                            stack: "职业",
                            emphasis: {
                                focus: "series",
                            },
                            data: [8, 1, 0, 1, 4, 8, 1, 9, 32, 11],
                        },
                    ],
                });
                window.addEventListener('resize', () => {
                    two.resize()
                })
            },
        },
    };
</script>
<style lang="scss" scoped>
  #app {
    background: #fff !important;
  }

  @media screen and (max-width: 1200px) {
    .main {
      width: 100%;
      margin: 0px auto;
      padding: 30px 0;
    }
    .minHeader,
    .market {
      width: calc(100% - 40px);
      box-sizing: border-box;
      border-radius: 4px;
      padding: 20px;
      margin: 0px auto 0;
      background: #fff;
    }
    .minTop {
      width: calc(100% - 40px);
      box-sizing: border-box;
      border-radius: 4px;
      margin: 20px auto;
      background: #fff;
    }
  }

  @media screen and (min-width: 1200px) {
    .main {
      width: 1200px;
      margin: 0px auto;
      padding: 30px 0;
    }
    .minHeader,
    .market {
      width: 1200px;
      border-radius: 4px;
      // padding: 0px 20px 0px;
      background: #fff;
    }
    .minTop {
      width: 1200px;
      border-radius: 4px;
      background: #fff;
    }
  }

  .card__header {
    padding: 18px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .card__headers {
    padding: 18px 0px 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

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

  .w100 {
    width: 100%;
  }

  .w60 {
    width: 60%;
  }

  .w40 {
    width: 40%;
  }

  .cline {
    width: 2px;
    height: 18px;
    background: #1492ff;
    margin: 0 8px;
  }

  .icon28 {
    width: 28px;
    height: 28px;
  }
</style>
<style>
  .tijg .el-table td,
  .tijg .el-table th {
    text-align: center !important;
  }

  .tijg .el-table__header thead tr th {
    color: #606266;
    background: #ebeff8;
  }

  .xxgl .el-breadcrumb__inner.is-link {
    font-size: 16px !important;
    font-weight: bold;
    color: #333;
  }

  .xxgl .el-icon-s-marketing {
    color: rgb(54, 153, 247);
    font-size: 30px;
  }
</style>
