<template>
  <div class="outer">
    <!-- 页面固定选择 -->

    <!-- 图表 -->
    <div class="wrap">
      <!-- 结直肠癌 -->
      <Row class="row-title mb-20">
        <span class="title-text">结直肠癌统计分析</span>
      </Row>
      <Row class="grid-row">
        <Layout>
          <Content class="grid-content">
            <!-- 数据格上 -->
            <Row type="flex">
              <Col
                :xs="24"
                :sm="24"
                :md="3"
                class="grid-col grid-col-i"
                v-for="(item, index) in gridListA"
                :key="index"
              >
                <p class="grid-label">
                  <Icon type="md-radio-button-on" color="#76B7FF" />
                  {{ item.label }}
                </p>
                <p class="grid-data">
                  <span
                    v-for="(i, indexD) in item.data"
                    :key="indexD"
                    :class="indexD < item.numLength ? 'zero-span' : ''"
                    >{{ i }}</span
                  >
                </p>
              </Col>
            </Row>

            <Row>
              <div class="group-box">
                <p class="mb-15 mt-15">选择查看人群：</p>
                <Select v-model="groupOpt" size="small" class="group-select">
                  <Option
                    v-for="item in groupList"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>
              </div>
              <!-- 地图 -->
              <i-col :xs="24" :sm="24" :xl="24" class="grid-map">
                <div class="map-box">
                  <!-- <span
                              class="corner-icon"
                              @click="expandMap = !expandMap"
                              >放大</span
                  >-->
                  <Spin fix v-show="isMapShow">
                    <Icon
                      type="load-c"
                      size="30"
                      class="demo-spin-icon-load"
                    ></Icon>
                    <div>Loading...</div>
                  </Spin>
                  <emap
                    v-show="mapDataA[groupOpt]"
                    :mapData="mapDataA[groupOpt]"
                    height="100%"
                    width="100%"
                    :selectArea="selectArea"
                    mapId="colon"
                    @mapClick="mapClick"
                  />
                </div>
              </i-col>
              <!-- 饼图 -->
              <i-col :xs="7" :sm="7" :xl="7" class="grid-col graph-human-col">
                <!-- <div class="corner-index">
                          <p class="corner-title">筛查人群总数</p>
                          <p class="corner-data">{{ riskCount }}</p>
                </div> title="筛查人群风险程度分布图"-->
                <p class="grid-label">
                  <Icon type="md-radio-button-on" color="#76B7FF" />
                  全市AI风险入组风险等级占比
                </p>
                <PieChart
                  :chartData="riskPDataA"
                  :title="riskCountA"
                  subTitle="   全市"
                ></PieChart>
              </i-col>
            </Row>
          </Content>
          <!-- 展开 -->
          <transition name="expandT">
            <!-- 表格 多-->
            <!-- <Tabs
              value="name1"
              class="sider-tab-expand tab-expand"
              v-if="expandFlag"
            >
              <Icon
                class="corner-icon"
                type="md-arrow-dropright"
                @click="expandFlag = !expandFlag"
                size="24"
              />
              <TabPane label="各村筛查数据" name="name1">
                <Table
                  ref="tables"
                  :border="false"
                  :columns="columnsE"
                  :data="tableData"
                  :loading="tableLoading"
                >
                  <template slot-scope="{ row }" slot="addressCode">
                    <strong>{{ mapDistriction(row.addressCode) }}</strong>
                  </template>

                  <template slot-scope="{ row }" slot="action">
                    <Button type="info" @click="handleFollow(row)"
                      >开始随访</Button
                    >
                  </template>
                </Table>
              </TabPane>
            </Tabs>-->
            <!-- 地图 两步法 -->
            <Tabs v-if="expandMap" class="center-tab-expand tab-expand">
              <Icon
                class="corner-icon"
                type="md-arrow-dropright"
                @click="expandMap = !expandMap"
                size="24"
              />
              <TabPane label="瓯海区筛查地理图" name="ouhai" class="flex-row">
                <!-- <emap width="1310px" :mapData="mapData" v-if="expandMap" /> -->
              </TabPane>
            </Tabs>
          </transition>
        </Layout>
      </Row>
      <!-- 脑卒中 -->
      <Row class="row-title mb-20 mt-20">
        <span class="title-text">脑卒中统计分析</span>
      </Row>
      <Row class="grid-row">
        <Layout>
          <Content class="grid-content">
            <!-- 数据格上 -->
            <Row type="flex">
              <Col
                :xs="24"
                :sm="24"
                :md="3"
                class="grid-col grid-col-i"
                v-for="(item, index) in gridListB"
                :key="index"
              >
                <p class="grid-label">
                  <Icon type="md-radio-button-on" color="#76B7FF" />
                  {{ item.label }}
                </p>
                <p class="grid-data">
                  <span
                    v-for="(i, indexD) in item.data"
                    :key="indexD"
                    :class="indexD < item.numLength ? 'zero-span' : ''"
                    >{{ i }}</span
                  >
                </p>
              </Col>
            </Row>

            <Row>
              <div class="group-box">
                <p class="mb-15 mt-15">选择查看人群：</p>
                <Select v-model="groupOpt" size="small" class="group-select">
                  <Option
                    v-for="item in groupList"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>
              </div>
              <!-- 地图 -->
              <i-col :xs="24" :sm="24" :xl="24" class="grid-map">
                <div class="map-box">
                  <!-- <span
                              class="corner-icon"
                              @click="expandMap = !expandMap"
                              >放大</span
                  >-->
                  <Spin fix v-show="isMapShow">
                    <Icon
                      type="load-c"
                      size="30"
                      class="demo-spin-icon-load"
                    ></Icon>
                    <div>Loading...</div>
                  </Spin>
                  <emap
                    v-show="mapDataB[groupOpt]"
                    :mapData="mapDataB[groupOpt]"
                    height="100%"
                    width="100%"
                    :selectArea="selectArea"
                    mapId="gastric"
                    @mapClick="mapClick"
                  />
                </div>
              </i-col>
              <!-- 饼图 -->
              <i-col :xs="7" :sm="7" :xl="7" class="grid-col graph-human-col">
                <p class="grid-label">
                  <Icon type="md-radio-button-on" color="#76B7FF" />
                  全市AI风险入组风险等级占比
                </p>
                <PieChart
                  :chartData="riskPDataB"
                  :title="riskCountB"
                  subTitle="   全市"
                ></PieChart>
              </i-col>
            </Row>
          </Content>
          <!-- 展开 -->
          <transition name="expandT">
            <!-- 表格 多-->
            <!-- <Tabs
              value="name1"
              class="sider-tab-expand tab-expand"
              v-if="expandFlag"
            >
              <Icon
                class="corner-icon"
                type="md-arrow-dropright"
                @click="expandFlag = !expandFlag"
                size="24"
              />
              <TabPane label="各村筛查数据" name="name1">
                <Table
                  ref="tables"
                  :border="false"
                  :columns="columnsE"
                  :data="tableData"
                  :loading="tableLoading"
                >
                  <template slot-scope="{ row }" slot="addressCode">
                    <strong>{{ mapDistriction(row.addressCode) }}</strong>
                  </template>

                  <template slot-scope="{ row }" slot="action">
                    <Button type="info" @click="handleFollow(row)"
                      >开始随访</Button
                    >
                  </template>
                </Table>
              </TabPane>
            </Tabs>-->
            <!-- 地图 两步法 -->
            <Tabs v-if="expandMap" class="center-tab-expand tab-expand">
              <Icon
                class="corner-icon"
                type="md-arrow-dropright"
                @click="expandMap = !expandMap"
                size="24"
              />
              <TabPane label="瓯海区筛查地理图" name="ouhai" class="flex-row">
                <!-- <emap width="1310px" :mapData="mapData" v-if="expandMap" /> -->
              </TabPane>
            </Tabs>
          </transition>
        </Layout>
      </Row>
      <!-- 固定 -->
      <!-- <Affix :offset-bottom="100"> <Row :gutter="16" class="one-row search-row">筛查 </Row></Affix> -->
      <!-- 统计图 -->
      <Row class="grid-content graph-row"></Row>
    </div>
  </div>
</template>

<script>
import PieEcharts from "../../components/Echarts/pieCharts"
import BarChart from "../../components/Charts/BarChart"
import LineChart from "../../components/Charts/LineChart"
import PieChart from "../../components/Charts/PieChart"
import Emap from "./components/emap"
import Efunnel from "./components/efunnel"
import strMap from "./mixins/strMap"
import CrackPie from "../../components/Charts/crackPie.vue"
import ShowBar from "../../components/Charts/showBar.vue"
import Point from "../../components/Charts/point.vue"
import { data, data2 } from "./mixins/data"
export default {
  mixins: [strMap],
  components: {
    LineChart,
    BarChart,
    PieChart,
    PieEcharts,
    Emap,
    Efunnel,
    CrackPie,
    ShowBar,
    Point
  },
  data() {
    return {
      tableLoading: true,
      expandFlag: false,
      expandMap: false,
      isMapShow: false,
      firstScreeningCoverRate: "--%",
      riskRate: "--%",
      endoscopeRate: "--%",
      pathologyRate: "--%",
      yearList: [
        // {
        //   value: "",
        //   label: "至今"
        // },
        // {
        //   value: "2011",
        //   label: "2011年度"
        // },
        // {
        //   value: "2012",
        //   label: "2012年度"
        // },
        // {
        //   value: "2013",
        //   label: "2013年度"
        // },
        // {
        //   value: "2014",
        //   label: "2014年度"
        // },
        // {
        //   value: "2015",
        //   label: "2015年度"
        // },
        // {
        //   value: "2016",
        //   label: "2016年度"
        // },
        // {
        //   value: "2017",
        //   label: "2017年度"
        // },
        // {
        //   value: "2018",
        //   label: "2018年度"
        // },
        // {
        //   value: "2019",
        //   label: "2019年度"
        // },
        // {
        //   value: "2020",
        //   label: "2020年度"
        // },
        // {
        //   value: "2021",
        //   label: "2021年度"
        // }

        {
          value: 2022,
          label: "2022至今"
        }
      ],
      directList: [
        { label: "全市", value: "330300000000" }, //330300000000
        // { label: "市辖区", value: "330301000000" },
        { label: "鹿城区", value: "330302000000" },
        { label: "龙湾区", value: "330303000000" },
        { label: "瓯海区", value: "330304000000" },
        { label: "洞头县", value: "330305000000" },
        { label: "永嘉县", value: "330324000000" },
        { label: "平阳县", value: "330326000000" },
        { label: "苍南县", value: "330327000000" },
        { label: "文成县", value: "330328000000" },
        { label: "泰顺县", value: "330329000000" },
        { label: "瑞安市", value: "330381000000" },
        { label: "乐清市", value: "330382000000" }
        // { label: "梓上村", value: "330304109009" },
        // { label: "下呈村", value: "330304109021" },
        // { label: "杨宅村", value: "330304109019" },
        // { label: "茶堂村", value: "330304109020" },
        // { label: "叶宅村", value: "330304109017" },
        // { label: "下川村", value: "330304109001" },
        // { label: "姜宅村", value: "330304109005" },
        // { label: "任宅村", value: "330304109018" },
        // { label: "下嶂村", value: "330304109007" },
        // { label: "丽塘村", value: "330304109003" },
        // { label: "曹建村", value: "330304109006" },
        // { label: "后中村", value: "330304109014" },
        // { label: "河头村", value: "330304109015" },
        // { label: "王宅村", value: "330304109002" },
        // { label: "上坦村", value: "330304109016" },
        // { label: "泊岙村", value: "330304109004" },
        // { label: "林山村", value: "330304109008" },
      ],
      diseaseList: [
        {
          label: "上消化道肿瘤",
          value: "gastric"
        },
        {
          label: "下消化道肿瘤",
          value: "colon"
        }
      ],
      groupList: [
        {
          label: "AI评估高风险人群",
          value: "highCount"
        },
        {
          label: "AI评估中风险人群",
          value: "middleCount"
        },
        {
          label: "AI评估低风险人群",
          value: "lowCount"
        },
        {
          label: "风险未知人群",
          value: "unknowCount"
        }
      ],
      groupOpt: "highCount",
      yearOpt: 2022,
      directOpt: "330300000000", //330304000000
      diseaseOpt: "colon",
      selectArea: "330304000000", //传给地图组件的地区
      barEchartsData: {},
      //确诊癌症病例数趋势图
      riskCData: {}, //中高危风险人数趋势
      genderCount: "0", //性别总人数
      genderCData: {}, //性别人数趋势
      genderPData: {}, //筛查人群性别分布图
      genderBData: {}, //各性别筛查完成率分布
      riskPData: {}, //筛查人群风险程度分布
      riskCount: "0", //风险人群总数
      pieEchartsData: {},
      addressBData: {}, //各村筛查总人数
      ouhaiData: { data: [], xtitle: [] }, //瓯海区
      ouhaiSum: {
        data: [
          {
            name: "总成本",
            value: 195.4
          },
          {
            name: "净效益",
            value: 145.4
          }
        ]
      },
      yongjiaData: { data: [], xtitle: [] }, //永嘉县
      ageBData: {
        data: []
      }, //年龄段
      diseaseData: {}, //疾病分布
      chronicData: {}, //慢病分布
      addressRateData: {}, //各村筛查完成率
      addressEndoscopeData: {}, //各村内镜检查率
      totalCount: 0,
      distCount: 0, //村数
      pageIndex: 1,
      pageSize: 10,
      area: "丽岙街道",
      areaM: "温州市",
      mapDataA: {
        highCount: [],
        middleCount: [],
        lowCount: [],
        unknowCount: []
      },
      mapDataB: {
        highCount: [],
        middleCount: [],
        lowCount: [],
        unknowCount: []
      },
      columns: [
        {
          title: "排名",
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "村落名称",
          slot: "addressCode",
          minWidth: 90,
          align: "center"
        },
        {
          title: "筛查参与率",
          key: "screeningCoverRate",
          minWidth: 90,
          sortType: "desc",
          // sortable: true,
          align: "center"
        },
        {
          title: "内镜检查完成率",
          key: "endoscopeRate",
          minWidth: 90,
          // sortable: true,
          align: "center"
        }
      ],
      columnsE: [
        {
          title: "排名",
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "村落名称",
          slot: "addressCode",
          minWidth: 90,
          align: "center"
        },
        {
          title: "筛查目标人数",
          key: "target",
          minWidth: 100,
          sortable: true,
          align: "center"
        },
        {
          title: "筛查参与率",
          key: "screeningCoverRate",
          minWidth: 100,
          sortable: true,
          sortType: "desc",
          align: "center"
        },
        {
          title: "血检完成率",
          key: "firstScreeningCoverRate",
          minWidth: 100,
          sortable: true,
          align: "center"
        },
        {
          title: "中高危人群比例",
          minWidth: 120,
          key: "riskRate",
          sortable: true,
          align: "center"
        },
        {
          title: "内镜检查完成率",
          key: "endoscopeRate",
          minWidth: 100,
          // sortable: true,
          align: "center"
        },
        {
          title: "病理检查完成率",
          minWidth: 120,
          key: "pathologyRate",
          sortable: true,
          align: "center"
        }
      ],
      monthData: [
        {
          label: "1月",
          month: "01",
          value: 280
        },
        {
          month: "02",
          label: "2月",
          value: 380
        },
        {
          month: "03",
          label: "3月",
          value: 460
        },
        {
          label: "4月",
          value: 480
        },
        {
          label: "5月",
          value: 500
        },
        {
          label: "6月",
          value: 680
        },
        {
          label: "7月",
          value: 520
        },
        {
          label: "8月",
          value: 360
        },
        {
          label: "9月",
          value: 380
        },
        {
          label: "10月",
          value: 480
        },
        {
          label: "11月",
          value: 260
        },
        {
          label: "12月",
          value: 350
        }
      ],
      tableData: [],
      diseaseClassification: {},
      ageData: {},
      sexData: {},
      gridListA: [
        {
          data: "--",
          label: "AI风险入组总人数",
          prop: "count",
          numLength: 5
        },
        {
          data: "--",
          label: "AI评估高风险人数",
          prop: "highCount",
          numLength: 5
        },
        {
          data: "--",
          label: "AI评估中风险人数",
          prop: "middleCount",
          numLength: 5
        },
        {
          data: "--",
          label: "AI评估低风险人数",
          prop: "lowCount",
          numLength: 5
        },
        {
          data: "--",
          label: "风险未知人群",
          prop: "unknowCount",
          numLength: 5
        },
        {
          data: "--",
          label: "高风险人群诊间提示人次",
          prop: "tipCount",
          numLength: 5
        }
      ],
      gridListB: [
        {
          data: "--",
          label: "AI风险入组总人数",
          prop: "count",
          numLength: 5
        },
        {
          data: "--",
          label: "AI评估高风险人数",
          prop: "highCount",
          numLength: 5
        },
        {
          data: "--",
          label: "AI评估中风险人数",
          prop: "middleCount",
          numLength: 5
        },
        {
          data: "--",
          label: "AI评估低风险人数",
          prop: "lowCount",
          numLength: 5
        },
        {
          data: "--",
          label: "风险未知人群",
          prop: "unknowCount",
          numLength: 5
        },
        {
          data: "--",
          label: "高风险人群诊间提示人次",
          prop: "tipCount",
          numLength: 5
        }
      ],
      riskPDataA: {},
      riskPDataB: {},
      riskCountA: "",
      riskCountB: "",
      mapList: [
        {
          label: "瓯海区筛查地图",
          name: "ouhai"
        }
      ]
    }
  },
  computed: {},
  watch: {
    directOpt(val) {
      this.selectArea = val
      this.area = this.mapDistriction(val)
      this.areaM = this.mapDistriction(val)
      this.getIndexA(val)
      this.getIndexB(val)
      this.getMapA(val)
      this.getMapB(val)
      // this.getResult(val);
    }
  },
  mounted() {
    this.selectArea = this.directOpt
    this.area = this.mapDistriction(this.directOpt)
    // this.getStatisticsDiseases()
    this.getIndexA(this.directOpt)
    this.getIndexB(this.directOpt)
    this.getMapA(this.directOpt)
    this.getMapB(this.directOpt)
    // this.getResult(this.directOpt);

    // this.getStatisticsMonthly();
    // this.getFollowupReport()
    // this.getStatisticsDiseasesType()
    // this.getStatisticsPatientAgeAndSex();
    //监听页面滚动事件
    // window.addEventListener("scroll", this.handleScroll);
  },
  created() {
    if (localStorage.getItem("diseaseType")) {
      this.diseaseOpt = localStorage.getItem("diseaseType")
    }
    this.getResult(this.directOpt)
  },
  methods: {
    handleScroll() {
      //窗口滚要做的操作写这里
    },
    changeData(flag) {
      if (!flag) {
        this.getIndexA(this.directOpt)
        this.getIndexB(this.directOpt)
        this.getMapA(this.directOpt)
        this.getMapB(this.directOpt)
      }
    },
    mapClick(data, mode) {
      //点击区下钻
      if (mode == 1) {
        this.directOpt = data.code
      }
      //点击街道不下钻
      if (mode == 2) {
        this.selectArea = data.code
        this.area = data.name
        // this.getIndexA(data.code);
        // this.getIndexB(data.code);
      }
      //没有地图json文件
      else {
        this.areaM = "温州市"
      }
    },
    //指标统计 - 结直肠癌
    getIndexA(addressCode) {
      const params = {}
      params.year = Number(this.yearOpt)
      params.diseaseType = "colon"
      params.districtCode = addressCode
      //数据概览-格子
      const pEchartsData = {} //清空
      pEchartsData.data = []
      pEchartsData.xtitle = []
      const d = {
        diseaseType: "colon",
        count: 2769015,
        highCount: 327626,
        middleCount: 1404030,
        lowCount: 1037359,
        unknowCount: 0,
        tipCount: 82325
      }
      if (d) {
        this.gridListA.forEach((v) => {
          v.data = this.toFit(d[v.prop]).numArr
          v["numLength"] = this.toFit(d[v.prop]).length
        })
        //饼图
        if (d.lowCount) {
          pEchartsData.data.push({
            name: "低风险人群",
            value: ((d.lowCount / d.count) * 100).toFixed(2) || "0",
            count: d.lowCount || "--",
            color: "#4DE6BA"
          })
        }
        if (d.middleCount) {
          pEchartsData.data.push({
            name: "中风险人群",
            value: ((d.middleCount / d.count) * 100).toFixed(2) || "0",
            count: d.middleCount || "--",
            color: "#439AEB"
          })
        }
        if (d.highCount) {
          pEchartsData.data.push({
            name: "高风险人群",
            value: ((d.highCount / d.count) * 100).toFixed(2) || "0",
            count: d.highCount || "--",
            color: "#434EEB"
          })
        }
        if (d.unknowCount) {
          pEchartsData.data.push({
            name: "未知风险人群",
            value: ((d.unknowCount / d.count) * 100).toFixed(2) || "0",
            count: d.unknowCount || "--",
            color: "#E69C4D"
          })
        }

        // if (item.target) {
        this.riskCountA = this.toSpace(d.count) || "0"
      } else {
        pEchartsData.data.push(
          {
            name: "低风险人群",
            value: 0,
            color: "#4DE6BA"
          },
          {
            name: "中风险人群",
            value: 0,
            color: "#439AEB"
          },
          {
            name: "高风险人群",
            value: 0,
            color: "#434EEB"
          },
          {
            name: "未知风险人群",
            value: 0,
            color: "#E69C4D"
          }
        )
      }
      this.riskPDataA = pEchartsData
    },
    //指标统计 - 脑卒中
    getIndexB(addressCode) {
      const params = {}
      params.year = Number(this.yearOpt)
      params.diseaseType = "stroke"
      params.districtCode = addressCode
      //数据概览-格子
      const pEchartsData = {} //清空
      pEchartsData.data = []
      pEchartsData.xtitle = []
      const d = {
        diseaseType: "stroke",
        count: 2755280,
        highCount: 11188,
        middleCount: 51379,
        lowCount: 2692712,
        unknowCount: 0,
        tipCount: 0
      }
      if (d) {
        this.gridListB.forEach((v) => {
          v.data = this.toFit(d[v.prop]).numArr
          v["numLength"] = this.toFit(d[v.prop]).length
        })
        //饼图
        if (d.lowCount) {
          pEchartsData.data.push({
            name: "低风险人群",
            value: ((d.lowCount / d.count) * 100).toFixed(2) || "0",
            count: d.lowCount || "--",
            color: "#4DE6BA"
          })
        }
        if (d.middleCount) {
          pEchartsData.data.push({
            name: "中风险人群",
            value: ((d.middleCount / d.count) * 100).toFixed(2) || "0",
            count: d.middleCount || "--",
            color: "#439AEB"
          })
        }
        if (d.highCount) {
          pEchartsData.data.push({
            name: "高风险人群",
            value: ((d.highCount / d.count) * 100).toFixed(2) || "0",
            count: d.highCount || "--",
            color: "#434EEB"
          })
        }
        if (d.unknowCount) {
          pEchartsData.data.push({
            name: "未知风险人群",
            value: ((d.unknowCount / d.count) * 100).toFixed(2) || "0",
            count: d.unknowCount || "--",
            color: "#E69C4D"
          })
        }

        // if (item.target) {
        this.riskCountB = this.toSpace(d.count) || "0"
      } else {
        pEchartsData.data.push(
          {
            name: "低风险人群",
            value: 0,
            color: "#4DE6BA"
          },
          {
            name: "中风险人群",
            value: 0,
            color: "#439AEB"
          },
          {
            name: "高风险人群",
            value: 0,
            color: "#434EEB"
          },
          {
            name: "未知风险人群",
            value: 0,
            color: "#E69C4D"
          }
        )
      }
      this.riskPDataB = pEchartsData
    },
    getMapA(addressCode) {
      this.isMapShow = true
      const params = {}
      params.year = this.yearOpt
      params.diseaseType = "colon"
      params.addressCode = addressCode
      this.mapDataA = {
        highCount: [],
        middleCount: [],
        lowCount: [],
        unknowCount: []
      } //清空
      const list = []
      // 调试

      let d = data || []
      if (d && d.length != 0) {
        d.forEach((item) => {
          for (let key in item) {
            if (key != "addressName" && key != "addressCode") {
              if (this.mapDataA[key]) {
                this.mapDataA[key].push({
                  addressCode: item.addressCode || "",
                  addressName: item.addressName || "",
                  apiData: item[key] || 0
                })
              } else {
                this.mapDataA[key] = [
                  {
                    addressCode: item.addressCode || "",
                    addressName: item.addressName || "",
                    apiData: item[key] || 0
                  }
                ]
              }
            }
          }
        })
      }

      this.isMapShow = false
    },
    getMapB(addressCode) {
      this.isMapShow = true
      const params = {}
      params.year = this.yearOpt
      params.diseaseType = "stroke"
      params.addressCode = addressCode
      this.mapDataB = {
        highCount: [],
        middleCount: [],
        lowCount: [],
        unknowCount: []
      } //清空
      const list = []

      let d = data2 || []
      if (d && d.length != 0) {
        d.forEach((item) => {
          for (let key in item) {
            if (key != "addressName" && key != "addressCode") {
              if (this.mapDataB[key]) {
                this.mapDataB[key].push({
                  addressCode: item.addressCode || "",
                  apiData: item[key] || 0
                })
              } else {
                this.mapDataB[key] = [
                  {
                    addressCode: item.addressCode || "",
                    apiData: item[key] || 0
                  }
                ]
              }
            }
          }
        })
      }

      this.isMapShow = false
    },
    //疾病防控成效
    getResult(addressCode) {
      // this.ouhaiData.data=[]
      // this.yongjiaData.data=[]
      if (addressCode == "330304000000" || addressCode == "") {
        this.ouhaiData.data = [
          {
            name: "筛查开展前",
            value: 33.02
          },
          {
            name: "筛查开展后",
            value: 20.94
          }
          // {
          //   name: "2016",
          //   value: 32.86,
          // },
          // {
          //   name: "2017",
          //   value: 34.73,
          // },
          // {
          //   name: "2018",
          //   value: 31.46,
          // },
          // {
          //   name: "2019",
          //   value: 19.58,
          // },
          // {
          //   name: "2020",
          //   value: 22.3,
          // },
        ]
      }

      this.yongjiaData.data = [
        {
          name: "2016",
          value: 31.77
        },
        {
          name: "2017",
          value: 34.8
        },
        {
          name: "2018",
          value: 31.64
        },
        {
          name: "2019",
          value: 16.35
        },
        {
          name: "2020",
          value: 17.3
        }
      ]
    },
    // 疾病数据
    getStatisticsDiseases() {
      this.$API.getStatisticsDiseases().then((res) => {
        if (res.code === 1) {
          const d = res.object
          const pieEchartsData = {}
          if (d && d.length) {
            pieEchartsData.data = []
            d.forEach((item) => {
              pieEchartsData.data.push({
                label: item.diseaseName,
                value: item.count
              })
            })
          } else {
            pieEchartsData.data = [
              {
                label: "暂无数据",
                value: 0
              }
            ]
          }
          this.pieEchartsData = pieEchartsData
        }
      })
    },
    // 疾病分类数据
    getStatisticsDiseasesType() {
      this.$API.getStatisticsDiseasesType().then((res) => {
        if (res.code === 1) {
          const d = res.object
          let diseaseClassification = {
            xTitle: "疾病分类统计",
            data: []
          }
          if (d && d.length) {
            d.forEach((item) => {
              diseaseClassification.data.push({
                name: item.name,
                value: item.count
              })
            })
          }
          this.diseaseClassification = diseaseClassification
        }
      })
    },
    // 年龄性别分布
    getStatisticsPatientAgeAndSex() {
      this.$API.getStatisticsPatientAgeAndSex().then((res) => {
        if (res.code === 1) {
          const d = res.object
          const sexObj = d.map((v) => {
            if (v.name === "sex") {
              let sexData = {
                xTitle: "患者性别分布",
                data: []
              }
              if (v.list && v.list.length) {
                v.list.forEach((item) => {
                  sexData.data.push({
                    name: item.sex,
                    value: item.count
                  })
                })
              }
              this.sexData = sexData
            }
            if (v.name === "age") {
              let ageData = {}
              if (v.list && v.list.length) {
                const xAxisData = []
                const yAxisData = []
                v.list.forEach((item) => {
                  xAxisData.push(item.range)
                  yAxisData.push(item.count)
                })
                ageData = {
                  title: {
                    text: "患者年龄分布"
                  },
                  xAxis: [
                    {
                      type: "category",
                      axisTick: {
                        alignWithLabel: true
                      },
                      data: xAxisData
                    }
                  ],
                  series: [
                    {
                      type: "bar",
                      stack: "vistors",
                      barWidth: "60%",
                      data: yAxisData,
                      animationDuration: 2600
                    }
                  ]
                }
              }
              this.ageData = ageData
            }
          })
        }
      })
    },
    // 筛查数据
    getStatisticsMonthly() {
      this.$API.getStatisticsMonthly().then((res) => {
        if (res.code === 1) {
          const d = res.object
          const barEchartsData = {}
          barEchartsData.data = []
          for (let i = 1; i < 13; i++) {
            barEchartsData.data.push({
              label: i + "月",
              value:
                (d.find((item) => item.month == i) &&
                  d.find((item) => item.month == i).count) ||
                0
            })
          }
          this.barEchartsData = barEchartsData
        }
      })
    },
    // 随访列表
    getFollowupReport() {
      const params = {}
      params.pageNum = this.pageIndex
      params.pageSize = this.pageSize

      this.$API.getFollowupReport({ params }).then((res) => {
        const list = []
        const d = res.object
        if (d && d.list) {
          d.list.forEach((item) => {
            list.push({
              ...item
            })
          })
        }
        this.tableData = list
        this.totalCount = res.object.totalCount
      })
    },
    handleFollow(row) {
      sessionStorage.setItem("datamanage-path", this.$route.path)
      this.$router.push({
        name: "reportdata",
        query: {
          diseaseType: row.diseaseTypes,
          id: row.id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// 外壳布局
.outer {
  overflow-y: hidden;
  background-image: url("../../assets/img/bord-back.png") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  #index {
    // background: #1d2033;
    div {
      // background: rgba(29, 32, 51, 1)
    }
  }
  .wrap {
    border: none;
    background: transparent;
    // border: 10px solid rgba(29, 32, 51, 1);
    overflow: hidden;
    padding: 4vh;
    @media (max-height: 768px) {
      padding: 40px;
    }
    // height: 100vh;
    // padding-top: 10px;
    // overflow-y: scroll;
    .ivu-layout {
      background: transparent !important;
      .ivu-layout-content {
        overflow: hidden !important;
      }
    }
    .row-title {
      text-align: left;
      .title-text {
        font-size: 24px;
        font-family: DingTalk-JinBuTi, DingTalk;
        font-weight: normal;
        color: #67d8fe;
        padding: 6px 10px;
        background: linear-gradient(
          90deg,
          rgba(99, 173, 255, 0.3) 0%,
          rgba(99, 173, 255, 0) 100%
        );
      }
    }
  }
}

.graph-row {
  margin: 5px 0px 0px;
  ::v-deep {
    .ivu-tabs-tabpane {
      height: 88vh;
      overflow-x: hidden;
      overflow-y: auto;
      transition: all 0.5s;
      @media (max-height: 768px) {
        height: 79vh;
      }
    }
    ::-webkit-scrollbar {
      width: 2px; //竖轴宽度
      height: 2px; //横轴宽度
      background-color: transparent;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
      // background-color: transparent;
    }
  }
}

.trans-select {
  box-shadow: inset 0px 0px 8px 0px rgba(87, 166, 236, 0.24);
  padding: 12px 20px;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  // font-style:italic;
  ::v-deep {
    .ivu-select-selection {
      border: none;
      width: fit-content;
      color: #63adff;
      font-size: 16px;
      font-style: italic;
      box-shadow: none;
    }
    .ivu-select-arrow {
      color: #63adff;
      right: 4px;
    }
    .ivu-select-dropdown {
      border-bottom: 1px solid white;
      border-image: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          #63adff 50%,
          rgba(255, 255, 255, 0) 100%
        )
        20 20;
      // border-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, #63ADFF 50%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%);;
      background: linear-gradient(90deg, #101623 0%, #212a3c 50%, #101623 100%);
      .ivu-select-item {
        color: white;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
      }
      .ivu-select-item:hover {
        color: #63adff;
        background: transparent;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        border-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            #63adff 50%,
            rgba(255, 255, 255, 0) 100%
          )
          20 20;
      }
      .ivu-select-item-focus {
        background: transparent;
      }
      .ivu-select-item-selected {
        color: #63adff;
      }
    }
  }
}
.one-row {
  padding: 10px 20px;
  // color: #d7d7d7;
  // border-bottom: 10px solid rgb(29 32 51);
  margin: 0 !important;
  // background: rgba(255, 255, 255, 0.04);
  background: #171d28;
}
.meta-row,
.search-row {
  border-top: 1px solid rgb(29 32 51);
  text-align: center;
  box-shadow: 2px -1px 0px #1d2033; //固定间隙
}
.neg-title {
  padding: 10px;
  color: #aaaaaa;
}
.neg-title:hover {
  color: rgb(128, 255, 255);
}
.neg-active {
  color: rgb(128, 255, 255);
  border-bottom: 2px solid rgb(128, 255, 255);
}
.grid-side {
  width: 16%;
}
.sider-tab {
  margin-left: 2px;
  ::v-deep {
    .ivu-table-tbody {
      height: 1105px;
      overflow-y: auto;
    }
  }
}
.tab-expand {
  position: absolute;
  box-shadow: -17px -17px 34px #080b16, 17px -17px 34px #2b3354;
  border-left: 1px solid #2b3354;
  transition: all 0.2s ease-in-out;
  z-index: 9;
}
.sider-tab-expand {
  top: 0;
  right: 0;
}
.center-tab-expand {
  top: 120px;
  // left: 0;
  right: 0;
}
.grid-content {
  margin-right: 6px;
  .grid-col {
    color: #c8e1f4;
    padding-top: 0.5vh;
    // width: 48%;
    background-color: rgba(30, 37, 52, 0.48);
    background-image: url("../../assets/img/index-back.png");
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
  }
  ::v-deep {
    .ivu-col-span-md-3 {
      width: 15.5%;
    }
  }
  .grid-col-i {
    margin-bottom: 0.5vh;
    padding: 1.1vh;
    // border-right: 2px solid black;
    .grid-data {
      font-size: 22px;
      font-weight: normal;
      font-family: DingTalk-JinBuTi;
      transition: all 0.5s;
      @media (max-height: 768px) {
        font-size: 20px;
      }
      span {
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.1) 99%
        );
        color: white;
        margin-right: 4px;
        padding: 0px 1px;
      }
      .zero-span {
        color: rgba(255, 255, 255, 0.2);
      }
    }

    .grid-label {
      font-size: 12px;
      transition: all 0.5s;
      text-align: left;
      color: #ffffff;
      ::v-deep {
        .ivu-icon {
        }
      }
      @media (max-height: 768px) {
        font-size: 12px;
      }
    }
  }
  .grid-col-i:not(:last-child) {
    margin-right: 1vw;
  }
  .grid-col-l {
    margin: 0px 5px 5px 0px;
  }
  .grid-col-t {
    margin: 0px 0px 5px 0px;
  }

  .grid-col-r {
    margin: 0px 0px 5px 5px;
    float: right;
  }
}
.group-box {
  position: absolute;
  z-index: 1;
  color: white;
  .group-select {
    ::v-deep {
      .ivu-select-selection {
        width: fit-content;
        color: #63adff;
        font-size: 16px;
        font-style: italic;
        box-shadow: none;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        border-left: 0px;
        border-right: 0px;
        border-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            #63adff 50%,
            rgba(255, 255, 255, 0) 100%
          )
          20 20;
        background: linear-gradient(
          90deg,
          rgba(64, 77, 100, 0.1) 0%,
          rgba(86, 104, 139, 0.3) 50%,
          rgba(30, 37, 52, 0.1) 100%
        );
        padding: 12px 20px;
        height: auto;
        font-style: italic;
      }
      .ivu-select-arrow {
        color: #63adff;
        right: 4px;
      }
      .ivu-select-dropdown {
        border-bottom: 1px solid white;
        border-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            #63adff 50%,
            rgba(255, 255, 255, 0) 100%
          )
          20 20;
        background: linear-gradient(
          90deg,
          rgba(64, 77, 100, 0.1) 0%,
          rgba(86, 104, 139, 0.3) 50%,
          rgba(30, 37, 52, 0.1) 100%
        );
        .ivu-select-item {
          color: white;
          border-top: 1px solid transparent;
          border-bottom: 1px solid transparent;
        }
        .ivu-select-item:hover,
        .ivu-select-item-focus {
          color: #63adff;
          background: transparent;
          border-top: 1px solid white;
          border-bottom: 1px solid white;
          border-image: linear-gradient(
              90deg,
              rgba(255, 255, 255, 0) 0%,
              #63adff 50%,
              rgba(255, 255, 255, 0) 100%
            )
            20 20;
        }
        .ivu-select-item-selected {
          color: #63adff;
        }
      }
    }
  }
}
.grid-row {
  // background: #1d2033;
  white-space: nowrap;
  // height: 400px;
  // overflow: hidden;
}
.grid-row-t {
  transition: width 2s;
  background: rgba(30, 37, 52, 0.48);
  // .ivu-col-span-md-5 {
  //   width: 24.8%;
  //   border-right: 2px solid #1d2033;
  // }
  // @media (min-width: 1200px) {
  //   .ivu-col-span-md-3 {
  //     // width: 14%;
  //   }
  // }
  // @media (max-width: 1200px) and (min-width: 1000px) {
  //   .ivu-col-span-md-3 {
  //     width: 15.5%;
  //   }
  // }
}

.grid-title {
  font-size: 20px;
  font-weight: 400;
  transition: all 0.5s;
  @media (max-height: 768px) {
    font-size: 14px;
  }
}
.grid-map {
  height: 73vh;
  transition: all 0.5s;
  .map-box {
    height: 100%;
  }
  @media (max-height: 768px) {
    height: 65vh;
  }
}
.grid-funnel {
  @media (min-width: 1200px) {
    margin-right: 5px;
  }
  @media (min-width: 567px) {
    margin-bottom: 5px;
  }
}

.corner-index {
  display: flex;
  flex-direction: column;
  padding: 20px 15px 15px;
  border: 1px solid rgba(129, 211, 248, 1);
  border-radius: 4px;
  color: #80ffff;
  // width: 150px;
  // height: 103px;
  font-size: 16px;
  position: absolute;
  right: 2rem;
  top: 3rem;
}
.corner-text {
  position: absolute;
  cursor: pointer;
  color: #d7d7d7;
  z-index: 8;
  right: 50px;
  top: 20px;
}
.corner-icon {
  cursor: pointer;
  position: absolute;
  color: #d7d7d7;
  z-index: 8;
  right: 50px;
  top: -33px;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.rowI {
  margin-top: 30px;
  height: 100%;
}
.chart-title {
  color: #d7d7d7;
  font-size: 16px;
  text-align: left;
  margin-top: 10px;
}
// 动画

.expandT-enter-active,
.expandT-leave-active {
  transition: all 0.3s ease-in;
}
.expandT-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.expandT-enter, .expandT-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

::v-deep {
  // .map {
  //   height: 530px;
  //   width: 100vw;
  // }
  // .flex-row .map {
  //   @media (min-width: 1000px) {
  //     height: 500px;
  //     width: 900px;
  //   }
  // }
  .ivu-spin-fix {
    background: #1d2033c9;
    border: 1px solid #1d2033c9;
    z-index: 999;
  }
  .flexRow {
    background: #252c49;
  }
  .graph-col {
    background: #2b324e;
    border: 4px solid #252c49;
    padding: 10px;
    height: 33.4vh;
    transition: all 0.5s;
    @media (max-height: 768px) {
      height: 450px;
    }
  }
  .graph-human-col {
    // background: #2b324e;
    // border: 4px solid #252c49;
    padding: 10px;
    text-align: left;
    height: 22vh;
    transition: all 0.5s;
    position: absolute;
    right: 0;
    bottom: 0;
    // @media (max-height: 768px) {
    //   height: 445px;
    // }
  }
  .graph-human-row {
    border-bottom: 10px solid #1d2033;
    border-right: 1px solid #1d2033;
  }
  .ivu-card {
    background: transparent;
  }
  .ivu-card-head {
    border-bottom: 1px solid #252c49;
    padding: 14px 16px 0px;
    text-align: left;
    // padding: 14px 16px 14px 0px;
    p {
      color: white;
    }
  }
  .ivu-card-body {
    display: flow-root;
    padding: 0px 16px 16px 16px;
  }
  .ivu-layout-content {
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    // background: #1d2033 !important;
  }
  // .ivu-col-span-sm-24 {
  //   background: #2b324e;
  //   border: 2px solid #252c49;
  // }
  .ivu-tabs {
    // margin-top: 5px;
    background: #252c49;
  }
  .ivu-affix {
    // background: #252c49;
    left: initial !important;
    width: 100% !important;
    height: auto;
  }
  .ivu-tabs-bar {
    height: auto;
    // padding-top: 10px;
    border-bottom: 2px solid rgba(29, 32, 51, 1);
  }
  .ivu-tabs-nav .ivu-tabs-tab-active {
    color: white;
  }
  // .ivu-tabs-nav {
  //   margin-top: 9px;
  // }
  // .ivu-tabs-nav .ivu-tabs-tab {
  //   padding: 7px 16px;
  // }
  .ivu-tabs-ink-bar {
    height: 2px;
  }
  .ivu-btn-ghost {
    color: #515a6e;
  }
  .ivu-radio-group-button .ivu-radio-wrapper-checked {
    color: #1890ff;
    border: 1px solid #1890ff;
  }
  .ivu-layout-sider {
    background: rgba(29, 32, 51, 1);
  }
  .ivu-select-selection {
    color: #d7d7d7;
    background-color: transparent;
    border-color: 1px solid #404354;
  }
  .ivu-table {
    background: transparent;
    font-size: 12px;
    font-weight: 100;
  }
  .ivu-table-body {
    color: #f2f2f2c4;
  }
  .ivu-table-cell {
    padding: 0px;
  }
  .ivu-table-row {
    background: #252c49;
  }
  .ivu-table-row-hover {
    background: rgba(29, 32, 51, 1);
  }
  .ivu-table:before {
    background: transparent;
  }
  .ivu-table-header thead tr th {
    color: #aaaaaa;
    border-bottom: 4px solid rgba(29, 32, 51, 1);
    padding: 20px 0px;
  }
  .ivu-table td {
    background: transparent;
    color: #f2f2f2;
    border-bottom: 4px solid rgba(29, 32, 51, 1);
    padding: 21.5px 0px;
    border-radius: 2px;
  }
  .ivu-table th {
    background: transparent;
    border-bottom: 4px solid rgba(29, 32, 51, 1);
    color: #aaaaaa;
    padding: 5px;
  }
  .table-row {
    .ivu-tabs-content {
      margin: 0px;
    }
  }
  /* 旋转效果 */
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>
