<template>
  <div class="fixedTop">
    <div class="nav">
      <ul style="width: 90%">
        <li  v-for="(item,i) in inspectionDate" :key="i" :class="index == i? 'active':'' "  @click="ClickTab(i,item)" >{{item.project_name}}</li>
      </ul>
    </div>

    <div class="tab-content">
        <inspection-item-table ref="item"></inspection-item-table>
    </div>
  </div>
</template>

<script>
import { GetInspection } from "@/api/check";
import InspectionItemTable from "./InspectionItemTable";

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

  components: {
    InspectionItemTable
  },
  methods: {
    ClickTab: function(tabIndex, row) {
      this.index = tabIndex;
      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;
    background: #fff;
     position: fixed;
    top: 116px;
    right: 0;
    z-index: 55;
    left: 1.58rem;
    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>

