<template>
  <view class="ConCss">
    <u-navbar class="navBarCss" title="居民用户详情" :titleStyle="{'fontSize':'36rpx','color':'#333333','fontWeight':'700'}"
      leftClick="leftClick" :autoBack="true" safeAreaInsetTop placeholder />
    <view class="bodyCss">
      <view class="basisCss">
        <view class="titleCss">
          标题
        </view>
        <view class="flexCss" v-for="(item,index) in basisData" :key="item.key">
          <view class="leftCss overflow-one-lines"> {{item.name}} </view>
          <view class="rightCss overflow-one-lines"> {{item.value}} </view>
        </view>
      </view>
      <view class="housesCss">
        <view class="titleCss">
          房屋信息
        </view>
        <view class="flexCss" v-for="(item,index) in housesData" :key="item.key">
          <view class="leftCss overflow-one-lines"> {{item.name}} </view>
          <view class="rightCss overflow-one-lines"> {{item.value}} </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    components: {},
    props: {

    },
    data() {
      return {
        basisData: [{
          name: "区域",
          key: "area",
          value: "华北区域"
        }, {
          name: "预算主体",
          key: "budgetEntity",
          value: "天津宏洁预算组织"
        }, {
          name: "身份证号",
          key: "idCard",
          value: "145678187611078000"
        }, {
          name: "房屋所在城市",
          key: "city",
          value: "天津"
        }, {
          name: "房屋所在街道",
          key: "street",
          value: "静海区街道"
        }, {
          name: "房屋所在小区",
          key: "community",
          value: "天路小区"
        }, {
          name: "房屋所处楼层",
          key: "floor",
          value: "12"
        }, {
          name: "房屋门牌号",
          key: "houseNumber",
          value: "13号"
        }, {
          name: "房主姓名",
          key: "name",
          value: "王凯"
        }, {
          name: "房主年龄",
          key: "age",
          value: "30~50岁"
        }, {
          name: "联系电话",
          key: "phone",
          value: "18731654346"
        }],
        housesData: [{
          name: "居住人口",
          key: "residentPopulation",
          value: "1"
        }, {
          name: "房屋户型",
          key: "houseType",
          value: "三室一厅"
        }, {
          name: "房屋面积",
          key: "houseArea",
          value: "130"
        }, {
          name: "房屋建设年限",
          key: "city",
          value: "5年内"
        }, {
          name: "房屋居住性质",
          key: "street",
          value: "自有居住"
        }, {
          name: "居住属性",
          key: "community",
          value: "常住"
        }, {
          name: "房屋性质",
          key: "floor",
          value: "高品房_高层"
        }, {
          name: "房屋结构类型",
          key: "houseNumber",
          value: "钢结构"
        }, {
          name: "所在房屋距离中压管道",
          key: "name",
          value: "小于500米"
        }, {
          name: "所在房屋是否有物业",
          key: "age",
          value: "有"
        }, {
          name: "房屋是否列入拆迁规划",
          key: "phone",
          value: "是"
        },{
          name: "水/电表是否一户一表",
          key: "phone",
          value: "是"
        },{
          name: "是否独立厨房",
          key: "phone",
          value: "是"
        },{
          name: "是否集中供暖",
          key: "phone",
          value: "是"
        },{
          name: "楼前立管是否安装",
          key: "phone",
          value: "是"
        },{
          name: "现使用能源",
          key: "phone",
          value: "管道天燃气"
        },{
          name: "现使用能源价格(元)",
          key: "phone",
          value: "3.13元"
        },{
          name: "用户报装意愿",
          key: "phone",
          value: "小于50%"
        },{
          name: "小于50%",
          key: "phone",
          value: "太贵"
        },{
          name: "更新时间",
          key: "phone",
          value: "2023年9月14号"
        }
        ]
      }
    },
    computed: {

    },
    onLoad() {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .bodyCss {
    padding: 20rpx 0;
    background: #f2f4f3;
  }

  .titleCss {
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #333333;
    text-align: left;
    line-height: normal;
    font-size: 30rpx;
  }

  .basisCss {
    margin: 0 24rpx 20rpx 24rpx;
    padding: 40rpx 30rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .flexCss {
    display: flex;
    justify-content: space-between;
  }

  .leftCss {
    width: 50%;
    margin: 32rpx 0rpx;
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #999db0;
    text-align: left;
    line-height: normal;
    font-size: 26rpx;
  }

  .rightCss {
    display: flex;
    justify-content: flex-end;
    width: 50%;
    margin: 32rpx 0rpx;
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #2b3950;
    text-align: left;
    line-height: normal;
    font-size: 26rpx;
  }

  .housesCss {
    margin: 20rpx 24rpx;
    padding: 40rpx 30rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    box-sizing: border-box;
  }
</style>