<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">预防治疗方案的PK曲线</div>
      <div class="PKLineForm">
        <v-chart :option="pklineOption" style="height: 250px"></v-chart>
      </div>
      <div class="PKLineForm baseInfo">
        <mt-cell :title="'活性大于5%的时间:'+pklinedata.gt5_time" :value="'峰活性:'+caseInfo.yqfzhx+'%'"></mt-cell>
        <mt-cell :title="'活性大于3%的时间:'+pklinedata.gt3_time" :value="'谷活性(IU/kg):'+caseInfo.yfghx+'%'"></mt-cell>
        <mt-cell :title="'活性大于1%的时间:'+pklinedata.gt1_time"></mt-cell>
        <hr>
        <mt-cell :title="'姓名:'+caseInfo.name" :value="'病例ID:'+caseInfo.code"></mt-cell>
        <mt-cell :title="'年龄:'+caseInfo.age" :value="'性别:'+caseInfo.sex"></mt-cell>
        <mt-cell :title="'使用产品:'+caseInfo.mpro" :value="'注射剂量:'+caseInfo.zsjl"></mt-cell>
        <mt-cell :title="'注射频次:'+caseInfo.mfreq"></mt-cell>
        <div style="font-size:12px;text-align:left;padding-left:10px;">方案时间时间:{{caseInfo.ctime}}</div>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="goPage(-1)">上一页</div>
        <div class="jbbtn" @click="goPage('/')">返回</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Field,
    Cell
  } from 'mint-ui'
  // import ECharts from 'vue-echarts'
  export default {
    name: 'Index',
    components: {
      Field,
      Cell
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        caseInfo: {},
        pklinedata:{},
        pklineOption: {
          title: {},
          calculable: true,
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: []
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              // formatter: '{value}.00'
            }
          }],
          series: [{
            name: '最低气温',
            type: 'line',
            data: [],
            markLine: {
              data: [{
                  name: '平均值',
                  yAxis: 0.01
                },
                {
                  name: '平均值',
                  yAxis: 0.03
                },
                {
                  name: '平均值',
                  yAxis: 0.05
                }
              ]
            }
          }]
        }
      }
    },
    methods: {
      goPage(path) {
        if (path === -1) {
          this.$router.go(-1)
        }
        this.$router.push(path)
      },
      getData() {
        let id = this.$route.query.id
        this.$api.getPatientCaseInfo({
          id: id
        }).then(res => {
          if (!res.data.code) {
            this.caseInfo = res.data.data
          }
        })
        // pkline
        this.$api.getPKLineData({
          id: id
        }).then(res => {
          this.pklinedata = res.data.data
          this.pklineOption.xAxis[0].data = res.data.data.pk_xdata
          this.pklineOption.series[0].data = res.data.data.pk_ydata
        })
      }
    },
    created() {
      this.getData()
    }
  }

</script>

<style scoped lang="scss">
  .footer {
    display: flex;
  }

  .PKLineForm {
    width: 84%;
    margin: auto;
    margin-top: 1rem;
    background: #fff;
    padding: 1rem;
    border-radius: 5px;

    .formTitle {
      height: 1rem;
      line-height: 1rem;
      text-align: left;
      color: #2882F4;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #2882F4;
      font-weight: bold;
    }

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

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

    /deep/ .mint-cell .mint-cell-value {
      width: 40%;
      text-align: right;
    }

    /deep/ .mint-cell .mint-cell-wrapper {
      font-size: 14px;
      background-image: none;
    }
  }

  .container {
    height: 100%;
  }

  .jbbtn {
    width: 42%;
  }

</style>
