<template>
	<div style="padding: 0px 35px; display: flex; justify-content: space-between; cursor: pointer;">
		<div>
			<border-panel height="443px" style="margin-bottom: 6px" title="高层建筑管理">
				<Construction :qx="qx" :glztList="glztList" :wbxsList="wbxsList" />
			</border-panel>
			<border-panel height="500px" style="margin-bottom: 6px" title="管理内容">
				<ManagementContent :qx="qx" />
			</border-panel>
		</div>
		<div>
			<div style="width: 900px; height: 1000px; display: flex;position: relative;justify-content: center; padding-top: 150px;">
				<MapCharts :formatter="showLabel"  :qx="qx" @selectArea="area => qx = area" />
				<div style="position: absolute; width: 500px; top: 10px; left: -20px">
					<SearchBox :area.sync="qx" />
				</div>
			</div>
		</div>
		<div>
			<border-panel height="521px" style="margin-bottom: 6px" title="建筑管理单位分布">
				<Management :gldListL="gldListL" :JzrzdList="JzrzdList" :wbdwList="wbdwList" />
			</border-panel>
			<border-panel height="421px" style="margin-bottom: 6px" title="建筑管理单位信息">
				<UnitInfo :qx="qx" />
			</border-panel>
		</div>

	</div>
</template>
<script>
	import Management from "./components/Management.vue";
	import UnitInfo from "./components/UnitInfo.vue";
	import Construction from "./components/Construction.vue";
	import ManagementContent from "./components/ManagementContent.vue";
	import MapCharts from "../Home/components/MapCharts.vue";
	import SearchBox from '@/components/SearchBox.vue';
	import {
		getGlzts,
		getWbxxs,
		getGldwgljzpm,
		getJzrzdwpms,
		getWbdwgljzpm,
	} from "@/api/management.js";
	export default {
		name: "FirePage",
		components: {
			Management,
			UnitInfo,
			Construction,
			ManagementContent,
			MapCharts,
			SearchBox
		},
		data() {
			return {
				glztList: [],
				wbxsList: [],
				gldListL: [],
				JzrzdList: [],
				ZjglList: [],
				wbdwList: [],
				qx: "重庆市",
				params: {
					pageSize: 100,
					pageNum: 1,
				},
				
				showLabel(params) {
					let res = params.name + "<br/>";
					res += `高层建筑数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
					return res;
				},
			};
		},
		watch: {
			qx() {
				this.unitZt();
				this.getWbxsList();
				this.getDwfbList();
				this.getDwpmList();
				this.getWbdwList()
			}
		},
		methods: {
			// 管理主体
			unitZt() {
				getGlzts({
					pageSize: 100,
					pageNum: 1,
					jzszqx: (this.qx === '重庆市' ? '' : this.qx),
				}).then((res) => {
					this.glztList = res.data.rows;
				});
			},
			// 维保形式
			getWbxsList() {
				getWbxxs({
					pageSize: 100,
					pageNum: 1,
					qx: (this.qx === '重庆市' ? '' : this.qx),
				}).then((res) => {
					this.wbxsList = res.data.rows;
				});
			},
			// 单位分布
			getDwfbList() {
				getGldwgljzpm({
					pageSize: 100,
					pageNum: 1,
					qx: (this.qx === '重庆市' ? '' : this.qx),
				}).then((res) => {
					this.gldListL = res.data.rows;
				});
			},
			//入住单位排名
			getDwpmList() {
				getJzrzdwpms({
					pageSize: 100,
					pageNum: 1,
					jzszqx: (this.qx === '重庆市' ? '' : this.qx),
				}).then((res) => {
					this.JzrzdList = res.data.rows;
				});
			},
			//维保单位
			getWbdwList() {
				getWbdwgljzpm({
					pageSize: 100,
					pageNum: 1,
					qx: (this.qx === '重庆市' ? '' : this.qx),
				}).then((res) => {
					this.wbdwList = res.data.rows;
				});
			},

		},
		created() {
			this.unitZt();
			this.getWbxsList();
			this.getDwfbList();
			this.getDwpmList();
			this.getWbdwList()
		},
	};
</script>

<style scoped lang="less"></style>
