/**
*@author:Guoxiaohuan
*@date:2020.05.26
*@info 项目概况主页
*/
<template>
    <div class='overview'>
        <div class='view-title'>
            <nav>
                <span></span>
                <span>项目基本信息</span>
            </nav>
            <div class='view-button' @click='findxmzl'>
                <img src='../../assets/imgs/wd.png' alt />
                项目资料
            </div>
        </div>
        <div class='view-box'>
            <div class='view-left'>
                <div class='lb-left'>
                    <div v-if='pic2.length>0' style='height:100%'>
                        <rotation :rotationImg='pic2'></rotation>
                        <div class='lb-icon' @click='picClick("2")'></div>
                        <img class='lb-img' @click='picClick("2")' src='../../assets/imgs/zk.png' alt />
                    </div>
                    <img v-else class='lb-left-noImg' src='@/assets/imgs/nkt.jpg' alt />
                </div>
                <div class='lb-bottom'>
                    <nav>
                        <span></span>
                        <span>建筑综合信息</span>
                    </nav>
                    <p class='place-p1'>
                        <span>
                            <img src='@/assets/imgs/jz.png' alt />
                            {{build.length>0?formatter('项目名称',build):'--'}}
                        </span>
                    </p>
                    <p class='place-p2'>
                        <span>
                            <img src='@/assets/imgs/didian.png' alt />
                            {{build.length>0?formatter('项目地址',build):'--'}}
                        </span>
                    </p>
                    <div class='place-bottom'>
                        <div class='place-box'>
                            <div class='place-left'>
                                <span>建筑面积</span>
                                <span>建筑高度</span>
                                <span>楼层分布</span>
                                <span>车位信息</span>
                            </div>
                            <div class='place-right'>
                                <span>{{build.length>0?formatter('建筑面积',build):'--'}}</span>
                                <span>{{build.length>0?formatter('建筑高度',build):'--'}}</span>
                                <span>{{build.length>0?formatter('楼层分布',build):'--'}}</span>
                                <span>{{build.length>0?formatter('车位信息',build):'--'}}</span>
                            </div>
                        </div>
                        <div class='place-box'>
                            <div class='place-left'>
                                <span>租赁面积</span>
                                <span>竣工日期</span>
                                <span>开业日期</span>
                                <span>移交日期</span>
                            </div>
                            <div class='place-right'>
                                <span>{{build.length>0?formatter('租赁面积',build):'--'}}</span>
                                <span>{{build.length>0?formatter('竣工日期',build):'--'}}</span>
                                <span>{{build.length>0?formatter('开业日期',build):'--'}}</span>
                                <span>{{build.length>0?formatter('移交日期',build):'--'}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='view-right'>
                <div class='view-right-box'>
                    <div class='lb-right'>
                        <div v-if='pic1.length>0' style='height:100%'>
                            <rotation :rotationImg='pic1'></rotation>
                            <div class='lb-icon' @click='picClick("1")'></div>
                            <img class='lb-img' @click='picClick("1")' src='../../assets/imgs/zk.png' alt />
                        </div>
                        <img v-else class='lb-left-noImg' src='@/assets/imgs/qwt.jpg' alt />
                    </div>
                    <div class='lb-right-bottom'>
                        <nav>
                            <span></span>
                            <span>施工单位信息</span>
                        </nav>
                        <div class='view-right-bottom'>
                            <el-table
                                :data='constructions'
                                :height='350'
                                style='font-size:12px'
                                :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
                                v-loading='loading'
                            >
                                <el-table-column label='序号' width='50' type='index' align='left'></el-table-column>
                                <el-table-column label='专业' width='70' prop='professional'>
                                    <template slot-scope='{row}'>{{row.professional||'--'}}</template>
                                </el-table-column>
                                <el-table-column prop='unit ' label='施工单位'>
                                    <template slot-scope='{row}'>{{row.unit ||'--'}}</template>
                                </el-table-column>
                                <el-table-column label='联系人' prop width='65'>
                                    <template slot-scope='{row}'>{{row.lxr||'--'}}</template>
                                </el-table-column>
                                <el-table-column prop='phone' label='联系电话' width='110'>
                                    <template slot-scope='{row}'>{{row.lxdh||'--'}}</template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <PicModal ref='picModal'></PicModal>
    </div>
    <!-- <div class='view-right-bottom' v-for='(item,index) in rightA' :key='index'>
                            <div class='view-right-bottom-l'>{{item.type}}</div>
                            <div class='view-right-bottom-r'>{{item.company}}</div>
    </div>-->
    <!-- <div class='view-left-box'>
                    <div class='view-left-top'>
                        <div class='view-top-imgL'>
                            <rotation :rotationImg='rotationImg'></rotation>
                        </div>
                        <div class='view-top-imgR'>
                            <rotation :rotationImg='rotationImg'></rotation>
                        </div>
                    </div>
                    <div class='view-left-bottom'>
                        <nav>
                            <span></span>
                            <span>建筑综合信息</span>
                        </nav>
                        <p class='place-p'>
                            <span>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼201室福建省三明市梅列区东乾二路1号</span>
                        </p>
                        <span class='place-hr'></span>
                        <div class='place-bottom'>
                            <div class='place-bottom-row'>
                                <div>
                                    <span>项目名称</span>
                                    <span>建筑高度</span>
                                    <span>楼层分布</span>
                                    <span>车位信息</span>
                                </div>
                                <div style='min-width:172px;'>
                                    <span>三明万达广场</span>
                                    <span>裙房31.22m</span>
                                    <span>地上5层/地下2层</span>
                                    <span>地上832个/地下0个</span>
                                </div>
                            </div>
                            <div class='place-bottom-row'>
                                <div>
                                    <span>竣工日期</span>
                                    <span>开业日期</span>
                                    <span>移交日期</span>
                                </div>
                                <div style='min-width:172px;'>
                                    <span>2016年11月21日</span>
                                    <span>2016年12月30日</span>
                                    <span>2017年04月30日</span>
                                </div>
                            </div>
                            <div class='place-bottom-row'>
                                <div>
                                    <span style='margin-bottom:32px'>建筑面积</span>
                                    <span>租赁面积</span>
                                </div>
                                <div>
                                    <span>
                                        13.07万㎡
                                        其中地上9.90万㎡、地下3.55万㎡
                                    </span>
                                    <span>
                                        6.45㎡
                                        其中地上5.82万㎡,地下0.63万㎡
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
    </div>-->
</template>
<script>
import PicModal from './picModal'
import { queryFact } from '@/api/overview'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            loading: true,
            pic1: [], //区位图
            pic2: [], //鸟瞰图
            build: {}, //左下信息
            constructions: [], //右下数组
            shuzihuayijiao: ''
        }
    },
    methods: {
        picClick(type) {
            if (type == 1) {
                this.$refs.picModal.showModal(this.pic1)
            } else {
                this.$refs.picModal.showModal(this.pic2)
            }
        },
        findxmzl() {
            if (this.shuzihuayijiao) {
                window.open(`${this.shuzihuayijiao}`, true)
            }
        },
        query() {
            let params = {
                getParams: {
                    plazaId: this.$store.state.plazaId
                    // plazaId: '1000303'//这个id有3条数据
                }
            }
            queryFact(params).then(res => {
                if (res.result == 'success') {
                    this.loading = false
                    this.pic1 = []
                    this.pic2 = []
                    this.build = {}
                    this.constructions = []
                    this.shuzihuayijiao = ''
                    this.pic1 = res.pic1 ? res.pic1 : []
                    this.pic2 = res.pic2 ? res.pic2 : []
                    this.build = res.build ? res.build : {}
                    this.constructions = res.constructions ? res.constructions : []
                    this.shuzihuayijiao = res.shuzihuayijiao ? res.shuzihuayijiao : ''
                }
            })
        },
        getImages(_url) {
            if (_url !== undefined) {
                let _u = _url.substring(7)
                return 'https://images.weserv.nl/?url=' + _u
            }
        },
        formatter(str, arrv) {
            if (str && arrv) {
                const Objs = arrv.find(e => e && e.project == str)
                return Objs ? Objs.basic : '--'
            } else {
                return ''
            }
        }
    },
    mounted() {
        //预览是否开启
        // let previewUrl = location.href.split('?')[1]
        // if (previewUrl) {
        //     previewUrl = Boolean(previewUrl.split('=')[1])
        //     this.$store.commit('SETISPREVIEW', previewUrl)
        // }
        let previewUrl = location.href.split('=')[1] ? location.href.split('=')[1].split('&')[0] : false,
            plazaId = location.href.split('=')[2] ? location.href.split('=')[2] : '1000423'
        console.log('previewUrl:', previewUrl)
        console.log('plazaId:', plazaId)
        this.$store.commit('SETISPREVIEW', previewUrl)
        this.query()
    },
    computed: {
        ...mapGetters(['isPreview'])
    },
    components: {
        PicModal
    }
}
</script>
<style lang="less" scoped>
@import '../../assets/css/rotation.less';
</style>
<style lang="less">
.view-right-bottom {
    .el-table td,
    .el-table th {
        padding: 3px 0;
    }
}
</style>
