<template>
	<div style="padding: 0px 35px; display: flex; justify-content: space-between">
		<div>
			<border-panel height="301px" style="margin-bottom: 2px" title="关键指标" @click="openBasicModal">
				<KeyIndex :qx="qx" />
			</border-panel>
			<border-panel height="337px" style="margin-bottom: 2px" title="起火原因">
				<FireReason :qx="qx" />
			</border-panel>
			<border-panel height="313px" title="起火场所（类型）">
				<FireAddressType :qx="qx" />
			</border-panel>
		</div>
		<div>
			<div>
				<div style="width: 910px; display: flex; position: relative;">
					<MapCharts :mapHeatData="heatMap" :formatter="showLabel"  :qx="qx" @selectArea="area => qx = area" />
					<div style="position: absolute;width: 500px; left: 10px;top: 10px;">
						<search-box :area.sync="qx" />
					</div>
				</div>
			</div>
			<div class="center-box">
				<border-panel class="fire-time" :header-type="3" height="313px" width="955px" style="margin: 7px;cursor: pointer;"
					title="火灾时段（24时）" @click="opemFries">
					<FireTime :qx="qx" :type="type" />
					<template #ext-header>
						<button-block :items="['本年', '近5年', '季节']" @select-item="selectItemHandler" />
					</template>
				</border-panel>
			</div>
		</div>
		<div>
			<border-panel height="486px" style="margin-bottom: 7px" title="火灾分布" >
				<FireDistribution :qx="qx" />
			</border-panel>
			<border-panel height="460px" title="历史火灾">
				<FireHistory :qx="qx" />
			</border-panel>
		</div>
		<basic-modal top="120px" ref="basicInfoModal" name="火灾分析">
			<hzfxCont :qx="qx" /> 
		</basic-modal>
		<basic-modal top="120px" ref="HistoryModal" name="历史火灾查询">
      <hzfbCont :qy="qx" />
    </basic-modal>
	</div>
</template>
<script>
	import FireReason from "./components/FireReason.vue";
	import FireAddressType from "./components/FireAddressType.vue";
	import KeyIndex from './components/KeyIndex/index.vue'
	import FireDistribution from './components/FireDistribution.vue'
	import FireHistory from './components/FireHistory.vue'
	import FireTime from './components/FireTime.vue'
	import SearchBox from '@/components/SearchBox.vue';
	import MapCharts from "../Home/components/MapCharts.vue";
	import hzfxCont from "./components/hzfxCont.vue";
	import hzfbCont from "./components/hzfbCont.vue";
	import { fireDistribution } from '@/api/hzfx'
	import {
		formatCityData
	} from '../../utils'
	export default {
		name: "FireCondition",
		components: {
			FireReason,
			FireAddressType,
			KeyIndex,
			FireDistribution,
			FireHistory,
			FireTime,
			SearchBox,
			MapCharts,
			hzfxCont,	
			hzfbCont
		},
		data() {
			return {
				qx: '重庆市',
				type: 1,
				heatMap: []
			}
		},
		created() {
			this.loadData()
		},
		methods: {
			showLabel(params) {
        let res = params.name + "<br/>";
        res += `本年火灾起数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
        return res;
      },
			change(e) {
				this.qx = e.target.value
			},
			selectItemHandler(idx) {
				this.type = (idx + 1)
			},
			openBasicModal() {
				this.showModal("basicInfoModal");
			},
			loadData() {
				fireDistribution({
					pageNum: 1,
					pageSize: 100
				}).then(res => {
					const data = res.data.rows
					this.heatMap = formatCityData(data.map(item => ({
						name: item.qx,
						value: item.bnhzqs
					})))
				})
			},
			opemFries(){
				this.showModal('HistoryModal')
			}
		}
	};
</script>

<style scoped lang="less">
	.center-box {
		// margin-top: 602px;
	}
</style>
