<template>
	<div>
		<div class="m-fwgl">
			<div class="m-pie">
				<div class="pie-left">
					<screen-echarts-frame
						class=""
						@myChartMethod="pieInitOk"
						ref="pieChart"
					></screen-echarts-frame>
				</div>
				<div class="pie-legend">
					<div class="item">
						<div class="item-logo logo1"></div>
						<div class="item-name">自住房屋</div>
					</div>
					<div class="item">
						<div class="item-logo logo2"></div>
						<div class="item-name">出租房屋</div>
					</div>
					<div class="item">
						<div class="item-logo logo3"></div>
						<div class="item-name">闲置房屋</div>
					</div>
				</div>
				<div class="pie-right">
					<div class="right-row">
						<div class="row-item" @click="toListPage">
							<div class="item-one">
								<img
									class="img"
									src="@/assets/images/shuju/renfang/house-logo.png"
									alt
								/>
								<div class="title">房屋总数</div>
							</div>
							<div class="item-two">
								<div class="num">{{ info.house_count }}</div>
								<div class="unit">户</div>
							</div>
						</div>

						<div
							class="row-item marginleft10"
							@click="toListPage('self_dwelling', '自住房屋')"
						>
							<div class="item-one">
								<img
									class="img"
									src="@/assets/images/shuju/renfang/house-logo.png"
									alt
								/>
								<div class="title">自住房屋</div>
							</div>
							<div class="item-two">
								<div class="num">
									{{ info.self_dwelling_count }}
								</div>
								<div class="unit">户</div>
							</div>
						</div>
					</div>
					<div
						class="right-row margintop18"
						@click="toListPage('lease', '出租房屋')"
					>
						<div class="row-item">
							<div class="item-one">
								<img
									class="img"
									src="@/assets/images/shuju/renfang/house-logo.png"
									alt
								/>
								<div class="title">出租房屋</div>
							</div>
							<div class="item-two">
								<div class="num">{{ info.lease_count }}</div>
								<div class="unit">户</div>
							</div>
						</div>

						<div
							class="row-item marginleft10"
							@click="toListPage('unused', '闲置房屋')"
						>
							<div class="item-one">
								<img
									class="img"
									src="@/assets/images/shuju/renfang/house-logo.png"
									alt
								/>
								<div class="title">闲置房屋</div>
							</div>
							<div class="item-two">
								<div class="num">{{ info.unused_count }}</div>
								<div class="unit">户</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="m-bar">
				<div class="bar-title">
					<img
						class="title_img"
						src="@/assets/images/index/list-logo.png"
						alt
					/>
					<div class="tip_title">近一年房屋状态变化趋势图</div>
					<div class="title_line"></div>
				</div>
				<div class="bar-legend">
					<div class="item-logo logo1"></div>
					<div class="item-name">自住房屋</div>
					<div class="item-logo logo2 marginleft10"></div>
					<div class="item-name">出租房屋</div>
					<div class="item-logo logo3 marginleft10"></div>
					<div class="item-name">闲置房屋</div>
				</div>
				<div class="bar-main">
					<screen-echarts-frame
						class=""
						@myChartMethod="barInitOk"
						ref="barChart"
					></screen-echarts-frame>
				</div>
			</div>

			<!-- <screen-nodata class="nodata"
                     v-if="showNoData"></screen-nodata> -->
		</div>
	</div>
</template>

<script>
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
import { pieOption } from "./fwPieOption.js";
import { barOption } from "./fwBarOption.js";
import { requestPostBi } from "@/js/dai/request-bipass";

export default {
	props: {
		orgId: {
			type: String,
			default: "",
		},
	},
	components: {
		screenEchartsFrame,
	},

	data() {
		return {
			showNoData: false,
			barChart: "",
			pieChart: "",
			pieOption: {},
			barOption: {},
			pieInitState: false,
			barInitState: false,
			pieData: [],

			info: {
				house_count: 0,
				self_dwelling_count: 0,
				lease_count: 0,
				unused_count: 0,
			},
		};
	},
	mounted() {
		this.getData();
	},
	watch: {
		orgId() {
			this.getData();
		},
	},
	methods: {
		toListPage(type = "", type_name = "") {
			this.$router.push({
				path: "/dataBoard/renfang/house-list",
				query: {
					org_id: this.orgId,
					type,
					type_name,
				},
			});
		},

		pieInitOk() {
			this.pieInitState = true;
		},
		barInitOk() {
			this.barInitState = true;
		},
		async getData() {
			await this.getInfo();
			this.getBar();
			this.getPie();
		},
		getBar() {
			if (this.barInitState) {
				this.getBarData();
			} else {
				setTimeout(() => {
					this.getBar();
				}, 500);
			}
		},
		getPie() {
			if (this.pieInitState) {
				this.iniPieChart();
			} else {
				setTimeout(() => {
					this.getPie();
				}, 500);
			}
		},

		// 获取房屋总数等
		async getInfo() {
			const url = "house_view";

			const { data, code, msg } = await requestPostBi(
				url,
				{
					queryParam: {
						org_id: this.orgId,
					},
				},
				{
					// mockId: 60007107,
				}
			);

			if (code === 0) {
				if (data && Array.isArray(data) && data.length > 0) {
					let info = data[0];
					this.info = { ...this.info, ...info };
				} else {
					this.info = {
						house_count: 0,
						self_dwelling_count: 0,
						lease_count: 0,
						unused_count: 0,
					};
				}
			} else {
				this.$message.error(msg);
			}
		},
		// 获取饼状图
		async iniPieChart() {
			this.$refs.pieChart.clear();
			// this.$refs.pieChart.showLoading()

			// 获取pieChart配置
			this.pieOption = pieOption();

			const { info } = this;
			// 设置三个配置值
			this.pieOption.title.text =
				(info.house_count != 0
					? parseInt(
							(100 * info.self_dwelling_count) / info.house_count
					  )
					: "--") + "%";
			this.pieData = [
				{ value: info.self_dwelling_count, name: "自住房屋" },
				{ value: info.lease_count, name: "出租房屋" },
				{ value: info.unused_count, name: "闲置房屋" },
			];
			this.pieOption.series[0].data = this.pieData;
			this.$refs.pieChart.setOption(this.pieOption);
			// this.$refs.pieChart.hideLoading()

			// 点击饼图 切换中心显示的比例
			this.$refs.pieChart.myChart.on("selectchanged", (params) => {
				console.log(params);
				const {
					fromActionPayload: { dataIndexInside },
				} = params;
				this.pieOption.title.text =
					(info.house_count != 0
						? parseInt(
								(100 *
									[
										info.self_dwelling_count,
										info.lease_count,
										info.unused_count,
									][dataIndexInside]) /
									info.house_count
						  )
						: "--") + "%";
				this.$refs.pieChart.myChart.setOption(this.pieOption);
			});
		},

		// 获取房屋总数等
		async getBarData() {
			const url = "house_trend";

			this.$refs.barChart.showLoading();
			const { data, code, msg } = await requestPostBi(
				url,
				{
					queryParam: {
						org_id: this.orgId,
					},
				},
				{
					// mockId: 60388110,
				}
			);

			if (code === 0) {
				let xaxis = [];
				let series = [{ data: [] }, { data: [] }, { data: [] }];
				if (data && Array.isArray(data) && data.length > 0) {
					for (const {
						month,
						self_dwelling_count,
						lease_count,
						unused_count,
					} of data) {
						xaxis.push(month);
						series[0].data.push(self_dwelling_count);
						series[1].data.push(lease_count);
						series[2].data.push(unused_count);
					}
				}
				this.iniBarChart(xaxis, series);
				this.$refs.barChart.hideLoading();
			} else {
				this.$message.error(msg);
			}
		},

		// 获取饼状图
		async iniBarChart(xaxis, series) {
			this.showNoData = false;
			this.$refs.barChart.clear();
			// let xaxis = [
			// 	"1月",
			// 	"2月",
			// 	"3月",
			// 	"4月",
			// 	"5月",
			// 	"6月",
			// 	"7月",
			// 	"8月",
			// 	"9月",
			// 	"10月",
			// 	"11月",
			// 	"12月",
			// ];
			// let series = [
			// 	{
			// 		data: [
			// 			120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134,
			// 			90,
			// 		],
			// 	},
			// 	{
			// 		data: [
			// 			120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134,
			// 			90,
			// 		],
			// 	},
			// 	{
			// 		data: [
			// 			120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134,
			// 			90,
			// 		],
			// 	},
			// ];
			this.barOption = barOption();
			this.$refs.barChart.setOption(this.barOption, true);
			this.$refs.barChart.setOption(
				{
					xAxis: { data: xaxis },
					series: series,
				},
				true
			);
		},
	},
};
</script>

<style lang="scss" scoped>
.m-fwgl {
	height: 100%;
	width: 100%;

	.m-pie {
		margin-top: 24px;
		display: flex;
		justify-content: space-around;

		.pie-left {
			height: 120px;
			flex: 0 0 120px;
		}

		.pie-legend {
			.item {
				display: flex;
				margin-bottom: 12px;
			}
		}
		.pie-right {
			.right-row {
				display: flex;
				// justify-content: space-between;

				.row-item {
					flex: 0 0 100px;
					.item-one {
						display: flex;
						.img {
							width: 15px;
							height: 15px;
						}
						.title {
							margin-left: 9px;
							font-size: 14px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(255, 255, 255, 0.65);
						}
					}

					.item-two {
						margin-top: 8px;
						display: flex;
						align-items: flex-end;
						margin-left: 23px;

						.num {
							font-size: 24px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #ffffff;
						}

						.unit {
							margin-left: 9px;
							font-size: 14px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #ffffff;
						}
					}
				}
			}
		}
	}

	.m-bar {
		position: relative;
		margin-top: 14px;

		.bar-title {
			display: flex;
			align-items: center;
			// margin-left: 24px;

			.title_img {
				width: 17px;
				height: 17px;
			}
			.tip_title {
				margin-left: 8px;
				font-size: 16px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 22px;
			}

			.title_line {
				margin-left: 8px;
				width: 244px;
				height: 1px;
				background: linear-gradient(
					270deg,
					rgba(55, 198, 255, 0.1) 0%,
					#1995ff 100%
				);
			}
		}

		.bar-legend {
			position: absolute;
			top: 37px;
			right: 20px;
			display: flex;
		}

		.bar-main {
			margin-top: 10px;
			height: 225px;
		}
	}
}

.item-name {
	margin-left: 8px;
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #8c8c8c;
}

.item-logo {
	margin-top: 2px;
	width: 8px;
	height: 8px;
}

.logo1 {
	background: #6fdeff;
}
.logo2 {
	background: #ffaa00;
}
.logo3 {
	background: #1a95ff;
}
.marginleft10 {
	margin-left: 10px;
}

.margintop18 {
	margin-top: 18px;
}
</style>
