<template>
	<div>
		<div class="ors">
			<div class="orstitle">
				<SvgIcon name="ele-Notification" class="font15 color" />
				<p>说明</p>
			</div>
			<div class="orsitem">1、尚未开展二手房合同网签的，要通过手工汇总的形式进行数据报送。</div>
			<div class="orsitem">2、成交面积：指当日（前一日14:00至当日14:00，下同）网签的新建商品房（二手房）买卖合同的房屋（住宅）总建筑面积。</div>
			<div class="orsitem">3、成交金额：指当日网签的新建商品房（二手房）及商品住宅（二手住宅）买卖合同总价款。</div>
		</div>
		<div class="ustitles">潍坊市房地产交易信息日报统计表</div>
		<div class="home-container layout-pd">
			<el-card shadow="hover" class="layout-padding-auto mb10">
				<div class="ctitle">
					<div class="title">手动上传</div>
					<el-button type="primary" size="default" @click="download(0)">下载Excel</el-button>
				</div>
				<movement @removeshow="removeshow" :month="state.month" :list="state.escalation"></movement>
			</el-card>
			<el-card shadow="hover" class="layout-padding-auto">
				<div class="ctitle">
					<div class="title">系统生成</div>
					<el-button type="primary" size="default" @click="download(1)">下载Excel</el-button>
				</div>
				<automaticv :month="state.month" :list="state.regular"></automaticv>
			</el-card>
		</div>

		<el-dialog v-model="state.show" title="退回" width="400px" :before-close="handleClose">
			<el-input v-model="state.form.remark" :rows="5" type="textarea" placeholder="请输入退回理由" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.show = false">取消</el-button>
					<el-button type="primary" @click="examine">确认退回</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="daydetail">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
import { entApi } from "/@/api/ent";
import { useRoute, useRouter } from "vue-router";
import { getday } from "/@/api/report/day";

const route = useRoute();
const router = useRouter();
import mittBus from "/@/utils/mitt";

// 自动
const automaticv = defineAsyncComponent(
	() => import("/@/views/report/day/components/automaticvTable.vue")
);

// 手动
const movement = defineAsyncComponent(
	() => import("/@/views/report/day/components/movementTable.vue")
);

const handleClose = () => {
	state.show = false;
}
// 弹出框退回
const removeshow = (id: any) => {
	state.form.id = id;
	state.show = true;
}

const examine = async () => {
	let sfrom = state.form;
	if (sfrom.id == '') return ElMessage.error('暂未找到id')
	if (sfrom.remark == '') return ElMessage.error('请输入理由')
	let item = await getday().examineup(state.form)
	if (item.code == 500) return ElMessage.error(item.msg)
	ElMessage.success(item.msg)
	gettable();
	state.show = false;
	state.form = { id: '', remark: '' }
}


const goBack = () => {
	router.go(-1);
	mittBus.emit(
		"onCurrentContextmenuClick",
		Object.assign({}, { contextMenuClickId: 1, ...route })
	);
};

// 定义变量内容
const state = reactive({
	form: { id: '', remark: '' },
	show: false,
	uid: '' as any,
	month: '',
	// 自动
	regular: [] as any,
	// 手动
	escalation: [] as any
});

const gettable = async () => {
	let items = await getday().getDetail(state.uid)
	let _arr = items.data;
	_arr.regular.forEach((res: any) => {
		if (_arr.escalation != null) {
			_arr.escalation.forEach((cres: any) => {
				if (cres.areaCode != '370700') {
					if (res.areaCode == cres.areaCode) {
						if (res.saleCount != cres.saleCount) cres.saleCounttag = 1
						else cres.saleCounttag = 0

						if (res.saleResCount != cres.saleResCount) cres.saleResCounttag = 1
						else cres.saleCounttag = 0

						if (res.saleArea != cres.saleArea) cres.saleAreatag = 1
						else cres.saleAreatag = 0

						if (res.saleResArea != cres.saleResArea) cres.saleResAreatag = 1
						else cres.saleResAreatag = 0

						if (res.saleAmount != cres.saleAmount) cres.saleAmounttag = 1
						else cres.saleAmounttag = 0

						if (res.saleResAmount != cres.saleResAmount) cres.saleResAmounttag = 1
						else cres.saleResAmounttag = 0

						if (res.secondCount != cres.secondCount) cres.secondCounttag = 1
						else cres.secondCounttag = 0

						if (res.secondResCount != cres.secondResCount) cres.secondResCounttag = 1
						else cres.secondResCounttag = 0

						if (res.secondArea != cres.secondArea) cres.secondAreatag = 1
						else cres.secondAreatag = 0

						if (res.secondResArea != cres.secondResArea) cres.secondResAreatag = 1
						else cres.secondResAreatag = 0

						if (res.secondAmount != cres.secondAmount) cres.secondAmounttag = 1
						else cres.secondAmounttag = 0

						if (res.secondResAmount != cres.secondResAmount) cres.secondResAmounttag = 1
						else cres.secondResAmounttag = 0

					}
				}
			})
		}
	})

	state.regular = items.data.regular
	state.month = items.data.regular[0].month + '月'
	state.escalation = items.data.escalation
}
function removeChar(str: string, char: string) {
	var regex = new RegExp(char, 'g');
	return str.replace(regex, '');
}

const download = async (row: any) => {
	let type = 0;
	let title = ''
	if (row == 0) {
		if (state.escalation == null) return ElMessage.error('暂无手动上传数据')
		if (state.escalation[1] == undefined) return ElMessage.error('暂无手动上传数据')
		type = state.escalation[1].reportType
		let date = removeChar(state.escalation[1].date, '-')
		title = `潍坊市日报${date}手动上传.xlsx`
	}
	else {
		if (state.escalation[1] == undefined) return ElMessage.error('暂无系统生成数据')
		type = state.regular[1].reportType
		let date = removeChar(state.regular[1].date, '-')
		title = `潍坊市日报${date}系统生成.xlsx`
	}
	// 下载excel
	let item = await getday().downloadUrl(state.uid, type);
	let download: any = await getday().download(item);
	let blob = new Blob([download], { type: "application/octet-stream;" });
	const url = window.URL.createObjectURL(blob);
	const link = document.createElement("a");
	link.href = url;
	link.download = title;
	document.body.appendChild(link);
	link.click();
};

// 页面加载时
onMounted(() => {
	state.uid = route.query.id
	gettable()
});
</script>

<style scoped lang="scss">
.ctitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 10px;
}

.ustitles {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 10px;
}

.ors {
	display: flex;
	flex-direction: column;
	background-color: #ecf2fe;
	padding: 20px;
	margin-bottom: 10px;
	margin: 10px;

	.orsitem {
		display: flex;
		align-items: center;
		padding-left: 20px;
		padding-bottom: 5px;

		b {
			flex: 0 0 5%;
			color: #001330;
		}
	}
}

.orstitle {
	display: flex;
	align-items: center;
	font-weight: bold;
	color: #333;
	font-size: 15px;
	margin-bottom: 10px;

	.color {
		color: #2362e1;
		margin-right: 4px;
	}
}

.title {
	font-weight: bold;
	font-size: 14px;
	border-left: 3px solid #409efe;
	padding-left: 10px;
	margin-bottom: 20px;
}

.bgwhite {
	background-color: #fff;
}
</style>