productivity-platform-web/src/views/house/workbench/guarantyResult.vue

<template>
    <div class="contrl">
        <div class="title-div">
            <span>完善估价对象实物信息</span>
            <el-button class="genBtn" plain type="danger" @click="genResultDoc()">生成《房地产抵押估价结果报告》
                        <el-icon style="vertical-align: -20%;">
                            <ArrowRightBold />
                        </el-icon>
            </el-button>
        </div>
        <el-tabs v-model="activeName" class="targets-tabs" type="border-card">
            <el-tab-pane :label="'估价对象' + t.tid" :name="t.tid" :lazy="true" v-for="(t, index) in targets">
                <div class="targetTable">
                    <el-table :data="t.aims" border stripe size="default" ref="multipleTableRef"
                        :header-row-style="{ color: '#333333', 'font-size': '16px' }"
                        style="color: #333333; font-size: 16px;"  @selection-change="handleSelectionChange">
                        <el-table-column type="selection"  width="55" align="center" />
                        <el-table-column prop="tid" label="估价对象" width="80" align="center" />
                        <el-table-column prop="tno" label="序号" width="60" align="center" />
                        <el-table-column prop="certificateNo" label="权属证书号" width="220" align="center" />
                        <el-table-column prop="ownShipUser" label="权利人" show-overflow-tooltip
                            align="center" />
                        <el-table-column prop="location" label="坐落" show-overflow-tooltip width="300" align="center" />
                        <el-table-column prop="lngLat" label="经纬度" show-overflow-tooltip width="200"
                            align="center" />
                        <!-- <el-table-column prop="atFloor" label="所在楼层" width="60" align="center" />
                        <el-table-column prop="structure" label="结构" width="60" align="center" />
                        <el-table-column prop="useTo" label="用途" width="60" align="center" />
                        <el-table-column prop="outerAcreage" label="分摊或占用土地使用权面积(㎡)" align="center" />
                        <el-table-column prop="acreage" label="建筑面积(㎡)" width="60" align="center" />
                        <el-table-column prop="price" label="单价(元/㎡)" width="60" align="center" />
                        <el-table-column prop="amount" label="总价(万元)" width="60" align="center" />
                        <el-table-column prop="landCertificateNo" label="国有土地使用证号" align="center" />
                        <el-table-column prop="landType" label="地类(用途)" width="60" align="center" /> -->
                        <el-table-column label="操作" width="160" align="center">
                            <template v-slot="scope">
                                <el-button type="text" @click="addEntityInfo(scope.row.tid, scope.row.tno)">实物信息</el-button>
                                <el-button type="text" @click="getAreaInfoByLngLat(scope.row.lngLat,scope.row.docId,scope.row.tid, scope.row.tno,scope.row.location)">区位信息</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
               
            </el-tab-pane>
        </el-tabs>

        <div style="margin-top: 40px;">
                <div class="demo-button-style">
                    <!-- <el-checkbox-group v-model="targetPoint">
                        <el-checkbox-button v-for="p in t.list" :key="p.no" :value="p.no">
                            {{ p.no }}
                        </el-checkbox-button>
                    </el-checkbox-group> -->
                </div>
                <amap ref="map" :targetPoint="targetPoint" @getPOIData="getPOIData"></amap>
        </div>



        <el-dialog v-model="entityInfoDialog" width="85%" align-center @closed="cleanId">
            <h2>估价对象{{ tId }}序号{{ tNo }}</h2>
            <el-form :model="entityInfo" label-width="180" style="margin-top: 10px;">
            <el-divider content-position="left"><span style="color:#ff6154;">实物状况</span></el-divider>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="小区名称:" class="form-item" >
                        <el-input v-model="entityInfo.communityName" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="栋号:" class="form-item" >
                        <el-input v-model="entityInfo.buildingNo" clearable>
                            <template #append>
                                <span>栋</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="竣工年代:" class="form-item" >
                        <el-date-picker
                            v-model="entityInfo.houseAge"
                            type="year"
                            placeholder="请选择"
                            value-format="YYYY年"
                            />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="使用状况:" class="form-item" >
                        <el-select v-model="entityInfo.useInfo" clearable placeholder="请选择">
                            <el-option   label="出租" value="出租" />
                            <el-option   label="自用" value="自用" />
                            <el-option   label="空置" value="空置" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="产权/实际用途:" class="form-item" >
                        <el-input v-model="entityInfo.useTo" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="建筑外观:" class="form-item" >
                        <el-select v-model="entityInfo.buildingOut" clearable placeholder="请选择">
                            <el-option   label="水泥搓砂" value="水泥搓砂" />
                            <el-option   label="水刷石" value="水刷石" />
                            <el-option   label="刷外墙涂料" value="刷外墙涂料" />
                            <el-option   label="贴外墙砖" value="贴外墙砖" />
                            <el-option   label="真石漆" value="真石漆" />
                            <el-option   label="外墙复合材料" value="外墙复合材料" />
                            <el-option   label="干挂石材" value="干挂石材" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="所在层:" class="form-item" >
                        <el-input-number v-model="entityInfo.atFloor" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="总楼层:" class="form-item" >
                        <el-input-number v-model="entityInfo.floor" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="载人电梯（数量）:" class="form-item" >
                        <el-input-number v-model="entityInfo.elevator" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="层高（米）:" class="form-item" >
                        <el-input-number v-model="entityInfo.roomHigh" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="户型布局:" class="form-item" >
                        <el-input v-model="entityInfo.roomType" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="成新率:" class="form-item" >
                        <el-select v-model="entityInfo.newPercentage" clearable placeholder="请选择">
                            <el-option   label="全新" value="全新" />
                            <el-option   label="九成新" value="九成新" />
                            <el-option   label="八至九成新" value="八至九成新" />
                            <el-option   label="七至八成新" value="七至八成新" />
                            <el-option   label="六至七成新" value="六至七成新" />
                            <el-option   label="六成新以下" value="六成新以下" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="建筑结构:" class="form-item" >
                        <el-input v-model="entityInfo.buildingStructure" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="基本设施:" class="form-item" >
                        <el-select v-model="entityInfo.baseFacility" clearable placeholder="请选择">
                            <el-option   label="不通气" value="不通气" />
                            <el-option   label="通气" value="通气" />
                            <el-option   label="通气通暖" value="通气通暖" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="中央空调:" class="form-item" >
                        <el-radio-group v-model="entityInfo.centerAirConditioning">
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false" >否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="自动喷淋:" class="form-item" >
                        <el-radio-group v-model="entityInfo.autoSpray">
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false" >否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
               
                <el-col :span="6">
                    <el-form-item label="烟感报警:" class="form-item" >
                        <el-radio-group v-model="entityInfo.smogEmergency">
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false" >否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="消防栓:" class="form-item" >
                        <el-radio-group v-model="entityInfo.fireHydrant">
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false" >否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="网线光纤:" class="form-item" >
                        <el-radio-group v-model="entityInfo.netLine">
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false" >否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="可视对讲系统:" class="form-item" >
                        <el-radio-group v-model="entityInfo.visualSys">
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false" >否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="办公智慧系统:" class="form-item" >
                        <el-radio-group v-model="entityInfo.officeSmartSys">
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false" >否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
           
            <el-divider content-position="left"><span style="color:#ff6154;">装饰装修</span></el-divider>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="客厅地面:" class="form-item" >
                        <el-select v-model="entityInfo.livingroomGround" 
                            filterable
                            allow-create
                            default-first-option
                            :reserve-keyword="false">
                            <el-option   label="贴400*400地砖" value="贴400*400地砖" />
                            <el-option   label="贴600*600地砖" value="贴600*600地砖" />
                            <el-option   label="贴800*800地砖" value="贴800*800地砖" />
                            <el-option   label="铺实木地板" value="铺实木地板" />
                            <el-option   label="铺强化木地板" value="铺强化木地板" />
                            <el-option   label="贴防滑地砖" value="贴防滑地砖" />
                            <el-option   label="铺马赛克" value="铺马赛克" />
                            <el-option   label="为水泥地坪" value="为水泥地坪" />
                            <el-option   label="为水泥砂浆找平" value="为水泥砂浆找平" />
                            <el-option   label="铺地毯" value="铺地毯" />
                            <el-option   label="刷地坪漆" value="刷地坪漆" />
                            <el-option   label="其它" value="其它" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客厅天棚:" class="form-item" >
                        <el-select v-model="entityInfo.livingroomTop" 
                            filterable
                            allow-create
                            default-first-option
                            :reserve-keyword="false">
                            <el-option   label="水泥砂浆刮平" value="水泥砂浆刮平" />
                            <el-option   label="白色腻子刮平" value="白色腻子刮平" />
                            <el-option   label="刷乳胶漆" value="刷乳胶漆" />
                            <el-option   label="安装石膏吊角线" value="安装石膏吊角线" />
                            <el-option   label="石膏板吊顶装饰" value="石膏板吊顶装饰" />
                            <el-option   label="石膏板吊边顶" value="石膏板吊边顶" />
                            <el-option   label="木质吊顶装饰" value="木质吊顶装饰" />
                            <el-option   label="金属网格吊顶" value="金属网格吊顶" />
                            <el-option   label="塑料扣板吊顶" value="塑料扣板吊顶" />
                            <el-option   label="铝扣板吊顶" value="铝扣板吊顶" />
                            <el-option   label="矿棉板吊顶" value="矿棉板吊顶" />
                            <el-option   label="其它" value="其它" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客厅内墙:" class="form-item" >
                        <el-select v-model="entityInfo.livingroomWall" allow-create clearable default-first-option placeholder="请选择">
                            <el-option   label="水泥砂浆刮平" value="水泥砂浆刮平" />
                            <el-option   label="白色腻子刮平" value="白色腻子刮平" />
                            <el-option   label="刷乳胶漆" value="刷乳胶漆" />
                            <el-option   label="贴墙砖" value="贴墙砖" />
                            <el-option   label="木包装饰" value="木包装饰" />
                            <el-option   label="软包装饰" value="软包装饰" />
                            <el-option   label="贴墙纸" value="贴墙纸" />
                            <el-option   label="贴墙布" value="贴墙布" />
                            <el-option   label="刷白色涂料" value="刷白色涂料" />
                            <el-option   label="局部木质墙裙，其余部分刷乳胶漆" value="局部木质墙裙，其余部分刷乳胶漆" />
                            <el-option   label="瓷砖墙裙，其余部分刷乳胶漆" value="瓷砖墙裙，其余部分刷乳胶漆" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客厅其他部分:" class="form-item" >
                        <el-select v-model="entityInfo.livingroomOther" allow-create clearable default-first-option placeholder="请选择">
                            <el-option   label="入户安装防盗门" value="入户安装防盗门" />
                            <el-option   label="入户安装防火门" value="入户安装防火门" />
                            <el-option   label="入户安装铁门" value="入户安装铁门" />
                            <el-option   label="入户安装实木门" value="入户安装实木门" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="卧室地面:" class="form-item" >
                        <el-select v-model="entityInfo.bedroomGround" 
                            filterable
                            allow-create
                            default-first-option
                            :reserve-keyword="false">
                            <el-option   label="贴400*400地砖" value="贴400*400地砖" />
                            <el-option   label="贴600*600地砖" value="贴600*600地砖" />
                            <el-option   label="贴800*800地砖" value="贴800*800地砖" />
                            <el-option   label="铺实木地板" value="铺实木地板" />
                            <el-option   label="铺强化木地板" value="铺强化木地板" />
                            <el-option   label="贴防滑地砖" value="贴防滑地砖" />
                            <el-option   label="铺马赛克" value="铺马赛克" />
                            <el-option   label="为水泥地坪" value="为水泥地坪" />
                            <el-option   label="为水泥砂浆找平" value="为水泥砂浆找平" />
                            <el-option   label="铺地毯" value="铺地毯" />
                            <el-option   label="刷地坪漆" value="刷地坪漆" />
                            <el-option   label="其它" value="其它" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="卧室天棚:" class="form-item" >
                        <el-select v-model="entityInfo.bedroomTop" 
                            filterable
                            allow-create
                            default-first-option
                            :reserve-keyword="false">
                            <el-option   label="水泥砂浆刮平" value="水泥砂浆刮平" />
                            <el-option   label="白色腻子刮平" value="白色腻子刮平" />
                            <el-option   label="刷乳胶漆" value="刷乳胶漆" />
                            <el-option   label="安装石膏吊角线" value="安装石膏吊角线" />
                            <el-option   label="石膏板吊顶装饰" value="石膏板吊顶装饰" />
                            <el-option   label="石膏板吊边顶" value="石膏板吊边顶" />
                            <el-option   label="木质吊顶装饰" value="木质吊顶装饰" />
                            <el-option   label="金属网格吊顶" value="金属网格吊顶" />
                            <el-option   label="塑料扣板吊顶" value="塑料扣板吊顶" />
                            <el-option   label="铝扣板吊顶" value="铝扣板吊顶" />
                            <el-option   label="矿棉板吊顶" value="矿棉板吊顶" />
                            <el-option   label="其它" value="其它" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="卧室内墙:" class="form-item" >
                        <el-select v-model="entityInfo.bedroomWall" allow-create clearable default-first-option placeholder="请选择">
                            <el-option   label="水泥砂浆刮平" value="水泥砂浆刮平" />
                            <el-option   label="白色腻子刮平" value="白色腻子刮平" />
                            <el-option   label="刷乳胶漆" value="刷乳胶漆" />
                            <el-option   label="贴墙砖" value="贴墙砖" />
                            <el-option   label="木包装饰" value="木包装饰" />
                            <el-option   label="软包装饰" value="软包装饰" />
                            <el-option   label="贴墙纸" value="贴墙纸" />
                            <el-option   label="贴墙布" value="贴墙布" />
                            <el-option   label="刷白色涂料" value="刷白色涂料" />
                            <el-option   label="局部木质墙裙，其余部分刷乳胶漆" value="局部木质墙裙，其余部分刷乳胶漆" />
                            <el-option   label="瓷砖墙裙，其余部分刷乳胶漆" value="瓷砖墙裙，其余部分刷乳胶漆" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="卧室其他部分:" class="form-item" >
                        <el-select v-model="entityInfo.bedroomOther" allow-create clearable default-first-option placeholder="请选择">
                            <el-option   label="入户安装防盗门" value="入户安装防盗门" />
                            <el-option   label="入户安装防火门" value="入户安装防火门" />
                            <el-option   label="入户安装铁门" value="入户安装铁门" />
                            <el-option   label="入户安装实木门" value="入户安装实木门" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="厨房及卫生间地面:" class="form-item" >
                        <el-select v-model="entityInfo.bathroomGround" 
                            filterable
                            allow-create
                            default-first-option
                            :reserve-keyword="false">
                            <el-option   label="贴400*400地砖" value="贴400*400地砖" />
                            <el-option   label="贴600*600地砖" value="贴600*600地砖" />
                            <el-option   label="贴800*800地砖" value="贴800*800地砖" />
                            <el-option   label="铺实木地板" value="铺实木地板" />
                            <el-option   label="铺强化木地板" value="铺强化木地板" />
                            <el-option   label="贴防滑地砖" value="贴防滑地砖" />
                            <el-option   label="铺马赛克" value="铺马赛克" />
                            <el-option   label="为水泥地坪" value="为水泥地坪" />
                            <el-option   label="为水泥砂浆找平" value="为水泥砂浆找平" />
                            <el-option   label="铺地毯" value="铺地毯" />
                            <el-option   label="刷地坪漆" value="刷地坪漆" />
                            <el-option   label="其它" value="其它" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="厨房及卫生间天棚:" class="form-item" >
                        <el-select v-model="entityInfo.bathroomTop" 
                            filterable
                            allow-create
                            default-first-option
                            :reserve-keyword="false">
                            <el-option   label="水泥砂浆刮平" value="水泥砂浆刮平" />
                            <el-option   label="白色腻子刮平" value="白色腻子刮平" />
                            <el-option   label="刷乳胶漆" value="刷乳胶漆" />
                            <el-option   label="安装石膏吊角线" value="安装石膏吊角线" />
                            <el-option   label="石膏板吊顶装饰" value="石膏板吊顶装饰" />
                            <el-option   label="石膏板吊边顶" value="石膏板吊边顶" />
                            <el-option   label="木质吊顶装饰" value="木质吊顶装饰" />
                            <el-option   label="金属网格吊顶" value="金属网格吊顶" />
                            <el-option   label="塑料扣板吊顶" value="塑料扣板吊顶" />
                            <el-option   label="铝扣板吊顶" value="铝扣板吊顶" />
                            <el-option   label="矿棉板吊顶" value="矿棉板吊顶" />
                            <el-option   label="其它" value="其它" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="厨房及卫生间内墙:" class="form-item" >
                        <el-select v-model="entityInfo.bathroomWall" allow-create clearable default-first-option placeholder="请选择">
                            <el-option   label="水泥砂浆刮平" value="水泥砂浆刮平" />
                            <el-option   label="白色腻子刮平" value="白色腻子刮平" />
                            <el-option   label="刷乳胶漆" value="刷乳胶漆" />
                            <el-option   label="贴墙砖" value="贴墙砖" />
                            <el-option   label="木包装饰" value="木包装饰" />
                            <el-option   label="软包装饰" value="软包装饰" />
                            <el-option   label="贴墙纸" value="贴墙纸" />
                            <el-option   label="贴墙布" value="贴墙布" />
                            <el-option   label="刷白色涂料" value="刷白色涂料" />
                            <el-option   label="局部木质墙裙，其余部分刷乳胶漆" value="局部木质墙裙，其余部分刷乳胶漆" />
                            <el-option   label="瓷砖墙裙，其余部分刷乳胶漆" value="瓷砖墙裙，其余部分刷乳胶漆" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="厨房及卫生间其他部分:" class="form-item" >
                        <el-select v-model="entityInfo.bathroomOther" allow-create clearable default-first-option placeholder="请选择">
                            <el-option   label="入户安装防盗门" value="入户安装防盗门" />
                            <el-option   label="入户安装防火门" value="入户安装防火门" />
                            <el-option   label="入户安装铁门" value="入户安装铁门" />
                            <el-option   label="入户安装实木门" value="入户安装实木门" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                
            </el-row>
            <el-row :gutter="24">
                <el-col :span="24">
                    <el-form-item label="土地开发程度:" class="form-item" >
                        <el-select v-model="entityInfo.landDeep" clearable placeholder="请选择" style="width: 100%;">
                            <el-option   label="宗地外“六通”（通上水、通下水、通电、通气、通路、通讯）、宗地内“五通一平”(通上水、通下水、通讯、通电、通路、场地平整)" 
                                        value="宗地外“六通”（通上水、通下水、通电、通气、通路、通讯）、宗地内“五通一平”(通上水、通下水、通讯、通电、通路、场地平整)" />
                            <el-option   label="宗地外“六通”（通上水、通下水、通电、通气、通路、通讯）、宗地内“六通一平”(通上水、通下水、通讯、通电、通气、通路、场地平整)" 
                                        value="宗地外“六通”（通上水、通下水、通电、通气、通路、通讯）、宗地内“六通一平”(通上水、通下水、通讯、通电、通气、通路、场地平整)" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-divider content-position="left"><span style="color:#ff6154;">项目四至</span></el-divider>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="东至:" class="form-item" >
                        <el-input v-model="entityInfo.eastWay" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="西至:" class="form-item" >
                        <el-input v-model="entityInfo.westWay" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="南至:" class="form-item" >
                        <el-input v-model="entityInfo.southWay" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="北至:" class="form-item" >
                        <el-input v-model="entityInfo.northWay" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-popover
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="将此实物信息复制到其他标的物。减少填写麻烦，个别字段若需修改可手动调整。"
                        >
                        <template #reference>
                            <el-button type="success" @click="copyEntityInfo()">复制到其他标的</el-button>
                        </template>
                    </el-popover>
                    <el-button @click="entityInfoDialog = false">取消</el-button>
                    <el-button type="danger" @click="removeEntityInfo()">删除</el-button>
                    <el-button type="primary" @click="saveEntityInfo()">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="areaInfoDialog" width="85%" align-center @closed="cleanLngLat">
            <h2>估价对象{{ tId }}序号{{ tNo }}</h2>
            <div class="infoType">
                <el-divider content-position="left">
                    <span  class="infoTitle">道路</span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        content="刷新"
                        placement="top-start"
                    >
                    <span class="refresh" @click="refreshRoad"><el-icon><Refresh /></el-icon></span>
                </el-tooltip>
                </el-divider>
                <div style="padding-left: 100px;">
                    <span class="infoItem" closable type="primary" v-for="(r ,index) in areaInfo.road" @click="removeRoad(r)">
                    {{(index+1) +'、'+ r }}
                    </span>
                </div>
            </div>
            <div class="infoType">
                <el-divider content-position="left">
                    <span  class="infoTitle">公共交通</span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        content="刷新"
                        placement="top-start"
                    >
                    <span class="refresh" @click="refreshPublicTransport"><el-icon><Refresh /></el-icon></span>
                </el-tooltip>
                </el-divider>
                <div style="padding-left: 100px;">
                    <span class="infoItem" closable type="primary" v-for="(r ,index) in areaInfo.publicTransport" @click="removePublicTransport(r)">
                        {{(index+1) +'、'+ r }}
                    </span>
                </div>
            </div>
            <div class="infoType">
                <el-divider content-position="left">
                    <span  class="infoTitle">停车场</span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        content="刷新"
                        placement="top-start"
                    >
                    <span class="refresh" @click="refreshPark"><el-icon><Refresh /></el-icon></span>
                </el-tooltip>
                </el-divider>
                <div style="padding-left: 100px;">
                    <span class="infoItem" closable type="primary" v-for="(r ,index) in areaInfo.park" @click="removePark(r)">
                        {{(index+1) +'、'+ r }}
                    </span>
                </div>
            </div>
            <div class="infoType">
                <el-divider content-position="left">
                    <span  class="infoTitle">商场</span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        content="刷新"
                        placement="top-start"
                    >
                    <span class="refresh" @click="refreshBusiness"><el-icon><Refresh /></el-icon></span>
                </el-tooltip>
                </el-divider>
                <div style="padding-left: 100px;">
                    <span class="infoItem" closable type="primary" v-for="(r ,index) in areaInfo.business" @click="removeBusiness(r)">
                        {{(index+1) +'、'+ r}}
                    </span>
                </div>
            </div>
            <div class="infoType">
                <el-divider content-position="left">
                    <span  class="infoTitle">周边小区</span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        content="刷新"
                        placement="top-start"
                    >
                    <span class="refresh" @click="refreshCommunity"><el-icon><Refresh /></el-icon></span>
                </el-tooltip>
                </el-divider>
                <div style="padding-left: 100px;">
                    <span class="infoItem" closable type="primary" v-for="(r ,index) in areaInfo.community" @click="removeCommunity(r)">
                        {{(index+1) +'、'+ r }}
                    </span>
                </div>
            </div>
            <div class="infoType">
                <el-divider content-position="left">
                    <span  class="infoTitle">教育机构</span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        content="刷新"
                        placement="top-start"
                    >
                    <span class="refresh" @click="refreshEducation"><el-icon><Refresh /></el-icon></span>
                </el-tooltip>
                </el-divider>
                <div style="padding-left: 100px;">
                    <span class="infoItem" closable type="primary" v-for="(r ,index) in areaInfo.education" @click="removeEducation(r)">
                        {{(index+1) +'、'+ r }}
                    </span>
                </div>
            </div>
            <div class="infoType">
                <el-divider content-position="left">
                    <span  class="infoTitle">医院</span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        content="刷新"
                        placement="top-start"
                    >
                    <span class="refresh" @click="refreshHospital"><el-icon><Refresh /></el-icon></span>
                </el-tooltip>
                </el-divider>
                <div style="padding-left: 100px;">
                    <span class="infoItem" closable type="primary" v-for="(r ,index) in areaInfo.hospital" @click="removeHospital(r)">
                        {{(index+1) +'、'+ r }}
                    </span>
                </div>
            </div>
            <div class="infoType">
                <el-divider content-position="left">
                    <span  class="infoTitle">银行</span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        content="刷新"
                        placement="top-start"
                    >
                    <span class="refresh" @click="refreshBank"><el-icon><Refresh /></el-icon></span>
                </el-tooltip>
                </el-divider>
                <div style="padding-left: 100px;">
                    <span class="infoItem" closable type="primary" v-for="(r ,index) in areaInfo.bank" @click="removeBank(r)">
                        {{(index+1) +'、'+ r }}
                    </span>
                </div>
            </div>
            <div class="infoType">
                <el-divider content-position="left">
                    <span  class="infoTitle">酒店宾馆</span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        content="刷新"
                        placement="top-start"
                    >
                    <span class="refresh" @click="refreshHotal"><el-icon><Refresh /></el-icon></span>
                    </el-tooltip>
                </el-divider>
                <div style="padding-left: 100px;">
                    <span class="infoItem" closable type="primary" v-for="(r ,index) in areaInfo.hotel" @click="removeHotel(r)">
                        {{(index+1) +'、'+ r }}
                    </span>
                </div>
            </div>
            <div class="infoType">
                <el-divider content-position="left">
                    <span  class="infoTitle">风景名胜</span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        content="刷新"
                        placement="top-start"
                    >
                    <span class="refresh" @click="refreshSpot"><el-icon><Refresh /></el-icon></span>
                    </el-tooltip>
                </el-divider>
                <div style="padding-left: 100px;">
                    <span class="infoItem" closable type="primary" v-for="(r ,index) in areaInfo.spot" @click="removeSpot(r)">
                        {{(index+1) +'、'+ r.name }}
                    </span>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="entityInfoDialog = false">取消</el-button>
                    <el-button type="primary" @click="saveAreaInfo()">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>


<script>
import houseGuaranty from '@/api/houseGuaranty';
import houseTargetEntity from '@/api/houseTargetEntity';
import houseTargetArea from '@/api/houseGuarantyArea';
import amap from '../../../components/MapContainer/index.vue';

export default {

    components: {
        amap
    },

    created() {
        this.docId = this.$route.query.id;
        this.getTargets();
    },

    watch:{
        activeName:{
            handler(nv,ov){
                const target = this.targets.filter(item=>item.tid = nv)
                this.targetPoint = target.aims;
            },
            immediate:true
        },
        targets:{
            handler(){
               this.updatePoint();
            },
        }
        
    },

    data() {
        return {
            activeName: '①',
            docId: null,
            targets: [],
            certificateName:'1',
            entityInfoDialog:false,
            entityInfo:{
                id:null,
                businessId:null,
                tid:null,
                tno:null,
                houseAge:null,
                useInfo:null,
                useTo:null,
                buildingOut:null,
                atFloor:null,
                floor:null,
                elevator:null,
                centerAirConditioning:null,
                autoSpray:null,
                smogEmergency:null,
                fireHydrant:null,
                netLine:null,
                visualSys:null,
                buildingStructure:null,
                officeSmartSys:null,
                baseFacility:null,
                roomType:null,
                roomHigh:null,
                newPercentage:null,
                livingroomGround:null,
                livingroomTop:null,
                livingroomWall:null,
                livingroomOther:null,
                bedroomGround:null,
                bedroomTop:null,
                bedroomWall:null,
                bedroomOther:null,
                bathroomGround:null,
                bathroomTop:null,
                bathroomWall:null,
                bathroomOther:null,
                landDeep:null
            },
            tId: null,
            tNo: null,
            location:null,
            targetPoint:[],
            mapDialog:false,
            areaInfoDialog:false,
            areaInfo:{
                docId:null,
                tid:null,
                tno:null,
                lng:null,
                lat:null,
                road:[],
                publicTransport:[],
                park:[],
                business:[],
                community:[],
                education:[],
                hospital:[],
                bank:[],
                hotel:[],
                spot:[],
            },
            redius:'1000',
            curLngLat:null,
            lng:null,
            lat:null

        }
    },

    methods: {

        updatePoint(){
            this.targetPoint = this.targets[0].aims;
        },

        getTargets() {
            houseGuaranty.getTargetsById(this.docId).then(res => {
                if (res.code === 200) {
                    this.targets = res.data;
                }
            })
        },

        saveSupplement(t){
            t.docId= this.docId;
            t.baseInfo = JSON.stringify(t.list);
            houseGuaranty.saveSupplement(t).then(res=>{
                if (res.code === 200){
                    ElMessage({
                        message: '估价对象'+t.tid+',补充信息已保存.',
                        type: 'success',
                        plain: true
                    })
                    t.id = res.data;
                }
            })
        },


        addEntityInfo(id,no){
            this.tId = id;
            this.tNo = no;
            houseTargetEntity.get(this.docId,id,no).then(res=>{
                if (res.code === 200 && res.data!=null){
                    this.entityInfo = res.data
                }else{
                    this.entityInfo = {};
                }
            })
            this.entityInfoDialog = true;
        },
        saveEntityInfo(){
            this.entityInfo.businessId = this.docId;
            this.entityInfo.tid= this.tId;
            this.entityInfo.tno = this.tNo;
            houseTargetEntity.save(this.entityInfo).then(res=>{
                if (res.code === 200 && res.data){
                    ElMessage({
                        message: '实物状况保存成功.',
                        type: 'success',
                        plain: true
                    })
                    this.entityInfo.id = res.data;
                }
            })
        },
        cleanId() {
            this.tId = null;
            this.tNo = null;
            this.cers = [];

        },

        removeEntityInfo(){
            ElMessageBox.confirm('请确认是否删除此实物状况信息？', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                draggable: true,
            }).then(()=>{
                houseTargetEntity.delete(this.entityInfo.id).then(res=>{
                if (res.code === 200 && res.data){
                    ElMessage({
                        message: '实物状况已删除.',
                        type: 'success',
                        plain: true
                    })
                    houseTargetEntity.get(this.docId,this.tId,this.tNo).then(res=>{
                        if (res.code === 200 ){
                            this.entityInfo = {};
                        }
                    })
                }

            })
            })
          
        },

        copyEntityInfo(){
            houseTargetEntity.copyEntityInfo(this.entityInfo.id).then(res=>{
                if (res.code === 200 ){
                    ElMessage({
                        message: '复制成功',
                        type: 'success',
                        plain: true
                    })
                }
            })
        },

        genResultDoc(){
            houseGuaranty.genResultDoc(this.docId).then(res=>{
                if (res.code === 200){
                    if (res.code === 200) {
                    ElMessage({
                        message: '《房地产抵押估价结果报告》生成成功',
                        type: 'success',
                        plain: true
                    })
                    this.$emit('updateTimeline');
                }
                }
            })
        },

        handleSelectionChange(val){
            this.targetPoint = val;
        },
        getPOIData(data){
            if (data.infoType=='ROAD'){
                this.areaInfo.road = data.pois.map(item=>item.name)
            }
            if (data.infoType=='PUBLIC-TRANSPORT'){
                this.areaInfo.publicTransport = data.pois.map(item=>item.name)
            }
            if (data.infoType=='PARK'){
                this.areaInfo.park = data.pois.map(item=>item.name)
            }
            if (data.infoType=='BUSINESS'){
                this.areaInfo.business = data.pois.map(item=>item.name)
            }
            if (data.infoType=='COMMUNITY'){
                this.areaInfo.community = data.pois.map(item=>item.name)
            }
            if (data.infoType=='EDUCATION'){
                this.areaInfo.education = data.pois.map(item=>item.name)
            }
            if (data.infoType=='HOSPITAL'){
                this.areaInfo.hospital = data.pois.map(item=>item.name)
            }
            if (data.infoType=='BANK'){
                this.areaInfo.bank = data.pois.map(item=>item.name)
            }
            if (data.infoType=='HOTEL'){
                this.areaInfo.hotel = data.pois.map(item=>item.name)
            }
            if (data.infoType=='SPOT'){
                this.areaInfo.spot = data.pois
            }
           
        },

        getAreaInfoByLngLat(lngLat,docId,tid,tno,location){
            this.tId = tid;
            this.tNo = tno;
            this.docId = docId;
            this.location = location;
            let lngLats = lngLat.split(",");
            this.lng = lngLats[0];
            this.lat = lngLats[1];
            this.areaInfoDialog = true;
            //先查询保存的区位信息
            houseTargetArea.getByDocIdTidTNo(docId,tid,tno).then(res=>{
                if (res.code===200 && res.data!=null){
                    this.areaInfo.id = res.data.id;
                    this.areaInfo.tid = res.data.id;
                    this.areaInfo.tno = res.data.id;
                    this.areaInfo.lat = res.data.id;
                    this.areaInfo.lng = res.data.id;
                    this.areaInfo.road = JSON.parse(res.data.road);
                    this.areaInfo.publicTransport = JSON.parse(res.data.publicTransport);
                    this.areaInfo.park = JSON.parse(res.data.park);
                    this.areaInfo.business = JSON.parse(res.data.business);
                    this.areaInfo.community = JSON.parse(res.data.community);
                    this.areaInfo.education = JSON.parse(res.data.education);
                    this.areaInfo.hospital = JSON.parse(res.data.hospital);
                    this.areaInfo.bank = JSON.parse(res.data.bank);
                    this.areaInfo.hotel = JSON.parse(res.data.hotel);
                    this.areaInfo.spot = JSON.parse(res.data.spot);
                }else {
                     //再根据经纬度范围查询
                    houseTargetArea.getByLngLat(lngLat).then(res=>{
                        if (res.code===200 && res.data!=null){
                            this.areaInfo.road = JSON.parse(res.data.road);
                            this.areaInfo.publicTransport = JSON.parse(res.data.publicTransport);
                            this.areaInfo.park = JSON.parse(res.data.park);
                            this.areaInfo.business = JSON.parse(res.data.business);
                            this.areaInfo.community = JSON.parse(res.data.community);
                            this.areaInfo.education = JSON.parse(res.data.education);
                            this.areaInfo.hospital = JSON.parse(res.data.hospital);
                            this.areaInfo.bank = JSON.parse(res.data.bank);
                            this.areaInfo.hotel = JSON.parse(res.data.hotel);
                            this.areaInfo.spot = JSON.parse(res.data.spot);
                        }else{
                            //调用高德API接口获取
                            this.getAMapInfo(lngLat)
                        }
                        
                    })
                }
            })
        },

        async getAMapInfo(lngLat){
            this.curLngLat = lngLat;
            this.$refs.map.collectRoad(this.redius,lngLat);
            this.$refs.map.collectPublicTransport(this.redius,lngLat);
            this.$refs.map.colletPark(this.redius,lngLat);
            // 规避高德接口QPS限制
            await this.sleep(1000);
            this.$refs.map.collectBusiness(this.redius,lngLat);
            this.$refs.map.collectCommunity(this.redius,lngLat);
            this.$refs.map.collectEducation(this.redius,lngLat);
            // 规避高德接口QPS限制
            await this.sleep(1000);
            this.$refs.map.collectHospital(this.redius,lngLat);
            this.$refs.map.collectBank(this.redius,lngLat);
            this.$refs.map.collectHotal(this.redius,lngLat);
            // 规避高德接口QPS限制
            await this.sleep(1000);
            this.$refs.map.collectSpot(this.redius,lngLat);
            
        },
        refreshRoad(){
            this.$refs.map.collectRoad(this.redius,this.curLngLat);
           
        },
        refreshPublicTransport(){
            this.$refs.map.collectPublicTransport(this.redius,this.curLngLat);
        },
        refreshPark(){
            this.$refs.map.colletPark(this.redius,this.curLngLat);
        },
        refreshBusiness(){
            this.$refs.map.collectBusiness(this.redius,this.curLngLat);
        },
        refreshCommunity(){
            this.$refs.map.collectCommunity(this.redius,this.curLngLat);
        },
        refreshEducation(){
            this.$refs.map.collectEducation(this.redius,this.curLngLat);
        },
        refreshHospital(){
            this.$refs.map.collectHospital(this.redius,this.curLngLat);
        },
        refreshBank(){
            this.$refs.map.collectBank(this.redius,this.curLngLat);
        },
        refreshHotal(){
            this.$refs.map.collectHotal(this.redius,this.curLngLat);
        },
        refreshSpot(){
            this.$refs.map.collectSpot(this.redius,this.curLngLat);
        },
        cleanLngLat(){
            this.curLngLat=null;
            this.location = null;
            this.lng = null,
            this.lat = null,
            this.areaInfo.id=null,
            this.areaInfo.tid=null,
            this.areaInfo.tno=null,
            this.areaInfo.lng = null,
            this.areaInfo.lat = null,
            this.areaInfo.road=[];
            this.areaInfo.publicTransport=[];
            this.areaInfo.park=[];
            this.areaInfo.business=[];
            this.areaInfo.community=[];
            this.areaInfo.education=[];
            this.areaInfo.hospital=[];
            this.areaInfo.bank=[];
            this.areaInfo.hotel=[];
            this.areaInfo.spot=[];
        },
        removeRoad(i){
           this.areaInfo.road = this.areaInfo.road.filter(item=>item!=i);
        },
        removePublicTransport(i){
           this.areaInfo.publicTransport = this.areaInfo.publicTransport.filter(item=>item!=i);
        },
        removeBusiness(i){
           this.areaInfo.business = this.areaInfo.business.filter(item=>item!=i);
        },
        removeCommunity(i){
           this.areaInfo.community = this.areaInfo.community.filter(item=>item!=i);
        },
        removeEducation(i){
           this.areaInfo.education = this.areaInfo.education.filter(item=>item!=i);
        },
        removeHospital(i){
           this.areaInfo.hospital = this.areaInfo.hospital.filter(item=>item!=i);
        },
        removePark(i){
           this.areaInfo.park = this.areaInfo.park.filter(item=>item!=i);
        },
        removeHotel(i){
           this.areaInfo.hotel = this.areaInfo.hotel.filter(item=>item!=i);
        },
        removeBank(i){
           this.areaInfo.bank = this.areaInfo.bank.filter(item=>item!=i);
        },
        removeSpot(i){
           this.areaInfo.spot = this.areaInfo.spot.filter(item=>item.name!=i.name);
        },
        saveAreaInfo(){
            this.areaInfoDialog = false;
            this.areaInfo.docId = this.docId;
            this.areaInfo.tid = this.tId;
            this.areaInfo.tno = this.tNo;
            this.areaInfo.lng = this.lng;
            this.areaInfo.lat = this.lat;
            this.areaInfo.location = this.location;
            this.areaInfo.road = JSON.stringify(this.areaInfo.road);
            this.areaInfo.publicTransport = JSON.stringify(this.areaInfo.publicTransport);
            this.areaInfo.park = JSON.stringify(this.areaInfo.park);
            this.areaInfo.business = JSON.stringify(this.areaInfo.business);
            this.areaInfo.community = JSON.stringify(this.areaInfo.community);
            this.areaInfo.education = JSON.stringify(this.areaInfo.education);
            this.areaInfo.hospital = JSON.stringify(this.areaInfo.hospital);
            this.areaInfo.bank = JSON.stringify(this.areaInfo.bank);
            this.areaInfo.hotel = JSON.stringify(this.areaInfo.hotel);
            this.areaInfo.spot = JSON.stringify(this.areaInfo.spot);
            houseTargetArea.save(this.areaInfo).then(res=>{
                if (res.code ===200 && res.data){
                    ElMessage({
                        message: '区位状况保存成功',
                        type: 'success',
                        plain: true
                    })
                }
            })
        },

        sleep(delay){
            return new Promise((resolve) => setTimeout(resolve,delay))
        }

    }
}
</script>

<style scoped>
.contrl {
    font-size: 20px;
    width: 70.9%;
    border-right: 1.5px #dae1eb solid;
    padding: 0px 20px 20px 0px;
    float: left;

}

.title-div {
    height: 80px;
    line-height: 80px;
    width: 100%;
    font-size: 20px;
    font-weight: 900;
}

.genBtn{
    float: right;
    margin-top: 30px;
}
.infoType{
    width: 100%;
    font-size: 16px;
    padding: 10px;
}
.infoTitle{
    font-weight: bold;
    font-size: 20px;
    margin-right: 10px;
}
.infoItem{
    margin-left: 10px;
    padding: 5px;
    font-size: 18px;
    white-space: nowrap; 
}
.infoItem:hover{
    cursor: pointer;
    color: #ff6154;
}
.refresh:hover{
    color: #ff6154;
    cursor: pointer;
}

/* .el-radio-group {
    --el-radio-group-width: 220px;
}

.el-input {
    --el-input-width: 100%;
} */

:deep(.el-select) {
    width: 220px;
}

:deep(.el-input) {
    width: 220px;
}

:deep(.el-table .cell) {
    padding: 0px;
}

:deep(.el-input__wrapper.is-focus) {
    --el-input-focus-border: #ff6154;
    --el-input-focus-border-color: #ff6154;
}

:deep(.el-radio-group__wrapper.is-focused) {
    box-shadow: #ff6154;
    --el-radio-group-input-focus-border-color: #ff6154;
    --el-color-primary: #ff6154;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
    background: #ff6154;
    border-color: #ff6154;
}

:deep(.el-radio__inner:hover) {
    border-color: #ff6154;
}

:deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #ff6154;

}
:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active){
    color: #ff6154;
}
:deep(.el-tabs__item.is-active, .el-tabs__item:hover){
    color: #ff6154;
}
:deep(.el-checkbox__label) {
    font-size: 15px;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #ff6154;
    border-color: #ff6154;
    font-size: 20px;
}
:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
    color:#ff6154;
    
}
:deep(.el-tabs__active-bar){
    background-color:#ff6154;
}
:deep(.el-tabs__item.is-active) {
    color:#ff6154;
}
:deep(.el-tabs__item:hover){
    color:#ff6154;
}
.certificates-tabs {
 margin-top: 30px;
}

:deep(.el-input__wrapper.is-focus) {
  --el-input-focus-border: #ff6154;
  --el-input-focus-border-color:#ff6154;
}
:deep(.el-button--text:hover){
    color:#ff6154;
}
:deep(.el-button--text){
    color:#ff6154;
}
:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner){
    background-color:#ff6154;
    border-color:#ff6154;
}
:deep(.el-checkbox__inner:hover){
    border-color:#ff6154;
}
</style>