<template>
  <view style="height: 100%">
    <custom-nav-bar position="fixed" color="black" left-text="我的患者" left-arrow />

    <view class="search">
      <view class="flex flex-between search-input">
        <input class="input" :value="searchValue" type="text" confirm-type="search"
          placeholder-class="placeholder-style" placeholder="请输入患者姓名或健康档案编码" @input="onSearch" @confirm="onChange" />
        <view class="search-icon flex flex-center">
          <image class="imgage" src="/static/images/search.png"></image>
        </view>
      </view>
      <!-- 内容 -->
      <view class="my-content">
        <view class="patient-bg" data-item="item" @tap="patientDetails" v-for="(item, index) in 8" :key="index">
          <view class="flex flex-v-center flex-between m-b-28">
            <text class="patient-title uniline">张文远</text>
            <text class="patient-subhead uniline">健康档案编码1111</text>
          </view>

          <view class="flex flex-v-center paratext m-b-28">
            <image class="icon"></image>
            <text>男</text>
            <text>30岁</text>
            <text>18611643621</text>
          </view>

          <view class="label">
            <view>普通居民</view>
            <view>高血压</view>
            <view>普通居民</view>
            <view>高血压</view>
            <view>普通居民普通居民普通居民普通居民</view>
            <view>高血压</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<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 {
    data() {
      return {
        ObjectList: List,
        searchValue: ''
      };
    },
    onLoad(options) {},
    methods: {
      // 跳转患者详情---个人档案
      patientDetails(event) {
        console.log(event);
        const {
          item
        } = event.currentTarget.dataset;
        uni.navigateTo({
          url: '/packages/my/pages/my-patient-details/my-patient-details'
        });
      },

      onSearch() {
        console.log('占位：函数 onSearch 未声明');
      },

      onChange() {
        console.log('占位：函数 onChange 未声明');
      }
    }
  };
</script>
<style lang="less">
  .patient-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    line-height: 32rpx;
  }

  .patient-subhead {
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
    line-height: 26rpx;
  }

  .search {
    padding: 30rpx 30rpx 54rpx 30rpx;

    .search-input {
      height: 64rpx;
      line-height: 64rpx;
      background: #f9f9f9;
      border-radius: 35rpx;
      border: 1px solid #e1e1e1;
      text-align: center;
      position: relative;
      box-sizing: content-box;

      .input {
        width: 100%;
        height: 64rpx;
        line-height: 64rpx;
        text-decoration: 20rpx;
        padding: 0 64rpx;
        font-size: 26rpx;
        font-weight: 400;
      }

      .placeholder-style {
        text-align: center;
        color: #c1c1c1;
      }
    }

    .search-icon {
      width: 64rpx;
      height: 64rpx;
      background: #ffffff;
      border-radius: 35rpx;
      border: 1px solid #e1e1e1;
      position: absolute;
      right: -1px;
      top: 0;
      z-index: 1;

      .imgage {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .my-content {
      margin-top: 40rpx;

      .patient-bg {
        padding: 18rpx 28rpx 20rpx 21rpx;
        background: #f9f9f9;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-bottom: 16rpx;
      }

      .icon {
        width: 30rpx;
        height: 30rpx;
        background-color: red;
      }

      .paratext {
        text {
          margin-left: 24rpx;
        }
      }

      .label {
        display: flex;
        flex-wrap: wrap;

        view {
          color: #0091ff;
          padding: 7rpx 16rpx;
          margin-bottom: 8rpx;
          margin-right: 8rpx;
          border: 1px solid #c5dff4;
          border-radius: 5000rpx;
        }
      }
    }
  }
</style>