<template>
    <div ref="tableView" id="contract">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="display:inline-block;">
            <el-breadcrumb-item :to="{ path: '/own' }">业主管理</el-breadcrumb-item>
            <el-breadcrumb-item>项目合同</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button
            @click="getPorjMess"
            style="float:right;margin-right:30px;"
            class="create_pero"
            size="small"
            icon="el-icon-plus"
        >建立新项目</el-button>
        <el-table :data="tableData" :height="height" v-loading="isLoading" style="width: 100%">
            <el-table-column fixed sortable prop="projectName" label="项目本地名称"></el-table-column>
            <el-table-column fixed sortable prop="projectId" label="项目ID"></el-table-column>
            <el-table-column fixed sortable prop="buildingNum" label="建筑数量"></el-table-column>
            <el-table-column fixed label="项目地址">
                <template slot-scope="scope">
                    <el-button
                        style="white-space: inherit;"
                        @click="seeMap(scope.row)"
                        type="text"
                        size="small"
                    >
                        <i class="el-icon-location-outline"></i>
                        {{ scope.row.area }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="endDate" sortable label="服务终止日期"></el-table-column>
            <el-table-column label="涉及朵朵服务项目">
                <template slot-scope="scope">{{ scope.row.services | server }}</template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click="getPorjMess(scope.row)" type="text" size="small">项目及建筑信息</el-button>
                    <el-button @click="getCont(scope.row)" type="text" size="small">合同及合同管理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <cont-dialog
            :show="buildShow"
            :funcTypeArr="funcTypeArr"
            :param="param"
            :buildMess="buildMess"
            v-if="buildShow"
            @close="getData"
        ></cont-dialog>
        <contract-dialog v-if="contractShow" :show="contractShow" @close="getData" :param="param"></contract-dialog>
        <el-dialog title="地图信息" :visible.sync="mapDialog" width="50%">
            <b-map v-if="mapDialog" type="noChange" :location="location"></b-map>
        </el-dialog>
    </div>
</template>

<script>
// import myMap from "@/components/modules/map";
// import formInput from "@/components/market/owner/formInput";
import contractDialog from "@/components/market/owner/perj";
import contDialog from "@/components/market/owner/contractDialog";
import tools from "@/utils/tools";
import bMap from "@/components/market/owner/map";
import mapInit from '@/utils/mapInit'
export default {
    name: "perject",
    components: {
        // myMap,
        // formInput,
        contractDialog,
        contDialog,
        bMap
    },
    data() {
        return {
            tableData: [],
            height: 700, //table高度
            proprietorId: this.$route.query.id,
            contractShow: false, //合同弹窗的显示
            buildShow: false, // 建筑信息的显示
            isLoading: true, //是否进行loading动画
            param: {}, //给组件的业主id和项目id
            buildMess: [], //建筑信息点
            funcTypeArr: [], //功能类型数组
            mapDialog: false, //地图显示
            location: {},//经纬度信息
        };
    },
    created() {
        this.getData();
        this.getBuildMess();
        this.getfuncArr();
        this.resize()
    },
    mounted() {
        //百度地图初始化
        mapInit.init()
        window.addEventListener("resize", this.resize)
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.resize)
    },
    methods: {
        resize() {
            let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            this.height = height - 180
        },
        //获取表格数据
        getData() {
            this.buildShow = false
            this.contractShow = false
            let params = {
                proprietorId: this.proprietorId
            };
            this.postJson(
                "/server/business-os/proprietor/query_project",
                params,
                resp => {
                    this.tableData = resp.content;
                    this.isLoading = false;
                }
            );
        },

        //获取建筑功能下拉数组
        getfuncArr() {
            this.getJson("/server/business-os/dict/query/building", {}, res => {
                this.funcTypeArr = res.Content;
            });
        },

        //获取建筑信息点
        getBuildMess() {
            this.getJson(
                "/server/business-os/infocode/query/building",
                {},
                res => {
                    this.buildMess = tools.arrayCnt(res.content);
                }
            );
        },

        //点击项目地址显示地址
        seeMap(row) {
            this.location = {
                lng: row.location.Longitude,
                lat: row.location.Latitude
            }
            this.mapDialog = true
        },

        //获取项目及建筑信息的弹窗
        getPorjMess(row) {
            this.param.proprietorId = this.$route.query.id;
            this.param.projectName = row.projectName
            if (row) {
                this.param.perjId = row.projectId;
            } else {
                this.paeam.perjId = "";
            }
            this.buildShow = true;
        },

        //获取合同资料弹窗
        getCont(row) {
            this.param.proprietorId = this.$route.query.id;
            if (row) {
                this.param.perjId = row.projectId;
            } else {
                this.paeam.perjId = "";
            }
            this.contractShow = true;
        }
    },

    //过滤器
    filters: {
        //简单处理数组
        server(val) {
            let isObj = val instanceof Array;
            let string = "";
            if (isObj) {
                for (let i = 0; i < val.length; i++) {
                    if (i == val.length || i == 0) {
                        string += string + val[i].serviceName;
                    } else {
                        string += "、" + val[i].serviceName;
                    }
                }
            } else {
                string = "暂无服务";
            }
            return string;
        }
    }
};
</script>

<style lang="scss">
#contract .el-dialog__body {
  max-height: 600px;
  overflow-y: auto;
}
</style>

