<template>
  <div class="userinfo" v-if="pageShow">
    <div class="cell-group">
      <div class="cell-item">
        <div class="cell-item__wrapper">
          <div class="left">
            <span>上报人姓名</span>
          </div>
          <div class="right">
            <span>{{ name }}</span>
          </div>
        </div>
      </div>
      <div class="cell-item">
        <div class="cell-item__wrapper">
          <div class="left">
            <span>身份证号</span>
          </div>
          <div class="right">
            <span>{{ idNumber }}</span>
          </div>
        </div>
      </div>
      <div class="cell-item">
        <div class="cell-item__wrapper">
          <div class="left">
            <span>手机号码</span>
          </div>
          <div class="right">
            <span>{{ phone }}</span>
          </div>
        </div>
      </div>
      <div class="cell-item">
        <div class="cell-item__wrapper">
          <div class="left">
            <span>上报地区</span>
          </div>
          <div class="right">
            <span>{{ areaName }}</span>
          </div>
        </div>
      </div>
      <div class="cell-item">
        <div class="cell-item__wrapper">
          <div class="left">
            <span>详细地址</span>
          </div>
          <div class="right">
            <span>{{ address }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    appName:"个人信息",
    data () {
      return {
        pageShow: false,
        name: '',
        idNumber: '',
        phone: '',
        areaName: '',
        address: '',
      }
    },

    onLoad (query) {
      this.$loading()
      if(query.name) {
        this.$hideLoading()
        this.name = query.name
        this.idNumber = query.idNumber
        this.phone = query.phone
        this.areaName = query.areaName
        this.address = query.address
        this.pageShow = true
      }
    },
  }
</script>

<style lang="scss">
  .userinfo {
    .cell-group {
      background: #fff;

      .cell-item {
        padding-left: 32px;

        .cell-item__wrapper {
          display: flex;
          justify-content: space-between;
          padding: 34px 32px 34px 0;
          border-bottom: 1px solid #DDDDDD;

          .left {
            span {
              color: #999999;
              font-size: 32px;
            }
          }

          .right {
            max-width: 450px;
            text-align: right;
            span {
              color: #333333;
              font-size: 32px;
            }
          }
        }

        &:last-child {
          .cell-item__wrapper {
            border-bottom: none;
          }
        }
      }
    }
  }
</style>
