<template>
  <div class="app-container">
    <!-- 静脉溶栓 数据对比 -->
    <div class="dis" style="width: 100%">
      <div style="flex: 1">
        <el-card shadow="always">
          <div class="dis title-box">
            <span class="header-title">血管内治疗率 </span>
          </div>
          <!-- 统计图 -->
          <div style="height: 300px" v-loading="loading">
            <div id="XGZL" style="width: 100%"></div>
          </div>
        </el-card>
      </div>
      <div style="flex: 1; margin-left: 20px">
        <el-card shadow="always">
          <div class="dis title-box">
            <span class="header-title">数据对比</span>
            <div class="dis">
              <div class="dian-box dis">
                <span class="dian" style="background: #00d1a1"></span>
                桥接治疗人数
              </div>
              <div class="dian-box dis">
                <span class="dian" style="background: #4f8bff"></span>
                非桥接治疗人数
              </div>
            </div>
          </div>
          <!-- 统计图 -->
          <div style="height: 300px" v-loading="loading">
            <div id="SJDB" style="width: 100%"></div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- DNT分布  sICH发生率  -->
    <div class="dis" style="width: 100%">
      <div style="flex: 1">
        <el-card shadow="always">
          <div class="dis title-box">
            <span class="header-title">DPT</span>
            <div class="dis">
              <div class="dian-box dis">
                <span class="dian" style="background: #00d1a1"></span> ≤60 min
              </div>
              <div class="dian-box dis">
                <span class="dian" style="background: #ffcd6c"></span> ≤90 min
              </div>
              <div class="dian-box dis">
                <span class="dian" style="background: #a794fe"></span> >90 min
              </div>
            </div>
          </div>
          <!-- 统计图 -->
          <div style="height: 300px" v-loading="loading">
            <div id="DPT" style="width: 100%"></div>
          </div>
        </el-card>
      </div>
      <div style="flex: 1; margin-left: 20px">
        <el-card shadow="always">
          <div class="dis title-box">
            <span class="header-title">PRT</span>
            <div class="dis">
              <div class="dian-box dis">
                <span class="dian" style="background: #a794fe"></span> ≤60 min
              </div>
              <div class="dian-box dis">
                <span class="dian" style="background: #4f8bff"></span> ≤90 min
              </div>
              <div class="dian-box dis">
                <span class="dian" style="background: #ffcd6c"></span> >90 min
              </div>
            </div>
          </div>
          <!-- 统计图 -->
          <div style="height: 300px" v-loading="loading">
            <div id="RPT" style="width: 100%"></div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import {
  queryDptResult,
  queryRptResult,
  dataComparison,
  queryXgzlLv,
} from "@/api/indexCom.js";
import { XGZL, XGSJDB, DPT, RPT } from "./index";
export default {
  name: "Post",
  props: ["title"],
  mixins: [resize],
  data() {
    return {
      loading: false,
      DPTvalue: null,
      RPTvalue: null,
      SJDBvalue: null,
      XGZLvalue: null,
      queryParams: {
        param: {
          timeType: 4,
          startTime: "",
          endTime: "",
        },
      },
    };
  },
  created() {
    // this.getData();
  },
  methods: {
    statistics(_data, _type) {
      this.initial(_data, _type); // 处理数据
      this.loading = true;
      this.getData(); // 获取数据
    },
    // 查询
    async getData() {
      try {
        // /DNT
        await queryDptResult(this.queryParams).then((res) => {
          this.DPTvalue = res.data;
          console.log("this.DPTvalue: ", this.DPTvalue);
          this.DPT();
        });
        //RPT
        await queryRptResult(this.queryParams).then((res) => {
          this.RPTvalue = res.data;
          this.RPT();
        });
        // 数据对比
        // await dataComparison(this.queryParams).then((res) => {
        //   console.log("dataComparison: ", dataComparison);
        //   this.SJDBvalue = res.date;
        //   this.SJDB();
        // });
        await dataComparison(this.queryParams).then((res) => {
          console.log("res1111: ", res);
          this.SJDBvalue = res.data;
          this.SJDB();
        });
        await queryXgzlLv(this.queryParams).then((res) => {
          this.XGZLvalue = res.data;
          this.XGZL();
        });
        this.loading = false;
      } catch (e) {
        console.log(e, "e");
      }
    },
    // 数据对比
    SJDB(_statData) {
      XGSJDB.series[0].data = this.SJDBvalue?.map((item) => {
        return item.qiaojie; //静脉溶栓人数
      });
      XGSJDB.series[1].data = this.SJDBvalue?.map((item) => {
        return item.falseQiaojie; //静脉溶栓人数
      });
      XGSJDB.xAxis[0].data = this.SJDBvalue?.map((item) => {
        return item.date; //X轴
      });
      this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("SJDB"), null, {
          height: 300,
        });
        myChart.setOption(XGSJDB, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 血管治疗
    XGZL() {
      XGZL.series[0].data = this.XGZLvalue?.map((item) => {
        return item.decimal; //静脉溶栓人数
      });
      XGZL.xAxis.data = this.XGZLvalue?.map((item) => {
        return item.date; //X轴
      });
      this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("XGZL"), null, {
          height: 300,
        });
        myChart.setOption(XGZL, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // DPT
    DPT() {
      DPT.series[0].data = this.DPTvalue?.map((item) => {
        return item.dy60; //<= 60
      });
      DPT.series[1].data = this.DPTvalue?.map((item) => {
        return item.dy90; //<= 90
      });
      DPT.series[2].data = this.DPTvalue?.map((item) => {
        return item.other; //<= 90
      });
      DPT.xAxis[0].data = this.DPTvalue?.map((item) => {
        return item.date; //X轴
      });
      this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("DPT"), null, {
          height: 300,
        });
        myChart.setOption(DPT, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // RPT
    RPT(_statData) {
      RPT.series[0].data = this.RPTvalue?.map((item) => {
        return item.dy60; //<= 60
      });
      RPT.series[1].data = this.RPTvalue?.map((item) => {
        return item.dy90; //<= 90
      });
      RPT.series[2].data = this.RPTvalue?.map((item) => {
        return item.other; //> 90
      });
      RPT.xAxis[0].data = this.RPTvalue?.map((item) => {
        return item.date; //X轴
      });
      this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("RPT"), null, {
          height: 300,
        });
        myChart.setOption(RPT, 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 = {
        timeType: _type,
        startTime: _data[0] + " " + "00:00:00",
        endTime: _data[1] + " " + "23:59:59",
      };
    },
    // 重新渲染图标
    getRenew() {
      this.SJDB(); // 数据对比
      this.XGZL(); // 血管治疗
      this.DPT();
      this.RPT();
    },
  },
};
</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;
}
.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>
