<template>
  <div class="page_patientDetail">
    <van-tree-select height="100%" :items="items"  :main-active-index.sync="activeIndex" @click-nav="click">
      <template slot="content">
        <!-- 血透管理 -->
        <div v-if="activeIndex === 0" class="common">
          <div class="marginTop">
            <div class="title">血透管理</div>
            <div class="function">
              <ul class="tablist">
                <li class="tabOne" @click="toDoctorAdvice()">
                  <img src="../../assets/images/i8.png" alt />
                  <span>医嘱管理</span>
                </li>
                <li class="tabOne" @click="toCourseManagement()">
                  <img src="../../assets/images/i10.png" alt />
                  <span>病程管理</span>
                </li>
                <li class="tabOne" @click="toSaveRecord()">
                  <img src="../../assets/images/i4.png" alt />
                  <span>抢救记录</span>
                </li>
                <li class="tabOne" @click="toCheck()">
                  <img src="../../assets/images/i1.png" alt />
                  <span>检验检查</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i7.png" alt />
                  <span>血管通路</span>
                </li>
                <li class="tabOne" @click="toLongDialysis()">
                  <img src="../../assets/images/i9.png" alt />
                  <span>长期透析处方</span>
                </li>
                <li class="tabOne" @click="toDialysisRecord()">
                  <img src="../../assets/images/i5.png" alt />
                  <span>透析记录</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i2.png" alt />
                  <span>耗材使用</span>
                </li>
                <li class="tabOne" @click="toScheduleInformation()">
                  <img src="../../assets/images/i3.png" alt />
                  <span>排班信息</span>
                </li>
                <li class="tabOne" @click="toMissionInformation()">
                  <img src="../../assets/images/i6.png" alt />
                  <span>宣教信息</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
       
      <!-- 慢病管理 -->
        <div v-if="activeIndex === 1">
          <div class="marginTop">
            <div class="title">慢病管理</div>
            <div class="function">
              <ul class="tablist">
                <li class="tabOne">
                  <img src="../../assets/images/i8.png" alt />
                  <span>医嘱管理</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i10.png" alt />
                  <span>病程管理</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i4.png" alt />
                  <span>抢救记录</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i1.png" alt />
                  <span>检验检查</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i7.png" alt />
                  <span>血管通路</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i9.png" alt />
                  <span>长期透析处方</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i5.png" alt />
                  <span>透析记录</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i2.png" alt />
                  <span>耗材使用</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i3.png" alt />
                  <span>排班信息</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i6.png" alt />
                  <span>宣教信息</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
  
        <!-- 会员管理 -->
          <div v-if="activeIndex === 2">
          <div class="marginTop">
            <div class="title">会员管理</div>
            <div class="function">
              <ul class="tablist">
                <li class="tabOne">
                  <img src="../../assets/images/i8.png" alt />
                  <span>医嘱管理</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i10.png" alt />
                  <span>病程管理</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i4.png" alt />
                  <span>抢救记录</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i1.png" alt />
                  <span>检验检查</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i7.png" alt />
                  <span>血管通路</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i9.png" alt />
                  <span>长期透析处方</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i5.png" alt />
                  <span>透析记录</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i2.png" alt />
                  <span>耗材使用</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i3.png" alt />
                  <span>排班信息</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i6.png" alt />
                  <span>宣教信息</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
         
         <!-- 电商管理 -->
         <div v-if="activeIndex === 3">
          <div class="marginTop">
            <div class="title">电商管理</div>
            <div class="function">
              <ul class="tablist">
                <li class="tabOne">
                  <img src="../../assets/images/i8.png" alt />
                  <span>医嘱管理</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i10.png" alt />
                  <span>病程管理</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i4.png" alt />
                  <span>抢救记录</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i1.png" alt />
                  <span>检验检查</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i7.png" alt />
                  <span>血管通路</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i9.png" alt />
                  <span>长期透析处方</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i5.png" alt />
                  <span>透析记录</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i2.png" alt />
                  <span>耗材使用</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i3.png" alt />
                  <span>排班信息</span>
                </li>
                <li class="tabOne">
                  <img src="../../assets/images/i6.png" alt />
                  <span>宣教信息</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>


<script>
import { getPatientType } from '@/api/patient/patient'
export default {
  data() {
    return {
      activeIndex: 0,
      // items: [
      //   { text: '血透管理' },
      //   { text: '慢病管理' },
      //   { text: '会员管理' },
      //   { text: '电商管理' }
      // ]
      items: [{ text: '' }]
    }
  },
  methods: {
    // 医嘱管理
    toDoctorAdvice() {
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      console.log('id是什么', patientid)
      this.$router.push('/doctoradvice?patientid=' + patientid + '&orgid=' + orgid)
    },
    // 病程管理
    toCourseManagement() {
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      this.$router.push('/coursemanagement?patientid=' + patientid + '&orgid=' + orgid)
    },
    // 抢救记录
    toSaveRecord() {
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      this.$router.push('/saverecord?patientid=' + patientid + '&orgid=' + orgid)
    },
    // 检验检查
    toCheck() {
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      this.$router.push('/check?patientid=' + patientid + '&orgid=' + orgid)
    },

    // 长期处方
    toLongDialysis() {
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      this.$router.push('/longDialysis?patientid=' + patientid + '&orgid=' + orgid)
    },
    // 透析记录
    toDialysisRecord() {
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      this.$router.push('/dialysisrecord?patientid=' + patientid + '&orgid=' + orgid)
    },

    // 排班信息
    toScheduleInformation() {
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      this.$router.push('/scheduleInformation?patientid=' + patientid + '&orgid=' + orgid)
    },

    // 宣教信息
    toMissionInformation() {
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      this.$router.push('/missionInformation?patientid=' + patientid + '&orgid=' + orgid)
    },
    getPatientType(patientid, orgid) {
      getPatientType(patientid, orgid).then(response => {
        if (response.data.state === 1) {
          var patientType = response.data.data.patientType
          for (let index = 0; index < patientType.length; index++) {
            if (patientType[index].text === 1) {
              patientType[index].text = '血透管理'
            }
            if (patientType[index].text === 2) {
              patientType[index].text = '慢病管理'
            }
            if (patientType[index].text === 3) {
              patientType[index].text = '会员管理'
            }
          }
          this.items = patientType
          console.log('patienttype', patientType)
        }
      })
    },
    click(index) {
      this.activeIndex = index
      console.log(index)
    }
  },
  created() {
    var patientid = this.$route.query.patientid
    console.log('patientid', patientid)
    var orgid = this.$route.query.orgid
    console.log('orgid', orgid)
    this.getPatientType(patientid, orgid)
  }
}
</script>


<style lang="scss">
.page_patientDetail {
  overflow: hidden;
  height: 100%;
  .van-sidebar {
    height: 100%;
    background: #fff;
    padding-top: 2.0625rem;
  }
  .van-sidebar-item {
    background: #fff;
    // margin: 0.25rem 0;
  }
  .van-sidebar-item__text {
    width: 5.75rem;
    height: 2.25rem;
    line-height: 2.1875rem;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .van-sidebar-item--select {
    border-color: #fff;
    .van-sidebar-item__text {
      width: 5.75rem;
      height: 2.25rem;
      line-height: 2.1875rem;
      background: linear-gradient(
        90deg,
        rgba(75, 102, 234, 1),
        rgba(81, 119, 238, 1),
        rgba(129, 159, 246, 1)
      );
      border-radius: 30px;
      text-align: center;
      font-size: 0.875rem;
      color: rgba(255, 255, 255, 1);
      font-weight: normal;
    }
  }
  .common {
    margin-top: 1.4375rem;
  }
  .marginTop {
    margin-top: 2.125rem;
  }
  .title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    line-height: 15px;
    padding-left: 0.625rem;
  }
  .tablist {
    display: flex;
    flex-wrap: wrap;
    .tabOne {
      margin-top: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: 5.625rem;
      width: 33.3%;
      img {
        width: 3.875rem;
        height: 3.875rem;
      }
      span {
        font-size: 0.8125rem;
        color: rgba(60, 60, 60, 1);
      }
    }
  }
}
</style>
