<template>
  <div class="container">
    <div v-if="latestCase.id" style="position:absolute;width:100%;">
      <div class="bgcolor">
        <div class="docinfo">
          <img class="docavatar" src="../assets/images/doch1.jpg" width="60rem" height="60rem" />
          <p class="docname">{{patinfo.name}} 您好!</p>
        </div>
      </div>
      <!-- <div class="bgimg"></div> -->
      <div class="content">
        <div class="injectRecord">
          <div class="formTitle">体内FVIII活性水平实时预报</div>
          <div class="lrcontainer">
            <div class="lritem left">
              <div class="personRatio">

              </div>
            </div>
            <div class="lritem right">
              <p style="margin:5px 0px;color:red;font-weight:bold;font-size:1.5rem">FVIII浓度：{{latestCase.FVIII}}</p>
              <mt-cell title="参考方案"></mt-cell>
              <mt-cell :title="'1.产品:'+latestCase.mpro"></mt-cell>
              <mt-cell :title="'2.剂量:'+latestCase.zsjl"></mt-cell>
              <mt-cell :title="'3.频次:'+latestCase.mfreq"></mt-cell>
              <mt-cell title="本结果仅供参考,"></mt-cell>
              <mt-cell title="具体治疗方案请遵医嘱执行"></mt-cell>
            </div>
          </div>
          <div class="footer">
            <div class="jbbtn" @click="goPage('/patclockin')">注射打卡</div>
            <div class="jbbtn" @click="goPage('/patinjectionlist')">注射记录</div>
            <div class="jbbtn" @click="goPage('/procaselist')">查看PK曲线</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 未查询到病例信息 -->
    <div v-else>
        <div class="content">
          <div class="bgimg">
            <div class="docinfo">
              <img class="docavatar" src="../assets/images/doch1.jpg" width="60rem" height="60rem" />
              <p class="docname">{{patinfo.name}} 您好!</p>
            </div>
            <div style="margin:16.8rem auto;width:50%;font-size:1.4rem;margin-top:16.8rem">
                未查询到您的信息请等待主治医生进行信息录入
              </div>
          </div>
          
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Cell
  } from 'mint-ui'
  export default {
    name: 'Index',
    components: {
      Cell
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        inflag: 0,
        patinfo: {},
        latestCase: {}
      }
    },
    methods: {
      goPage(path) {
        this.$router.push(path)
      },
      getData() {
        this.$api.getPatientLatestCase().then(res => {
          if (!res.data.code) {
            this.latestCase = res.data.data
          }
        }),
        this.$api.getAccountInfo().then(res => {
          if (!res.data.code) {
            this.patinfo = res.data.data
          }
        })
      }
    },
    created() {
      this.getData()
    }
  }

</script>

<style scoped lang="scss">
  .container {
    .content {
      height: 100%;
      margin-top:0px;
    }

    height: 100%;
    background: #fff;

    .bgcolor {
      width: 100%;
      height: 11rem;
      position: absolute;
      background: #016AFA;
    }

    .bgimg {
      width: 100%;
      height: 22.8rem;
      // border:1px solid red;
      /* top: 10rem; */
      position: absolute;
      /* z-index:-1; */
      background-image: url("../assets/images/infobg.png");
      background-size: 100% 100%;
    }

    .docinfo {
      margin-top: 4rem;

      .docavatar {
        border-radius: 60rem;
      }

      .docname {
        color: #fff;
        margin: 0.2rem;
        font-size: 1.2rem;
      }

      position: relative;
      z-index:3;
    }

    .injectRecord {
      margin-top: 12.5rem;
    }

    .formTitle {
      height: 1rem;
      line-height: 1rem;
      color: #2882F4;
      padding-bottom: 0.5rem;
      font-weight: bold;
      font-size: 1.2rem;
      margin-top: 9rem;
    }

    .lrcontainer {
      display: flex;
      width: 80%;
      margin: auto;
      margin-top: 10px;

      .lritem {
        justify-content: space-between;
        height: 15rem;

        .left {
          width: 40%;
        }

        .personRatio {
          height: 15rem;
          width: 4.2rem;
          margin: auto;
          background-image: url("../assets/images/personbg.png");
          background-size: 100% 100%;
        }

        .mint-cell {
          min-height: 2.0rem;
        }
      }
    }

    /deep/ .right .mint-cell .mint-cell-title {
      width: 70%;
      text-align: left;
    }

    /deep/ .right .mint-cell-wrapper {
      padding: 0px 20px;
      font-size: 1rem;
      background-size: 0px 0px;
    }

    .footer {
      margin-bottom: 20px;
    }
  }

</style>
