<template>
  <div class="header">
    <div class="topheader">
      <div class="user">
        <img class="headsculpture" src="../../../assets/manage/touxiang.png" alt="" v-if="$route.query.sex == 'MALE'">
        <img class="headsculpture" src="../../../assets/manage/nvtouxiang.png" alt=""
          v-if="$route.query.sex == 'FEMALE'">
        <div class="name">
          {{ $route.query.patientName }}
        </div>
        <div class="gender">
          {{ $route.query.sex == 'MALE' ? '男' : $route.query.sex == 'FEMALE' ? '女' : '' }}
        </div>
        <div class="age">
          {{ $route.query.age }}
        </div>
        <div class="source">
          <div class="item" style="color:#00E06E;border-color:#00E06E"
            v-if="$route.query.patientSource == 'WE_CHAT_OFFICIAL_ACCOUNT'">
            <img src="../../../assets/manage/gzh.png" alt="" style="width:24px">
            <div>
              公众号
            </div>
          </div>
          <div class="item" style="color:#339DE5;border-color:#339DE5"
            v-if="$route.query.patientSource == 'WE_CHAT_APPLET'">
            <img src="../../../assets/manage/xcx.png" alt="">
            <div>
              小程序
            </div>
          </div>
          <div class="item" style="color:#F4881F;border-color:#F4881F"
            v-if="$route.query.patientSource == 'MANAGE_END'">
            <img src="../../../assets/manage/gld.png" alt="">
            <div>
              管理端
            </div>
          </div>
        </div>
      </div>
      <div class="information">
        <div class="top">
          <div>身份证号：{{ $route.query.cardNo }}</div>
          <div>患者电话：{{ $route.query.patientPhone }}</div>
          <div style="width: 50%;">出生日期：{{ $route.query.birthDate }}</div>
        </div>
        <div class="bottom">
          <div>注册时间：{{ $route.query.createTime }}</div>
          <div>家属电话：{{ $route.query.familyMemberPhone }}</div>
          <div style="width: 50%;">住址：{{ $route.query.address }}</div>
        </div>
      </div>
    </div>
    <div class="bottomheader">
      <el-tabs v-model="activeName">
        <el-tab-pane label="就诊记录" name="first">
          <visitRecords></visitRecords>
        </el-tab-pane>
        <el-tab-pane label="康复计划及记录" name="second">
          <RehabilitationPlanandRecords v-if="activeName == 'second'"></RehabilitationPlanandRecords>
        </el-tab-pane>
        <el-tab-pane label="健康宣教" name="third">
          <healthEducation v-if="activeName == 'third'"></healthEducation>
        </el-tab-pane>
        <el-tab-pane label="指标监测" name="fourth">
          <indicatorMonitoring v-if="activeName == 'fourth'"></indicatorMonitoring>
        </el-tab-pane>
        <el-tab-pane label="签约记录" name="five">
          <signingRecords v-if="activeName == 'five'"></signingRecords>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import visitRecords from '../components/visitRecords.vue';
import healthEducation from '../components/healthEducation.vue';
import indicatorMonitoring from '../components/indicatorMonitoring.vue';
import signingRecords from '../components/signingRecords.vue';
import RehabilitationPlanandRecords from '../components/RehabilitationPlanandRecords.vue';
export default {
  components: {
    //就诊记录
    visitRecords,
    //健康宣教
    healthEducation,
    //指标监测
    indicatorMonitoring,
    // 签约记录
    signingRecords,
    //康复计划
    RehabilitationPlanandRecords
  },
  name: "patientdetails",
  data() {
    return {
      activeName: 'first'
    };
  },
  created() {
  },
  methods: {
  }
};
</script>
<style lang="scss" scoped>
.header {
  background-color: #F1F3F5;
  padding-top: 10px;

  ::v-deep .el-tabs__header {
    margin: 0 !important;
  }

  .bottomheader {
    width: 99%;
    background-color: #fff;
    margin: 10px auto;
    padding: 10px 20px;
  }

  .topheader {
    width: 99%;
    background-color: #fff;
    margin: 0 auto;


    .information {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 10px 20px;
      height: 110px;

      .top,
      .bottom {
        color: #666666;
        width: 100%;
        display: flex;

        div {
          width: 25%;
        }
      }
    }

    .user {
      width: 100%;
      padding: 0 20px;
      display: flex;
      height: 80px;
      align-items: center;
      line-height: 80px;

      .source {
        display: flex;

        .item {
          line-height: 30px;
          font-size: 14px;
          margin-left: 20px;
          border: 1px solid #C7C7C7;
          width: 100px;
          border-radius: 5px;
          justify-content: center;
          height: 30px;
          display: flex;
          align-items: center;

          img {
            margin-right: 10px;
            width: 20px;
            height: 20px;
          }
        }
      }

      .name {
        font-size: 20px;
        padding-left: 12px;
      }

      .gender {
        padding-left: 10px;
      }

      .age {
        padding-left: 10px;
      }

      .headsculpture {
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>