<template>
  <view style="height: 100%">
    <custom-nav-bar color="black" left-text="患者管理" left-arrow />

    <image class="doctor-header" :src="recursionObj.icon"></image>

    <view class="patient" v-for="(item, index) in ObjectList" :key="index">
      <navigator hover-class="none" :url="item.url">
        <view class="flex flex-between flex-v-center">
          <view class="flex flex-v-center">
            <image class="patient-icon" src="/static/images/default-avatar.png"></image>
            <text class="patient-title">{{ item.title }}</text>
          </view>
          <view>
            <text class="patient-count" v-if="item.count">{{ item.count }}</text>
            <van-icon name="arrow" size="32rpx" color="#999" />
          </view>
        </view>
        <view class="slot"></view>
      </navigator>
    </view>
  </view>
</template>

<script>
  // const app = getApp();
  const List = [{
      icon: '',
      title: '我的患者',
      count: '',
      url: '/packages/my/pages/my-patient/my-patient'
    },
    {
      icon: '',
      title: '线上问诊',
      count: '',
      url: ''
    },
    {
      icon: '',
      title: '服务记录',
      count: '',
      url: ''
    }
  ];
  export default {
    components: {},
    data() {
      return {
        ObjectList: List,

        recursionObj: {
          icon: ''
        }
      };
    },
    onLoad(options) {},
    methods: {}
  };
</script>
<style lang="less">
  .doctor-header {
    width: 100%;
    height: 330rpx;
    margin-bottom: 80rpx;
    background-color: red;
  }

  .patient {
    margin-top: 30rpx;
    padding: 0rpx 50rpx 0rpx 50rpx;

    .patient-icon {
      width: 40rpx;
      height: 40rpx;
    }

    .patient-count {
      padding: 4rpx 8rpx;
      color: #fff;
      border-radius: 10000rpx;
      background-color: #fe3b53;
      margin-right: 20rpx;
    }

    .patient-title {
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      line-height: 32rpx;
      margin-left: 32rpx;
    }

    .slot {
      margin-top: 30rpx;
      border-bottom: 1px solid #efefef;
    }
  }
</style>