<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 class="tuli">
            <p style="color:#6594D5;">PK曲线</p>
        </div>
      </div>
      <div class="PKLineForm baseInfo">
        <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 class="rowfont">方案时间时间:{{caseInfo.ctime}}</div>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="goPage(-1)">上一页</div>
        <div class="jbbtn" @click="goPage('/patindex')">返回</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: [],
            axisLabel: {
            //x轴文字的配置
            show: true,
            interval: 0,//使x轴文字显示全
            formatter: function(params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 10; //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            }
           },
           
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              // formatter: '{value}.00'
            }
          }],
          series: [{
            name: '最低气温',
            type: 'line',
            data: []
          }]
        }
      }
    },
    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.getCxLineData({
          id: id
        }).then(res => {
          this.pklinedata = res.data.data
          this.pklineOption.xAxis[0].data = res.data.data.cxline_x
          this.pklineOption.series[0].data = res.data.data.cxline_y
        })
      }
    },
    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;
    position: relative;
    .tuli{
      position: absolute;
      right:40%;
      top:40px;
      p{
        margin:5px;
      }
    }
    .rowfont{
      font-size:1rem;
      text-align:left;
      padding-left:10px;
      line-height: 2rem;
      height: 2rem;
    }
    .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>
