<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"
              @change="yearBlur"
              v-model="form.year"
              type="year"
              placeholder="选择年"
              :clearable="false"
            ></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">
            <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="showData">
      <!-- 展示两种数据 -->
      <div class="showEcharts">
        <div id="pieChart" :style="{width: '100%'}" class="myCharts"></div>
      </div>
      <div class="showEcharts">
        <div id="pieChart1" :style="{width: '100%'}" class="myCharts"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { medicalInstitution } from "@/api/city.js";
import { getRecipeMoney } from "@/api/dataAnalysis.js";
export default {
  data() {
    return {
      // 筛选数据
      form: {
        medName: "",
        year: "",
        month: "",
        checked: false
      },
      // 医疗机构
      medSelectList: [],
      // 是否是图表
      isEcharts: 0, // 0 图表 1 列表

      xAxisData: [], // 图表 横向坐标

      chinaMadeCount: [], // 中药制剂开方数据
      chinaPreCount: [], // 中药处方
      hospitalCount: [], // 中医住院量
      outpatientCount: [], //中医门诊量
      particlesCount: [], // 颗粒剂开方量
      slicesCount: [], // 饮片开方量
      techCount: [] // 适宜技术处方
    };
  },
  created() {
    // this.medicalInstitution();
  },
  mounted() {
    let date = new Date();
    this.form.year = date.getFullYear().toString();
    // this.drawLine()
    this.getRecipeMoney();
    this.drawPie();
    this.drawPie1();
  },
  methods: {
    // 年份失去焦点
    yearBlur(e) {
      if (!e || e.length > 4 || e.length < 4) {
        let date = new Date();
        this.form.year = date.getFullYear().toString();
      }
    },
    // 顶部列表更改
    topChange(type) {
      this.isEcharts = type;
      if (type == 0) {
        setTimeout(() => {
          this.drawLine();
        }, 200);
      }
    },
    // 绘制 图表
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        grid: {
          left: "1%",
          right: "1%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: [
            "中医门诊总金额",
            "中医住院总金额",
            "饮片开方金额",
            "颗粒剂开方金额",
            "中药制剂开方金额",
            "适宜技术处方开方总金额"
          ]
        },
        color: [
          "#5FA0FA",
          "#FFB703",
          "#1bb2d8",
          "#FD2446",
          "#51CEC6",
          "#DAEDF6"
        ],
        tooltip: {},
        xAxis: {
          type: "category",
          data: this.xAxisData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "中医门诊总金额",
            type: "bar",

            data: this.outpatientCount
          },
          {
            name: "中医住院总金额",
            type: "bar",

            data: this.hospitalCount
          },
          {
            name: "饮片开方金额",
            type: "bar",
            stack: "中药处方开方总金额",
            data: this.slicesCount
          },
          {
            name: "颗粒剂开方金额",
            type: "bar",
            stack: "中药处方开方总金额",
            data: this.particlesCount
          },
          {
            name: "中药制剂开方金额",
            type: "bar",
            stack: "中药处方开方总金额",
            data: this.chinaMadeCount
          },
          {
            name: "适宜技术处方开方总金额",
            type: "bar",
            data: this.techCount
          }
        ]
      });
    },
    // 绘制饼图
    drawPie() {
      // pieChart
      let myChart = this.$echarts.init(document.getElementById("pieChart"));
      let option = {
        color: ["#58E9F5", "#00A4F7"],
        title: {
          text: "患者性别比",
          subtext: "",
          left: "center"
        },
        // tooltip: {
        //     trigger: 'item'
        // },
        legend: {
          orient: "vertical",
          left: "left",
          show: false
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: [
              {
                value: 37.78,
                name: "男-37.78%"
              },
              {
                value: 62.22,
                name: "女-62.22%"
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    drawPie1() {
      // pieChart
      let myChart = this.$echarts.init(document.getElementById("pieChart1"));
      let option = {
        color: ["#998AF0", "#85CBFF", "#37BC7C", "#FF8C8C"],
        title: {
          text: "患者年龄分布",
          subtext: "",
          left: "center"
        },
        // tooltip: {
        // trigger: 'item'
        // },
        legend: {
          orient: "vertical",
          left: "left",
          show: false
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: [
              {
                value: 1,
                name: "10岁以下 1%"
              },
              {
                value: 47.89,
                name: "10-30岁 47.89%"
              },
              {
                value: 42.22,
                name: "30-50岁 42.22%"
              },
              {
                value: 8.89,
                name: "50岁以上 8.89%"
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    search() {
      this.xAxisData = []; // 图表 横向坐标

      this.chinaMadeCount = []; // 中药制剂开方数据
      this.chinaPreCount = []; // 中药处方
      this.hospitalCount = []; // 中医住院量
      this.outpatientCount = []; //中医门诊量
      this.particlesCount = []; // 颗粒剂开方量
      this.slicesCount = []; // 饮片开方量
      this.techCount = []; // 适宜技术处方

      this.getRecipeMoney();
    },
    clearFilter() {
      let date = new Date();

      this.form = {
        medName: "",
        year: date.getFullYear().toString(),
        month: "",
        checked: false
      };

      this.xAxisData = []; // 图表 横向坐标

      this.chinaMadeCount = []; // 中药制剂开方数据
      this.chinaPreCount = []; // 中药处方
      this.hospitalCount = []; // 中医住院量
      this.outpatientCount = []; //中医门诊量
      this.particlesCount = []; // 颗粒剂开方量
      this.slicesCount = []; // 饮片开方量
      this.techCount = []; // 适宜技术处方

      this.getRecipeMoney();
    },
    // 处理选择器 时间数据
    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 getRecipeMoney() {
      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 getRecipeMoney(params);
      if (res.ResultCode == 0) {
        if (!this.form.month) {
          for (let i = 1; i <= 12; i++) {
            let j = i < 10 ? "0" + i : i;
            let xAxis = this.forMatDate(0, this.form.year) + "-" + j + "月";
            this.xAxisData.push(xAxis);
          }
        } else {
          this.xAxisData = [
            this.forMatDate(0, this.form.year) +
              "-" +
              this.forMatDate(1, this.form.month) +
              "月"
          ];
        }

        res.Data.forEach((item, index) => {
          this.chinaMadeCount.push(item.chinaMadeCountPrice);
          this.chinaPreCount.push(item.chinaPreCountPrice);
          this.hospitalCount.push(item.hospitalCountPrice);
          this.outpatientCount.push(item.outpatientCountPrice);
          this.particlesCount.push(item.particlesCountPrice);
          this.slicesCount.push(item.slicesCountPrice);
          this.techCount.push(item.techCountPrice);
        });

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

.showData {
  background: #fff;
  border-radius: 10px;
  margin-top: 5px;
  padding: 10px;
  height: 71vh;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  .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%;
    flex: 1;
    height: 100%;

    .myCharts {
      height: 500px;
      // height: 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;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .showData {
    height: 81vh;

    .showEcharts {
      width: 100%;

      .myCharts {
        height: 500px;
      }
    }
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .showData {
    height: 80vh;

    .showEcharts {
      width: 100%;

      .myCharts {
        height: 500px;
      }
    }
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .showData {
    height: 73vh;

    .showEcharts {
      width: 100%;

      .myCharts {
        height: 410px;
      }
    }
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .showData {
    height: 73vh;

    .showEcharts {
      width: 100%;

      .myCharts {
        height: 410px;
      }
    }
  }
}
</style>