<template>
  <div class="page_search">
    <div class="header">
      <i class="iconfont icon-zuojiantou"></i>
      <van-search v-model="value" placeholder=" 姓名 / 首拼 / 透析号" />
    </div>
    <div class="searchList">
      <div class="patientOne">
        <img src="../../assets/images/one.jpg" alt="" />
        <p>名字</p>
      </div>
    </div>
    <div class="history">
      <div class="historyTitle">
        <span>历史搜索</span>
        <i class="iconfont icon-lajixiang"></i>
      </div>
      <div class="record">
        <ul class="recordList">
          <li class="recordOne">123</li>
          <li class="recordOne">123</li>
          <li class="recordOne">哦驾驶的拉升的</li>
          <li class="recordOne">哦驾驶的拉升的</li>
          <li class="recordOne">asd</li>
        </ul>
      </div>
    </div>

    <!-- <div class="searchList">
      <van-tabs
        v-model="active"
        title-active-color="#000000"
        title-inactive-color="#3C3C3C"
      >
        <van-tab title="全部">
          <ul class="list">
            <li class="searchOne">
              <img src="../../assets/images/one.jpg" alt />
              <span>爱听课的小</span>
            </li>
            <li class="searchOne">
              <img src="../../assets/images/one.jpg" alt />
              <span>爱听课的小</span>
            </li>
          </ul>
        </van-tab>
        <van-tab title="血透">血透</van-tab>
        <van-tab title="慢病">慢病</van-tab>
        <van-tab title="会员">会员</van-tab>
        <van-tab title="电商">电商</van-tab>
      </van-tabs>
    </div> -->
  </div>
</template>

<script>
import { SaveSearch } from "@/api/login/login";
export default {
  data() {
    return {
      searchVal: "",
      active: 0
    };
  },
  methods: {
    SaveSearch() {
      SaveSearch(this.searchVal).then(response => {});
    },
    watchNum() {
      console.log(this.searchVal);
    }
  }
};
</script>

<style lang="scss" scoped>
.page_search {
  overflow: hidden;
  height: 100%;
  .header {
    height: 2.5rem;
    width: 100%;
    line-height: 2.5rem;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    .icon-zuojiantou {
      float: left;
      width: 2.5rem;
      height: 2.5rem;
      text-align: center;
    }
    .van-search {
      padding: 0;
      width: 80%;
    }
    .van-search__content {
      border-radius: 0.9375rem;
    }
    .van-search .van-cell {
      display: flex;
      align-items: center;
    }
  }
  .history {
    padding: 1.25rem 0.75rem 0 0.875rem;
    .historyTitle {
      height: 1.25rem;
      line-height: 1.25rem;
      i {
        float: right;
        font-size: 1.625rem;
        color: #9b9b9b;
      }
      span {
        float: left;
        font-size: 0.9375rem;
        color: rgba(60, 60, 60, 1);
      }
    }
  }
  .record {
    margin-top: 1.25rem;
    .recordList {
      display: flex;
      flex-wrap: wrap;
    }
    .recordOne {
      min-width: 0.0625rem;
      height: 1.6875rem;
      background: rgba(244, 244, 244, 1);
      border-radius: 14px;
      color: rgba(155, 155, 155, 1);
      font-size: 0.875rem;
      padding: 0.4375rem 0.875rem;
      margin-right: 0.625rem;
      box-sizing: border-box;
      margin-bottom: 0.625rem;
    }
  }
  .searchList {
    padding: 0 0.875rem;
    .patientOne {
      display: flex;
      align-items: center;
      height: 3.75rem;
      img {
        width: 2.5rem;
        height: 2.5rem;
        margin-right: 0.875rem;
      }
      p {
        flex: 1;
        height: 100%;
        line-height: 3.75rem;
        box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
