// 小区详情
<template>
  <div class="routerWapper">
		<div v-if="$route.name =='basicView' || $route.name =='basicView1'" class="portalDetailWapper">
		  <div class="portalDetailContentWapper">
        <div class="portalDetailTitle">
          <span class="title">查看小区详情</span>
			    <div class="detailOperations">
				  <a-button @click="$router.push({path: `/houseData/buildings`,query:{id:$route.query.id,name:$route.query.name}})"> 门牌幢 </a-button>
				  <a-button @click="$router.push({path: `/houseData/shebei/${$route.query.id}`})"> 设施设备 </a-button>
				  <a-button @click="handleReturn"> 返回 </a-button>
			  </div>
		   </div>
        <div class="portalDetailContentBody" ref='portalDetailContentBody'>
          <template >
                <!-- 小区基础信息 -->
            <div class="layoutMargin detailsPartSection">
              <p id="basic" class="detailsPartTitle">小区基础信息</p>
              <div style="margin:0 16px;">
                <a-row type="flex" justify="start">
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区名称"' :text='detail.stNameFrst'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区别名"' :text='detail.stNameScnd'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区地址"' :text='detail.addrFrst'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"竣工日期"' :text='detail.finishDate&&detail.finishDate.slice(0,4)+ "-"+ detail.finishDate.slice(4,6)+"-"+detail.finishDate.slice(6,8)  '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"总建筑面积(平方米)"' :text='detail.stCnstArea'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"收费标准（多层）"' :text='detail.stMultilayerStandard'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"收费标准（高层）"' :text='detail.stTopStandard'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"收费标准（别墅）"' :text='detail.stVillaStandard'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"收费标准（售后）"' :text='detail.stAfterStandard'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区封闭与否"' :text='detail.isOpen && detail.isOpen ? "是":"否"'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"房管办"' :text='detail.hoName '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"街道"' :text='detail.streetName'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"环线"' :text='detail.loopLineName '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区四至范围东"' :text='detail.stCspEast'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区四至范围西"' :text='detail.getStCspWest '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区四至范围南"' :text='detail.stCspSouth '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区四至范围北"' :text='detail.stCspNorth '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"四至不包括"' :text='detail.stNotcsparea '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区性质"' :text='detail.stKind '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区类型"' :text='detail.sectType '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"物业服务类型"' :text='detail.cspServiceTypeName '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"地面停车位数量"' :text='detail.totOngParks '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"地下停车位数量"' :text='detail.totUngParks '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"占地面积"' :text='detail.landArea'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"总门牌数"' :text='detail.totUnits'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"总户数"' :text='detail.totHous'></DetailsItem>
                  </a-col>
                </a-row>
              </div>
            </div>
                <!-- 小区管理处信息 -->
            <div class="layoutMargin detailsPartSection">
              <p id="experience" class="detailsPartTitle">小区管理处信息</p>
              <div style="margin:0 16px;">
                <a-row type="flex" justify="start">
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区管理处名称"' :text='caoInfo.csName'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区管理处办公地址"' :text='caoInfo.csAddress'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区管理处联系人"' :text='caoInfo.csContacter'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"联系人联系电话"' :text='caoInfo.csTel'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区日间报修电话"' :text='caoInfo.csDayTel'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区夜间报修电话"' :text='caoInfo.nightTel'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"物业投诉电话"' :text='caoInfo.complaintTel'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区管理处传真"' :text='caoInfo.csFax'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区管理处邮编"' :text='caoInfo.csPostCode'></DetailsItem>
                  </a-col>
                    <!-- 自定义字段 -->
                  <a-col span="8" v-for="i in extList['tbl_community_amst_office']" :key="i.id">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='i.keyName' :text='detail[i.keyCode]'></DetailsItem>
                  </a-col>
                </a-row>
              </div>
            </div>
                <!-- 物业企业信息 -->
            <div class="layoutMargin detailsPartSection" >
              <p id="train" class="detailsPartTitle">物业企业信息</p>
              <div style="margin:0 16px;">
                <a-row type="flex" justify="start">
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"物业企业名称"' :text='ppInfo.cspName '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"物业企业办公地址"' :text='ppInfo.cspAddr '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"物业服务合同结束日期"' :text='
                    detail.cspContractEndDate&&detail.cspContractEndDate.slice(0,4)+ "-"+ detail.cspContractEndDate.slice(4,6)+"-"+detail.cspContractEndDate.slice(6,8)'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"企业法人代表"' :text='ppInfo.legalRepName '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"企业联系电话"' :text='ppInfo.cspTel '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"企业联系人"' :text='ppInfo.cspContacter '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"物业服务合同开始日期"'
                      :text='detail.cspContractStartDate&& detail.cspContractStartDate!= " " && detail.cspContractStartDate.slice(0,4)+ "-"+ detail.cspContractStartDate.slice(4,6)+"-"+detail.cspContractStartDate.slice(6,8)'></DetailsItem>
                  </a-col>
                    <!-- 自定义字段 -->
                  <a-col span="8" v-for="i in extList['tbl_prop_company']" :key="i.id">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='i.keyName' :text='detail[i.keyCode]'></DetailsItem>
                  </a-col>
                </a-row>
              </div>
            </div>
                <!-- 小区经理信息 -->
            <div class="layoutMargin detailsPartSection">
                  <p id="cmInfo" class="detailsPartTitle">小区经理信息</p>
              <div style="margin:0 16px;">
                <a-row type="flex" justify="start">
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区经理姓名"' :text='cmInfo.csmName '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区经理上岗证号"' :text='cmInfo.csmJobCode '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"证件类型"' :text='cmInfo.certType '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"资格证书名称"' :text='cmInfo.csmJobQualification '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"资格证书编号"' :text='cmInfo.csmJobLog '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区经理固定电话"' :text='cmInfo.csmTel '></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"小区经理证件号码"' :text='cmInfo.credentialsNo '></DetailsItem>
                  </a-col>
                    <!-- 自定义字段 -->
                  <a-col span="8" v-for="i in extList['tbl_community_manager']" :key="i.id">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='i.keyName' :text='detail[i.keyCode]'></DetailsItem>
                  </a-col>
                </a-row>
              </div>
            </div>
                <!-- 业主大会信息 -->
            <div class="layoutMargin detailsPartSection">
              <p id="ertificate" class="detailsPartTitle">业主大会信息</p>
              <div style="margin:0 16px;">
                <a-row type="flex" justify="start">
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='"业主大会代码"' :text='icInfo.hocCode'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='"名称"' :text='icInfo.hocName'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                  <DetailsItem :labelSpan='12' :textSpan='12' :label='"地址"' :text='icInfo.hocAddr'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='"选举时间"' :text='icInfo.electionDate&&
                      icInfo.electionDate.slice(0,4)+ "-"+ icInfo.electionDate.slice(4,6)+"-"+icInfo.electionDate.slice(6,8)'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='"副主任"' :text='icInfo.deputyDirectorName'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='"任期"' :text='icInfo.commValidDate'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='"第几届"' :text='icInfo.hocTerm'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='"业主大会备案日期"' :text='icInfo.recordDate &&
                      icInfo.recordDate.slice(0,4)+ "-"+ icInfo.recordDate.slice(4,6)+"-"+icInfo.recordDate.slice(6,8)'>
                    </DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='"业主大会运作情况类别"' :text='detail.onwersTypeoperName'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='"换届情况类别"' :text='icInfo.onwersTransitionName'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='"业委会任期起始时间"' :text='icInfo.conStartDate&&
                    icInfo.conStartDate.slice(0,4)+ "-"+ icInfo.conStartDate.slice(4,6)+"-"+icInfo.conStartDate.slice(6,8)'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='"业委会任期结束时间"' :text='icInfo.conEndDate &&
                    icInfo.conEndDate.slice(0,4)+ "-"+ icInfo.conEndDate.slice(4,6)+"-"+icInfo.conEndDate.slice(6,8)'></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='"主任"' :text='icInfo.directorName'></DetailsItem>
                  </a-col>
                  <!-- 自定义字段 -->
                  <a-col span="8" v-for="i in extList['tbl_industry_council']" :key="i.id">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='i.keyName' :text='detail[i.keyCode]'></DetailsItem>
                  </a-col>
                </a-row>
              </div>
            </div>

            <div class="layoutMargin detailsPartSection">
              <p id="cmtInfo" class="detailsPartTitle">居委会信息</p>
              <div style="margin:0 16px;">
                <a-row type="flex" justify="start">
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"居委会名称"' :text="!!rcInfo?rcInfo.cmtName:''"></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"居委会地址"' :text="!!rcInfo?rcInfo.cmtAddr:''"></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"居委主任姓名"' :text="!!rcInfo?rcInfo.cmtDirectorName:''"></DetailsItem>
                  </a-col>
                  <a-col span="8">
                    <DetailsItem :labelSpan='12' :textSpan="12" :label='"居委书记姓名"' :text="!!rcInfo?rcInfo.cmtSecretaryName:''"></DetailsItem>
                  </a-col>
                  <!-- 自定义字段 -->
                  <a-col span="8" v-for="i in extList['tbl_residents_committees']" :key="i.id">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='i.keyName' :text='detail[i.keyCode]'></DetailsItem>
                  </a-col>
                </a-row>
              </div>
            </div>

                  <!-- 自定义字段 -->
            <div class="layoutMargin detailsPartSection"  v-if="customKeyEnable == 'true' && extList.tbl_community.length>0">
              <p id="extList" class="detailsPartTitle">拓展信息</p>
              <div style="margin:0 16px;">
                <a-row type="flex" justify="start">
                  <a-col span="8" v-for="i in extList['tbl_community']" :key="i.id">
                    <DetailsItem :labelSpan='12' :textSpan='12' :label='i.keyName' :text='detail[i.keyCode]'></DetailsItem>
                  </a-col>
                </a-row>
              </div>
            </div>

          </template>
        </div>
        <!-- 右侧锚点 -->
        <div class="target">
          <div class="icon" v-show="changeSmall">
            <a-icon type="environment" @click="changeSmall=false"/>
          </div>
          <div class="icon" v-show="!changeSmall">
            <a-icon type="double-right" @click="changeSmall=true"/>
          </div>
          <a-anchor v-show="!changeSmall"  :offsetTop="260" :getContainer="()=> this.$refs['portalDetailContentBody']">
            <a-anchor-link href="#basic" title="小区基础信息" />
            <a-anchor-link href="#experience" title="小区管理处信息" />
            <a-anchor-link href="#train" title="物业企业信息" />
            <a-anchor-link href="#cmInfo" title="小区经理信息" />
            <a-anchor-link href="#ertificate" title="业主大会信息" />
            <a-anchor-link href="#cmtInfo" title="居委会信息" />
            <a-anchor-link v-if="customKeyEnable == 'true' && extList.length>0" href="#extList" title="拓展信息" />
          </a-anchor>
        </div>
		  </div>

		</div>
    <RouterWapper v-else></RouterWapper>
  </div>
</template>

<script>
export default {
  name: 'basicView',
  data() {
    return {
      detail: {},
      changeSmall: false,
      ppInfo: {},
      caoInfo: {},
      cmInfo: {},
      icInfo: {},
      rcInfo: {},
      extList: {
        tbl_community: [],
        tbl_community_amst_office: [],
        tbl_prop_company: [],
        tbl_community_manager: [],
        tbl_industry_council: [],
        tbl_residents_committees: [],
      }, // ext所有列表
      customKeyEnable: 'false',
    }
  },
  created () {
    this.customKeyEnable=this.$cookie.get('customKeyEnable')
    if(this.customKeyEnable && this.customKeyEnable == 'true'){
      this.getExt('tbl_community')
      this.getExt(' tbl_community_amst_office')
      this.getExt('tbl_prop_company')
      this.getExt('tbl_community_manager')
      this.getExt('tbl_industry_council')
      this.getExt('tbl_residents_committees')
    }else {
      this.getList()
    }
  },
  methods: {
    handleReturn() {
      if (!!this.$route.query.source && this.$route.query.source == 'wy') {
        this.$router.push({ path: '/houseData/propertyInfo', query: { id: this.$route.query.id, source: 'wy', cspId: this.$route.query.cspId, pageNo: this.$route.query.pageNo, pageSize: this.$route.query.pageSize}})
      } else {
        this.$router.back()
      }
    },
    determineRc() {},
    //获取详情
    getList(){
      this.$ajax.get({
        url: this.$api.GET_BASIC_ID.replace('{id}', this.$route.params.id),
      }).then(res => { 
        if(res.code == '200'){
          const data = this.$com.confirm(res, 'data.content', [])
          for (const i in data) {
            if (!data[i]) {
              data[i] = ''
            } else if (typeof(data[i]) === 'number') {
              data[i] = data[i].toString()
            }
            if(i == 'sectType'){
              if (data[i] == '1') {
                data[i] = '住宅'
              } else if (data[i] == '2') {
                data[i] = '非住宅'
              } else if(data[i]== '3'){
                data[i] = '虚拟小区'
              }else{
                data[i] = ' '
              }
            }
            if(i == 'stKind'){
              if (data[i] == '01') {
                data[i] = '商品房'
              } else if(data[i] == '02') {
                data[i] = '动迁房'
              } else if(data[i] == '03') {
                data[i] = '共有产权保障房'
              } else if(data[i] == '04') {
                data[i] = '售后房'
              } else if(data[i] == '05') {
                data[i] = '直管公房'
              } else if(data[i] == '06') {
                data[i] = '混合'
              } else if(data[i] == '07') {
                data[i] = '系统公房'
              } else if(data[i] == '08') {
                data[i] = '集体土地集资房'
              } else if(data[i] == '10') {
                data[i] = '私产'
              } else if(data[i] == '11') {
                data[i] = '公租房'
              } else if(data[i] == '09') {
                data[i] = '军产'
              }
            }
          }
          this.detail = data
          // this.detail = this.$com.confirm(res, 'data.content', [])
          // this.ppInfo = this.$com.confirm(res, 'data.content.ppInfo', [])
          // this.caoInfo = this.$com.confirm(res, 'data.content.caoInfo', [])
          // this.cmInfo = this.$com.confirm(res, 'data.content.cmInfo', [])
          // this.icInfo = this.$com.confirm(res, 'data.content.icInfo', [])
          if(!!data.rcInfo) {
            this.rcInfo = data.rcInfo
          }
          this.ppInfo = data.ppInfo
          this.caoInfo = data.caoInfo
          this.cmInfo = data.cmInfo
          this.icInfo = data.icInfo
        }else{
          this.$message.error(res.data.msg)
          this.$router.push({ path: '/networkErr'})
        }
      })
    },
    //查看某条数据的自定义信息
    getExt(tblName){
      this.$ajax.get({
        url: this.$api.GET_TBLS_KEYS,
        params: { 
          tbl: tblName,
          pageSize: 10000 
        }
      }).then(res => {
        if (res.code == 200) {
          //先获取全部的自定义字段列表 
          this.extList[tblName] = this.$com.confirm(res, 'data.content', [])
          console.log(this.extList)
          this.getList()
        }
      })
    }
  },
 
}
</script>

<style scoped>
	.target {
		position: absolute;
		z-index: 10;
		right: 50px;
		top: 290px;
		padding: 10px 8px;
		border-radius: 2px;
		background: white;
		-moz-box-shadow: -1px 0px 5px #ddd;
		-webkit-box-shadow: -1px 0px 5px #ddd;
		box-shadow: -1px 0px 4px #ddd;
    text-align-last: left;
	}
	.target .icon {
		text-align: right;
		cursor: pointer;
		color: #1890ff;
	}
</style>
