<template>
  <div>
    <div class="app-container">
      <div class="dis" style="width: 100%">
        <div style="flex: 1; margin-right: 20px">
          <el-card shadow="always">
            <div class="dis title-box">
              <span class="header-title">病种排名</span>
              <div class="dis"></div>
            </div>
            <div style="height: 300px" v-loading="loading">
              <div id="diagnose" style="width: 100%"></div>
            </div>
          </el-card>
        </div>
        <div style="flex: 1">
          <el-card shadow="always">
            <div class="dis title-box">
              <span class="header-title">体系分布</span>
              <div class="dis"></div>
            </div>
            <div style="height: 300px" v-loading="loading">
              <div id="system" style="width: 100%"></div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div class="app-container">
      <div class="dis" style="width: 100%">
        <div style="flex: 1; margin-right: 20px">
          <el-card shadow="always">
            <div class="dis title-box">
              <span class="header-title">体质分布</span>
              <div class="dis"></div>
            </div>
            <div style="height: 300px" v-loading="loading">
              <div id="physique" style="width: 100%"></div>
            </div>
          </el-card>
        </div>
        <div style="flex: 1">
          <el-card shadow="always">
            <div class="dis title-box">
              <span class="header-title">体态评估（TAPS）</span>
              <div class="dis"></div>
            </div>
            <div style="height: 300px" v-loading="loading">
              <div id="posture" style="width: 100%"></div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div class="app-container">
      <div class="dis" style="width: 100%">
        <div style="flex: 1; margin-right: 20px">
          <el-card shadow="always">
            <div class="dis title-box">
              <span class="header-title">失眠评估（PHQ-9）</span>
              <div class="dis"></div>
            </div>
            <div style="height: 300px" v-loading="loading">
              <div id="agrypnia" style="width: 100%"></div>
            </div>
          </el-card>
        </div>
        <div style="flex: 1">
          <el-card shadow="always">
            <div class="dis title-box">
              <span class="header-title">焦虑（HAMD-24）</span>
              <div class="dis"></div>
            </div>
            <div style="height: 300px" v-loading="loading">
              <div id="anxiety" style="width: 100%"></div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import { zlInfo } from "@/api/indexCom.js";
import {
  diagnoseEcharts,
  systemEcharts,
  physiqueEcharts,
  postureEcharts,
  agrypniaEcharts,
  anxietyEcharts,
} from "./index";
export default {
  name: "Post",
  props: ["title"],
  mixins: [resize],
  data() {
    return {
      queryParams: {
        param: {
          startTime: "",
          endTime: "",
        },
      },

      loading: false,
      diagnoseValue: null, // 病种
      systemValue: null, // 体系
      physiqueValue: null, // 体质
      postureValue: null, // 体态
      agrypniaValue: null, // 失眠
      anxietyValue: null, // 焦虑
      // 体系中文
      systemObj: {
        yxfpz: "隐形肥胖型", //隐形肥胖型
        zfgdx: "脂肪过多型", //脂肪过多型
        fpx: "肥胖型", //肥胖型
        jrbzx: "肌肉不足型", //肌肉不足型
        jkjcx: "健康匀称型", //健康匀称型
        czjrx: "超重肌肉型", //超重肌肉型
        xsx: "消瘦型", //消瘦型
        dzfx: "低脂肪型", //低脂肪型
        ydyx: "运动员型", //运动员型
      },
      // 体质
      physiqueObj: {
        phz: "平和质", //平和质
        qxz: "气虚质", //气虚质
        yangxz: "阳虚质", //阳虚质
        yinxz: "阴虚质", //阴虚质
        tsz: "痰湿质", //痰湿质
        srz: "湿热质", //湿热质
        xyz: "血瘀质", //血瘀质
        qyz: "气郁质", //气郁质
        tlz: "特禀质", //特禀质
      },
    };
  },
  created() {
    // this.Linepatient();
    this.getData();
  },
  methods: {
    statistics(_data, _type) {
      this.initial(_data, _type); // 处理数据
      this.loading = true;
      this.getData(); // 获取数据
    },
    //患者信息
    async getData() {
      try {
        await zlInfo(this.queryParams).then((res) => {
          const { jlfb, smfb, sort, ttfb, txfb, zytz } = res.data;
          // 病种（主要诊断）
          this.diagnoseValue = sort.sort((a, b) => a.total - b.total);
          this.handleDiagnose();
          // 体系
          this.systemValue = [];
          delete txfb.total;
          for (let key in txfb) {
            let data = {
              name: this.systemObj[key],
              value: txfb[key],
            };
            this.systemValue.push(data);
          }
          this.handleSystem();
          // 体质
          this.physiqueValue = [];
          delete zytz.total;
          for (let key in zytz) {
            let data = {
              name: this.physiqueObj[key],
              value: zytz[key],
            };
            this.physiqueValue.push(data);
          }
          this.handlePhysique();
          // 体态
          this.postureValue = [
            {
              value: ttfb.score1,
              name: "1分",
            },
            {
              value: ttfb.score2,
              name: "2分",
            },
            {
              value: ttfb.score3,
              name: "3分",
            },
            {
              value: ttfb.score4,
              name: "4分",
            },
            {
              value: ttfb.score5,
              name: "5分",
            },
          ];
          this.handlePosture();
          // 失眠评估（PHQ-9）
          this.agrypniaValue = [];
          for (let key in smfb) {
            this.agrypniaValue.push(smfb[key]);
          }
          this.handleAgrypnia();
          // 焦虑度
          this.anxietyValue = [];
          for (let key in jlfb) {
            this.anxietyValue.push(jlfb[key]);
          }
          this.handleAnxiety();
        });
        this.loading = false;
      } catch (e) {}
    },
    // 病种（主要诊断）
    handleDiagnose() {
      diagnoseEcharts.series[0].data = this.diagnoseValue?.map((item) => {
        return item.total;
      });
      diagnoseEcharts.yAxis.data = this.diagnoseValue?.map((item) => {
        return item.type;
      });
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("diagnose"), null, {
          height: 300,
        });
        myChart.setOption(diagnoseEcharts, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 体系
    handleSystem() {
      systemEcharts.series[0].data = this.systemValue?.map((item) => {
        return item.value;
      });
      systemEcharts.xAxis.data = this.systemValue?.map((item) => {
        return item.name;
      });
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("system"), null, {
          height: 300,
        });
        myChart.setOption(systemEcharts, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 体质
    handlePhysique() {
      physiqueEcharts.series[0].data = this.physiqueValue?.map((item) => {
        return item.value;
      });
      physiqueEcharts.xAxis.data = this.physiqueValue?.map((item) => {
        return item.name;
      });
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("physique"), null, {
          height: 300,
        });
        myChart.setOption(physiqueEcharts, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 体态评估
    handlePosture() {
      postureEcharts.series[0].data = this.postureValue;
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("posture"), null, {
          height: 300,
        });
        myChart.setOption(postureEcharts, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 数据处理 查询类型判断参数
    initial(_data, _type) {
      _data[0] = this.$moment(_data[0]).format("YYYY-MM-DD");
      _data[1] = this.$moment(_data[1]).format("YYYY-MM-DD");
      this.queryParams.param = {
        startTime: _data[0] + " " + "00:00:00",
        endTime: _data[1] + " " + "23:59:59",
      };
    },
    // 失眠评估
    handleAgrypnia() {
      agrypniaEcharts.series[0].data = this.agrypniaValue;
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("agrypnia"), null, {
          height: 300,
        });
        myChart.setOption(agrypniaEcharts, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 焦虑评估
    handleAnxiety() {
      anxietyEcharts.series[0].data = this.anxietyValue;
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("anxiety"), null, {
          height: 300,
        });
        myChart.setOption(anxietyEcharts, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 重新渲染图标
    getRenew() {
      this.Linepatient();
      this.columnar();
    },
  },
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
>>> .el-card__body {
  padding: 10px 0 !important;
}

.dis {
  display: flex;
}

.header-title {
  font-size: 18px;
}

.title-box {
  padding: 10px 20px;
  border-bottom: 1px solid #dfe6ec;
}

.dian-box {
  align-items: center;
}

.dian {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 0 10px;
}

.title-box {
  justify-content: space-between;
}

. >>> .el-radio--small.is-bordered {
  margin-right: 20px !important;
  margin-left: 0 !important;
}

>>> .el-radio__input {
  display: none;
}

>>> .el-radio__label {
  padding-left: 5px;
}

.app-container {
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
}

.title-bor {
  display: inline-block;
  height: 20px;
  width: 6px;
  background: #4f8bff;
  margin-right: 10px;
  border-radius: 8px;
}
</style>
