<template>
  <!-- <div class="outer"> -->

  <div class="outer">
    <!-- class="wrap" -->
    <!-- 页面跳转 -->
    <Affix :offset-top="54.1" id="index">
      <Row :gutter="16" class="one-row meta-row">
        <a
          @click="turnMeta(itemL, indexL)"
          v-for="(itemL, indexL) in LinkList"
          :key="indexL"
          style="margin: 0px 50px"
        >
          <span :class="itemL.class">{{ itemL.title }}</span>
        </a>
      </Row>

      <!-- 选择项筛选数据 -->
      <Row :gutter="16" class="one-row">
        <Col span="6">
          <div>
            <span>数据计算时间范围：</span>
            <Select v-model="yearOpt" size="small" style="width: 100px" @on-change="getIndex">
              <Option
                v-for="item in yearList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
          </div>
        </Col>
        <Col span="6">
          <div>
            <span>选择区县：</span>
            <Select v-model="directOpt" size="small" style="width: 100px" @on-change="getIndex">
              <Option
                v-for="item in directList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
          </div>
        </Col>
        <Col span="6">
          <div>
            <span>选择癌种：</span>
            <Select v-model="diseaseOpt" size="small" style="width: 120px" @on-change="getIndex">
              <Option
                v-for="item in diseaseList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
          </div>
        </Col>
      </Row>
    </Affix>
    <!-- 图表 -->
    <div class="wrap">
      <!-- 数据格+地图 -->
      <Row class="grid-row">
        <Layout>
          <Sider hide-trigger width="300">
            <Row>
              <Col
                span="11"
                class="grid-col grid-col-l"
                v-for="(item, index) in gridList"
                :key="index"
              >
                <p class="grid-data">{{ item.data }}</p>
                <p class="grid-label">{{ item.label }}</p>
              </Col>
            </Row>
          </Sider>
          <Content>
            <Tabs value="ouhai">
              <TabPane
                :label="dItem.label"
                :name="dItem.name"
                v-for="(dItem, dIndex) in mapList"
                :key="dIndex"
              >
                <emap />
              </TabPane>
            </Tabs>
          </Content>
          <Sider hide-trigger width="300">
            <Row>
              <Col
                span="11"
                class="grid-col grid-col-r"
                v-for="(itemG, indexG) in gridListR"
                :key="indexG"
              >
                <p class="grid-data">{{ itemG.data }}</p>
                <p class="grid-label">{{ itemG.label }}</p>
              </Col>
            </Row>
          </Sider>
        </Layout>
      </Row>
      <!-- 统计图 -->
      <Row :gutter="16" id="analyse"></Row>
      <Row :gutter="16" class="mt-20">
        <Tabs v-model="tabModel">
          <TabPane label="筛查工作进展分析" name="name1">
            <i-col :xs="24" :sm="24" :xl="24" class="mb-20">
              <Card shadow :title="yearOpt+'年'+area + '筛查工作进展漏斗图'">
                <!-- <FunnelCharts :EchartsData="barEchartsData" style="height: 400px" id="bar"></FunnelCharts> -->
                <i-col :xs="24" :sm="24" :xl="24" class="graph-col">
                  <div class="processBox clearfix">
                    <div class="pBox p-1 fl">
                      <div class="p-inner">
                        <div class="iBox wAto">
                          <div>筛查目标</div>
                          <div>人群</div>
                        </div>
                      </div>
                    </div>
                    <div class="line-cron fl">
                      <div class="line-inner">
                        <p>{{ firstScreeningCoverRate }}</p>
                        <svg
                          version="1.1"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="82.5px"
                          height="31px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g transform="matrix(1 0 0 1 -744.5 -229 )">
                            <path
                              d="M 802 256  L 814 244.5  L 802 233  L 802 256  Z "
                              fill-rule="nonzero"
                              fill="#bbbbbb"
                              stroke="none"
                            />
                            <path
                              d="M 747 244.5  L 805 244.5  "
                              stroke-width="5"
                              stroke="#bbbbbb"
                              fill="none"
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                    <div class="pBox p-2 fl">
                      <div class="p-inner">
                        <div class="iBox clearfix">
                          <div class="fl" style="margin-right: 5px">
                            <div>筛</div>
                            <div>查</div>
                            <div>问</div>
                            <div>卷</div>
                          </div>
                          <div class="fl">
                            <div>初</div>
                            <div>筛</div>
                            <div>检</div>
                            <div>查</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="line-cron fl">
                      <div class="line-inner">
                        <p>{{ riskRate }}</p>
                        <svg
                          version="1.1"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="82.5px"
                          height="31px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g transform="matrix(1 0 0 1 -744.5 -229 )">
                            <path
                              d="M 802 256  L 814 244.5  L 802 233  L 802 256  Z "
                              fill-rule="nonzero"
                              fill="#bbbbbb"
                              stroke="none"
                            />
                            <path
                              d="M 747 244.5  L 805 244.5  "
                              stroke-width="5"
                              stroke="#bbbbbb"
                              fill="none"
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                    <div class="pBox p-3 fl">
                      <div class="p-inner">
                        <div class="iBox">
                          <p class="writeTb">中高危</p>
                        </div>
                      </div>
                    </div>
                    <div class="line-cron fl">
                      <div class="line-inner">
                        <p>{{ endoscopeRate }}</p>
                        <svg
                          version="1.1"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="82.5px"
                          height="31px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g transform="matrix(1 0 0 1 -744.5 -229 )">
                            <path
                              d="M 802 256  L 814 244.5  L 802 233  L 802 256  Z "
                              fill-rule="nonzero"
                              fill="#bbbbbb"
                              stroke="none"
                            />
                            <path
                              d="M 747 244.5  L 805 244.5  "
                              stroke-width="5"
                              stroke="#bbbbbb"
                              fill="none"
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                    <div class="pBox p-4 fl">
                      <div class="p-inner">
                        <div class="iBox">
                          <p>内</p>
                          <p>镜</p>
                        </div>
                      </div>
                    </div>
                    <div class="line-cron fl">
                      <div class="line-inner">
                        <p>{{ pathologyRate }}</p>
                        <svg
                          version="1.1"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="82.5px"
                          height="31px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g transform="matrix(1 0 0 1 -744.5 -229 )">
                            <path
                              d="M 802 256  L 814 244.5  L 802 233  L 802 256  Z "
                              fill-rule="nonzero"
                              fill="#bbbbbb"
                              stroke="none"
                            />
                            <path
                              d="M 747 244.5  L 805 244.5  "
                              stroke-width="5"
                              stroke="#bbbbbb"
                              fill="none"
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                    <div class="pBox p-5 fl">
                      <div class="p-inner">
                        <div class="iBox">
                          <p>病</p>
                          <p>理</p>
                        </div>
                      </div>
                    </div>
                    <!-- <div class="line-cron fl">
                      <div class="line-inner">
                        <p>566人</p>
                        <svg
                          version="1.1"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="82.5px"
                          height="31px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g transform="matrix(1 0 0 1 -744.5 -229 )">
                            <path
                              d="M 802 256  L 814 244.5  L 802 233  L 802 256  Z "
                              fill-rule="nonzero"
                              fill="#bbbbbb"
                              stroke="none"
                            />
                            <path
                              d="M 747 244.5  L 805 244.5  "
                              stroke-width="5"
                              stroke="#bbbbbb"
                              fill="none"
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                    <div class="pBox p-6 fl">
                      <div class="p-inner">
                        <div class="iBox">
                          <p>确诊疾病</p>
                        </div>
                      </div>
                    </div>-->
                  </div>
                </i-col>
              </Card>
            </i-col>
            <i-col :xs="24" :sm="24" :xl="24" class="mb-20">
              <Card shadow :title="yearOpt+'年'+area + '筛查工作进展趋势图'">
                <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                  <LineChart
                    :chartData="screeningTData"
                    title="筛查目标人群趋势图"
                    yName="筛查目标总人数"
                    xName="年份"
                  ></LineChart>
                </i-col>
                <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                  <LineChart :chartData="coverTData" title="筛查覆盖率趋势图" xName="年份" yName="筛查覆盖率"></LineChart>
                </i-col>
                <!-- <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                  <LineChart :chartData="pathologyTData" title="早诊率趋势图"></LineChart>
                </i-col>-->
                <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                  <LineChart :chartData="firstTData" title="初筛完成率趋势图" xName="年份" yName="初筛完成率"></LineChart>
                </i-col>
                <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                  <LineChart :chartData="riskTData" title="中高危占比趋势图" xName="年份" yName="中高危占比"></LineChart>
                </i-col>
                <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                  <LineChart :chartData="endoscopeTData" title="内镜转化率趋势图" xName="年份" yName="内镜转化率"></LineChart>
                </i-col>
                <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                  <LineChart :chartData="pathologyTData" title="病理检查率趋势图" xName="年份" yName="病理检查率"></LineChart>
                </i-col>
                <!-- <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                  <LineChart :chartData="pathologyTData" title="确诊癌症病例数趋势图"></LineChart>
                </i-col>-->
              </Card>
            </i-col>
          </TabPane>
          <TabPane
            label="筛查人群透视分析"
            name="name2"
            :style="{ height: tabModel == 'name2' ? '' : '100px' }"
          >
            <i-col :xs="24" :sm="24" :xl="24" class="mb-20">
              <Card shadow :title="yearOpt+'年'+area + '筛查人群风险程度分析'">
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <!-- <div class="corner-index">
                    <p class="corner-title">筛查人群总数</p>
                    <p class="corner-data">{{ riskCount }}</p>
                  </div> title="筛查人群风险程度分布图"-->
                  <PieChart :chartData="riskPData" :title="riskCount"></PieChart>
                </i-col>
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <LineChart :chartData="riskCData" title="中高危人数趋势图" xName="年份" yName="人数"></LineChart>
                </i-col>
              </Card>
            </i-col>
            <i-col :xs="24" :sm="24" :xl="24" class="mb-20">
              <Card shadow :title="yearOpt+'年'+area + '筛查人群性别分析'">
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <!-- <div class="corner-index">
                    <p class="corner-title">筛查人群总数</p>
                    <p class="corner-data">{{ genderCount }}</p>
                  </div> -->

                  <!-- <PercentChart :chartData="genderPData" title="筛查人群性别分布图"></PercentChart> -->
                  <PieChart :chartData="genderPData" :title="genderCount"></PieChart>
                </i-col>
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <BodyChart :chartData="genderBData" title="各性别筛查完成率分布图"></BodyChart>
                </i-col>
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <LineChart :chartData="genderCData" title="各性别筛查完成人数趋势图" xName="年份" yName="人数"></LineChart>
                </i-col>
              </Card>
            </i-col>
            <i-col :xs="24" :sm="24" :xl="24" class="mb-20">
              <Card shadow :title="yearOpt+'年'+area + '筛查人群地域分析'">
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <BarChart :chartData="addressBData" title="各村筛查总人数" yName="人数"></BarChart>
                </i-col>
                <!-- <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <BarChart
                    :chartData="addressRateData"
                    title="各村筛查完成率"
                    yName="完成率"
                    color="#2852e7"
                  ></BarChart>
                </i-col>
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <BarChart :chartData="addressEndoscopeData" title="各村内镜检查率" yName="完成率"></BarChart>
                </i-col>-->
              </Card>
            </i-col>
          </TabPane>
          <!-- <TabPane label="疾病防控情况分析" name="name3">
            <i-col :xs="24" :sm="24" :xl="24" class="mb-20">
              <Card shadow :title="yearOpt+'年'+area + '疾病防控情况分析'">
                <LineChart :chartData="pathologyTData" title="确诊癌症病例数趋势图"></LineChart>
              </Card>
            </i-col>
          </TabPane>
          <TabPane label="随访管理进展分析" name="name4">
            <i-col :xs="24" :sm="24" :xl="24" class="mb-20">
              <Card shadow :title="yearOpt+'年'+area + '随访管理进展趋势'">
                <LineChart :chartData="pathologyTData" title="确诊癌症病例数趋势图"></LineChart>
              </Card>
            </i-col>
          </TabPane>-->
        </Tabs>
      </Row>
      <!-- 数据详情 -->
      <Row :gutter="16" id="detail"></Row>
      <Row class="mt-20 table-row">
        <span class="count-text">共{{ distCount }}个村</span>
        <Tabs value="name1">
          <TabPane label="丽岙街道各村筛查情况" name="name1">
            <!-- 表格 -->
            <Table ref="tables" :border="false" :columns="columns" :data="tableData">
              <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>

        <Row class="mt-20 mb-40">
          <Page
            v-if="totalCount > 10"
            :total="totalCount"
            show-elevator
            @on-change="changePageNum"
            @on-page-size-change="changePageSize"
            :show-total="true"
            show-sizer
            :current="pageIndex"
          />
        </Row>
      </Row>
      <!-- </TabPane> -->
      <!-- </Tabs> -->
    </div>
  </div>
</template>

<script>
import BarEcharts from "../../components/Echarts/barCharts";
import PieEcharts from "../../components/Echarts/pieCharts";
import LineEcharts from "../../components/Echarts/lineCharts";
import BarChart from "../../components/Charts/BarChart";
import LineChart from "../../components/Charts/LineChart";
import PercentChart from "../../components/Charts/PercentChart";
import PieChart from "../../components/Charts/PieChart";
import BodyChart from "../../components/Charts/BodyChart";
import VChart from "../../components/Echarts/VChart";
import FunnelCharts from "../../components/Echarts/funnelCharts";
import Emap from "./components/emap.vue";
export default {
  components: {
    BarEcharts,
    LineEcharts,
    LineChart,
    BarChart,
    PercentChart,
    PieChart,
    BodyChart,
    PieEcharts,
    VChart,
    Emap,
    FunnelCharts
  },
  data() {
    return {
      firstScreeningCoverRate: "--%",
      riskRate: "--%",
      endoscopeRate: "--%",
      pathologyRate: "--%",
      tabModel: "name2",
      yearList: [
        {
          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: "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"
        }
      ],
      yearOpt: "2021",
      directOpt: "330304109009",
      diseaseOpt: "gastric",
      barEchartsData: {},
      screeningTData: {}, //筛查目标人群趋势
      coverTData: {}, //筛查覆盖率趋势图
      //早诊率趋势图
      firstTData: {}, //初筛完成率趋势图
      riskTData: {}, //中高危占比趋势图
      endoscopeTData: {}, //内镜转化率趋势图
      pathologyTData: {}, //病理检查率趋势
      //确诊癌症病例数趋势图
      riskCData: {}, //中高危风险人数趋势
      genderCount: "0", //性别总人数
      genderCData: {}, //性别人数趋势
      genderPData: {}, //筛查人群性别分布图
      genderBData: {}, //各性别筛查完成率分布
      riskPData: {}, //筛查人群风险程度分布
      riskCount: "0", //风险人群总数
      pieEchartsData: {},
      addressBData: {}, //各村筛查总人数
      addressRateData: {}, //各村筛查完成率
      addressEndoscopeData: {}, //各村内镜检查率
      totalCount: 0,
      distCount: 0, //村数
      pageIndex: 1,
      pageSize: 10,
      area: "丽岙街道",
      columns: [
        {
          title: "排名",
          type: "index",
          width: 80,
          align: "center"
        },
        {
          title: "村落名称",
          slot: "addressCode",
          minWidth: 120,
          align: "center"
        },
        {
          title: "筛查目标人数",
          key: "target",
          minWidth: 160,
          sortable: true,
          align: "center"
        },
        {
          title: "筛查参与率",
          key: "screeningCoverRate",
          minWidth: 150,
          sortable: true,
          align: "center"
        },
        {
          title: "血检完成率",
          key: "firstScreeningCoverRate",
          minWidth: 150,
          sortable: true,
          align: "center"
        },
        {
          title: "中高危人群比例",
          minWidth: 170,
          key: "riskRate",
          sortable: true,
          align: "center"
        },
        {
          title: "内镜检查完成率",
          key: "endoscopeRate",
          minWidth: 170,
          sortable: true,
          align: "center"
        },
        {
          title: "病理检查完成率",
          minWidth: 170,
          key: "pathologyRate",
          sortable: true,
          align: "center"
        },
        {
          title: "癌确诊病例数",
          minWidth: 155,
          sortable: true,
          key: "nextFollowupTime"
        },
        {
          title: "早癌病例数",
          minWidth: 150,
          sortable: true,
          key: "nextFollowupTime"
        },
        {
          title: "早诊率",
          minWidth: 150,
          sortable: true,
          key: "nextFollowupTime"
        },
        {
          title: "规范治疗率",
          minWidth: 150,
          sortable: true,
          key: "nextFollowupTime"
        }
        // {
        //   title: "操作",
        //   fixed: "right",
        //   slot: "action",
        //   minWidth: 150,
        //   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: {},
      LinkList: [
        {
          title: "指标概览",
          class: "neg-title"
        },
        {
          title: "主题分析",
          class: "neg-title"
        },
        {
          title: "数据详情",
          class: "neg-title"
        }
      ],
      gridList: [
        {
          data: "--",
          label: "筛查覆盖率",
          prop: "screeningCoverRate"
        },
        {
          data: "--",
          label: "早诊率"
        },
        {
          data: "--",
          label: "初筛完成率",
          prop: "firstScreeningCoverRate"
        },
        {
          data: "--",
          label: "中高危占比",
          prop: "riskRate"
        },
        {
          data: "--",
          label: "内镜检查率",
          prop: "endoscopeRate"
        },
        {
          data: "--",
          label: "病理检查率",
          prop: "pathologyRate"
        }
      ],
      gridListR: [
        {
          data: "--",
          label: "新发病例数"
        },
        {
          data: "--",
          label: "复查率"
        },
        {
          data: "--",
          label: "规范诊疗率"
        },
        {
          data: "--",
          label: "癌症早期诊断比例"
        },
        {
          data: "--",
          label: "筛查服务人员配置比例"
        },
        {
          data: "--",
          label: "临床医生配置比例"
        }
      ],
      mapList: [
        {
          label: "瓯海区筛查地图",
          name: "ouhai"
        }
      ]
    };
  },
  computed: {},
  mounted() {
    this.turnMeta(this.LinkList[0], 0);
    // this.getStatisticsDiseases()
    this.getIndex();
    // this.getWorkTendency();
    // this.getHumanTendency();
    this.getHumanChart();
    // this.getHumanBar();
    // this.getFunnel();
    // this.getTable();
    // this.getStatisticsMonthly();
    // this.getFollowupReport()
    // this.getStatisticsDiseasesType()
    // this.getStatisticsPatientAgeAndSex();
  },
  methods: {
    showOther() {},
    turnMeta(item, index) {
      this.LinkList[index].class = "neg-title neg-active";

      this.LinkList.forEach((itemL, indexL) => {
        if (indexL != index) {
          itemL.class = "neg-title";
        }
      });
      let anchor = "#index";
      if (index == 1) {
        anchor = "#analyse";
        // anchor = "#detail";
      } else if (index == 2) {
        anchor = "#detail";
      }
      // this.$nextTick(() => {
      //   document.body.scrollTo(offsetPosition);
      // }); //页面渲染完
      document.querySelector(anchor).scrollIntoView(true);
    },
    //指标统计
    getIndex() {
      const params = {};
      params.year = this.yearOpt;
      params.diseaseType = this.diseaseOpt;
      params.addressCode = this.directOpt;
      //格子指标
      this.$API.getGastricScreening({ params }).then(res => {
        if (res.code === 1) {
          this.gridList.forEach(item => {
            if (item.prop && res.object && res.object[item.prop]) {
              item.data = this.toFit(res.object[item.prop]);
            }
          });
        }
      });
      this.getWorkTendency();
      this.getHumanTendency();
      this.getHumanChart();
      this.getHumanBar();
      this.getFunnel();
      this.getTable();
    },
    getWorkTendency() {
      const params = {};
      params.diseaseType = this.diseaseOpt;
      params.year = this.yearOpt;
      params.addressCode = this.directOpt;
      // 筛查目标人群趋势
      this.$API.getScreeningTendency({ params }).then(res => {
        if (res.code === 1) {
          const lineEchartsData = {};
          lineEchartsData.data = [];
          lineEchartsData.xtitle = [];
          res.object.forEach(item => {
            lineEchartsData.data.push({
              name: item.year,
              value: item.total
            });
          });
          this.screeningTData = lineEchartsData;
        }
      });
      //筛查覆盖率趋势图
      this.$API.getCoverTendency({ params }).then(res => {
        if (res.code === 1) {
          const lineEchartsData = {};
          lineEchartsData.data = [];
          lineEchartsData.xtitle = [];
          res.object.forEach(item => {
            lineEchartsData.data.push({
              name: item.year,
              value: this.toPercent(item.rate)
            });
          });
          this.coverTData = lineEchartsData;
        }
      });
      //--早诊率趋势图
      //初筛完成率趋势图
      this.$API.getFirstTendency({ params }).then(res => {
        if (res.code === 1) {
          const lineEchartsData = {};
          lineEchartsData.data = [];
          lineEchartsData.xtitle = [];
          res.object.forEach(item => {
            lineEchartsData.data.push({
              name: item.year,
              value: this.toPercent(item.rate)
            });
          });
          this.firstTData = lineEchartsData;
        }
      });
      //中高危占比趋势
      this.$API.getRiskTendency({ params }).then(res => {
        if (res.code === 1) {
          const lineEchartsData = {};
          lineEchartsData.data = [];
          lineEchartsData.xtitle = [];
          res.object.forEach(item => {
            lineEchartsData.data.push({
              name: item.year,
              value: this.toPercent(item.rate)
            });
          });
          this.riskTData = lineEchartsData;
        }
      });
      //内镜转化率趋势图
      this.$API.getEndoscopeTendency({ params }).then(res => {
        if (res.code === 1) {
          const lineEchartsData = {};
          lineEchartsData.data = [];
          lineEchartsData.xtitle = [];
          res.object.forEach(item => {
            lineEchartsData.data.push({
              name: item.year,
              value: this.toPercent(item.rate)
            });
          });
          this.endoscopeTData = lineEchartsData;
        }
      });
      // 病理检查趋势
      this.$API.getPathologyTendency({ params }).then(res => {
        if (res.code === 1) {
          const lineEchartsData = {};
          lineEchartsData.data = [];
          lineEchartsData.xtitle = [];
          res.object.forEach(item => {
            lineEchartsData.data.push({
              name: item.year,
              value: this.toPercent(item.rate)
            });
          });
          this.pathologyTData = lineEchartsData;
        }
      });
      //--确诊癌症病例数趋势图
      this.$forceUpdate();
    },
    getHumanTendency() {
      const params = {};
      params.diseaseType = this.diseaseOpt;
      // params.year = this.yearOpt;
      params.addressCode = this.directOpt;
      // 中高危风险人数趋势
      this.$API.getRiskCountTendency({ params }).then(res => {
        if (res.code === 1) {
          const lineEchartsData = {};
          lineEchartsData.data = [];
          lineEchartsData.xtitle = [];
          if (res.object && res.object.length != 0) {
            res.object.forEach(item => {
              lineEchartsData.data.push({
                name: item.year,
                value: item.total
              });
            });
          }

          this.riskCData = lineEchartsData;
        }
      });
      // 性别人数趋势
      this.$API.getGenderCountTendency({ params }).then(res => {
        if (res.code === 1) {
          const lineEchartsData = {};
          lineEchartsData.data = [];
          lineEchartsData.series = [];
          lineEchartsData.xtitle = [];
          lineEchartsData.legend = {
            data: ["男性", "女性"]
          };
          if (res.object && res.object.length != 0) {
            res.object.forEach(item => {
              lineEchartsData.data.push(
                {
                  name: item.year,
                  value: item.maleCount,
                  label: "男性"
                },
                {
                  name: item.year,
                  value: item.femaleCount,
                  label: "女性"
                }
              );
            });
          }

          this.genderCData = lineEchartsData;
        }
      });
    },
    getHumanChart() {
      const params = {};
      params.diseaseType = this.diseaseOpt;
      params.year = this.yearOpt;
      params.addressCode = this.directOpt;
      // 中高危风险人数分布
      this.$API.getRiskDistribution({ params }).then(res => {
        if (res.code === 1) {
          const pEchartsData = {};
          pEchartsData.data = [];
          pEchartsData.xtitle = [];
          this.riskCount = "0"; //清空
          if (res.object && res.object.length != 0) {
            res.object.forEach(item => {
              if (item.lowRiskRate) {
                pEchartsData.data.push({
                  name: "低危",
                  value: this.toPercent(item.lowRiskRate) || "0",
                  color: "rgba(2, 167, 240, 1)"
                });
              }
              if (item.mediumRiskRate) {
                pEchartsData.data.push({
                  name: "中危",
                  value: this.toPercent(item.mediumRiskRate) || "0",
                  color: "rgba(245, 166, 0, 1)"
                });
              }
              if (item.highRiskRate) {
                pEchartsData.data.push({
                  name: "高危",
                  value: this.toPercent(item.highRiskRate) || "0",
                  color: "rgba(248, 60, 83, 1)"
                });
              }

              // if (item.target) {
              this.riskCount = this.toSpot(item.target) || "0";
              // }
            });
          } else {
            pEchartsData.data.push(
              {
                name: "低危",
                value: 0,
                color: "rgba(2, 167, 240, 1)"
              },
              {
                name: "中危",
                value: 0,
                color: "rgba(245, 166, 0, 1)"
              },
              {
                name: "高危",
                value: 0,
                color: "rgba(248, 60, 83, 1)"
              }
            );
          }
          this.riskPData = pEchartsData;
        }
      });
      //人群性别分布
      this.$API.getGenderDistribution({ params }).then(res => {
        if (res.code === 1) {
          const pEchartsData = {};
          const pEchartsDataB = {};
          pEchartsData.data = [];
          pEchartsDataB.data = [];
          pEchartsData.xtitle = [];
          this.genderCount = "0"; //清空
          let item = res.object;
          if (item.maleRate) {
            pEchartsData.data.push({
              name: "男性",
              value: this.toPercent(item.maleRate),
              color: "rgba(2, 167, 240, 1)"
            });
          }
          if (item.femaleRate) {
            pEchartsData.data.push({
              name: "女性",
              value: this.toPercent(item.femaleRate),
              color: "rgba(236, 128, 141, 1)"
            });
          }
          if (item.maleCoverRate) {
            pEchartsDataB.data.push({
              name: "男性",
              value: this.toPercent(item.maleCoverRate),
              color: "rgba(236, 128, 141, 1)",
              count: item.maleCount || 0
            });
          }
          if (item.femaleCoverRate) {
            pEchartsDataB.data.push({
              name: "女性",
              value: this.toPercent(item.femaleCoverRate),
              color: "rgba(236, 128, 141, 1)",
              count: item.femaleCount || 0
            });
          }
          // if (item.target) {
          this.genderCount = this.toSpot(item.target) ||  "0";
          // }
          // console.log("性别分布",pEchartsData,pEchartsDataB)
          this.genderPData = pEchartsData;
          this.genderBData = pEchartsDataB;
        }
      });
    },
    getHumanBar() {
      const params = {};
      params.diseaseType = this.diseaseOpt;
      params.year = this.yearOpt;
      //人群地域分析
      this.$API.getAreaTendency({ params }).then(res => {
        if (res.code === 1) {
          const targetData = {
            data: [],
            xtitle: []
          };
          const screeningData = {
            data: [],
            xtitle: []
          };
          const endoscopeData = {
            data: [],
            xtitle: []
          };
          res.object.forEach(item => {
            targetData.data.push({
              name: this.mapDistriction(item.addressCode),
              value: item.target
            });
            screeningData.data.push({
              name: this.mapDistriction(item.addressCode),
              value: this.toPercent(item.screeningCoverRate)
            });
            endoscopeData.data.push({
              name: this.mapDistriction(item.addressCode),
              value: this.toPercent(item.endoscopeRate)
            });
          });
          this.addressBData = targetData;
          this.addressRateData = screeningData;
          this.addressEndoscopeData = endoscopeData;
        }
      });
    },
    getTable() {
      const params = {};
      params.diseaseType = this.diseaseOpt;
      params.year = this.yearOpt;
      this.$API.getAreaWorkbench({ params }).then(res => {
        if (res.code === 1) {
          const list = [];
          this.tableData = res.object;
          this.totalCount = res.object.totalCount;
          this.distCount = res.object.length;
        }
      });
    },
    toFit(num) {
      if (num == "100.00%") {
        return "100%";
      }
      if (num == "0.00%") {
        return "0%";
      }
      return num;
    },
    toSpot(n) {
      var b = parseInt(n).toString();
      var len = b.length;
      if (len <= 3) {
        return b;
      }
      var r = len % 3;
      return r > 0
        ? b.slice(0, r) +
            "," +
            b
              .slice(r, len)
              .match(/\d{3}/g)
              .join(",")
        : b
            .slice(r, len)
            .match(/\d{3}/g)
            .join(",");
    },
    toNumber(str) {
      if (str.indexOf("%") > 0) {
        str = str.replace("%", "");
        str = parseFloat(str / 100).toFixed(2);

        return str;
      }
    },
    toPercent(str) {
      if (str.indexOf("%") > 0) {
        str = str.replace("%", "");
        return str;
      }
    },
    mapDistriction(str) {
      if (typeof str == "number") {
      }
      if (str == "330304109009") {
        return "梓上村";
      }
      if (str == "330304109021") {
        return "下呈村";
      }
      if (str == "330304109019") {
        return "杨宅村";
      }
      if (str == "330304109020") {
        return "茶堂村";
      }
      if (str == "330304109017") {
        return "叶宅村";
      }
      if (str == "330304109001") {
        return "下川村";
      }
      if (str == "330304109005") {
        return "姜宅村";
      }
      if (str == "330304109018") {
        return "任宅村";
      }
      if (str == "330304109007") {
        return "下嶂村";
      }
      if (str == "330304109003") {
        return "丽塘村";
      }
      if (str == "330304109006") {
        return "曹建村";
      }
      if (str == "330304109014") {
        return "后中村";
      }
      if (str == "330304109015") {
        return "河头村";
      }
      if (str == "330304109002") {
        return "王宅村";
      }
      if (str == "330304109016") {
        return "上坦村";
      }
      if (str == "330304109004") {
        return "泊岙村";
      }
      if (str == "330304109008") {
        return "林山村";
      }
    },
    //漏斗图
    getFunnel() {
      const params = {};
      params.year = this.yearOpt;
      params.diseaseType = this.diseaseOpt;
      this.$API.getScreeningFunnel({ params }).then(res => {
        if (res.code === 1) {
          const d = res.object;
          if (d.firstScreeningCoverRate) {
            this.firstScreeningCoverRate = d.firstScreeningCoverRate;
          }
          if (d.riskRate) {
            this.riskRate = d.riskRate;
          }
          if (d.endoscopeRate) {
            this.endoscopeRate = d.endoscopeRate;
          }
          if (d.pathologyRate) {
            this.pathologyRate = d.pathologyRate;
          }
          // this.gridList.forEach(item => {
          // if (item.prop && res.object && res.object[item.prop]) {
          //   item.data = res.object[item.prop];
          // }
          // });
        }
      });
    },
    // 疾病数据
    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;
}
.wrap {
  // background: #f5f7f9;
  // padding: 15px;
  border-top: none;
  background: rgba(29, 32, 51, 1);
  border: 10px solid rgba(29, 32, 51, 1);
  border-top: none;
  overflow: hidden;
  // height: 100vh;
  // padding-top: 10px;
  // overflow-y: scroll;
}
.mt-20 {
  // margin:0px 0px 20px
  .processBox {
    height: 380px;
    color: #fff;
    margin-left: 80px;
    &.clearfloat {
      clear: both;
      zoom: 1;
    }
    .p-1 {
      border-radius: 5px;
      height: 100%;
      width: 72px;
      padding: 50px 0;
      .p-inner {
        height: 100%;
        background: rgba(88, 138, 241, 1);
      }
    }
    .line-cron {
      width: 80px;
      height: 100%;
      position: relative;
      .line-inner {
        position: absolute;
        top: 48%;
        transform: translate(-50%, -50%);
        left: 56%;
      }
    }
    .pBox {
      border-radius: 5px;
      .p-inner {
        border-radius: 5px;
        height: 100%;

        position: relative;
        .iBox {
          text-align: center;
          width: auto;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          &.wAto {
            width: 100%;
          }
          .writeTb {
            writing-mode: vertical-rl;
          }
        }
      }
    }
    .p-2 {
      border-radius: 5px;
      height: 100%;
      width: 66px;
      padding: 100px 0;
      .p-inner {
        height: 100%;
        background: rgba(123, 124, 245, 1);
      }
    }
    .p-3 {
      border-radius: 5px;
      height: 100%;
      width: 37px;
      padding: 125px 0;
      .p-inner {
        height: 100%;
        background: rgba(246, 139, 80, 1);
      }
    }
    .p-4 {
      border-radius: 5px;
      height: 100%;
      width: 37px;
      padding: 140px 0;
      .p-inner {
        height: 100%;
        background: rgba(240, 68, 130, 1);
      }
    }
    .p-5 {
      border-radius: 5px;
      height: 100%;
      width: 42px;
      padding: 150px 0;
      .p-inner {
        height: 100%;
        background: rgba(197, 93, 223, 1);
      }
    }
    .p-6 {
      height: 100%;
      width: 120px;
      padding: 170px 0;
      .p-inner {
        height: 100%;
        background: rgba(4, 204, 96, 1);
      }
    }
  }
}
#index {
  background: rgba(29, 32, 51, 1);
  div {
    // background: rgba(29, 32, 51, 1)
  }
}
#analyse {
  height: 96px;
  background: transparent;
  display: initial;
  top: -120px;
}
#detail {
  height: 96px;
  background: transparent;
  display: initial;
  top: -120px;
}
.one-row {
  padding: 15px 20px;
  color: #d7d7d7;
  border-bottom: 10px solid rgb(29 32 51);
  margin: 0 !important;
}
.meta-row {
  border-top: 1px solid rgb(29 32 51);
  text-align: center;
  // background: red;
  // border-left: 10px solid white;
  // border-right: 10px solid white;
}
.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-row {
  height: 400px;
  overflow: hidden;
}
.grid-col {
  color: white;
  padding: 20px 10px;
  height: 130px;
  width: 48%;
  background: #252c49;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
}
.grid-col-l {
  margin: 0px 5px 5px 0px;
}
.grid-col-r {
  margin: 0px 0px 5px 5px;
  float: right;
}
.grid-data {
  font-size: 36px;
  font-weight: 400;
}
.grid-label {
}
.ivu-layout-content {
  overflow: hidden !important;
}
.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;
}
.count-text {
  position: absolute;
  color: #d7d7d7;
  z-index: 99;
  right: 50px;
  top: 20px;
}
::v-deep {
  .flexRow {
    background: #252c49;
  }
  .graph-col {
    background: #2b324e;
    border: 4px solid #252c49;
    padding: 10px;
  }
  .graph-human-col {
    // background: #2b324e;
    border: 4px solid #252c49;
    padding: 10px;
  }
  .ivu-card {
    background: transparent;
  }
  .ivu-card-head {
    border-bottom: 1px solid #252c49;
    text-align: left;
    // padding: 14px 16px 14px 0px;
    p {
      color: white;
    }
  }
  .ivu-card-body {
    display: flow-root;
  }
  .ivu-layout-content {
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    background: #252c49;
  }
  // .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 10px;
  }
  .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;
  }
  .mt-20 {
    margin-top: -35px;
  }
  .mt-20 {
    .ivu-tabs-bar {
      border-bottom: 5px solid rgba(29, 32, 51, 1);
      color: #aaaaaa;
      background: #252c49;
    }
    .ivu-tabs-content {
      margin: 10px 10px 0px 10px;
      background: #252c49;
    }
  }
  .ivu-table {
    background: transparent;
  }
  .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: 8px 0px;
  }
  .ivu-table td {
    background: transparent;
    color: #f2f2f2;
    border-bottom: 4px solid rgba(29, 32, 51, 1);
    padding: 6px 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;
    }
  }
}
</style>
