<template>
  <div class="search">
    <div class="search-wrap">
      <u-search :show-action="false" placeholder="请输入手机号或身份证号搜索" v-model.trim="keyword" @search="search"></u-search>
    </div>
    <div class="result-body">
      <div class="res-item" v-if="result" @click="selected">
        <span>{{ result.familyName || 0 }}家</span>
        <span>剩余积分:{{ result.familyIntegral || 0 }}分</span>
      </div>
      <span class="placeholder" v-else>请通过搜索“
        <strong>手机号或身份证号</strong>
        ”后选择结算对象
      </span>
    </div>
    <u-modal v-model="show" title="温馨提示" @confirm="confirm" content="该手机号绑定了多个居民，请通过身份证号进行查询"
             :confirm-style="{fontWeight:800}"></u-modal>
  </div>
</template>

<script>

export default {
  name: "search",
  appName: "积分超市搜索",
  data() {
    return {
      keyword: "",
      show: false,
      result: null,
    }
  },
  methods: {
    selected() {
      uni.navigateBack({
        delta: 1,
        success: () => {
          uni.$emit('selected', this.result)
        },
        fail: (err) => {
          console.error(err)
        }
      })
    },
    search() {
      if (this.keyword == "") {
        return uni.showToast({
          title: "请输入搜索关键字",
          icon: 'none'
        })
      }

      this.$instance.post(`/app/appresident/queryFamilyByPhone`, null, {
        params: {
          phone: this.keyword
        }
      }).then(res => {
        if (res && res.data) {
          this.result = res.data
        }
      }).catch(e => {
        this.result = null
        uni.showToast({
          title: e,
          icon: 'none'
        })
      })
    },
    confirm() {
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  min-height: 100%;
  background-color: #ffffff;

  .search-wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 24px 32px;
  }

  .result-body {

    .res-item {
      height: 112px;
      border-bottom: 1px solid #F5F5F5;
      box-sizing: border-box;
      padding: 0 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      & > span {
        font-size: 32px;
        color: #333333;
      }
    }

    .placeholder {
      display: flex;
      justify-content: center;
      margin-top: 144px;
      font-size: 28px;
      color: #999999;

      & > strong {
        color: #135AB8;
      }
    }
  }

}
</style>
