<template>
  <div>
    <div class="nav">
      <ul style="width: 30%">
        <li  v-for="(item,i) in ['基本信息','检验检查','医嘱']" :key="i" :class="index == i? 'active':'' "  @click="ClickTab(i,item)" >{{item}}</li>
      </ul>
    </div>

    <div class="tab-content">
      <records-tab  v-show="index==0"  ></records-tab>
      <check-tab v-show="index==1" ref="item"></check-tab>
      <advice-table v-show="index==2"></advice-table>
    </div>
  </div>
</template>

<script>
import { GetInspection } from "@/api/check";
import RecordsTab from "./RecordsTab";
import AdviceTable from "../dialysis/AdviceTable";
import CheckTab from "../dialysis/CheckTab";

export default {
  name: "CaseHistory",
  created() {
    this.patient = this.$route.query.patient_id;
    this.GetList();
  },
  data() {
    return {
      index: 0,
      inspectionDate: [],
      patient: 0
    };
  },

  components: {
    CheckTab,
    AdviceTable,
    RecordsTab
  },
  methods: {
    ClickTab: function(tabIndex, row) {
      this.index = tabIndex;
      if (this.index == 1) {
        this.$refs.item.GetList(row.project_id, row);
      }
    },
    GetList: function() {
      let params = {
        patient: this.patient
      };
      GetInspection(params).then(response => {
        this.inspectionDate = [];
        if (response.data.state == 1) {
          this.inspectionDate = response.data.data.reference;
          this.$refs.item.GetList(1, this.inspectionDate[0]);
        }
      });
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.nav {
  border-bottom: 1px #e5e5e5 solid;
    position: fixed;
  top: 63px;
  right: 0;
  z-index: 66;
  left: 1.58rem;
  background: #fff;
    background: #fff;
  ul {
    width: 60%;
    margin: 0 auto;
    @include box-sizing;
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    li {
      font-size: 0.32rem;
      float: left;
      color: $pgh-color;
      padding: 0.3rem 0;
      cursor: pointer;
    }
    .active {
      position: relative;
      &::before {
        width: 100%;
        height: 2px;
        color: $main-color;
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        background: $main-color;
      }
    }
  }
}
</style>

