<template>
    <div class="page_patientDetail">
        <div class="patientDetailTitle">
            <i class="iconfont icon-zuojiantou jiantou"></i>
            <span class="titleName" @click="show = true">{{ type }}<van-icon name="arrow-down" class="arrow" /></span>
        </div>
        <div>
            <target-standard v-if="type == '患者指标达标统计详情'"></target-standard>
            <blood-pressure v-if="type == '患者血压达标统计详情'"></blood-pressure>
        </div>
        <div>
            <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
                <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="show = false"
                />
            </van-popup>
        </div>
    </div>
</template>

<script>
import targetStandard from './targetStandard'
import bloodPressure from './bloodPressure'
export default {
  components:{
      targetStandard,
      bloodPressure
  },
  data(){
      return{
          show:false,
          columns:['患者指标达标统计详情','患者血压达标统计详情'],
          type:'患者指标达标统计详情'
      }
  },
  methods:{
    onConfirm(value){
        this.type = value
        this.show = false
    }  
  }
}
</script>



<style lang="scss" scoped>
.page_patientDetail {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  .patientDetailTitle {
    background: #fff;
    padding: 0 1.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
  }
  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 3.5rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    .arrow {
      margin-left: 0.375rem;
    }
  }
  .van-cell {
    font-size: 1rem;
  }
}
</style>
