<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>{{ info.name }}</span>
          </div>
        </div>
      </div>
      <div class="cell-item">
        <div class="cell-item__wrapper">
          <div class="left">
            <span>身份证号</span>
          </div>
          <div class="right">
            <span>{{ info.idNumber }}</span>
          </div>
        </div>
      </div>
      <div class="cell-item">
        <div class="cell-item__wrapper">
          <div class="left">
            <span>手机号码</span>
          </div>
          <div class="right">
            <span>{{ info.phone }}</span>
          </div>
        </div>
      </div>
      <div class="cell-item">
        <div class="cell-item__wrapper">
          <div class="left">
            <span>上报地区</span>
          </div>
          <div class="right">
            <span>{{ info.areaName }}</span>
          </div>
        </div>
      </div>
      <div class="cell-item">
        <div class="cell-item__wrapper">
          <div class="left">
            <span>详细地址</span>
          </div>
          <div class="right">
            <span>{{ info.address }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    appName:"个人信息",
    data () {
      return {
        info: {},
        pageShow: false
      }
    },

    onLoad (query) {
      this.$loading()
      this.getInfo(query.id)
    },

    methods: {
      getInfo (id) {
        this.$instance.post(`/app/appepidemicreportmember/queryDetailById?id=${id}`).then(res => {
          if (res.code === 0) {
            this.info = res.data
            if (res.data.eventStatus > 1) {
              this.result = res.data.processList[0]
            }
            this.$nextTick(() => {
              this.pageShow = true
            })
          }

          this.$hideLoading()
        }).catch(() => {
          this.$hideLoading()
        })
      }
    }
  }
</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>
