<template>
  <div class="con">
    <el-row :gutter="24" class="info">
      <el-col :span="4">姓名：{{ tableData.name }}</el-col>
      <el-col :span="4">性别：{{ tableData.sex }}</el-col>
      <el-col :span="4">年龄：{{ tableData.age }}</el-col>
      <el-col :span="4">科别：{{ tableData.department }}</el-col>
      <el-col :span="4">病床：{{ tableData.bed }}</el-col>
      <el-col :span="4">住院号：{{ tableData.hospitalized }}</el-col>
    </el-row>
    <table
      border="0"
      cellpadding="0"
      cellspacing="0"
      class="noRowspan"
      width="100%"
    >
      <tr>
        <td>日期</td>
        <td v-for="(item, i) in tableData.date" :key="i" class="item">
          {{ item }}
        </td>
      </tr>
      <tr>
        <td>患病日数</td>
        <td v-for="(item, i) in tableData.daysAfterSick" :key="i" class="item">
          {{ item }}
        </td>
      </tr>
      <tr v-if="httpType == 'http' && urlData.PatroInfoType == '6'">
        <td>术后日数</td>
        <td
          v-for="(item, i) in tableData.daysAfterOperation"
          :key="i"
          class="item"
        >
          {{ item }}
        </td>
      </tr>
      <tr>
        <td class="date">每日时间</td>
        <td v-for="item in days" :key="item" class="item date">
          <TimeCon :itemCon="TimeSplit" class="item"></TimeCon>
        </td>
      </tr>
    </table>
    <div class="chart" style="display: flex">
      <div class="empty">
        <span v-for="(item, i) in ChartConfig" :key="i" class="chartItem">
          {{ item.name }}
          <span
            v-for="index in 13"
            v-if="index == 0"
            :key="index"
            :style="`bottom:-5px`"
            class="scale"
          >{{ item.cellMin }}</span
          >
          <span
            v-for="index in 13"
            v-if="index != 13"
            :key="index"
            :style="`bottom:${YHeight * index - 7}px`"
            class="scale"
          >{{ item.cellMin + index * item.displaySplit }}</span
          >
        </span>
      </div>
      <Render
        :TimeArr="TimeSplit"
        :days="days"
        class="zrender"
        @yHeight="getYHeight"
      ></Render>
    </div>
    <table
      border="0"
      cellpadding="0"
      cellspacing="0"
      class="noRowspan print"
      width="100%"
    >
      <tr>
        <td>血压(mmhg)</td>
        <td
          v-for="(v, index) in tableData.bloodPressure"
          :key="index"
          class="item"
        >
          <SeparateTd :itemCon="v" class="item"></SeparateTd>
        </td>
      </tr>
      <tr>
        <td>大便次数</td>
        <td v-for="(item, i) in tableData.shitTimes" :key="i" class="item">
          {{ item }}
        </td>
      </tr>
      <tr>
        <td>身高(cm)</td>
        <td v-for="(item, i) in tableData.height" :key="i" class="item">
          {{ item }}
        </td>
      </tr>
      <tr>
        <td>体重(kg)</td>
        <td v-for="(item, i) in tableData.weight" :key="i" class="item">
          {{ item }}
        </td>
      </tr>
      <tr>
        <td>皮试结果</td>
        <td v-for="(item, i) in tableData.skinTestRst" :key="i" class="item">
          {{ item }}
        </td>
      </tr>
      <div v-for="(item, i) in tableData.StatisticsSummary" :key="i">
        <tr v-for="(trItem, trI) in item" :key="trI">
          <td>{{ trItem.Name }}</td>
          <td
            v-for="(itemData, index) in trItem.Data"
            :key="index"
            class="item"
          >
            {{ itemData }}
          </td>
        </tr>
      </div>
    </table>

    <table
      v-if="httpType == 'http' && urlData.PatroInfoType == '13' && isShow"
      border="0"
      cellpadding="0"
      cellspacing="0"
      class="yesRowspan print"
      width="100%"
    >
      <tr>
        <th rowspan="2">日期</th>
        <th rowspan="2">年龄</th>
        <th colspan="2">沐浴</th>
        <th colspan="4">脐带</th>
        <th colspan="3">眼</th>
        <th colspan="3">口腔</th>
        <th colspan="2">鼻</th>
        <th colspan="6">皮肤</th>
        <th colspan="3">头</th>
        <th colspan="2">大便</th>
        <th colspan="2">小便</th>
        <th rowspan="2">体重</th>
        <th rowspan="2">签名</th>
        <th rowspan="2">备注</th>
      </tr>
      <tr>
        <th>护理</th>
        <th>水浴</th>
        <th>正常</th>
        <th>出血</th>
        <th>发炎</th>
        <th>脱落</th>
        <th>正常</th>
        <th>红肿</th>
        <th>分泌</th>
        <th>正常</th>
        <th>红肿</th>
        <th>白点</th>
        <th>正常</th>
        <th>鼻塞</th>
        <th>正常</th>
        <th>干燥</th>
        <th>红斑</th>
        <th>黄疸</th>
        <th>脓泡</th>
        <th>红臂</th>
        <th>正常</th>
        <th>产瘤</th>
        <th>血肿</th>
        <th>正常</th>
        <th>绿便</th>
        <th>正常</th>
        <th>无</th>
      </tr>
      <tr v-for="(item, i) in yesRowspanTable" :key="i">
        <td>{{ item['RecordTime'] }}</td>
        <td>{{ item['Age'] }}</td>
        <td>{{ item['BathNurse'] }}</td>
        <td>{{ item['BathingBath'] }}</td>
        <td>{{ item['UmbilicalCordzc'] }}</td>
        <td>{{ item['UmbilicalCordcx'] }}</td>
        <td>{{ item['UmbilicalCordfy'] }}</td>
        <td>{{ item['UmbilicalCordtl'] }}</td>
        <td>{{ item['Eyezc'] }}</td>
        <td>{{ item['Eyehz'] }}</td>
        <td>{{ item['Eyefm'] }}</td>
        <td>{{ item['OralCavityzc'] }}</td>
        <td>{{ item['OralCavityhz'] }}</td>
        <td>{{ item['OralCavitybd'] }}</td>
        <td>{{ item['Nosezc'] }}</td>
        <td>{{ item['Nosebs'] }}</td>
        <td>{{ item['Skinzc'] }}</td>
        <td>{{ item['Skingz'] }}</td>
        <td>{{ item['SkinErythema'] }}</td>
        <td>{{ item['Skinhd'] }}</td>
        <td>{{ item['Skinnp'] }}</td>
        <td>{{ item['Skinhb'] }}</td>
        <td>{{ item['Headzc'] }}</td>
        <td>{{ item['Headcl'] }}</td>
        <td>{{ item['Headxz'] }}</td>
        <td>{{ item['Shitzc'] }}</td>
        <td>{{ item['Shitlb'] }}</td>
        <td>{{ item['Urinezc'] }}</td>
        <td>{{ item['Urinew'] }}</td>
        <td>{{ item['Weight'] }}</td>
        <td>{{ item['Autograph'] }}</td>
        <td>{{ item['Notes'] }}</td>
      </tr>
    </table>

    <div class="pageNum">页码:{{ tableData.pageNumber }}</div>
  </div>
</template>
<script>
import TimeCon from '@/components/Draw/TimeCon'
import Render from '@/components/Draw/Render'
import SeparateTd from '@/components/Draw/SeparateTd'
import { tableData, configData } from '@/mock/index'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import { getFullTime } from '@/utils/draw'

export default {
  data() {
    return {
      tableData: [],
      configData: [],
      TimeSplit: [],
      ChartConfig: [],
      YHeight: 0,
      days: 0, //天数
      isShow: false, //是否显示特定表格
      yesRowspanTable: [] //特定表格数据
    }
  },
  mounted() {
    if (this.httpType == 'http') {
      this.$axios({
        method: 'post',
        url: `${this.configUrl}/api/PatrolInfo/ChartSummary`,
        data: {
          PatientCode: this.urlData['cstId'],
          beginDate: this.urlData['begin'],
          endDate: this.urlData['end'],
          PatroInfoType: this.urlData['PatroInfoType']
        }
      }).then((res) => {
        res = res.data.Data
        this.tableData = res
        this.days = res.date.length
      })
      this.$axios({
        method: 'get',
        url: `${this.configUrl}/api/PatrolInfo/ChartAxaisConfig`,
        data: {}
      }).then((res) => {
        res = res.data.Data
        this.TimeSplit = res.TimeSplit
        this.ChartConfig = res.yAxisData
      })

      if (this.urlData['OrgCode'] == '0221') {
        this.isShow = true
        this.$axios({
          method: 'get',
          url: `${this.configUrl}/api/PatrolInfoInNewborn/GetPatrolInfoInNewborn?patientCode=${this.urlData['cstId']}&orgCode=${this.urlData['OrgCode']}`,
          data: {}
        }).then((res) => {
          res = res.data.Data
          this.yesRowspanTable = res
          this.yesRowspanTable.forEach((item) => {
            item.RecordTime = getFullTime(item.RecordTime)
          })
        })
      }
    } else {
      this.days = tableData.date.length
      this.TimeSplit = configData.TimeSplit
      this.tableData = tableData
      this.ChartConfig = configData.yAxisData
    }
  },
  methods: {
    getYHeight(msg) {
      this.YHeight = msg
    }
  },
  components: {
    TimeCon,
    Render,
    SeparateTd
  },
  computed: {
    ...mapState({
      configUrl: (state) => state.configUrl,
      httpType: (state) => state.httpType,
      urlData: (state) => state.data
    })
  },
  created() {
  }
}
</script>
<style lang="less" scoped>
.con {
  padding-bottom: 35px;
  position: relative;
  width: 1270px;
  max-width: 1270px;
  height: 100%;

  .info {
    font-size: 13px;
  }

  .chart {
    width: 100%;
    border-right: 1px solid #000;

    .empty {
      width: 95px;
      height: 1250px;
      display: flex;

      &:last-child {
        clear: both;
      }
    }

    #main {
      flex: 1;
    }
  }

  .el-row {
    margin: 5px 0 !important;
  }

  .flex {
    display: flex;
    justify-content: space-between;
  }

  .zrender {
    width: 100%;
  }

  .empty {
    display: flex;
  }

  .noRowspan {
    font-size: 14px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;

    tr {
      display: flex;
      width: 1270px;
      // width: 100%;
      td {
        width: 95px;
        padding: 5px 0;
        text-align: center;
        border-left: 1px solid #000;
        border-top: 1px solid #000;

        &:last-child {
          border-right: 0;
        }
      }

      .item {
        flex: 1;
      }

      .date {
        padding: 0;
        font-size: 10px;

        &:first-child {
          font-size: 14px;
        }
      }
    }

    &:last-child {
      margin: 0 0 10px 0;
    }
  }

  .yesRowspan {
    font-size: 12px;
    padding: 0;
    margin-bottom: 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;

    tr {
      width: 1270px;

      td {
        text-align: center;
        word-break: break-all;
        border-left: 1px solid #000;
        border-top: 1px solid #000;
      }

      th {
        text-align: center;
        border-left: 1px solid #000;
        border-top: 1px solid #000;
      }
    }
  }

  .chartItem {
    border-right: 1px solid;
    flex: 1;
    text-align: center;
    font-size: 13px;
    position: relative;

    &:first-child {
      border-left: 1px solid;
    }

    &:last-child {
      border-right: 0;
    }

    .scale {
      position: absolute;
      bottom: -5px;
      left: 2px;
      z-index: 1000;
    }
  }

  .pageNum {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
</style>
