<template>
  <div>
    <el-card>
      <div slot="header">组合项目检查状态</div>
      <div :style="'display: block; width:' + (window.pageWidth - 45) + 'px;'">
        <div style="display: flex; flex-wrap: wrap; height: 35px">
          <div class="query">
            <span>体检单位：</span>
            <el-input
              placeholder="请选择体检单位"
              v-model="patientRegister.query.cusOrgOCX"
              style="width: 300px"
              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-input
              placeholder="请选择组合项目"
              v-model="patientRegister.query.asbitemOCX"
              style="width: 240px"
              size="small"
              disabled
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="report.dialogAsbitemOCX = true"
                style="font-size: 20px"
              ></el-button>
            </el-input>
          </div>
          <!-- <div class="query">
            <span>检查状态：</span>
            <el-select
              v-model="patientRegister.query.checkCompleteFlag"
              placeholder="请选择"
              clearable
              style="width: 80px"
              size="small"
            >
              <el-option
                v-for="item in dict.checkCompleteFlag"
                :key="item.id"
                :label="item.displayName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div> -->
          <div class="query">
            <el-button @click="btnQuery" size="small"
              >查询</el-button
            >
          </div>
          <div class="query">
            <el-button @click="handleExport" size="small">导出excel</el-button>
          </div>
          <div class="query">
            <el-button @click="onPrint" size="small">打印</el-button>
          </div>
        </div>
        <div ref="imageDom">
          <el-table
            :data="dataList"
            border
            :height="window.pageHeight < 600 ? 415 : window.pageHeight - 185"
            row-key="id"
            highlight-current-row
            ref="dataList"
            :row-class-name="tableRowClassName"
            id="table"
          >
            <el-table-column prop="patientName" label="姓名"></el-table-column>
            <el-table-column prop="sexName" label="性别"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column
              prop="medicalTimes"
              label="体检次数"
            ></el-table-column>
            <el-table-column
              v-for="(item, index) in columnData"
              :key="index"
              :prop="item.prop"
              :label="item.lable"
              align="left"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <!--通用选单位、体检次数、分组的控件-->
    <el-dialog
      title="体检单位选择"
      :visible.sync="report.dialogCusOrgOCX"
      :close-on-click-modal="false"
      width="840px"
      height="600px"
    >
      <CusOrgOCX />
    </el-dialog>
    <!--通用选组合项目的控件-->
    <el-dialog
      title="组合项目选择"
      :visible.sync="report.dialogAsbitemOCX"
      :close-on-click-modal="false"
      width="700px"
      height="600px"
    >
      <AsbitemOCX />
    </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 AsbitemOCX from "../../components/report/AsbitemOCX.vue";
import { exportToExcel } from "../../utlis/Export2Excel";
import html2canvas from "html2canvas";
import printJs from "print-js";
export default {
  components: {
    CusOrgOCX,
    AsbitemOCX,
  },
  data() {
    return {
      dataList: [], //列表数据
      columnData: [],
      flag: true,
    };
  },

  created() {
    this.dictInit();
  },

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

  computed: {
    ...mapState(["window", "dict", "patientRegister", "report"]),
  },

  methods: {
    moment,
    dddw,
    //数据初始化
    dictInit() {
      //性别
      //   getapi("/api/app/sex").then((res) => {
      //     if (res.code == 1) {
      //       this.dict.sex = res.data;
      //     }
      //   });

      //体检中心
      getapi("/api/app/organization-units/organization-unit-by-is-peis").then(
        (res) => {
          if (res.code == 1) {
            this.dict.organization = res.data;
          }
        }
      );

      //体检单位树
      getapi("/api/app/customerorg/getbycodeall").then((res) => {
        if (res.code == 1) {
          this.patientRegister.customerOrgTreeAll = res.data;
          tcdate(this.patientRegister.customerOrgTreeAll);
        }
      });

      //   //体检类别
      getapi("/api/app/medical-type/in-filter").then((res) => {
        if (res.code == 1) {
          this.dict.medicalType = res.data.items;
        }
      });

      //   //人员类别
      //   getapi("/api/app/personnel-type/in-filter").then((res) => {
      //     if (res.code == 1) {
      //       this.dict.personnelType = res.data.items;
      //     }
      //   });

      //   //婚姻状况
      //   getapi("/api/app/marital-statuses").then((res) => {
      //     if (res.code == 1) {
      //       this.dict.maritalStatus = res.data.items;
      //     }
      //   });

      //   //性激素期
      //   getapi("/api/app/sex-hormone-term/in-filter").then((res) => {
      //     if (res.code == 1) {
      //       this.dict.sexHormoneTerm = res.data.items;
      //     }
      //   });

      //   //民族
      //   getapi("/api/app/nation/in-filter").then((res) => {
      //     if (res.code == 1) {
      //       this.dict.nation = res.data.items;
      //     }
      //   });

      //   //籍惯 ，出生地
      //   getapi("/api/app/birth-place/in-filter").then((res) => {
      //     if (res.code == 1) {
      //       this.dict.birthPlace = res.data.items;
      //     }
      //   });

      //   //套餐
      //   postapi("/api/app/medicalpackage/getmedicalpackagelist", {}).then(
      //     (res) => {
      //       if (res.code == 1) {
      //         this.dict.medicalPackage = res.data;
      //       }
      //     }
      //   );

      //   //分组，所有分组，不限单位，不限次数
      //   getapi("/api/app/customer-org-group").then((res) => {
      //     if (res.code == 1) {
      //       this.dict.customerOrgGroupAll = res.data.items;
      //     }
      //   });

      //   //支付方式
      //   getapi("/api/app/pay-mode").then((res) => {
      //     if (res.code == 1) {
      //       this.dict.payMode = res.data;
      //     }
      //   });

      //   //体检类别 树结构
      getapi("/api/app/item-type/by-code-all").then((res) => {
        if (res.code == 1) {
          this.dict.itemTypeTree = res.data;
          tcdate(this.dict.itemTypeTree);
        }
      });

      //   postapi("/api/app/asbitem/getasbitemlist", {}).then((res) => {
      //     if (res.code == 1) {
      //       this.dict.asbItemAll = res.data;
      //     }
      //   });

      console.log("dict", this.dict);
    },

    tableRowClassName({ row, rowIndex }) {
      switch (row.completeFlag) {
        case "0":
          return "danger";
        case "2":
          return "info";
        default:
          return "";
      }
    },
    onPrint() {
      this.flag = false;
      this.$nextTick(() => {
        let width = this.$refs.imageDom.style.width;
        let cloneDom = this.$refs.imageDom.cloneNode(true);
        let imageDom = this.$refs.imageDom;
        cloneDom.style.position = "absolute";
        cloneDom.style.top = "0px";
        cloneDom.style.zIndex = "-1";
        cloneDom.style.width = width;
        console.log(cloneDom);
        imageDom.appendChild(cloneDom);
        html2canvas(cloneDom).then((canvas) => {
          // 转成图片，生成图片地址
          const url = canvas.toDataURL("image/png");
          printJs({
            printable: url,
            type: "image",
            documentTitle: "", // 标题
            style: "@page{size:auto;margin: 0cm 1cm 0cm 1cm;}", // 去除页眉页脚
          });
        });
        cloneDom.style.display = "none";
        this.flag = true;
      });
    },
    handleExport() {
      exportToExcel("#table", "组合项目结果明细", false);
    },
    //查询
    btnQuery() {
      let body = {},
        customerOrgs = [],
        asbitemIds = [];
      // {
      //   "customerOrgs": [
      //     {
      //       "customerOrgId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
      //       "customerOrgRegisterId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
      //       "customerOrgGroupId": [
      //         "3fa85f64-5717-4562-b3fc-2c963f66afa6"
      //       ],
      //       "dateType": "string",
      //       "startDate": "string",
      //       "endDate": "string"
      //     }
      //   ],
      //   "asbitemIds": [
      //     "3fa85f64-5717-4562-b3fc-2c963f66afa6"
      //   ],
      //   "completeFlag": "string"
      // }

      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);
        });
      }

      if (this.report.dataAsbitemOCX.length > 0) {
        this.report.dataAsbitemOCX.forEach((e) => {
          asbitemIds.push(e.id);
        });
      }

      body.customerOrgs = customerOrgs;
      body.asbitemId = asbitemIds;

      // if (this.patientRegister.query.checkCompleteFlag)
      //   body.completeFlag = this.patientRegister.query.checkCompleteFlag;

      //console.log('/api/app/peisreport/getpatientregisterreport',body)

      postapi("/api/customerreport/getasbitemspecificresultreport", body).then(
        (res) => {
          if (res.code != -1) {
            let bodys= res.data
            // let bodys = [
            //   {
            //     medicalTimes: 0,
            //     patientName: "小王",
            //     sexName: "string",
            //     age: 0,
            //     registerChecks: [
            //       {
            //         registerCheckId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
            //         checkName: "血常规",
            //         registerCheckItems: [
            //           {
            //             itemName: "血型",
            //             result: "O",
            //           },
            //           {
            //             itemName: "ct",
            //             result: "良好",
            //           },
            //         ],
            //         registerCheckSummarys: "血常规优秀",
            //       },
            //       {
            //         registerCheckId: "3fa85f64-5717-4562-b3fc-2c963f66afa5",
            //         checkName: "乙肝三项",
            //         registerCheckItems: [
            //           {
            //             itemName: "乙肝",
            //             result: "A",
            //           },
            //           {
            //             itemName: "血液",
            //             result: "B",
            //           },
            //           {
            //             itemName: "ct",
            //             result: "C",
            //           },
            //         ],
            //         registerCheckSummarys: "乙肝三项良好",
            //       },
            //     ],
            //   },
            //   {
            //     medicalTimes: 0,
            //     patientName: "小李",
            //     sexName: "string",
            //     age: 0,
            //     registerChecks: [
            //       {
            //         registerCheckId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
            //         checkName: "血常规",
            //         registerCheckItems: [
            //           {
            //             itemName: "血型",
            //             result: "A",
            //           },
            //           {
            //             itemName: "ct",
            //             result: "危险",
            //           },
            //           {
            //             itemName: "核磁",
            //             result: "有",
            //           },
            //         ],
            //         registerCheckSummarys: "血常规危险",
            //       },
            //       {
            //         registerCheckId: "3fa85f64-5717-4562-b3fc-2c963f66afa5",
            //         checkName: "乙肝三项",
            //         registerCheckItems: [
            //           {
            //             itemName: "乙肝",
            //             result: "B",
            //           },
            //           {
            //             itemName: "血液",
            //             result: "A",
            //           },
            //         ],
            //         registerCheckSummarys: "乙肝三项危险",
            //       },
            //       {
            //         registerCheckId: "3fa85f64-5717-4562-b3fc-2c963f66afa4",
            //         checkName: "血型鉴侧",
            //         registerCheckItems: [
            //           {
            //             itemName: "a实验",
            //             result: "7",
            //           },
            //           {
            //             itemName: "b实验",
            //             result: "8",
            //           },
            //         ],
            //         registerCheckSummarys: "乙肝三项危险",
            //       },
            //     ],
            //   },
            // ];
            let that = this;
            let template = {
              prop: "",
              lable: "",
            };
            for (let i = 0; i < bodys.length; i++) {
              for (let k = 0; k < bodys[i].registerChecks.length; k++) {
                for (
                  let j = 0;
                  j < bodys[i].registerChecks[k].registerCheckItems.length;
                  j++
                ) {
                  let templatess = JSON.parse(JSON.stringify(template));
                  templatess.prop =
                    // bodys[i].registerChecks[k].registerCheckId +
                    bodys[i].registerChecks[k].checkName +
                    bodys[i].registerChecks[k].registerCheckItems[j].itemName;
                  templatess.lable =
                    bodys[i].registerChecks[k].checkName +'/'+
                    bodys[i].registerChecks[k].registerCheckItems[j].itemName;
                  that.columnData.push(templatess);
                  this.$set(
                    bodys[i],
                    // bodys[i].registerChecks[k].registerCheckId +
                      bodys[i].registerChecks[k].checkName +
                      bodys[i].registerChecks[k].registerCheckItems[j].itemName,
                    bodys[i].registerChecks[k].registerCheckItems[j].result
                  );
                }
                // if(bodys[i].registerChecks[k].registerCheckSummarys!=''&&bodys[i].registerChecks[k].registerCheckSummarys!=null){
                    let templates = JSON.parse(JSON.stringify(template));
                templates.prop =
                //   bodys[i].registerChecks[k].registerCheckId +
                  bodys[i].registerChecks[k].checkName +
                  "小结";
                templates.lable = bodys[i].registerChecks[k].checkName+'/' + "小结";
                that.columnData.push(templates);
                this.$set(
                  bodys[i],
                //   bodys[i].registerChecks[k].registerCheckId +
                    bodys[i].registerChecks[k].checkName +
                    "小结",
                  bodys[i].registerChecks[k].registerCheckSummarys
                );
                // }
              }
            }
            this.$nextTick(()=>{
                this.$refs.dataList.doLayout()
            })
            let map = new Map();
            let qc = this.columnData.filter(
              (key) => !map.has(key.prop) && map.set(key.prop, 1)
            );
            qc.sort(function (a, b) {
                return a.lable < b.lable ? -1 : 1; //根据名称属性进行排序
            })

            this.columnData = qc;
            this.dataList = bodys;
          }
        }
      );
    },
  },

  //监听事件
  watch: {
    //触发查询事件
    // "patientRegister.query.times"(newVal, oldVal) {
    //   if (newVal != oldVal) {
    //     //alert('触发查询事件')
    //     this.query();
    //   }
    // },
  },
};
</script>
<style scoped>
@import "../../assets/css/global_button.css";
@import "../../assets/css/global_card.css";
@import "../../assets/css/global_input.css";
@import "../../assets/css/global_table.css";
@import "../../assets/css/global.css";

.query {
  margin-left: 10px;
}
</style>
