<template>
  <div class="header">
    <div class="leftheader">
      <div class="time">
        <el-date-picker
          v-model="visitDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          end-placeholder="结束日期"
          style="width: 95%"
        >
        </el-date-picker>
      </div>
      <div class="list">
        <div
          class="item"
          v-for="(item, index) in categorylist"
          :key="item.id"
          @click="clickcategory(item, index)"
          :class="
            item.visitMethod == 'BE_IN_HOSPITAL' && index == categoryindex
              ? 'zyitem'
              : item.visitMethod == 'OUTPATIENT_SERVICE' &&
                index == categoryindex
              ? 'mzitem'
              : ''
          "
        >
          <div class="time">{{ item.visitDate }}</div>
          <div class="name">
            {{ item.visitName }}
          </div>
          <div class="text">
            <span>
              {{ item.visitDept }}
            </span>
            <span style="margin-left: 10px">
              {{ item.createBy }}
            </span>
          </div>
          <el-tag
            v-if="item.visitMethod == 'BE_IN_HOSPITAL'"
            class="type"
            size="mini"
            >住院</el-tag
          >
          <el-tag
            v-if="item.visitMethod == 'OUTPATIENT_SERVICE'"
            class="type"
            size="mini"
            type="success"
            >门诊</el-tag
          >
        </div>
      </div>
    </div>
    <div class="rightheader">
      <div
        class="toptitle"
        v-if="categoryItem && categoryItem.visitMethod == 'BE_IN_HOSPITAL'"
      >
        <div
          style="border-radius: 10px 0 0 10px"
          :class="recordindex == 0 ? 'zyclass' : ''"
          @click="clickrecord(0)"
        >
          入院记录
        </div>
        <div
          class="centerdiv"
          :class="recordindex == 1 ? 'zyclass' : ''"
          @click="clickrecord(1)"
        >
          出院记录
        </div>
        <div
          style="border-radius: 0 10px 10px 0"
          :class="recordindex == 2 ? 'zyclass' : ''"
          @click="clickrecord(2)"
        >
          手术记录
        </div>
      </div>
      <div
        class="toptitle"
        v-if="categoryItem && categoryItem.visitMethod == 'OUTPATIENT_SERVICE'"
      >
        <div
          style="border-radius: 10px"
          :class="recordindex == 3 ? 'mzclass' : ''"
          @click="clickrecord(3)"
        >
          门诊记录
        </div>
      </div>
      <div class="righttext" v-if="categoryItem">
        <div v-if="recordindex == 0">
          <p v-html="categoryItem.inHospitalInfo"></p>
        </div>
        <div v-if="recordindex == 1">
          <p v-html="categoryItem.outHospitalInfo"></p>
        </div>
        <div v-if="recordindex == 2">
          <p v-html="categoryItem.surgicalRecord"></p>
        </div>
        <div v-if="recordindex == 3">
          <p v-html="categoryItem.inHospitalInfo"></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getList,
  InRecord,
  OutRecord,
  OperationRecord
} from '@/api/manage/visitRecords'
export default {
  name: "visitRecords",
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //禁止选择今天以后的时间
        },
      },
      visitDate: [],
      //右侧标题选中
      recordindex: undefined,
      //左侧类型选中
      categoryindex: undefined,
      //左侧选中的item
      categoryItem: undefined,
      //左侧list
      categorylist: [],
      //右侧list
      recordlist: undefined,
      //query
      query: {
        patientId: undefined,
        //选择时间区间
        visitDateStart: "",
        visitDateEnd: "",
      },
    };
  },
  watch: {
    'visitDate': {
      handler(newValue, oldValue) {
        this.query.visitDateStart = newValue[0]
        this.query.visitDateEnd = newValue[1]
        this.getListinfo();
      },
      deep: true,
    },
  },
  created() {
    this.info();
  },
  methods: {
    //点击右侧三个记录
    clickrecord(index) {
      this.recordindex = index
    },
    //点击左侧item
    clickcategory(item, index) {
      this.categoryindex = index
      this.categoryItem = item
      if (item.visitMethod == 'BE_IN_HOSPITAL') {
        this.recordindex = 0
      } else if (item.visitMethod == 'OUTPATIENT_SERVICE') {
        this.recordindex = 3
      }
    },
    //左侧list
    getListinfo() {
      getList(this.query).then(res => {
        if (res.data.length > 0) {
          this.categorylist = res.data
          this.clickcategory(res.data[0], 0)
        }
      })
    },
    //info
    info() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      this.query.visitDateStart = this.haflYear();
      this.visitDate = [this.haflYear(), year + seperator1 + month + seperator1 + strDate]
      this.query.visitDateEnd = year + seperator1 + month + seperator1 + strDate
      this.query.patientId = this.$route.query.patientId
      this.getListinfo();
    },
    haflYear() {
      // 先获取当前时间
      var curDate = (new Date()).getTime()
      // 将半年的时间单位换算成毫秒
      var halfYear = 365 / 2 * 24 * 3600 * 1000
      // 半年前的时间（毫秒单位）
      var pastResult = curDate - halfYear
      // 日期函数，定义起点为半年前
      var pastDate = new Date(pastResult)
      var pastYear = pastDate.getFullYear()
      var pastMonth = pastDate.getMonth() + 1
      var pastDay = pastDate.getDate()
      if (pastMonth >= 1 && pastMonth <= 9) {
        pastMonth = '0' + pastMonth
      }
      if (pastDay >= 0 && pastDay <= 9) {
        pastDay = '0' + pastDay
      }
      var endDate = pastYear + '-' + pastMonth + '-' + pastDay
      return endDate
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  height: calc(100vh - 84px);

  background-color: #fff !important;
  padding: 0 !important;
  display: flex;

  .rightheader {
    width: 75%;
    padding-top: 20px;
    border-left: 3px solid #dfe4ed;

    .righttext {
      width: 100%;
      padding-left: 20px;
      // height: 450px;
      overflow: auto;
      // 隐藏表头的滚动条
      overflow-x: hidden !important;
    }

    .toptitle {
      display: flex;
      margin-left: 20px;

      .zyclass {
        color: #1890ff !important;
        border: 2px solid #1890ff !important;
      }

      .mzclass {
        color: #009982 !important;
        border: 2px solid #009982 !important;
      }

      div {
        width: 80px;
        font-size: 14px;
        line-height: 36px;
        text-align: center;
        height: 36px;
        border: 1.5px solid #cccccc;
      }

      .centerdiv {
        border-left: none;
        border-right: none;
      }
    }
  }

  .leftheader {
    height: calc(100vh - 352px);
    margin-top: 20px;
    width: 25%;
    .list {
      height: calc(100vh - 352px);

      margin-top: 20px;
      // height: 450px;
      overflow: auto;
      // 隐藏表头的滚动条
      overflow-x: hidden !important;
      width: 96%;

      .zyitem {
        background-color: #d2e9fc;
        border-left: 2px solid #1890ff !important;
        border-bottom: 1px solid #fff !important;
      }

      .mzitem {
        background-color: #ebf7f5;
        border-left: 2px solid #009982 !important;
        border-bottom: 1px solid #fff !important;
      }

      .item {
        height: 120px;
        padding: 25px 10px;
        position: relative;
        border-left: 2px solid #fff;
        border-bottom: 1px solid #e7e7e7;

        .type {
          position: absolute;
          right: 10px;
          top: 20px;
          font-size: 12px;
        }

        .text {
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: #999999;
        }

        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          height: 30px;
          line-height: 30px;
          font-size: 18px;
          font-weight: 600;
        }

        .time {
          line-height: 20px;
          height: 20px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
