<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">方案列表</div>
      <div class="loginForm baseInfo">
        <div v-for="(item,index) in list">
          <mt-cell :title="'使用产品:'+item.mpro" :value="'注射剂量:'+item.zsjl"></mt-cell>
          <div style="font-size:12px;text-align:left;padding-left:10px;">
            方案时间:{{item.ctime}}
            <mt-button type="primary" size="small" @click="goPage(item.id)">详情</mt-button>
          </div>
          <hr>
        </div>
      </div>
      <div class="footer">
        <div class="preBtn">确定</div>
        <div class="returnBtn">查看注射记录</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Field,
    Picker,
    Search,
    Button
  } from 'mint-ui'

  export default {
    name: 'Index',
    components: {
      Field,
      Picker,
      Search,
      Button
    },
    data() {
      return {
        form: {},
        list: []
      }
    },
    methods: {
      goPage(id) {
        this.$router.push({'path':'/diagcalcshow',query:{id:id}})
      },
      getData() {
        let id = this.$route.query.id
        this.$api.getPatientCaseList().then(res => {
          if (!res.data.code) {
            this.list = res.data.data.list
          }
        })
      }
    },
    created() {
      this.getData()
    }
  }

</script>

<style scoped lang="scss">
  hr {
    margin: 1rem 0;
  }

  .bgimg {
    width: 100%;
    height: 10rem;
    top: -5vh;
    position: absolute;
    background-image: url("../assets/images/commonbg.png");
    background-size: 100% 100%;
    z-index: 2;
  }

  .docSubmitBtn {
    width: 50%;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 5px;
    margin: auto;
    margin-top: 4rem;
    background-image: linear-gradient(to right, #23E0FD, #0173F0);
    font-weight: bold;
    color: white;
  }

  .searchinput {
    width: 80%;
    margin: auto;

    .mint-search {
      height: 100%;
      margin-top: 1rem;
    }
  }

  .returnBtn {
    width: 40%;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 5px;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-image: linear-gradient(to right, #23E0FD, #0173F0);
    font-weight: bold;
    color: white;
  }

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

    .mint-button--small {
      height: 1.2rem;
      position: absolute;
      left: 78%;
    }

    .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: 12px;
      background-image: none;
    }
  }

  .footer {
    display: flex;

    .preBtn {
      width: 42%;
      height: 3rem;
      line-height: 3rem;
      border-radius: 5px;
      margin: auto;
      margin-top: 2rem;
      margin-bottom: 2rem;
      background-image: linear-gradient(to right, #23E0FD, #0173F0);
      font-weight: bold;
      color: white;
      font-size: 1.4rem;
    }

    .returnBtn {
      width: 42%;
      height: 3rem;
      line-height: 3rem;
      border-radius: 5px;
      margin: auto;
      margin-top: 2rem;
      margin-bottom: 2rem;
      background-image: linear-gradient(to right, #23E0FD, #0173F0);
      font-weight: bold;
      color: white;
      font-size: 1.4rem;
    }
  }

</style>
