<template>
	<a-card title="预警数统计及分布" style="margin-bottom: 10px">
		<a-row :gutter="16">
			<a-col :span="14">
				<div class="chart_content">
					<chart-warn v-if="warnList.length > 0" :id="0" :data="{ name: '预警数', unit: '条', list: warnList }"></chart-warn>
					<a-empty v-else style="padding-top: 100px" />
				</div>
			</a-col>
			<a-col :span="10">
				<div class="chart_content">
					<chart-warn-pie v-if="warnPie.length > 0" :id="0" :list="warnPie"></chart-warn-pie>
					<a-empty v-else style="padding-top: 100px" />
				</div>
			</a-col>
		</a-row>
	</a-card>
	<a-card title="预警列表">
		<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
			<a-row :gutter="16">
				<a-col :span="4">
					<a-form-item label="类别" name="warningType">
						<a-select v-model:value="searchFormState.warningType">
							<a-select-option v-for="item in typeList" :key="item.id" :value="item.id">{{item.configName}}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="位置" name="unitId">
						<a-tree-select
							v-model:value="searchFormState.unitId"
							style="width: 100%"
							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							placeholder="请选择位置"
							allow-clear
							tree-default-expand-all
							:tree-data="treeData"
							:field-names="{
								children: 'children',
								label: 'name',
								value: 'id'
							}"
							selectable="false"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="1">
					<a-form-item>
						<div :class="['cursor', active === 0 ? 'isActive' : '']" @click="cut(0)">今日</div>
					</a-form-item>
				</a-col>
				<a-col :span="1">
					<a-form-item>
						<div :class="['cursor', active === 1 ? 'isActive' : '']" @click="cut(1)">本周</div>
					</a-form-item>
				</a-col>
				<a-col :span="1">
					<a-form-item>
						<div :class="['cursor', active === 2 ? 'isActive' : '']" @click="cut(2)">本月</div>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item>
						<a-range-picker v-model:value="date" @change="dateChange" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</a-form-item>
				</a-col>
				<a-col :span="2">
					<a-button type="primary" @click="table.refresh(true)">
						<template #icon><SearchOutlined /></template>
						查询
					</a-button>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-card :bordered="false">
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:expand-row-by-click="true"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:row-selection="options.rowSelection"
			@resizeColumn="(w, col) => {
				col.width = w
			}"
		>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'warningStatus'">
					<a-tag v-if="record.warningStatus === 0" color="#f50">未处理</a-tag>
					<a-tag v-else-if="record.warningStatus === 1" color="#87d068">已处理</a-tag>
				</template>
			</template>
		</s-table>
	</a-card>
</template>

<script setup name="anomaly">
	import bizWarnAnomalyApi from '@/api/biz/warn/bizWarnAnomalyApi'
	import chartWarn from '../chart/chartWarn.vue'
	import chartWarnPie from '../chart/chartWarnPie.vue'
	import bizHouseApi from "@/api/biz/bizHouseApi";
	const searchFormRef = ref()
	const searchFormState = ref({})
	const active = ref(0)
	const date = ref([])

	const dateChange = (val) => {
		if(val.length > 0) {
			active.value = 3
		}
	}

	const warnList = ref([])
	const initWarn = () => {
		bizWarnAnomalyApi.getWarningChart().then((res) => {
			warnList.value = res
		})
	}

	const warnPie = ref([])
	const initPie = () => {
		let params = {
			type: 1
		}
		bizWarnAnomalyApi.getWarningPie(params).then((res) => {
			console.log(res)
			warnPie.value = res.list
		})
	}

	const cut = (val) => {
		if (active.value === val) {
			return
		} else {
			active.value = val
			if(val < 3) {
				date.value = []
			}
			table.value.refresh(true)
		}
	}

	const table = ref()
	const formRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const show = ref(true)
	const columns = [
		{
			title: '时间',
			dataIndex: 'warningTime',
			width: 150,
			fixed: true,
			sorter: true
		},
		{
			title: '类型',
			dataIndex: 'warningType',
			width: 150,
			resizable: true,
			ellipsis: true
		},
		{
			title: '位置',
			dataIndex: 'buildName',
			width: 150,
			resizable: true,
			ellipsis: true
		},
		{
			title: '内容',
			dataIndex: 'warningContent',
			width: 150,
			resizable: true,
			ellipsis: true
		},
		{
			title: '状态',
			dataIndex: 'warningStatus',
			width: 150,
			resizable: true,
			ellipsis: true
		},
		{
			title: '通知人',
			dataIndex: 'warningNotifierName',
			width: 150,
			resizable: true,
			ellipsis: true
		}
	]
	const selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}

	const loadData = async (parameter) => {
		let params = {
			type: active.value
		}
		if(active.value === 3) {
			params.startWarningTime = date.value[0];
			params.endWarningTime = date.value[1]
		}
		return bizWarnAnomalyApi.getWarningPage(Object.assign(parameter, params, searchFormState.value)).then((data) => {
			return data
		})
	}

	const typeList = ref([])
	const initType = () => {
		bizWarnAnomalyApi.getWarningType().then(res => {
			typeList.value = res
		})
	}

	const treeData = ref([])
	const initHouse = () => {
		bizHouseApi.basePigpenTree().then(res => {
			treeData.value = res
		})
	}

	onMounted(() => {
		initWarn()
		initPie()
		initType()
		initHouse()
	})
</script>

<style scoped>
	.chart_content {
		width: 100%;
		height: 400px;
	}
	.cursor {
		cursor: pointer;
	}
	.isActive {
		color: #1890ff;
	}

</style>
