<template>
  <div class="doctorWork">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <span></span>
        <div>筛选</div>
      </div>
      <div class="screening-form flex-vertical-center-l flex-wrap">
        <div class="screening-item flex-vertical-center-l">
          <span>年度：</span>
          <div class="input">
            <el-date-picker size="mini" v-model="form.year" type="year" placeholder="选择年"></el-date-picker>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>月度：</span>
          <div class="input">
            <el-date-picker
              size="mini"
              v-model="form.month"
              format="MM"
              type="month"
              placeholder="选择月"
            ></el-date-picker>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>机构名称：</span>
          <div class="input">
            <el-select size="mini" v-model="form.medName" placeholder="请选择">
              <el-option
                :label="item.name"
                :value="item.pid"
                v-for="(item,index) in medSelectList"
                :key="index"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <div class="input flex-vertical-center-l" style="width:auto;">
            <el-checkbox v-model="form.checked">是否包含下级</el-checkbox>
          </div>
        </div>
        <el-button size="mini" type="primary" @click="search">搜索</el-button>
        <el-button size="mini" type="warning" @click="clearFilter">清空</el-button>
      </div>
    </div>
    <!-- 展示数据层 -->
    <div class="data-container">
      <div class="showData">
        <!-- 展示两种数据 -->
        <div class="showEcharts">
          <div id="D_myChart" :style="{width: '100%', height: '400px'}"></div>
          <div class="e-format1">格式:中医疾病-时间-数量</div>
        </div>
      </div>
      <div class="showData">
        <div class="showEcharts">
          <div id="D_myChart1" :style="{width: '100%', height: '400px'}"></div>
          <div class="e-format1">格式:中医证型-时间-数量</div>
        </div>
      </div>
      <div class="showData">
        <div class="showEcharts">
          <div id="D_myChart2" :style="{width: '100%', height: '400px'}"></div>
          <div class="e-format" style="margin-bottom:20px;">
            格式:中医疾病-时间:数量
            <span style="margin-left:30px;"></span> X轴:时间 Y轴:单位(人)
          </div>
        </div>
      </div>
      <div class="showData">
        <div class="showEcharts">
          <div id="D_myChart3" :style="{width: '100%', height: '400px'}"></div>
          <div class="e-format" style="margin-bottom:20px;">
            格式:中医疾病-时间:数量
            <span style="margin-left:30px;"></span> X轴:时间 Y轴:单位(人)
          </div>
        </div>
      </div>
      <!-- 排名前五的疾病与季节分析 -->
      <div class="showData flex" v-if="false">
        <div class="data-1">
          <div id="D_myChart4" :style="{width: '100%', height: '400px'}"></div>
        </div>
        <div class="data-1 data-2">
          <h3 class="flex">
            <img src="../../assets/new-icon/warn.png" alt />
            <span>高发病预警</span>
          </h3>
          <div class="progress-item flex">
            <h4>感冒病</h4>
            <div class="progress">
              <div style="width:90%"></div>
            </div>
          </div>
          <div class="progress-item flex">
            <h4>咳嗽病</h4>
            <div class="progress">
              <div style="width:70%"></div>
            </div>
          </div>
          <div class="progress-item flex">
            <h4>泄泻病</h4>
            <div class="progress">
              <div style="width:50%"></div>
            </div>
          </div>
          <div class="progress-item flex">
            <h4>不寐病</h4>
            <div class="progress">
              <div style="width:40%"></div>
            </div>
          </div>
          <div class="progress-item flex">
            <h4>胃脘痛病</h4>
            <div class="progress">
              <div style="width:20%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { medicalInstitution } from "@/api/city.js";
import { getDiseaseA } from "@/api/dataAnalysis.js";
export default {
  data() {
    return {
      // 筛选数据
      form: {
        medName: "",
        year: "",
        month: "",
        checked: false
      },
      // 医疗机构
      medSelectList: [],

      // 是否是图表
      isEcharts: 0, // 0 图表 1 列表
      xAxisData: [], // 图表 横向坐标
      xAxisData1: [],
      disAndAgeCountVoList: [], // 疾病和年龄
      disAndSexCountVoList: [], // 疾病性别
      diseaseCountVoList: [], // 疾病统计
      symptomCountVoList: [] // 证型统计
    };
  },
  created() {
    this.medicalInstitution();
  },
  mounted() {
    let date = new Date();
    this.form.year = date.getFullYear().toString();
    this.getDiseaseA();
    // this.drawLine4()
  },
  methods: {
    // 顶部列表更改
    topChange(type) {
      this.isEcharts = type;
      if (type == 0) {
        setTimeout(() => {
          this.drawLine();
        }, 200);
      }
    },
    // 绘制 图表
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("D_myChart"));

      // 绘制图表
      myChart.setOption({
        title: {
          text: "中医疾病发病量",
          top: "10%",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return `${params.data.name}`;
          }
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: this.diseaseCountVoList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    drawLine1() {
      let myChart1 = this.$echarts.init(document.getElementById("D_myChart1"));
      myChart1.setOption({
        title: {
          text: "中医证型分布量",
          top: "10%",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return `${params.data.name}`;
          }
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: this.symptomCountVoList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    drawLine2() {
      let myChart2 = this.$echarts.init(document.getElementById("D_myChart2"));
      myChart2.setOption({
        title: {
          text: "中医疾病与性别分布量",

          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        xAxis: {
          type: "category",
          data: this.xAxisData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "男",
            type: "bar",
            // radius: '50%',
            data: this.disAndSexCountVoList[0],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "女",
            type: "bar",
            // radius: '50%',
            data: this.disAndSexCountVoList[1],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    drawLine3() {
      let myChart3 = this.$echarts.init(document.getElementById("D_myChart3"));
      myChart3.setOption({
        title: {
          text: "中医疾病与年龄段分布量",

          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        xAxis: {
          type: "category",
          data: this.xAxisData1
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "10岁以下",
            type: "bar",
            // radius: '50%',
            data: this.disAndAgeCountVoList[0],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "10岁—30岁",
            type: "bar",
            // radius: '50%',
            data: this.disAndAgeCountVoList[1],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "30岁—50岁",
            type: "bar",
            // radius: '50%',
            data: this.disAndAgeCountVoList[2],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "50岁-60岁",
            type: "bar",
            // radius: '50%',
            data: this.disAndAgeCountVoList[3],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "60岁以上",
            type: "bar",
            // radius: '50%',
            data: this.disAndAgeCountVoList[4],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    drawLine4() {
      let myChart3 = this.$echarts.init(document.getElementById("D_myChart4"));
      myChart3.setOption({
        color: ["#C586FF", "#6ADCAF", "#6D7E9D", "#EE8C99", "#FAD29C"],
        title: {
          text: "排名前五的疾病与季节分析",

          left: "left"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "horizontal",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: ["第一季度", "第二季度", "第三季度", "第四季度"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "咳嗽病",
            type: "bar",
            // radius: '50%',
            data: [1000, 500, 500, 200],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "感冒病",
            type: "bar",
            // radius: '50%',
            data: [1500, 1400, 1700, 1300],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "不寐病",
            type: "bar",
            // radius: '50%',
            data: [1200, 400, 1000, 200],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "泄泻病",
            type: "bar",
            // radius: '50%',
            data: [700, 400, 220, 900],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "胃脘痛病",
            type: "bar",
            // radius: '50%',
            data: [800, 1000, 500, 100],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    search() {
      this.getDiseaseA();
    },
    clearFilter() {
      let date = new Date();
      this.form = {
        medName: "",
        year: date.getFullYear().toString(),
        month: "",
        checked: false
      };

      this.getDiseaseA();
    },
    // 处理选择器 时间数据
    forMatDate(type, data) {
      if (!data) return "";
      // type : 0 year 1 month
      let date = new Date(data);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      if (type == 0) {
        return year;
      } else if (type == 1) {
        return month;
      }
    },
    // 获取医疗机构选择器
    async medicalInstitution() {
      let params = {
        organizationId: this.getuserinfo.organizationid
      };
      let res = await medicalInstitution(params);
      if (res.ResultCode == 0) {
        this.medSelectList = res.Data;
      }
    },
    // 获取 疾病 发病量分析
    async getDiseaseA() {
      let params = {
        month: this.forMatDate(1, this.form.month),
        stiId: this.form.medName,
        type: this.form.checked ? "0" : "1",
        year: this.forMatDate(0, this.form.year)
      };
      let res = await getDiseaseA(params);
      if (res.ResultCode == 0) {
        let data = res.Data[0];
        // 中医疾病发病量
        let diseaseCountVoList = [];
        data.diseaseCountVoList.forEach(item => {
          let obj = {
            name:
              this.form.month == ""
                ? item.diseaseName +
                  "-" +
                  this.forMatDate(0, this.form.year) +
                  "-" +
                  item.diseaseCount
                : item.diseaseName +
                  "-" +
                  this.forMatDate(0, this.form.year) +
                  "-" +
                  this.forMatDate(1, this.form.month) +
                  "-" +
                  item.diseaseCount,
            value: item.diseaseCount
          };
          diseaseCountVoList.push(obj);
        });

        this.diseaseCountVoList = diseaseCountVoList;

        // 中医证型发病量
        let symptomCountVoList = [];
        data.symptomCountVoList.forEach(item => {
          let obj = {
            name:
              this.form.month == ""
                ? item.symName +
                  "-" +
                  this.forMatDate(0, this.form.year) +
                  "-" +
                  item.symCount
                : item.symName +
                  "-" +
                  this.forMatDate(0, this.form.year) +
                  "-" +
                  this.forMatDate(1, this.form.month) +
                  "-" +
                  item.symCount,

            value: item.symCount
          };
          symptomCountVoList.push(obj);
        });
        this.symptomCountVoList = symptomCountVoList;

        // 疾病与性别
        let disAndSexCountVoList = [];
        this.xAxisData = [];
        let value = [];
        let value1 = [];
        data.disAndSexCountVoList.forEach(item => {
          if (!this.form.month) {
            let xAxis =
              item.diseaseName + "-" + this.forMatDate(0, this.form.year);
            this.xAxisData.push(xAxis);
          } else {
            let xAxis =
              item.diseaseName +
              "-" +
              this.forMatDate(0, this.form.year) +
              "-" +
              this.forMatDate(1, this.form.month) +
              "月";
            this.xAxisData.push(xAxis);
          }

          value.push(item.manCount);

          value1.push(item.womanCount);
        });
        disAndSexCountVoList.push(value);
        disAndSexCountVoList.push(value1);

        this.disAndSexCountVoList = disAndSexCountVoList;

        // 疾病与年龄段
        let disAndAgeCountVoList = [];
        let ac1 = [];
        let ac2 = [];
        let ac3 = [];
        let ac4 = [];
        let ac5 = [];
        this.xAxisData1 = [];
        data.disAndAgeCountVoList.forEach(item => {
          if (!this.form.month) {
            let xAxis =
              item.diseaseName + "-" + this.forMatDate(0, this.form.year);
            this.xAxisData1.push(xAxis);
          } else {
            let xAxis =
              item.diseaseName +
              "-" +
              this.forMatDate(0, this.form.year) +
              "-" +
              this.forMatDate(1, this.form.month) +
              "月";
            this.xAxisData1.push(xAxis);
          }

          ac1.push(item.ageCount1);
          ac2.push(item.ageCount2);
          ac3.push(item.ageCount3);
          ac4.push(item.ageCount4);
          ac5.push(item.ageCount5);
        });
        disAndAgeCountVoList.push(ac1);
        disAndAgeCountVoList.push(ac2);
        disAndAgeCountVoList.push(ac3);
        disAndAgeCountVoList.push(ac4);
        disAndAgeCountVoList.push(ac5);

        this.disAndAgeCountVoList = disAndAgeCountVoList;

        this.drawLine();
        this.drawLine1();
        this.drawLine2();
        this.drawLine3();
      }
    }
  },
  computed: {
    ...mapGetters(["getuserinfo"])
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.data-container {
  height: 75vh;
  overflow: auto;
}

.showData {
  background: #fff;
  border-radius: 10px;
  margin-top: 5px;
  padding: 10px;

  .top-change {
    margin-bottom: 20px;
    width: 100px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    font-size: 14px;

    div:first-child {
      border-radius: 8px 0 0 8px;
    }

    div:last-child {
      border-radius: 0 8px 8px 0;
    }

    div {
      height: 34px;
      width: 50px;
      box-sizing: border-box;
      line-height: 34px;
      text-align: center;
    }

    .choosed {
      background: #5386f6;
      color: #fff;
    }
  }

  .bg-yellow {
    border-radius: 8px;
    background: #ffae45;
    color: #fff;
    width: 74px;
    height: 34px;
    margin-bottom: 20px;
    cursor: pointer;
    margin-left: 20px;
  }

  .showEcharts {
    // width: 100%;
  }

  .showList {
    width: 100%;

    ul {
      li {
        padding: 15px;
        border-bottom: 1px solid #dcdfe6;
      }

      li:hover {
        background: #dcdfe6;
        cursor: default;
      }

      .title {
        font-weight: bold;
        color: #5386f6;
        width: 90px;
      }
    }
  }
}

.data-1 {
  flex: 1;
  margin-right: 30px;
  border: 1px solid #dcdfe6;
}

.data-2 {
  width: 500px;
  flex: none;
  padding: 20px;
  box-sizing: border-box;

  h3 {
    align-items: center;
    justify-content: flex-start;

    img {
      width: 30px;
      margin-right: 10px;
    }
  }

  .progress-item {
    margin-top: 20px;
    align-items: center;

    h4 {
      width: 100px;
    }

    .progress {
      height: 40px;
      flex: 1;

      div {
        width: 100%;
        height: 100%;
        background: #73a0fa;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .data-container {
    height: 84vh;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .data-container {
    height: 84vh;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .data-container {
    height: 77vh;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .data-container {
    height: 77vh;
  }
}
</style>