<template>
  <div style="display: flex">
    <div :style="`width: ${window.pageWidth}px;`">
      <el-table
        :data="asbitemCriticalValue"
        border
        :height="
          window.pageHeight < 600
            ? 150
            : Math.floor((window.pageHeight + 20) / 3)
        "
        size="small"
        highlight-current-row
        ref="asbitemCriticalValue"
        :span-method="objectSpanMethod"
      >
        <el-table-column prop="asbitemName" label="组合项目" />
        <el-table-column prop="summaryDetail" label="小结" min-width="400">
          <template slot-scope="scope">
            <span v-html="scope.row.summaryDetail"></span>
          </template>
        </el-table-column>
        <el-table-column prop="criticalRangeValue" label="危急值范围" />
        <el-table-column prop="isCriticalValue" label="危急值标志">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.isCriticalValue"
              disabled
              true-label="Y"
              false-label="N"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop="criticalValueContent"
          label="危急值处理内容"
          width="150"
        />
        <el-table-column prop="isCriticalValueAudit" label="危急值审核">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.isCriticalValueAudit"
              disabled
              true-label="Y"
              false-label="N"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="isReview" label="复查">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.isReview"
              disabled
              true-label="Y"
              false-label="N"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="isFollowUp" label="随访标志">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.isFollowUp"
              disabled
              true-label="Y"
              false-label="N"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="itemName" label="项目"> </el-table-column>
        <el-table-column prop="itemResult" label="项目结果"> </el-table-column>
        <el-table-column prop="unit" label="单位"> </el-table-column>
        <el-table-column prop="referenceRangeValue" label="参考范围">
        </el-table-column>
        <el-table-column prop="itemCriticalRangeValue" label="危急值范围">
        </el-table-column>
        <el-table-column prop="itemIsCriticalValue" label="危急值标志">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.itemIsCriticalValue"
              disabled
              true-label="Y"
              false-label="N"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop="itemCriticalValueContent"
          label="危急值处理内容"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="itemIsCriticalValueAudit" label="危急值审核">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.itemIsCriticalValueAudit"
              disabled
              true-label="Y"
              false-label="N"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="itemIsReview" label="复查">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.itemIsReview"
              disabled
              true-label="Y"
              false-label="N"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="itemIsFollowUp" label="随访标志">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.itemIsFollowUp"
              disabled
              true-label="Y"
              false-label="N"
            ></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { mapState } from "vuex";
import { dddw } from "../../utlis/proFunc";
import { getapi, postapi, putapi, deletapi } from "../../api/api";
export default {
  data() {
    return {
      asbitemCriticalValue: [],
    };
  },
  computed: {
    ...mapState(["window", "dataTransOpts", "dict", "patientRegister"]),
  },
  methods: {
    dddw,
    moment,
    getLists() {
      if (this.dataTransOpts.tableS.patient_register.patientRegisterId) {
        postapi(
          "/api/app/PhoneFollowUp/GetAsbitemOrItemCriticalByPatientRegisterId",
          {
            patientRegisterId:
              this.dataTransOpts.tableS.patient_register.patientRegisterId,
          }
        ).then((res) => {
          if (res.code > -1) this.asbitemCriticalValue = res.data;
        });
      }else{
        this.asbitemCriticalValue=[]
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        //if条件判断的是合并那一竖列
        columnIndex == 0 ||
        columnIndex == 1 ||
        columnIndex == 2 ||
        columnIndex == 3 ||
        columnIndex == 4 ||
        columnIndex == 5 ||
        columnIndex == 6 ||
        columnIndex == 7
      ) {
        const _row = this.flitterData2(this.asbitemCriticalValue).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    flitterData2(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //name 修改
          if (item.registerCheckId === arr[index - 1].registerCheckId) {
            //pid就是判断相同的字段
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["asbitemCriticalValue"].doLayout();
    });
  },
  watch: {
    //人员ID未切换换时 也可以强制刷新数据
    "dataTransOpts.refresh.register_check_asbitem.M": {
      // immediate:true,
      handler(newVal, oldVal) {
        console.log(
          `watch 人员登记 newVal:${newVal} oldVal:${oldVal} registerCheckId: ${this.dataTransOpts.tableS.patient_register.id}`
        );
        // if (newVal != oldVal)
        this.getLists();
      },
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/global.css";
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}
</style>