<template>
  <div class="AppUpdateNum">
    <div class="item">
      <span class="label"><span class="tips">*</span>居民登记</span>
      <div class="value">
        <u-input type="number" placeholder="请填写数量 " v-model="form.registerCount" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42"  :maxlength="10" :clearable="false" />
      </div>
    </div>
    <div class="item">
      <span class="label"><span class="tips">*</span>居民朋友</span>
      <div class="value">
        <u-input type="number" placeholder="请填写数量 " v-model="form.friendCount" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42"  :maxlength="10" :clearable="false" />
      </div>
    </div>
    <div class="item">
      <span class="label"><span class="tips">*</span>居民知己</span>
      <div class="value">
        <u-input type="number" placeholder="请填写数量 " v-model="form.confidantCount" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42"  :maxlength="10" :clearable="false" />
      </div>
    </div>
    <div class="add-btn" @click="submit()">
      <div>提交</div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    appName: '更新居民数据',
    data() {
      return {
        form: {
          registerCount: 0,
          friendCount: 0,
          confidantCount: 0
        }
      }
    },
    computed: {
      ...mapState(['user']),
    },
    onShow() {
      document.title = '更新居民数据'
      this.getTotal()
    },

    methods: {
      getTotal() {
        this.$http.post(`/app/appwxuserfamiliarityrate/wxTopStatistics`).then(res=> {
          if(res?.data) {
            this.form = {...res.data}
          }
        })
      },
      submit() {
        if(!/^[0-9]+$/.test(this.form.registerCount)){
          return this.$u.toast(`居民登记请输入正整数`)
        }
        if(!/^[0-9]+$/.test(this.form.friendCount)){
          return this.$u.toast(`居民朋友请输入正整数`)
        }
        if(!/^[0-9]+$/.test(this.form.confidantCount)){
          return this.$u.toast(`居民知己请输入正整数`)
        }
        this.$http.post(`/app/appwxuserfamiliarityrate/wxcpAdd`, this.form).then(res=> {
          if(res.code == 0) {
            uni.$emit('update')
            this.$u.toast(`居民数据更新成功`)
            setTimeout(() => {
              uni.navigateBack()
            }, 600);
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .AppUpdateNum {
    min-height: 100%;
    background-color: #F5F5F5;
    padding-top: 32px;
    .item{
      width: calc(100% - 32px);
      padding: 40px 32px 40px 16px;
      background: #FFFFFF;
      display: flex;
      justify-content: space-between;
      font-size: 30px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #666;
      line-height: 48px;
      box-sizing: border-box;
      margin: 0 0 24px 16px;
      border-radius: 32px;
      .color-999{
        color: #999;
      }
      .value{
        color: #333;
        .u-icon{
          margin-left: 16px;
        }
      }
      .tips{
        display: inline-block;
        width: 16px;
        font-size: 32px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #FF4466;
        line-height: 44px;
        margin-right: 4px;
      }
    }
    .add-btn {
      position: fixed;
      bottom: 0;
      left: 0;
      padding: 16px 32px;
      width: 100%;
      box-sizing: border-box;
      div {
        width: 100%;
        height: 88px;
        background: #3975C6;
        border-radius: 44px;
        text-align: center;
        line-height: 88px;
        color: #fff;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 34px;
      }
    }
  }
</style>
