﻿<template>
  <div class="NCC-common-layout systemLogs">
    <div class="NCC-common-layout-center">
      <el-row class="NCC-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="4">
            <el-form-item label="统计类型">
              <el-select
                v-model="query.reporttype"
                placeholder="下拉选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in reporttypeOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="统计方式">
              <el-select
                v-model="query.datetype"
                placeholder="统计方式"
                clearable
              >
                <el-option
                  v-for="(item, index) in categoryIdOptions"
                  :key="index"
                  :label="item.fullName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期选择">
              <el-date-picker
                v-model="query.selectdate"
                value-format="yyyy-MM-dd"
                clearable
                :editable="false"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="NCC-common-layout-main NCC-flex-main">
        <el-tabs v-model="activeName" type="border-card" class="logTabs">
          <el-tab-pane label="数据列表" name="1" style="padding: 5px">
            <NCC-table v-loading="listLoading" :data="list">
              <el-table-column prop="docname" label="医生名" align="left" />
              <el-table-column prop="formatdate" label="日期" align="left" />
              <el-table-column prop="sl" label="工作量" align="left" />
            </NCC-table>
          </el-tab-pane>
          <el-tab-pane label="统计图表" name="5">
            <div class="chart-container app-container nohead">
              <div id="container" style="min-width: 400px; height: 400px"></div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
//import echarts from "echarts";
//import resize from "../graphDemo/mixins/resize";
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";

import { previewDataInterface } from "@/api/systemData/dataInterface";
export default {
  components: { highcharts: Chart },
  name: "extend-graphDemo-highchartsPie",
  data() {
    return {
      chartOptions: {},
      query: {
        startenddate: undefined,
      },
      list: [],
      reporttypeOptions: [],
      chartlist: [],
      activeName: "1",
      listLoading: true,
      multipleSelection: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      formVisible: false,
      exportBoxVisible: false,

      categoryIdOptions: [
        { fullName: "年", id: "年" },
        { fullName: "月", id: "月" },
        { fullName: "日", id: "日" },
      ],
      reporttypeOptions: [
        { name: "初诊", id: "初诊" },
        { name: "复诊", id: "复诊" },
        { name: "审核", id: "审核" },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {},
  mounted() {
    //this.init();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  created() {
    this.query.datetype = "年";
    this.query.reporttype = "初诊";
    this.defaultDate();
    //this.getfirstdoctorOptions();
    this.initData();
    //this.query.sectiontime=this.timeDefault;
    //console.log("xxx:"+this.timeDefault);
  },

  methods: {
    getfirstdoctorOptions() {
      previewDataInterface("218600121401607429").then((res) => {
        this.firstdoctorOptions = res.data;
      });
    },
    init() {
      console.log("list:" + this.list);
      this.list.forEach((element) => {
        this.chartlist.push({ name: element.docname, y: element.sl });
       
        console.log(element.sl);
      });
      Highcharts.chart("container", {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
        },
        title: {
          text: "图表统计",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b>: {point.percentage:.1f} %",
              style: {
                color:
                  (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                  "black",
              },
            },
          },
        },
        series: [
          {
            name: "百分率",
            colorByPoint: true,
            data: this.chartlist,
          },
        ],
      });
    },
    initData() {
      const activeId = this.activeName;
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      let methodtype="";
      if(this.query.reporttype=="初诊")
      {
        methodtype="GetCZS";
      }
      else if(this.query.reporttype=="复诊")
      {
        methodtype="GetFZS";
      }
      else if(this.query.reporttype=="审核")
      {
        methodtype="GetSHS";
      }
      request({
        url: `/api/SubDev/Diagreports/`+methodtype,
        method: "GET",
        data: query,
      }).then((res) => {
        //console.log(res);
        this.list = res.data;
        this.chartlist = [];
        this.init();
        this.listLoading = false;
      });
    },
    handleTabClick() {
      this.reset();
    },
    reset() {},
    defaultDate() {
      //获取新的时间(2019.4.12）
      let date = new Date();
      //获取当前时间的年份转为字符串
      let year = date.getFullYear().toString(); //'2019'
      //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1).toString()
          : (date.getMonth() + 1).toString(); //'04'
      //获取天，判断是否小于10，如果是在字符串前面拼接'0'
      let da =
        date.getDate() < 10
          ? "0" + date.getDate().toString()
          : date.getDate().toString(); //'12'
      //字符串拼接，开始时间，结束时间
      let end = year + "-" + month + "-" + da; //当天'2019-04-12'
      let beg = year + "-" + month + "-01"; //当月第一天'2019-04-01'
      this.query.selectdate = end; //将值设置给插件绑定的数据
      //this.startTime =beg;
      //this.endTime=end;
    },
    addOrUpdateHandle(id, isDetail) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.NCCForm.init(id, isDetail);
      });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    refresh(isrRefresh) {
      this.defaultDate();
      this.formVisible = false;
      if (isrRefresh) this.reset();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
  },
};
</script>
<style lang="scss" scoped>
.systemLogs {
  .NCC-common-layout-main {
    padding: 0;
  }
  .logTabs {
    height: 100%;
  }
  .line1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  >>> .el-tabs__content {
    height: calc(100% - 40px);
    padding: 0;
    .el-tab-pane {
      height: calc(100% - 10px);
      overflow: hidden;
    }
  }
}
</style>