<template>
  <section class="AppRecognizeSearch">
    <div class="form">
      <div class="item">
        <span class="requier">*</span>
        <div class="item-content">
          <div class="label">{{navName == '个人助养' ? '助养人名称' : '助养方名称'}}</div>
          <div class="value">
            <u-input type="text" placeholder="请输入" placeholder-style="color:#999;font-size:14px;" height="40" v-model="value" maxlength="10"/>
          </div>
        </div>
      </div>
      <div class="item" v-if="navName == '个人助养'">
        <span class="requier">*</span>
        <div class="item-content">
          <div class="label">助养人身份证号</div>
          <div class="value">
            <u-input type="text" placeholder="请输入" placeholder-style="color:#999;font-size:14px;" height="40" v-model="value" maxlength="10"/>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-btn">
      <div class="btn primary" v-if="navName == '个人助养'">扫描助养人身份证</div>
      <div class="btn primary" @click="toList()">查询</div>
      <div class="btn">返回</div>
    </div>
  </section>
</template>

<script>
export default {
  name: "AppRecognizeSearch",
  appName: "查询个人助养",
  data() {
    return {
      value: '',
      navName: ''
    }
  },
  onLoad(option) {
    this.navName = option.name
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#2183FF'
    })
    uni.setNavigationBarTitle({
      title: option.name == '个人助养' ? '查询个人助养' : '查询集体助养'
    })
  },
  methods: {
    toList() {
      uni.navigateTo({url: './AppRecognizeSearchList'})
    }
  },
}
</script>

<style lang="scss" scoped>
uni-page-body {
  background-color: #F5F6F7;
}
.AppRecognizeSearch {
  .form {
    background-color: #fff;
    .item {
      display: flex;
      padding-top: 16px;
      .requier {
        line-height: 44px;
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #F46;
        padding: 0 4px 0 12px;
      }
      .item-content {
        width: calc(100% - 32px);
        padding-bottom: 16px;
        border-bottom: 1px solid #F4F4F5;
        font-family: PingFangSC-Regular;
        position: relative;
        .label {
          line-height: 44px;
          font-family: PingFangSC-Regular;
          font-size: 32px;
          color: #666;
          margin-bottom: 20px;
        }
        .value {
          line-height: 40px;
          font-size: 28px;
          color: #333;
        }
        .right-icon {
          position: absolute;
          top: 12px;
          right: 0;
          width: 40px;
          height: 40px;
          padding: 20px;
        }
      }
    }
  }
  .footer-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 16px 32px 52px 16px;
    box-sizing: border-box;
    background-color: #fff;
    .btn {
      width: 100%;
      text-align: center;
      height: 96px;
      line-height: 94px;
      border: 1px solid #2183FF;
      border-radius: 8px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 32px;
      color: #2183FF;
      margin-bottom: 16px;
    }
    .primary {
      background-color: #2183FF;
      color: #fff;
    }
  }
}
</style>
