<script setup>
	import {
		computed,
		ref
	} from 'vue'

	import {
		onLoad
	} from "@dcloudio/uni-app"

	import {
		timeFormat
	} from "@/utils/timeFormatter.js"

	import store from '@/store'

	import {
		getInfo,
	} from "@/api/login.js"

	import {
		getJSDDlist,
		getXMLXlist,
		getHYFLlist,
	} from "@/api/work/projectInfo.js"

	import {
		getXMXZlist,

	} from "@/api/home.js"

	function backToBefore() {
		uni.navigateBack({})
	};

	let pageForm = ref({
		beginDateStart: null,
		beginDateEnd: null,
		kind: null,
		indusKind: null,
		propKind: null,
		subjectId: null,
		status: null,
		subName: null,
		startAmt: null,
		endAmt: null,
		isHide: null,
		light: ['红灯', '黄灯', '绿灯'],
	})

	// ====================================选择开始时间
	let beginDateStart = ref(null)
	let beginTimeShow = ref(false)

	function showBeginTimeChoose() {
		beginTimeShow.value = true
	}

	function beginTimeClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			pageForm.value.beginDateStart = time
		}
		beginTimeShow.value = false
	}

	// ====================================选择结束时间
	let beginDateEnd = ref(null)
	let endTimeShow = ref(false)

	function showEndTimeChoose() {
		endTimeShow.value = true
	}

	function endTimeClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			pageForm.value.beginDateEnd = time
		}
		endTimeShow.value = false
	}

	// ====================================选择项目类型
	let kindShow = ref(false);
	let kindColumns = ref([]);

	function showKindChoose() {
		kindShow.value = true
	}

	function kindClose(e) {
		if (e) pageForm.value.kind = e.value[0];
		kindShow.value = false;
	}

	let kindFull = [];
	const getXMLX = function() {
		getXMLXlist().then(res => {
			kindFull = res.data.list;
			kindFull.unshift({
				key: null,
				value: "所有类型"
			});

			kindColumns.value = [res.data.list.map(item => item.value)];
		})
	};

	// ====================================选择行业分类
	let industKindOrgin = []
	let IndustKindList = ref([])
	let IndustKindShow = ref(false)

	function showIndustKindChoose() {
		IndustKindShow.value = true
	}

	function IndustKindClose(e) {
		if (e) pageForm.value.indusKind = e.value[0];
		IndustKindShow.value = false
	}

	// ====================================选择行业状态
	// let statusList = ref([
	// 	["请选择", "暂存", "项目申报", "待审批", "审批中", "核准备案中", "计划编制", "待开工", "施工中", "年度完工", "不同意", "已完工"]
	// ])
	let statusList = ref([
		["请选择", "暂存", "项目前期", "待开工", "施工中", "暂停施工", "已完工"]
	])

	let statusShow = ref(false)

	function showStatusChoose() {
		statusShow.value = true
	}

	function statusClose(e) {
		if (e) pageForm.value.status = e.value[0];
		statusShow.value = false;
	}

	// ====================================选择隐藏状态
	let isHideNameList = ref([
		["请选择",
			"正常",
			"隐藏"
		]
	])
	let isHideNameShow = ref(false)

	function showIsHideNameChoose() {
		isHideNameShow.value = true
	}

	function isHideNameClose(e) {
		if (e) pageForm.value.isHideName = e.value[0];
		isHideNameShow.value = false;
	}

	// =====================================地点
	let areaShow = ref(false);
	let areaColumns = ref([]);
	const showAreaChoose = function() {
		areaShow.value = true;
	}
	const areaClose = function(e) {
		if (e) pageForm.value.subjectId = e.value[0];
		areaShow.value = false;
	}
	let jsddFull = [];

	const getJSDD = function() {
		getJSDDlist().then(res => {
			jsddFull = res.data.list;
			jsddFull.push({
				key: null,
				value: "所有地区"
			});

			areaColumns.value = [res.data.list.map(item => item.value)];
			areaColumns.value[0].unshift("所有地区");
		})
	};

	// =====================================性质
	let xmxzShow = ref(false);
	let xmxzColumns = ref([]);
	const showXmxzChoose = function() {
		xmxzShow.value = true;
	}
	const xmxzClose = function(e) {
		if (e) pageForm.value.propKind = e.value[0];
		xmxzShow.value = false;
	}
	let xmxzFull = [];

	const getXMXZ = function() {
		getXMXZlist().then(res => {
			xmxzFull = res.data.list;
			xmxzFull.unshift({
				key: null,
				value: "所有性质"
			});

			xmxzColumns.value = [res.data.list.map(item => item.value)];
		})
	};

	// =====================================灯
	let lightShow = ref(false);
	const kindUnit = store.getters && store.getters.kindUnit;

	function judgeLightShow() {
		if ((kindUnit ?? '') === '') {
			// 为空就请求一下
			getInfo().then(res => {
				lightShow.value = res?.data?.user?.kindUnit === "1";
			})
		} else {
			lightShow.value = kindUnit === "1";
		}
	}

	let lightList = ref([{
		name: '红灯'
	}, {
		name: '黄灯'
	}, {
		name: '绿灯'
	}])

	function confirmParams() {

		// let statusObj = {
		// 	"请选择": "",
		// 	"暂存": "0",
		// 	"项目申报": "1",
		// 	"待审批": "2",
		// 	"审批中": "3",
		// 	"核准备案中": "4",
		// 	"计划编制": "5",
		// 	"待开工": "6",
		// 	"施工中": "7",
		// 	"不同意": "8",
		// 	"年度完工": "9",
		// 	"已完工": "A"
		// }
		let statusObj = {
			"请选择": "",
			"暂存": "0",
			"项目前期": "1",
			"待开工": "6",
			"施工中": "7",
			"暂停施工": "8",
			//"年度完工": "9",
			"已完工": "A"
		}

		let isHideNameObj = {
			"请选择": "",
			"正常": "0",
			"隐藏": "1",
		}

		let lightObj = {
			"绿灯": "0",
			"黄灯": "1",
			"红灯": "2"
		}
		let lightText = ""
		for (let i in pageForm.value.light) {
			lightText += lightObj[pageForm.value.light[i]] + ","
		}
		if (lightText.length > 0) lightText = lightText.substr(0, lightText.length - 1);
		let paramsData = {
			"beginDateStart": pageForm.value.beginDateStart,
			"beginDateEnd": pageForm.value.beginDateEnd,
			"kind": kindFull.find(item => item.value === pageForm.value.kind)?.key,
			"indusKind": industKindOrgin.find(item => item.value === pageForm.value.indusKind)?.key,
			"subjectId": jsddFull.find(item => item.value === pageForm.value.subjectId)?.key,
			"propKind": xmxzFull.find(item => item.value === pageForm.value.propKind)?.key,
			"status": statusObj[pageForm.value.status],
			"subName": pageForm.value.subName,
			"startAmt": pageForm.value.startAmt,
			"endAmt": pageForm.value.endAmt,
			"isHide": isHideNameObj[pageForm.value.isHideName],
			"light": lightText
		}
		uni.$emit('projectInfoSearch', paramsData);
		uni.navigateBack({});
	}

	onLoad(async () => {
		let now = new Date();
		let year = now.getFullYear();
		// 开始时间
		beginDateStart.value = pageForm.value.beginDateStart = year + "/01/01";
		// 结束时间
		beginDateEnd.value = pageForm.value.beginDateEnd = year + "/12/31";
		// 行业分类列表
		const res = await getHYFLlist()
		industKindOrgin = res.data.list
		let titleList = res.data.list.map(item => item.value)
		titleList.unshift("请选择")
		IndustKindList.value = [titleList]
		getJSDD(); // 建设地点列表
		getXMXZ(); // 项目性质列表
		getXMLX(); // 项目类型列表
		judgeLightShow()
	})
</script>

<template>
	<view class="container">
		<page-title>查询</page-title>

		<view class="cards-list">
			<view class="card only-card">
				<!-- 计划开始日期 -->
				<view class="card-item first-card-item" @click="showBeginTimeChoose()">
					<view class="card-item-name">开始日期</view>
					<view class="card-item-description">
						<view v-if="pageForm.beginDateStart">{{pageForm.beginDateStart}}</view>
						<view v-else class="remind-text">请选择开始日期</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 计划结束日期 -->
				<view class="card-item" @click="showEndTimeChoose()">
					<view class="card-item-name">结束日期</view>
					<view class="card-item-description">
						<view v-if="pageForm.beginDateEnd">{{pageForm.beginDateEnd}}</view>
						<view v-else class="remind-text">请选择结束日期</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 项目类型 -->
				<view class="card-item" @click="showKindChoose()">
					<view class="card-item-name">项目类型</view>
					<view class="card-item-description">
						<view v-if="pageForm.kind">{{pageForm.kind}}</view>
						<view v-else class="remind-text">请选择类型</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 项目性质 -->
				<view class="card-item" @click="showXmxzChoose()">
					<view class="card-item-name">项目性质</view>
					<view class="card-item-description">
						<view v-if="pageForm.propKind">{{pageForm.propKind}}</view>
						<view v-else class="remind-text">请选择性质</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 建设地点 -->
				<view class="card-item" @click="showAreaChoose()">
					<view class="card-item-name">建设地点</view>
					<view class="card-item-description">
						<view v-if="pageForm.subjectId">{{pageForm.subjectId}}</view>
						<view v-else class="remind-text">请选择地点</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 行业分类 -->
				<view class="card-item" @click="showIndustKindChoose()">
					<view class="card-item-name">行业分类</view>
					<view class="card-item-description">
						<view v-if="pageForm.indusKind">{{pageForm.indusKind}}</view>
						<view v-else class="remind-text">请选择类型</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 行业状态 -->
				<view class="card-item" @click="showStatusChoose()">
					<view class="card-item-name">状态</view>
					<view class="card-item-description">
						<view v-if="pageForm.status">{{pageForm.status}}</view>
						<view v-else class="remind-text">请选择状态</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 隐藏状态 -->
				<view class="card-item" @click="showIsHideNameChoose()">
					<view class="card-item-name">隐藏状态</view>
					<view class="card-item-description">
						<view v-if="pageForm.isHideName">{{pageForm.isHideName}}</view>
						<view v-else class="remind-text">请选择隐藏状态</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 金额范围 -->
				<view class="card-item">
					<view class="card-item-name " style="min-width: 256rpx;">金额范围（万元）</view>
					<view class="card-item-range">
						<input v-model="pageForm.startAmt" class="card-item-input center-input" placeholder="最小值"
							placeholder-style="color: #D8D8D8" maxlength="20" type="number" />
						~
						<input v-model="pageForm.endAmt" class="card-item-input center-input" placeholder="最大值"
							placeholder-style="color: #D8D8D8" maxlength="20" type="number" />
					</view>
				</view>

				<!-- 项目名称 -->
				<view class="card-item">
					<view class="card-item-name">项目名称</view>
					<input v-model="pageForm.subName" class="card-item-input" placeholder="请填写项目名称"
						placeholder-style="color: #D8D8D8" maxlength="20" />
				</view>

				<!-- 红黄绿灯 -->
				<view class="card-item" v-if="lightShow">
					<u-checkbox-group v-model="pageForm.light">
						<u-checkbox :customStyle="{display:'flex',justifyContent:'center',width:'33%'}" label-size="16px"
							labelColor='#343437' v-for="(item, index) in lightList" :key="index" :label="item.name" :name="item.name">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>

			<view class="confirm-btn" @click="confirmParams()">确定</view>
		</view>

		<!-- 开始时间 -->
		<u-datetime-picker :show="beginTimeShow" @confirm="beginTimeClose" @cancel="beginTimeClose" @close="beginTimeClose"
			v-model="beginDateStart" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose"
			v-model="beginDateEnd" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 行业分类 -->
		<u-picker :show="IndustKindShow" :columns="IndustKindList" @confirm="IndustKindClose" @cancel="IndustKindClose"
			@close="IndustKindClose" closeOnClickOverlay></u-picker>
		<!-- 行业状态 -->
		<u-picker :show="statusShow" :columns="statusList" @confirm="statusClose" @cancel="statusClose" @close="statusClose"
			closeOnClickOverlay></u-picker>
		<!-- 地点选择 -->
		<u-picker :show="areaShow" :columns="areaColumns" @confirm="areaClose" @cancel="areaClose" @close="areaClose"
			closeOnClickOverlay></u-picker>
		<!-- 性质选择 -->
		<u-picker :show="xmxzShow" :columns="xmxzColumns" @confirm="xmxzClose" @cancel="xmxzClose" @close="xmxzClose"
			closeOnClickOverlay></u-picker>
		<!-- 项目类型 -->
		<u-picker :show="kindShow" :columns="kindColumns" @confirm="kindClose" @cancel="kindClose" @close="kindClose"
			closeOnClickOverlay></u-picker>
		<!-- 隐藏状态 -->
		<u-picker :show="isHideNameShow" :columns="isHideNameList" @confirm="isHideNameClose" @cancel="isHideNameClose"
			@close="isHideNameClose" closeOnClickOverlay></u-picker>
	</view>
</template>

<style lang="scss" scoped>
	::v-deep .u-checkbox-group--row {
		width: 100%;
	}
</style>