<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-description">{{pageForm.subName || "--"}}</view>
				</view>

				<!-- 问题描述 -->
				<view class="card-item">
					<view class="card-item-name">问题描述</view>
				</view>
				<view class="card-item">
					<u--textarea class="card-item-textarea" v-model="pageForm.problemContent" disabled></u--textarea>
				</view>

				<!-- 处理日期 -->
				<view class="card-item">
					<view class="card-item-name">处理日期</view>
					<view class="card-item-description" @click="timeChooseOpen()">
						<view v-if="pageForm.rpt_date">{{pageForm.rpt_date}}</view>
						<view v-else class="remind-text">请选择日期</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin:auto 0 auto 10rpx"></u-icon>
					</view>
				</view>

				<!-- 处理人 -->
				<view class="card-item">
					<view class="card-item-name">处理人</view>
					<input v-model="pageForm.name_hand" class="card-item-input" placeholder="请填写处理人姓名"
						placeholder-style="color: #D8D8D8" maxlength="20" />
				</view>

				<!-- 处理情况描述 -->
				<view class="card-item">
					<view class="card-item-name">处理情况描述</view>
				</view>
				<view class="card-item">
					<u--textarea class="card-item-textarea" v-model="pageForm.title"></u--textarea>
				</view>
			</view>

			<view class="confirm-btn" @click="confirmParams()">保存</view>
		</view>

		<!-- 处理日期选择 -->
		<u-datetime-picker :show="timeShow" @confirm="timeChooseClose" @cancel="timeChooseClose" @close="timeChooseClose"
			v-model="rpt_date" mode="date" closeOnClickOverlay></u-datetime-picker>
	</view>
</template>

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

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

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

	import {
		getQuestionTraceById,
		saveQuestionTrace
	} from "@/api/work/questionInputAndTrace.js"

	let pageForm = ref({
		sub_id: null,
		id: null,
		subName: null,
		problemContent: null,
		rpt_date: null,
		name_hand: null,
		title: null
	})

	function getDetail(paramsData) {
		getQuestionTraceById(paramsData).then(res => {
			pageForm.value.sub_id = res.data.subId;
			pageForm.value.id = res.data.id;
			pageForm.value.subName = res.data.subName;
			pageForm.value.problemContent = res.data.problemContent;
		})
	}

	// ================== 时间选择
	let rpt_date = ref(null);
	let timeShow = ref(false);

	function timeChooseOpen() {
		timeShow.value = true;
	}

	function timeChooseClose(e) {
		if (e) {
			let time = timeFormat(e.value);
			pageForm.value.rpt_date = time;
		}

		timeShow.value = false;
	}

	// 提交选择
	function confirmParams() {
		let params = {
			name_hand: pageForm.value.name_hand,
			rpt_date: pageForm.value.rpt_date ? pageForm.value.rpt_date.replaceAll("/", "-") : null,
			sub_id: pageForm.value.sub_id,
			sub_q_id: pageForm.value.id,
			title: pageForm.value.title,
		}

		saveQuestionTrace(params).then(res => {
			if (res.code === 200) {
				uni.showToast({
					title: "保存成功。",
					icon: "success",
					duration: 2000,
				})
			}
		}).catch(err => {
			uni.showToast({
				title: "保存错误。",
				icon: "error",
				duration: 2000,
			})
		})
	}
	onLoad(options => {
		let now = new Date()
		rpt_date.value = timeFormat(now)
		getDetail(options)
	})
</script>

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