<template>
  <view class="door-page">
    <!-- <van-tabs :active="activeTab" @change="onChange">
      <block v-for="(item, index) in tabs" :key="index">
        <van-tab :title="item"></van-tab>
      </block>
    </van-tabs> -->
    <custom-tabs type="c1" :value="activeTab" @change="onChange">
      <block v-for="(item, index) in tabs" :key="index">
        <custom-tab-pane :label="item" :name="'c1_'+index">
          <!-- 企业或个人基本信息 -->
          <view class="base-info" v-if="activeTab === 0">
            <view class="header">
              <view class="header-title">
                <image src="/static/images/common/icon_desc.png"></image>
                <view class="title">门牌信息</view>
              </view>

              <!-- <view class="">{{
                doorInfo.baseInfo.type === DOOR_TYPE.HOUSE.VALUE ? "个人" : "企业"
              }}</view> -->
            </view>
            <view class="house-info">
              <!--旧代码,现在改为优化的代码-->
              <!--<view class="list">-->
              <!--  <text class="label">房屋编码</text>-->
              <!--  <text class="value">{{-->
              <!--    doorInfo.baseInfo.doorplateCode-->
              <!--  }}</text>-->
              <!--</view>-->
              <!--<view class="list">-->
              <!--  <text class="label">标准地址</text>-->
              <!--  <text class="value">{{-->
              <!--    doorInfo.baseInfo.bzdz1-->
              <!--  }}</text>-->
              <!--</view>-->
              <!--<view class="list">-->
              <!--  <text class="label">所属辖区</text>-->
              <!--  <text class="value">{{-->
              <!--    doorInfo.baseInfo.ssqh-->
              <!--  }}</text>-->
              <!--</view>-->

              <!--门牌简称-->
              <view class="list">
                <text class="label">门牌简称</text>
                <text class="value">{{getDoorplateName(doorDetailsNew.doorplateName)}}</text>
              </view>
              <!--标准地址-->
              <view class="list">
                <text class="label">标准地址</text>
                <text class="value">{{doorDetailsNew.houseNumberAddress}}</text>
              </view>
              <!--所属辖区-->
              <view class="list">
                <text class="label">所属辖区</text>
                <text class="value">{{doorDetailsNew.streetName}}</text>
              </view>
              <!--所属社区-->
              <view class="list">
                <text class="label">所属社区</text>
                <text class="value">{{doorDetailsNew.communityName}}</text>
              </view>
              <!--门址类型-->
              <view class="list">
                <text class="label">门址类型</text>
                <text class="value">{{doorDetailsNew.houseNumberType}}</text>
              </view>
            </view>
          </view>

          <!-- 显示待审核的企业门牌户主信息 -->
          <view class="corp-info" v-if="doorInfo.ownerCorpVo">
            <view class="title">企业信息</view>
            <view class="cell-list">
              <view class="label">企业名称：</view>
              <view class="value">{{doorInfo.ownerCorpVo.qc}}</view>
            </view>
            <view class="cell-list">
              <view class="label">统一社会信用代码：</view>
              <view class="value">{{doorInfo.ownerCorpVo.tyshxydm}}</view>
            </view>
            <view class="cell-list">
              <view class="label">法人/负责人：</view>
              <view class="value">{{doorInfo.ownerCorpVo.fddbrxm}}</view>
            </view>
            <view class="cell-list">
              <view class="label">法人/负责人电话：</view>
              <view class="value">{{doorInfo.ownerCorpVo.fddbrlxdh}}</view>
            </view>
            <view class="cell-list">
              <view class="label">所属行业：</view>
              <view class="value">{{doorInfo.ownerCorpVo.sshy}}</view>
            </view>
            <view class="cell-list">
              <view class="label">经营范围：</view>
              <view class="value">{{doorInfo.ownerCorpVo.jyfw}}</view>
            </view>
          </view>
          <!-- 显示待审核的个人门牌户主信息 -->
          <view class="person-info" v-if="doorInfo.ownerPersonVo">
            <view class="title">个人信息</view>
            <view class="cell-list">
              <view class="label">姓名：</view>
              <view class="value">{{doorInfo.ownerPersonVo.xm}}</view>
            </view>
            <view class="cell-list">
              <view class="label">身份证号：</view>
              <view class="value">{{doorInfo.ownerPersonVo.gmsfzhm}}</view>
            </view>
            <view class="cell-list">
              <view class="label">联系电话：</view>
              <view class="value">{{doorInfo.ownerPersonVo.phone}}</view>
            </view>
            <view class="cell-list">
              <view class="label">户籍地址：</view>
              <view class="value">{{doorInfo.ownerPersonVo.hjdxz}}</view>
            </view>
            <view class="cell-list">
              <view class="label">现住地址：</view>
              <view class="value">{{doorInfo.ownerPersonVo.xzdxz}}</view>
            </view>
            <view class="cell-list">
              <view class="label">不动产权证照片：</view>
              <view class="value" >
                <image
                  v-for="(item, index) in imageUrls" :key="index"
                  style="width:100px;height:100px;margin-right:15px;"
                  mode="aspectFill" :src="item"
                  @tap="previewImage(index)"/>
              </view>
            </view>
          </view>
        </custom-tab-pane>
      </block>
    </custom-tabs>
  </view>
</template>

<script>
import { DOOR_TYPE, DOOR_BIND_STATUS } from "@/utils/const";
import {getDoorplateInfo, getDoorplateInfoNew} from '@/api/control';
import { httpApi } from '@/common/js/baseUrl'; 

const app = getApp();
export default {
  data() {
    return {
      activeTab: 0,
      tabs: ["门牌信息"],
      userInfo: {},
      tableData: [],
      showPopup: false,
      curUser: {
        xm: "",
        relation: "",
        gmsfzhm: "",
        lxfs: "",
        hjdxz:
          "",
        xzdxz:
          "",
      },
      DOOR_TYPE,
      doorInfo: {
        doorplateCode: "",
        wxBindStatus: 1,
        baseInfo: {
          mpid: "",
          doorplateCode: "",
          type: 2,
          bzdz1: "",
          bzdz: "",
          ssqh: "",
          longitude: "",
          latitude: "",
        },
        ownerCorpInfo: null,
        ownerPersonInfo: null,
        residentInfo: [
          {
            szmp: "",
            xm: "",
            gmsfzhm: "",
            lxfs: "",
            hjdxz: "",
            xzdxz: "",
          },
        ],
      },
      relationInfo: [],
      bindStatus: null,
      showEditBtn: false,
      isEdit: false,
      doorplateType: '',
      doorplateCode: '',
      formData: {},
      sshyOptions: [],
      sshyDic: {},
      imageUrls: [],
      doorDetailsNew: {},
    };
  },
  onLoad(query) {
    this.userInfo = uni.getStorageSync('userInfo') || {};
    this.doorInfo = app.globalData.doorInfo;
    if (app.globalData.doorInfo.residentInfo) {
      this.tableData = app.globalData.doorInfo.residentInfo;
    }
    this.doorplateType = this.doorInfo.baseInfo.type;
    this.doorplateCode = this.doorInfo.baseInfo.doorplateCode;
    this.getDoorplateInfo();

    //使用新接口获取门牌详情
    getDoorplateInfoNew({
      //门牌id
      id: query.id
    }).then((res)=>{
      this.doorDetailsNew = res.data;
    })
  },
  methods: {
    getDoorplateInfo () {
      const data = {
        doorplateCode: app.globalData.options.code,
        userInfoId: this.userInfo.uuid,
      }
      getDoorplateInfo(data).then(res => {
        this.bindStatus = res.data.wxBindStatus;
        app.globalData.bindStatus = res.data.wxBindStatus;
        app.globalData.doorInfo = res.data;
        uni.setStorageSync("doorInfo", res.data);
        this.doorInfo = res.data;
        if (this.doorInfo.ownerPersonVo && this.doorInfo.ownerPersonVo.picsBdc) { 
          const fileIdList = this.doorInfo.ownerPersonVo.picsBdc.split(',');
          this.imageUrls = fileIdList.map(item => {
            return `${httpApi}/file/download?fileUuid=${item}`
          })
        }
      });
    },
    previewImage (index) {
      uni.previewImage({
        current: index,
        urls: this.imageUrls
      });
    },

    /**
     * 返回门牌简称
     */
    getDoorplateName(name) {
      if (!name) {
        return '';
      }
      let index = name.indexOf("区") + 1;
      return name.substring(index);
    }
  },
};
</script>
<style>
@import "./door.css";
</style>
<style lang="scss" scoped>
.company-base {
  padding: 20rpx 30rpx 30rpx 30rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  margin: 20rpx 0;
  .company-name {
    font-size: 20px;
   /*  line-height: 38px; */
  }
  .company-status {
    font-size: 14px;
    display: flex;
  }
  .info-list {
    display: flex;
    justify-content: space-between;
    .info-item {
      display: flex;
      flex-direction: column;
      .info-label {
        font-size: 12px;
        line-height: 38px;
      }
      .info-value {
        font-size: 12px;
        line-height: 38px;
      }
    }
  }
}
.tags {
  .tags-cont {
    color: blue;
  }
}
.risk-overview {
  padding: 5px 0;
  background-color: #f8f5f5;
  display: flex;
  justify-content: space-between;
  .title {
    width: 14px;
    font-size: 12px;
    color: #db7676;
    background-color: #ecd0d0;
  }
  .item {
    width: 31%;
    padding: 0 5px;
    .label {
      font-size: 13px;
      color: #333333;
      margin-bottom: 3px;
      display: flex;
      .name {
        width: 100px;
      }
      .count {
        width: 60px;
        text-align: center;
        color: #dd7070;
        background-color: #ecd0d0;
        border-radius: 3px;
      }
    }
    .value {
      width: 100%;
      text-align: left;
      font-size: 12px;
      color: #999999;
    }
  }
}

.edit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #3a78f5;
  z-index: 999;
}
.mp-form {
  padding: 10px 15px;
  background-color: #fff;
  .doorplateType {
    padding: 10px 0;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #333;
      padding-bottom: 7px;
    }
    .radio {
      margin-right: 20px;
      color: #999
    }
  }
  .title {
    font-size: 16px;
    font-weight: 800;
    color: #333;
    padding: 10px 0;
  }
  .submit-button {
    width: 100%;
    background-color: #1676fe;
    border-radius: 15rpx;
    margin-top: 40px;
  }
}
.corp-info {
  padding: 10px 15px;
  background-color: #fff;
  .title {
    padding-bottom: 15px;
    font-size: 17px;
    font-weight: 800;
    color: #333;
  }
  .cell-list {
    display: flex;
    margin-bottom: 10px;
    .label {
      width: 150px;
      color: #333;
    }
    .value {
      width: calc(100% - 150px);
      color: #999;
      text-align: left;
    }
  }
}
.person-info {
  padding: 10px 15px;
  background-color: #fff;
  .title {
    padding-bottom: 15px;
    font-size: 17px;
    font-weight: 800;
    color: #333;
  }
  .cell-list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .label {
      width: 90px;
      color: #333;
    }
    .value {
      width: calc(100% - 100px);
      color: #999;
      text-align: left;
    }
  }
}
</style>

<style>

</style>
