<template>
  <div class="plate-box">
    <h2 class="title border">
      <span class="line"></span>
      <p>{{ title }}</p>
      <span class="line"></span>
    </h2>
    <div class="dm" style="width:100%;overflow:hildden;overflow-x:auto;">
      <table class="table dialsisTable" style>
        <tr>
          <th v-if="isShow('监测时间')" width="80px">时间</th>
          <th v-if="isShow('体温')" width="80px">体温(℃)</th>
          <th v-if="isShow('血压')" width="72px">血压(mmHg)</th>
          <th v-if="isShow('脉搏')" width="80px">脉搏(次/分)</th>
          <th v-if="isShow('呼吸频率')" width="110px">呼吸频率(次/分)</th>
          <th width="76px">静脉压/动脉压(mmHg)</th>
          <th v-if="isShow('血流量')" width="92px">血流量(ml/min)</th>
          <th v-if="isShow('跨膜压')" width="76px">跨膜压(mmHg)</th>
          <th v-if="isShow('超滤量') && template_id == 6" width="76px">
            超滤量(ml)
          </th>
          <th v-if="isShow('超滤量') && template_id != 6" width="76px">
            超滤量(L)
          </th>
          <th v-if="isShow('钠浓度')" width="92px">钠浓度(mmol/L)</th>
          <th v-if="isShow('透析液温度')" width="92px">透析液温度(℃)</th>
          <th v-if="isShow('置换率')" width="92px">置换率(L/h)</th>
          <th v-if="isShow('置换量')" width="92px">置换量(L)</th>

          <th v-if="isShow('电导度')" width="92px">电导度(mS/m)</th>
          <th v-if="isShow('置换液流量')" width="92px">置换液流量(ml/h)</th>
          <th v-if="isShow('病情变化')" width="92px">病情变化</th>
          <th v-if="isShow('处理')" width="92px">处理</th>
          <th v-if="isShow('结果')" width="92px">结果</th>
        </tr>
        <tr v-for="(item, index) in tableDate" :key="index" :value="item.value">
          <td v-if="isShow('监测时间')">
            {{ parseTime(item.operate_time, "{y}-{m}-{d} {h}:{i}") }}
          </td>
          <td v-if="isShow('体温')">
            {{ item.temperature ? item.temperature : "" }}
          </td>
          <td v-if="isShow('血压')">
            {{
              item.systolic_blood_pressure ? item.systolic_blood_pressure : ""
            }}/{{
              item.diastolic_blood_pressure ? item.diastolic_blood_pressure : ""
            }}
          </td>

          <td v-if="isShow('脉搏')">
            {{ item.pulse_frequency ? item.pulse_frequency : "" }}
          </td>
          <td v-if="isShow('呼吸频率')">
            {{ item.breathing_rate ? item.breathing_rate : "" }}
          </td>
          <td>
            {{ item.venous_pressure ? item.venous_pressure : "" }}/{{
              item.arterial_pressure ? item.arterial_pressure : ""
            }}
          </td>
          <td v-if="isShow('血流量')">
            {{ item.blood_flow_volume ? item.blood_flow_volume : "" }}
          </td>
          <td v-if="isShow('跨膜压')">
            {{ item.transmembrane_pressure ? item.transmembrane_pressure : "" }}
          </td>
          <td v-if="isShow('超滤量')">
            {{ item.ultrafiltration_volume ? item.ultrafiltration_volume : "" }}
          </td>
          <td v-if="isShow('钠浓度')">
            {{ item.sodium_concentration ? item.sodium_concentration : "" }}
          </td>
          <td v-if="isShow('透析液温度')">
            {{ item.dialysate_temperature ? item.dialysate_temperature : "" }}
          </td>
          <td v-if="isShow('置换率')">
            {{ item.replacement_rate ? item.replacement_rate : "" }}
          </td>
          <td v-if="isShow('置换量')">
            {{ item.displacement_quantity ? item.displacement_quantity : "" }}
          </td>
          <th v-if="isShow('电导度')">
            {{ item.conductivity ? item.conductivity : "" }}
          </th>
          <th v-if="isShow('置换液流量')">
            {{
              item.displacement_flow_quantity
                ? item.displacement_flow_quantity
                : ""
            }}
          </th>
          <td v-if="isShow('病情变化')">{{ item.symptom }}</td>
          <td v-if="isShow('处理')">{{ item.dispose }}</td>
          <td v-if="isShow('结果')">{{ item.result }}</td>
        </tr>
      </table>

      <div class="NoData" v-show="tableDate.length == 0">
        <img
          style="margin-top: 50px; margin-bottom: 50px"
          src="@/assets/login/data.jpg"
          alt
        />
      </div>
    </div>
    <!-- <el-table :data="tableDate" border style="width: 100%" ref="form">
      <span v-if="isShow('监测时间')">
        <el-table-column fixed prop="date" label="时间" width="100" align="center">
          <template slot-scope="scope">{{parseTime(scope.row.operate_time, "{y}-{m}-{d} {h}:{i}")}}</template>
        </el-table-column>
      </span>
      <span v-if="isShow('体温')">
        <el-table-column prop="name" label="体温(℃)" width="80" align="center">
          <template slot-scope="scope">{{scope.row.temperature?scope.row.temperature:''}}</template>
        </el-table-column>
      </span>
      <span v-if="isShow('血压')">
        <el-table-column prop="province" label="血压(mmHg)" width="110" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.systolic_blood_pressure?scope.row.systolic_blood_pressure:''}}/{{scope.row.diastolic_blood_pressure?scope.row.diastolic_blood_pressure:''}}</template>
        </el-table-column>
      </span>
      <span v-if="isShow('脉搏')">
        <el-table-column prop="city" label="脉搏(次/分)" width="100" align="center">
          <template slot-scope="scope">{{scope.row.pulse_frequency?scope.row.pulse_frequency:''}}</template>
        </el-table-column>
      </span>
      <span v-if="isShow('呼吸频率')">
        <el-table-column prop="address" label="呼吸频率(次/分)" width="140" align="center">
          <template slot-scope="scope">{{scope.row.breathing_rate?scope.row.breathing_rate:''}}</template>
        </el-table-column>
      </span>
      <el-table-column prop="zip" label="静脉压/动脉压(mmHg)" width="100" align="center">
        <template
          slot-scope="scope"
        >{{scope.row.venous_pressure?scope.row.venous_pressure:''}}/{{scope.row.arterial_pressure?scope.row.arterial_pressure:''}}</template>
      </el-table-column>
      <span v-if="isShow('血流量')">
        <el-table-column prop="zip" label="血流量(ml/min)" width="150" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.blood_flow_volume?scope.row.blood_flow_volume:''}}</template>
        </el-table-column>
      </span>
      <span v-if="isShow('跨膜压')">
        <el-table-column prop="zip" label="跨膜压(mmHg)" width="130" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.transmembrane_pressure?scope.row.transmembrane_pressure:''}}</template>
        </el-table-column>
      </span>
      <span v-if="isShow('超滤量')">
        <el-table-column prop="zip" label="超滤量(ml)" width="100" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.ultrafiltration_volume?scope.row.ultrafiltration_volume:''}}</template>
        </el-table-column>
      </span>

      <span v-if="isShow('钠浓度')">
        <el-table-column prop="zip" label="钠浓度(mmol/L)" width="100" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.sodium_concentration?scope.row.sodium_concentration:''}}</template>
        </el-table-column>
      </span>

      <span v-if="isShow('透析液温度')">
        <el-table-column prop="zip" label="透析液温度(℃)" width="100" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.dialysate_temperature?scope.row.dialysate_temperature:''}}</template>
        </el-table-column>
      </span>

      <span v-if="isShow('置换率')">
        <el-table-column prop="zip" label="置换率(L/h)" width="200" align="center">
          <template slot-scope="scope">{{scope.row.replacement_rate?scope.row.replacement_rate:''}}</template>
        </el-table-column>
      </span>

      <span v-if="isShow('置换量')">
        <el-table-column prop="zip" label="置换量(L)" width="200" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.displacement_quantity?scope.row.displacement_quantity:''}}</template>
        </el-table-column>
      </span>

      <span v-if="isShow('电导度')">
        <el-table-column prop="zip" label="电导度(mS/m)" width="200" align="center">
          <template slot-scope="scope">{{scope.row.conductivity?scope.row.conductivity:''}}</template>
        </el-table-column>
      </span>

      <span v-if="isShow('置换液流量')">
        <el-table-column prop="zip" label="置换液流量(ml/h)" width="200" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.displacement_flow_quantity?scope.row.displacement_flow_quantity:''}}</template>
        </el-table-column>
      </span>

      <span v-if="isShow('病情变化')">
        <el-table-column prop="zip" label="病情变化" width="200" align="center">
          <template slot-scope="scope">{{scope.row.symptom}}</template>
        </el-table-column>
      </span>

      <span v-if="isShow('处理')">
        <el-table-column prop="zip" label="处理" width="200" align="center">
          <template slot-scope="scope">{{scope.row.dispose}}</template>
        </el-table-column>
      </span>

      <span v-if="isShow('结果')">
        <el-table-column prop="zip" label="结果" width="200" align="center">
          <template slot-scope="scope">{{scope.row.result}}</template>
        </el-table-column>
      </span>
    </el-table>-->
  </div>
</template>

<script>
import { parseTime } from "@/utils";

export default {
  name: "statOrder",
  data() {
    return {
      title: "透析监测 ",
      template_id: 0,
      tableDate: []
    };
  },
  created() {
    this.template_id = this.$store.getters.user.template_info.template_id;
  },
  methods: {
    isShow(name) {
      var filedList = this.$store.getters.user.fileds;

      for (let i = 0; i < filedList.length; i++) {
        if (
          filedList[i].module == 4 &&
          filedList[i].filed_name_cn == name &&
          filedList[i].is_show == 1
        ) {
          return true;
        }
      }
      return false;
    },
    setRecords(records) {
      if (records == null) {
        records = [];
      }
      this.tableDate.splice(0, this.tableDate.length);
      this.tableDate.push(...records);
    },
    parseTime(time, layout) {
      return parseTime(time, layout);
    },
    addRecords(records) {
      this.tableDate.push(...records);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dialsisTable {
  width: 2400px;
}
.dm {
  /* 针对缺省样式 (必须的) */
  &::-webkit-scrollbar {
    width: 3px;
    height: 5px;
  }
  /* 滚动条的滑轨背景颜色 */
  &::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  }
  /* 滑块颜色 */
  &::-webkit-scrollbar-thumb {
    background: #d7dce2;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  }
  /*内层轨道的颜色*/
  &::-webkit-scrollbar-track-piece {
    background-color: #fff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  }
  /* 滑轨两头的监听按钮颜色 */
  &::-webkit-scrollbar-button {
    background-color: #eee;
    width: 0;
    height: 0;
  }
  /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
  &::-webkit-scrollbar-corner {
    background-color: #eee;
  }
}
</style>
<style lang="scss">
.el-table td {
  padding: 0;
}
.el-table th {
  padding: 6px 0;
}
</style>
