<template>
  <view class="app-container">
    <u-navbar
      title="通讯录"
      :autoBack="true"
      :placeholder="true"
      leftText="返回"
    >
      <view slot="right">
        <text class="nav-right">消息</text>
      </view>
    </u-navbar>
    <u-search
      placeholder="搜索关键词"
      v-model="keyword"
      shape="square"
      :showAction="false"
      bgColor="#FFFFFF"
      class="view-global"
      height="74rpx"
    ></u-search>
    <view class="grid-title">
      <image
        src="/static/images/grid-icon.png"
        mode="aspectFit"
        class="grid-icon"
      ></image>
      <text class="grid-main-title">常用联系人</text>
    </view>
    <view class="linkMan-list view-global">
      <view class="link-item">
        <view class="link-data">
          <image
            src="/static/images/linkMan.png"
            class="linkMan-icon"
            mode=""
          ></image>
          <text class="linkMan-name">张三</text>
        </view>
        <view class="link-btn"
          ><u-button
            text="呼叫"
            icon="mic"
            size="small"
            color="#32B78B"
            iconColor="#fff"
          ></u-button
        ></view>
      </view>
      <view class="link-item">
        <view class="link-data">
          <image
            src="/static/images/linkMan.png"
            class="linkMan-icon"
            mode=""
          ></image>
          <text class="linkMan-name">李四</text>
        </view>
        <view class="link-btn"
          ><u-button
            text="呼叫"
            icon="mic"
            size="small"
            color="#32B78B"
            iconColor="#fff"
          ></u-button
        ></view>
      </view>
      <view class="link-item">
        <view class="link-data">
          <image
            src="/static/images/linkMan.png"
            class="linkMan-icon"
            mode=""
          ></image>
          <text class="linkMan-name">王五</text>
        </view>
        <view class="link-btn"
          ><u-button
            text="呼叫"
            icon="mic"
            size="small"
            color="#32B78B"
            iconColor="#fff"
          ></u-button
        ></view>
      </view>
      <view class="link-item">
        <view class="link-data">
          <image
            src="/static/images/linkMan.png"
            class="linkMan-icon"
            mode=""
          ></image>
          <text class="linkMan-name">陈二</text>
        </view>
        <view class="link-btn"
          ><u-button
            text="呼叫"
            icon="mic"
            size="small"
            color="#32B78B"
            iconColor="#fff"
          ></u-button
        ></view>
      </view>
      <view class="link-item">
        <view class="link-data">
          <image
            src="/static/images/linkMan.png"
            class="linkMan-icon"
            mode=""
          ></image>
          <text class="linkMan-name">葛云</text>
        </view>
        <view class="link-btn"
          ><u-button
            text="呼叫"
            icon="mic"
            size="small"
            color="#32B78B"
            iconColor="#fff"
          ></u-button
        ></view>
      </view>
      <view class="link-item">
        <view class="link-data">
          <image
            src="/static/images/linkMan.png"
            class="linkMan-icon"
            mode=""
          ></image>
          <text class="linkMan-name">马天笑</text>
        </view>
        <view class="link-btn"
          ><u-button
            text="呼叫"
            icon="mic"
            size="small"
            color="#32B78B"
            iconColor="#fff"
          ></u-button
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: null,
      sysHeigth: 0,
    };
  },
  onLoad() {
    this.sysHeigth = uni.$u.sys().statusBarHeight + (44 + 12.5);
    console.log(this.sysHeigth);
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    //单击了导航栏右侧按钮
    rightClick() {
      console.log("单击了");
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  box-sizing: border-box;
  padding: 25rpx 20rpx;

  .grid-title {
    margin: 30rpx 0 20rpx 0;
    display: flex;
    align-items: center;

    .grid-icon {
      width: 40rpx;
      height: 25rpx;
    }

    .grid-main-title {
      margin-left: 25rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #0f1316;
    }
  }

  .linkMan-list {
    background-color: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 25rpx;

    .link-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30rpx;

      .link-data {
        display: flex;
        align-items: center;

        .linkMan-icon {
          height: 55rpx;
          width: 55rpx;
        }

        .linkMan-name {
          margin-left: 25rpx;
          font-size: 32rpx;
          font-weight: 400;
          color: #34373b;
        }
      }

      .link-btn {
        width: 132rpx;
      }
    }

    & > .link-item:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
