<template>
	<view class="container">
		<page-title>年度计划录入</page-title>

		<view class="cards-list">
			<view class="card only-card">
				<!-- 项目名称 -->
				<view class="card-item first-card-item">
					<view class="card-item-name">项目名称</view>
					<view class="card-item-input">{{BindName || "--"}}</view>
				</view>

				<!-- 年度 -->
				<view class="card-item" @click="yearShowChoose()">
					<view class="card-item-name">年度</view>
					<view class="card-item-description">
						<view v-if="Bindyear">{{Bindyear || "--"}}</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-name" style="margin-top: 36rpx;">
					<view class="card-name-title">
						<text class="card-name-description">月份</text>
					</view>

					<view class="card-name-title">
						<text class="card-name-description">资金（万元）</text>
					</view>
				</view>

				<!-- 月份值 -->
				<view class="card-item" v-for="(item,index) in pageForm" :key="index">
					<view class="card-item-name">{{item.ymonth}}月</view>
					<input v-model="item.amt" type="number" class="card-item-input" placeholder="请填写金额"
						placeholder-style="color: #D8D8D8" maxlength="20" :disabled="banSubmit" />
				</view>
			</view>

			<view class="confirm-btn" :class="banSubmit?'ban-submit':''" @click="confirmParams()">保存</view>
		</view>

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

<script setup>
	import config from '@/config.js'

	import {
		ref
	} from 'vue'

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

	import {
		getYearlyById,
		saveYearly
	} from "@/api/work/weeklyAndMonthly.js"

	let Bindyear = ref(null);
	let BindName = ref(null);
	let BindSubId = ref(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) {
			Bindyear.value = e.value[0];
			getYearlyDetail({
				subId: BindSubId.value,
				year: e.value[0]
			})
			banSubmit.value = false;
		}

		yearShow.value = false
	}

	let pageForm = ref([{
			name: "01",
			amt: null
		},
		{
			name: "02",
			amt: null
		},
		{
			name: "03",
			amt: null
		},
		{
			name: "04",
			amt: null
		},
		{
			name: "05",
			amt: null
		},
		{
			name: "06",
			amt: null
		},
		{
			name: "07",
			amt: null
		},
		{
			name: "08",
			amt: null
		},
		{
			name: "09",
			amt: null
		},
		{
			name: "10",
			amt: null
		},
		{
			name: "11",
			amt: null
		},
		{
			name: "12",
			amt: null
		},
	])

	// 获取数据
	function getYearlyDetail(sendParams) {
		let params = {
			subId: sendParams.subId,
			year: sendParams.year
		}

		getYearlyById(params).then(res => {
			pageForm.value = res.data.list
		})
	}

	let banSubmit = ref(false);
	let isSubmit = ref(false);

	// 确认数据
	function confirmParams() {
		if (banSubmit.value || isSubmit.value) return;

		uni.showModal({
			title: "保存确认",
			content: "确定要保存该年度计划录入吗?",
			success: function(res) {
				if (res.confirm) {
					let params = {
						subId: BindSubId.value,
						amtPlans: pageForm.value
					}

					let paramsFormat = JSON.parse(JSON.stringify(params))

					paramsFormat.amtPlans.forEach(item => {
						item.ymonth = `${Bindyear.value}${item.ymonth}`
					})
					isSubmit.value = true;
					saveYearly(paramsFormat).then(res => {
						if (res.code === 200) {
							isSubmit.value = false;
							banSubmit.value = true;
							uni.showToast({
								title: "保存成功",
								icon: "success",
								duration: 2000
							})
						}
					}).catch(() => {
						isSubmit.value = false;
						uni.showToast({
							title: "保存失败",
							icon: "error",
							duration: 2000
						})
					})
				} else if (res.cancel) {
					uni.showToast({
						title: "取消保存",
						icon: "none",
						duration: 2000,
					})
				}
			},
		})
	}

	onLoad((options) => {
		Bindyear.value = options.year;
		defaultIndex.value = [Number(Bindyear.value) - 2000]
		BindName.value = options.title;
		BindSubId.value = options.subId;
		getYearlyDetail(options)
	})
</script>

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