<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="yearShowChoose()">
					<view class="card-item-name">年度</view>
					<view class="card-item-description">
						<view v-if="pageForm.year">{{pageForm.year}}</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="xmlxShowChoose()">
					<view class="card-item-name">项目类型</view>
					<view class="card-item-description">
						<view v-if="pageForm.xmlx">{{pageForm.xmlx}}</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="xmxzShowChoose()">
					<view class="card-item-name">项目性质</view>
					<view class="card-item-description">
						<view v-if="pageForm.xmxz">{{pageForm.xmxz}}</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="hyflShowChoose()">
					<view class="card-item-name">行业分类</view>
					<view class="card-item-description">
						<view v-if="pageForm.hyfl">{{pageForm.hyfl}}</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="jsddShowChoose()">
					<view class="card-item-name">建设地点</view>
					<view class="card-item-description">
						<view v-if="pageForm.jsdd">{{pageForm.jsdd}}</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">申报单位</view>
					<input v-model="pageForm.unitName" class="card-item-input" placeholder="请填写申报单位"
						placeholder-style="color: #D8D8D8" maxlength="20" />
				</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" @click="statusShowChoose()">
					<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="isLockNameShowChoose()">
					<view class="card-item-name">锁定状态</view>
					<view class="card-item-description">
						<view v-if="pageForm.isLockName">{{pageForm.isLockName}}</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">项目名称</view>
					<input v-model="pageForm.subName" class="card-item-input" placeholder="请填写项目名称"
						placeholder-style="color: #D8D8D8" maxlength="20" />
				</view>
			</view>

			<view class="confirm-btn" @click="confirmParams()">查询</view>
		</view>

		<!-- 年度选择 -->
		<u-picker :show="yearShow" :defaultIndex="defaultIndex" :columns="yearColumns" @confirm="yearClose"
			@cancel="yearClose" @close="yearClose" closeOnClickOverlay></u-picker>

		<!-- 项目类型选择 -->
		<u-picker :show="xmlxShow" :columns="xmlxColumns" @confirm="xmlxClose" @cancel="xmlxClose" @close="xmlxClose"
			closeOnClickOverlay></u-picker>

		<!-- 项目性质选择 -->
		<u-picker :show="xmxzShow" :columns="xmxzColumns" @confirm="xmxzClose" @cancel="xmxzClose" @close="xmxzClose"
			closeOnClickOverlay></u-picker>

		<!-- 行业分类选择 -->
		<u-picker :show="hyflShow" :columns="hyflColumns" @confirm="hyflClose" @cancel="hyflClose" @close="hyflClose"
			closeOnClickOverlay></u-picker>

		<!-- 建设地点选择 -->
		<u-picker :show="jsddShow" :columns="jsddColumns" @confirm="jsddClose" @cancel="jsddClose" @close="jsddClose"
			closeOnClickOverlay></u-picker>

		<!-- 录入状态选择 -->
		<u-picker :show="statusShow" :columns="statusColumns" @confirm="statusClose" @cancel="statusClose"
			@close="statusClose" closeOnClickOverlay></u-picker>

		<!-- 锁定状态选择 -->
		<u-picker :show="isLockNameShow" :columns="isLockNameColumns" @confirm="isLockNameClose" @cancel="isLockNameClose"
			@close="isLockNameClose" closeOnClickOverlay></u-picker>
	</view>
</template>

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

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

	import {
		getYearlyCondition
	} from "@/api/work/weeklyAndMonthly.js"

	function getCondition() {
		getYearlyCondition().then(res => {
			// 项目类型
			xmlxOrginal = res.data?.XMLX
			let xmlxTemp = res.data?.XMLX.map(item => item.title)
			xmlxTemp.unshift('请选择')
			xmlxColumns.value.push(xmlxTemp)
			// 项目性质
			xmxzOrginal = res.data?.JSXZ
			let xmxzTemp = res.data?.JSXZ.map(item => item.title)
			xmxzTemp.unshift('请选择')
			xmxzColumns.value.push(xmxzTemp)
			// 行业分类
			hyflOrginal = res.data?.HYFL
			let hyflTemp = res.data?.HYFL.map(item => item.title)
			hyflTemp.unshift('请选择')
			hyflColumns.value.push(hyflTemp)
			// 建设地点
			jsddOrginal = res.data?.JSDD
			let jsddTemp = res.data?.JSDD.map(item => item.title)
			jsddTemp.unshift('请选择')
			jsddColumns.value.push(jsddTemp)
		})
	}

	let pageForm = ref({
		year: null,
		xmlx: null,
		xmxz: null,
		hyfl: null,
		jsdd: null,
		unitName: null,
		minMoney: null,
		maxMoney: null,
		status: "所有",
		subName: null,
    // isLockName: null,
    isLock:null
	})

	// ====================================选择年
	let defaultIndex = ref([0])
	let yearShow = ref(false);

	let yearColumns = ref([
		["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013",
			"2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026",
			"2027", "2028", "2029", "2030", "2031", "2032", "2033"
		]
	])

	function yearShowChoose() {
		yearShow.value = true;
	}

	function yearClose(e) {
		if (e) pageForm.value.year = e.value[0];
		yearShow.value = false
	}

	// ====================================选择项目类型
	let xmlxOrginal = []
	let xmlxShow = ref(false)

	let xmlxColumns = ref([])

	function xmlxShowChoose() {
		xmlxShow.value = true;
	}

	function xmlxClose(e) {
		if (e) pageForm.value.xmlx = e.value[0];
		xmlxShow.value = false
	}

	// ====================================选择项目性质
	let xmxzOrginal = []
	let xmxzShow = ref(false)

	let xmxzColumns = ref([])

	function xmxzShowChoose() {
		xmxzShow.value = true;
	}

	function xmxzClose(e) {
		if (e) pageForm.value.xmxz = e.value[0];
		xmxzShow.value = false
	}

	// ====================================选择行业分类
	let hyflOrginal = []
	let hyflShow = ref(false)

	let hyflColumns = ref([])

	function hyflShowChoose() {
		hyflShow.value = true;
	}

	function hyflClose(e) {
		if (e) pageForm.value.hyfl = e.value[0];
		hyflShow.value = false
	}

	// ====================================选择建设地点
	let jsddOrginal = []
	let jsddShow = ref(false)

	let jsddColumns = ref([])

	function jsddShowChoose() {
		jsddShow.value = true;
	}

	function jsddClose(e) {
		if (e) pageForm.value.jsdd = e.value[0];
		jsddShow.value = false
	}

	// ====================================选择录入状态
	let statusShow = ref(false)

	let statusColumns = ref([
		["所有", "已录入", "未录入"]
	])

	function statusShowChoose() {
		statusShow.value = true;
	}

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

	// ====================================选择锁定状态
	let isLockNameShow = ref(false)

	let isLockNameColumns = ref([
		["所有", "正常", "锁定"]
	])

	function isLockNameShowChoose() {
		isLockNameShow.value = true;
	}

	function isLockNameClose(e) {
		if (e) pageForm.value.isLockName = e.value[0];
		isLockNameShow.value = false
	}

	// 确认选择
	function confirmParams() {
		let sendParams = Object.assign({}, pageForm.value)
		sendParams.xmlx = findChooseId('xmlx', sendParams.xmlx)
		sendParams.xmxz = findChooseId('xmxz', sendParams.xmxz)
		sendParams.hyfl = findChooseId('hyfl', sendParams.hyfl)
		sendParams.jsdd = findChooseId('jsdd', sendParams.jsdd)
		let statusOrginal = {
			"所有": "0",
			"已录入": "1",
			"未录入": "2"
		}
    let isLockOrginal = {
    	"所有": "",
    	"正常": "0",
    	"锁定": "1"
    }
		sendParams.status = statusOrginal[sendParams.status] ? statusOrginal[sendParams.status] : null
    sendParams.isLock = isLockOrginal[sendParams.isLockName] ? isLockOrginal[sendParams.isLockName] : null
    
		let url = "/pages/yearly/list/index?"
		for (let i in sendParams) {
			let item = null
			if (sendParams[i]) {
				item = `${i}=${sendParams[i]}&`
			} else {
				item = `${i}=&`
			}

			url = url += item
		}
		url = url.substr(0, url.length - 1);

		uni.navigateTo({
			url
		})
	}

	function findChooseId(list, value) {
		let defaultList = {
			xmlx: xmlxOrginal,
			xmxz: xmxzOrginal,
			hyfl: hyflOrginal,
			jsdd: jsddOrginal,
		}
		let item = defaultList[list].find(item => item.title === value)
		if (list === 'xmxz') return item ? item.code : null
		if (list === 'jsdd') return item ? item.code : null
		return item ? item.id : null
	}


	onLoad(() => {
		// 默认年
		let now = new Date()
		let nowYear = now.getFullYear()

		pageForm.value.year = nowYear
		defaultIndex.value = [Number(nowYear) - 2000]

		getCondition()
	})
</script>

<style lang="scss" scoped>
</style>