<template>
  <div class="box">
    <div>
      <div class="middlebox">
        <div class="contenttitle">
          客户报表 /
          <span class="contenttitleBold">单位体检报表</span>
        </div>
      </div>
      <div :style="'display: block;'">
        <div
          style="
            background-color: #fff;
            padding: 15px;
            border-radius: 8px;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
            height: 35px;
            margin-top: 7px;
          "
        >
          <div class="query">
            <span>体检单位：</span>
            <el-input
              placeholder="请选择体检单位"
              v-model="patientRegister.query.cusOrgOCX"
              style="width: 240px"
              size="small"
              disabled
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="report.dialogCusOrgOCX = true"
                style="font-size: 20px"
              ></el-button>
            </el-input>
          </div>
          <div class="query">
            <span>报表格式：</span>
            <el-select
              v-model="format"
              placeholder="请选择"
              style="width: 80px"
              @change="changeValue"
              size="small"
            >
              <el-option label="标准格式" value="0" />
              <el-option label="精简格式" value="1" />
              <el-option label="Word格式" value="2" />
            </el-select>
          </div>
          <div class="query">
            <el-button @click="btnQuery" size="small" class="commonbutton"
              >查询</el-button
            >
          </div>
          <div class="query">
            <el-button
              size="small"
              class="commonbutton"
              :disabled="format == 2"
              @click="handleExport"
              >导出excel</el-button
            >
          </div>
          <div class="query">
            <el-button
              size="small"
              class="commonbutton"
              :disabled="format == 2"
              @click="onPrint"
              >打印</el-button
            >
          </div>
        </div>
        <div v-show="format == 0" ref="imageDom0">
          <div
            style="background-color: #fff; padding: 15px; border-radius: 8px"
          >
            <el-table
              border
              :height="
                flag
                  ? window.pageHeight < 600
                    ? 415
                    : window.pageHeight - 185 - 25
                  : ''
              "
              :data="tableData"
              id="standardTableData"
              ref="standardTableData"
              style="width: 100%"
              :header-cell-class-name="headerStyle"
            >
              <el-table-column :label="reportTitle">
                <el-table-column
                  :label="`单位： ${customerOrgName || ''} 体检次数 ${
                    medicalTimes || ''
                  } 开始月份： ${startMonth || ''} 结束月份： ${
                    endMonth || ''
                  }`"
                >
                  <template slot-scope="scope">
                    <el-table
                      :data="scope.row.patientRegisterPositiveReports.details"
                      border
                      show-summary
                      :summary-method="summarizeRegisterCounts"
                      :header-cell-class-name="headerStyle"
                    >
                      <el-table-column label="人员阳性结果清单">
                        <el-table-column
                          :label="`${
                            scope.row.patientRegisterPositiveReports
                              .startDate || ''
                          }
                          至
                          ${
                            scope.row.patientRegisterPositiveReports.endDate ||
                            ''
                          }
                          男性：
                          ${scope.row.patientRegisterPositiveReports.maleCount}
                          女性：
                          ${
                            scope.row.patientRegisterPositiveReports.femaleCount
                          } 
                          `"
                        >
                          <el-table-column
                            prop="patientNo"
                            label="档案号"
                            width="120"
                          />
                          <el-table-column
                            prop="patientName"
                            label="姓名"
                            width="120"
                          />
                          <el-table-column
                            prop="sexName"
                            label="性别"
                            width="50"
                          />
                          <el-table-column prop="age" label="年龄" width="80" />
                          <el-table-column
                            prop="medicalTimes"
                            label="次数"
                            width="50"
                          />
                          <el-table-column
                            prop="mobileTelephone"
                            label="手机号码"
                            width="120"
                          />
                          <el-table-column
                            prop="diagnosisNames"
                            label="诊断名称"
                          />
                        </el-table-column>
                      </el-table-column>
                    </el-table>

                    <el-table
                      :data="
                        scope.row.positivePatientRegisterReportStandards.details
                      "
                      border
                      :header-cell-class-name="headerStyle"
                      style="margin-top: 15px"
                    >
                      <el-table-column label="阳性结果人员清单">
                        <el-table-column
                          :label="`${
                            scope.row.patientRegisterPositiveReports
                              .startDate || ''
                          }
                          至
                          ${
                            scope.row.patientRegisterPositiveReports.endDate ||
                            ''
                          }
                          男性：
                          ${scope.row.patientRegisterPositiveReports.maleCount}
                          女性：
                          ${
                            scope.row.patientRegisterPositiveReports.femaleCount
                          } 
                          `"
                        >
                          <template slot-scope="scopes">
                            <el-table
                              :data="scopes.row.patientRegisters"
                              border
                              show-summary
                              :summary-method="summarizeRegisterCounts"
                            >
                              <el-table-column
                                :label="scopes.row.diagnosisName"
                              >
                                <el-table-column
                                  label="部门名称"
                                  prop="departmentName"
                                ></el-table-column>
                                <el-table-column
                                  label="姓名"
                                  prop="patientName"
                                ></el-table-column>
                                <el-table-column
                                  label="性别"
                                  prop="sexName"
                                ></el-table-column>
                                <el-table-column prop="age" label="年龄">
                                </el-table-column>
                                <el-table-column
                                  prop="patientRegisterNo"
                                  label="条码号"
                                >
                                </el-table-column>
                                <el-table-column
                                  prop="patientNo"
                                  label="档案号"
                                >
                                </el-table-column>
                                <el-table-column
                                  prop="medicalTimes"
                                  label="体检次数"
                                >
                                </el-table-column>
                                <el-table-column prop="telephone" label="电话">
                                </el-table-column>
                                <el-table-column
                                  prop="mobileTelephone"
                                  label="手机号"
                                >
                                </el-table-column>
                              </el-table-column>
                            </el-table>
                          </template>
                        </el-table-column>
                      </el-table-column>
                    </el-table>

                    <el-table
                      :data="scope.row.diseaseCountStatisticsReports.details"
                      border
                      :header-cell-class-name="headerStyle"
                      show-summary
                      :summary-method="summarizeRegisterCount"
                      style="margin-top: 15px"
                    >
                      <el-table-column label="疾病人数统计">
                        <el-table-column
                          :label="`${
                            scope.row.patientRegisterPositiveReports
                              .startDate || ''
                          }
                          至
                          ${
                            scope.row.patientRegisterPositiveReports.endDate ||
                            ''
                          }
                          男性：
                          ${scope.row.patientRegisterPositiveReports.maleCount}
                          女性：
                          ${
                            scope.row.patientRegisterPositiveReports.femaleCount
                          } 
                          `"
                        >
                          <el-table-column label="序号" type="index">
                          </el-table-column>
                          <el-table-column prop="diagnosisName" label="疾病" />
                          <el-table-column prop="patientCount" label="人数" />
                          <el-table-column
                            prop="percentage"
                            label="占总检人员百分比"
                          />
                        </el-table-column>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div v-show="format == 1" ref="imageDom1">
          <div
            style="background-color: #fff; padding: 15px; border-radius: 8px"
          >
            <el-table
              border
              :height="
                flag
                  ? window.pageHeight < 600
                    ? 415
                    : window.pageHeight - 185 - 25
                  : ''
              "
              :data="reducetableData"
              id="reducetableData"
              ref="reducetableData"
              style="width: 100%"
              :header-cell-class-name="headerStyle"
            >
              <el-table-column :label="reducereportTitle">
                <el-table-column
                  :label="`单位： ${customerOrgName || ''} 体检次数 ${
                    medicalTimes || ''
                  } 开始月份： ${startMonth || ''} 结束月份： ${
                    endMonth || ''
                  }`"
                >
                  <template slot-scope="scope">
                    <el-table
                      :data="scope.row.patientRegisterPositiveReports.details"
                      border
                      show-summary
                      :summary-method="summarizeRegisterCounts"
                      :header-cell-class-name="headerStyle"
                    >
                      <el-table-column label="人员阳性结果清单">
                        <el-table-column
                          :label="`${
                            scope.row.patientRegisterPositiveReports
                              .startDate || ''
                          }
                          至
                          ${
                            scope.row.patientRegisterPositiveReports.endDate ||
                            ''
                          }
                          男性：
                          ${scope.row.patientRegisterPositiveReports.maleCount}
                          女性：
                          ${
                            scope.row.patientRegisterPositiveReports.femaleCount
                          } 
                          `"
                        >
                          <el-table-column
                            prop="patientNo"
                            label="档案号"
                            width="120"
                          />
                          <el-table-column
                            prop="patientName"
                            label="姓名"
                            width="120"
                          />
                          <el-table-column
                            prop="sexName"
                            label="性别"
                            width="50"
                          />
                          <el-table-column prop="age" label="年龄" width="80" />
                          <el-table-column
                            prop="medicalTimes"
                            label="次数"
                            width="50"
                          />
                          <el-table-column
                            prop="mobileTelephone"
                            label="手机号码"
                            width="120"
                          />
                          <el-table-column
                            prop="diagnosisNames"
                            label="诊断名称"
                          />
                        </el-table-column>
                      </el-table-column>
                    </el-table>

                    <el-table
                      :data="
                        scope.row.positivePatientRegisterReportReduces.details
                      "
                      border
                      :header-cell-class-name="headerStyle"
                      show-summary
                      :summary-method="summarizeRegisterCount"
                      style="margin-top: 15px"
                    >
                      <el-table-column label="阳性结果人员清单">
                        <el-table-column
                          :label="`${
                            scope.row.patientRegisterPositiveReports
                              .startDate || ''
                          }
                          至
                          ${
                            scope.row.patientRegisterPositiveReports.endDate ||
                            ''
                          }
                          男性：
                          ${scope.row.patientRegisterPositiveReports.maleCount}
                          女性：
                          ${
                            scope.row.patientRegisterPositiveReports.femaleCount
                          } 
                          `"
                        >
                          <el-table-column label="序号" type="index">
                          </el-table-column>
                          <el-table-column prop="diagnosisName" label="诊断" />
                          <el-table-column prop="patientCount" label="人数" />
                          <el-table-column
                            prop="percentage"
                            label="占总检人员百分比"
                          />
                        </el-table-column>
                      </el-table-column>
                    </el-table>

                    <el-table
                      :data="scope.row.diseaseCountStatisticsReports.details"
                      border
                      :header-cell-class-name="headerStyle"
                      show-summary
                      :summary-method="summarizeRegisterCount"
                      style="margin-top: 15px"
                    >
                      <el-table-column label="疾病人数统计">
                        <el-table-column
                          :label="`${
                            scope.row.patientRegisterPositiveReports
                              .startDate || ''
                          }
                          至
                          ${
                            scope.row.patientRegisterPositiveReports.endDate ||
                            ''
                          }
                          男性：
                          ${scope.row.patientRegisterPositiveReports.maleCount}
                          女性：
                          ${
                            scope.row.patientRegisterPositiveReports.femaleCount
                          } 
                          `"
                        >
                          <el-table-column label="序号" type="index">
                          </el-table-column>
                          <el-table-column prop="diagnosisName" label="疾病" />
                          <el-table-column prop="patientCount" label="人数" />
                          <el-table-column
                            prop="percentage"
                            label="占总检人员百分比"
                          />
                        </el-table-column>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div v-show="format == 2" ref="imageDom2">
          <div
            style="background-color: #fff; padding: 15px; border-radius: 8px"
          >
            <div
              :style="
                'display: flex;justify-content: center;align-items: center;height:' +
                (window.pageHeight < 600 ? 415 : window.pageHeight - 185 - 25) +
                'px;'
              "
            >
              <div v-show="reportUrl == ''">无数据</div>
              <a :href="reportUrl" v-show="reportUrl != ''">
                <el-button>下载Word报表</el-button>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--通用选单位、体检次数、分组的控件-->
    <el-dialog
      title="体检单位选择"
      :visible.sync="report.dialogCusOrgOCX"
      :close-on-click-modal="false"
      width="880px"
      height="600px"
    >
      <CusOrgOCX
        :useCustomerOrg="true"
        :initDateType="'creationTime'"
        :isUnit="true"
      />
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import { mapState, mapActions } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import {
  dddw,
  objCopy,
  arrayReduce,
  arrayExistObj,
  tcdate,
} from "@/utlis/proFunc";
import CusOrgOCX from "../../components/report/CusOrgOCX.vue";
import { exportToExcel } from "../../utlis/Export2Excel";
import html2canvas from "html2canvas";
import printJs from "print-js";
export default {
  components: {
    CusOrgOCX,
  },
  data() {
    return {
      format: "0",
      flag: true,
      tableData: [],
      reducetableData: [],
      reportTitle: "",
      customerOrgName: "",
      medicalTimes: null,
      startMonth: "",
      endMonth: "",
      startDate: "",
      endDate: "",
      sumMedicalNumber: null,
      maleMedicalNumber: null,
      femaleMedicalNumber: null,
      otherMedicalNumber: null,
      reducereportTitle: "",
      reducecustomerOrgName: "",
      reducemedicalTimes: null,
      reducestartMonth: "",
      reduceendMonth: "",
      reducestartDate: "",
      reduceendDate: "",
      reducesumMedicalNumber: null,
      reducemaleMedicalNumber: null,
      reducefemaleMedicalNumber: null,
      reduceotherMedicalNumber: null,
      reportUrl: "",
    };
  },
  created() {
    // this.dictInit();
  },

  //挂载完成
  mounted() {
    // this.btnQuery();
  },

  computed: {
    ...mapState(["window", "dict", "patientRegister", "report"]),
  },
  methods: {
    btnQuery() {
      let body = {},
        customerOrgs = [];
      if (this.report.dataCusOrgOCX.length > 0) {
        this.report.dataCusOrgOCX.forEach((e) => {
          let rd = {
            startDate: moment(e.startDate).format("yyyy-MM-DD"),
            endDate: moment(e.endDate).format("yyyy-MM-DD"),
            dateType:
              e.dateType == "summaryDate"
                ? "3"
                : e.dateType == "medicalStartDate"
                ? "2"
                : "1",
          };

          if (e.customerOrgId) {
            rd.customerOrgId = e.customerOrgId;
            if (e.customerOrgId == this.dict.personOrgId) {
              rd.customerOrgRegisterId = null;
              rd.customerOrgGroupId = [];
            } else {
              rd.customerOrgRegisterId = e.customerOrgRegister.id;
              rd.customerOrgGroupId = e.customerOrgGroupIds;
            }
          }
          customerOrgs.push(rd);
        });
      }

      body.customerOrgs = customerOrgs;
      if (this.completeFlag) body.completeFlag = this.completeFlag;
      body.isAudit = this.classification;

      if (this.format == 0) {
        postapi(
          "/api/customerreport/getunitphysicalexaminationreportstandard",
          body
        ).then((res) => {
          if (res.code != -1) {
            this.tableData = [];
            this.tableData.push(res.data);
            this.reportTitle = res.data.reportTitle;
            this.customerOrgName = res.data.customerOrgName;
            this.medicalTimes = res.data.medicalTimes;
            this.startMonth = res.data.startMonth;
            this.endMonth = res.data.endMonth;
            this.startDate = res.data.startDate;
            this.endDate = res.data.endDate;
            this.sumMedicalNumber = res.data.sumMedicalNumber;
            this.maleMedicalNumber = res.data.maleMedicalNumber;
            this.femaleMedicalNumber = res.data.femaleMedicalNumber;
            this.otherMedicalNumber = res.data.otherMedicalNumber;
          }
        });
      } else if (this.format == 1) {
        postapi(
          "/api/customerreport/getunitphysicalexaminationreportreduce",
          body
        ).then((res) => {
          if (res.code != -1) {
            this.reducetableData = [];
            this.reducetableData.push(res.data);
            this.reducereportTitle = res.data.reportTitle;
            this.reducecustomerOrgName = res.data.customerOrgName;
            this.reducemedicalTimes = res.data.medicalTimes;
            this.reducestartMonth = res.data.startMonth;
            this.reduceendMonth = res.data.endMonth;
            this.reducestartDate = res.data.startDate;
            this.reduceendDate = res.data.endDate;
            this.reducesumMedicalNumber = res.data.sumMedicalNumber;
            this.reducemaleMedicalNumber = res.data.maleMedicalNumber;
            this.reducefemaleMedicalNumber = res.data.femaleMedicalNumber;
            this.reduceotherMedicalNumber = res.data.otherMedicalNumber;
          }
        });
      } else {
        postapi(
          "/api/customerreport/getunitphysicalexaminationreportexportword",
          body
        ).then((res) => {
          if (res.code != -1) {
            const sysConfig = JSON.parse(
              window.sessionStorage.getItem("sysConfig")
            );
            this.reportUrl = sysConfig.apiurl + res.data.reportUrl;
          }
        });
      }
    },
    summarizeRegisterCounts(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 1) {
          sums[index] = data.length + "人";
          return;
        }
      });

      return sums;
    },
    summarizeRegisterCount(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (index === 2) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 人";
        }
      });

      return sums;
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 1) {
        return "left-align";
      }
    },
    changeValue(value) {
      if (value == 0) {
        this.$nextTick(() => {
          this.$refs.standardTableData.doLayout();
        });
      } else if (value == 1) {
        this.$nextTick(() => {
          this.$refs.reducetableData.doLayout();
        });
      }
    },
    handleExport() {
      if (this.format == 0) {
        let name = "北京神豚软件开发有限公司体检报告";
        if (this.reportTitle != "") {
          name = this.reportTitle;
        }
        let index = 3;
        let list = [];
        list.push(index);
        index += this.tableData[0].patientRegisterPositiveReports.details.length + 7;
        list.push(index);
        for (
          let i = 0;
          i <
          this.tableData[0].positivePatientRegisterReportStandards.details
            .length -
            1;
          i++
        ) {
          index +=
            this.tableData[0].positivePatientRegisterReportStandards.details[i]
              .patientRegisters.length + 4;
          list.push(index);
        }
        exportToExcel("#standardTableData", name, true, list);
      } else if (this.format == 1) {
        let name = "北京神豚软件开发有限公司体检报告";
        if (this.reducereportTitle != "") {
          name = this.reducereportTitle;
        }
        let index = 3;
        let list = [];
        list.push(index);
        exportToExcel("#reducetableData", name, true, list);
      }
    },
    onPrint() {
      this.flag = false;
      let index = "";
      if (this.format == 0) {
        index = "imageDom0";
      } else if (this.format == 1) {
        index = "imageDom1";
      } else {
        index = "imageDom2";
      }
      this.$nextTick(() => {
        let width = this.$refs[index].style.width;
        let cloneDom = this.$refs[index].cloneNode(true);
        let imageDom = this.$refs[index];
        cloneDom.style.position = "absolute";
        cloneDom.style.top = "0px";
        cloneDom.style.zIndex = "-1";
        cloneDom.style.width = width;
        imageDom.appendChild(cloneDom);
        html2canvas(cloneDom).then((canvas) => {
          // 转成图片，生成图片地址
          const url = canvas.toDataURL("image/png");
          printJs({
            printable: url,
            type: "image",
            documentTitle: "", // 标题
            style: `@media print { @page {size: auto; margin: 0 0 0 0; } body{margin:0 5px}canvas{page-break-after: always;page-break-inside: avoid;
page-break-after: avoid;
page-break-before: avoid;}}`, // 去除页眉页脚
          });
        });
        cloneDom.style.display = "none";
        this.flag = true;
      });
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/global_button.css";
@import "../../assets/css/global_dialog.css";
@import "../../assets/css/global_table.css";
@import "../../assets/css/global_form.css";
@import "../../assets/css/global_input.css";
@import "../../assets/css/global.css";

.query {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #232748;
  font-size: 400;
  font-family: "NotoSansSC-Regular";
}

.box {
  display: flex;
  flex-direction: column;
}

::v-deep .el-table__header-wrapper th.backcolor {
  background-color: #f5f7fa;
}

:deep .left-align .cell {
  text-align: left !important;
}
::v-deep .el-input__inner {
  /*text-align: center;*/
  padding-left: 5px;
  padding-right: 15px;
}

::v-deep .el-input__icon {
  width: 15px;
  /* 输入框下拉箭头或清除图标 默认 25 */
}

::v-deep .el-input-group__append {
  padding: 0 5px;
  /* 控件默认 0 20px;*/
}

::v-deep .el-icon-search:before {
  color: #00f;
}
.query:last-child {
  margin-right: 0;
}
</style>