<!-- 印章申请 -->
<template>
	<view class="form-page">
		<scroll-view scroll-y class="form-scroll">
			<uni-forms v-model="form" label-width="170upx">
				<!-- 审批状态 -->
				<view class="form-card" v-if="form.ticket_">
					<ticketd :ticket_="form.ticket_"></ticketd>
				</view>

				<!-- 申请信息 -->
				<view class="form-card">
					<view class="form-card-title">申请信息</view>
					<uni-forms-item label="使用类型">
						<uni-data-checkbox v-model="form.is_lending" :localdata="hobby1" :disabled="mode=='show'"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="文件名称" required>
						<uni-easyinput v-model="form.filename" placeholder="请输入文件名称" v-if="mode!='show'"/>
						<span v-else>{{form.filename}}</span>
					</uni-forms-item>
					<uni-forms-item label="联系电话">
						<uni-easyinput v-model="form.contacts" v-if="mode!='show'"/>
						<span v-else>{{form.contacts}}</span>
					</uni-forms-item>
				</view>

				<!-- 印章信息 -->
				<view class="form-card">
					<view class="form-card-title">印章信息</view>
					<uni-forms-item label="印章类型">
						<uni-data-checkbox multiple v-model="form.seal" :localdata="hobby" :disabled="mode=='show'"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="" v-if="form.seal=='其他'">
						<uni-easyinput v-model="form.seal_other" placeholder="请输入印章名称" v-if="mode!='show'"/>
						<span v-else>{{form.seal_other}}</span>
					</uni-forms-item>
					<uni-forms-item label="文件内容" required>
						<xtUpload v-model="form.file" xtype="path" v-if="mode!='show'"></xtUpload>
						<filePreview v-else :filePath="form.file" style="padding-left:145upx;width: 100%;height: 30upx;"></filePreview>
					</uni-forms-item>
					<uni-forms-item label="用印份数" required>
						<uni-number-box v-model="form.file_count" v-if="mode!='show'"></uni-number-box>
						<span v-else>{{form.file_count}}</span>
					</uni-forms-item>
				</view>

				<!-- 借用信息 -->
				<view class="form-card" v-if="form.is_lending">
					<view class="form-card-title">借用信息</view>
					<uni-forms-item label="借出时间">
						<uni-datetime-picker v-model="timeRange" type="daterange" @change="timeRangeChange(timeRange)" v-if="mode!='show'"/>
						<span v-else>{{form.lending_date}}-{{form.return_date}}</span>
					</uni-forms-item>
					<uni-forms-item label="借用理由">
						<uni-easyinput v-model="form.note" v-if="mode!='show'"/>
						<span v-else>{{form.note}}</span>
					</uni-forms-item>
				</view>

				<!-- 归还信息 -->
				<view class="form-card" v-if="form.ticket_&&form.ticket_.state_&&(form.ticket_.state_.name=='借用中'||form.ticket_.state_.name=='结束')">
					<view class="form-card-title">归还信息</view>
					<uni-forms-item label="实际归还日期">
						<uni-datetime-picker v-model="ticket_data.actual_return_date" type="date" v-if="form.ticket_?.state_?.name=='借用中'"/>
						<span v-else>{{form.actual_return_date}}</span>
					</uni-forms-item>
				</view>
			</uni-forms>
		</scroll-view>
		<view class="footer_fixed">
			<ticketd_b :workflow_key="'wf_seal'" :title="form.filename + '-印章申请'" :t_id="form.id" :ticket_="form.ticket_"
				@success="submitSuccess" :submit_b_func="submit_b_func" ref="ticketd_b_start"></ticketd_b>
		</view>
	</view>
</template>

<script>
import ticketd_b from "../wf/ticketd_b.vue"
import ticketd from "../wf/ticketd.vue"
import {actStateEnum} from "@/utils/enum.js"
import xtUpload from "@/components/xtUpload.vue"
import filePreview from "@/components/filePreview.vue"
import config from './../../utils/config.js'
	export default {
		components: { ticketd_b, ticketd,xtUpload,filePreview },
		data(){
			return{
				type:"out",
				mode:"add",
				t_id: null,
				timeRange:[],
				form:{
					id:null,
					file:"",
					note:"",
					filename:"",
					contacts:"",
					file_count:"",
					is_lending:false,
				},
				ticket_data:{
					actual_return_date:"",
				},
				type:0,
				hobby: [
					{text: '公章',value:  '公章'},
					{text: '法人章',value: '法人章'}, 
					{text: '合同章',value: '合同章'}, 
					{text: '财务章',value: '财务章'}, 
					{text: '其他',value: '其他'},
				],
				hobby1:[
					{text: '内用',value: false},
					{text: '外用',value: true},
				]
			}
		},
		async onLoad(options) {
			let that = this;
			that.form.id='';
			that.mode = options.mode?options.mode:'show';
			that.t_id = options.t_id?options.t_id:null;
			if(that.mode != "add"){
				if(that.t_id) {
					that.form = await that.$api.sealItem(that.t_id);
					if(that.form.lending_date&&that.form.lending_date!==null){
						that.timeRange[0]=that.form.lending_date;
						that.timeRange[1]=that.form.return_date;
					}
					if(that.form.ticket_.state_.type == 1 && that.form.create_by == uni.getStorageSync("userInfo").id ) {
						that.mode = "edit";
					}else{
						that.mode = "show";
					}
				}
			}
		},
		watch: {	
			timeRange(newval) {
				console.log('范围选:', this.timeRange);
			},
		},
		methods:{
			//选择会议室和日期后查询有无预定
			async submit_b_func(id){
				let that = this;
				if (that.mode != 'show') {
					if(that.form.id) {
						await that.$api.sealUpdate(that.form.id, that.form);
					}else{
						let res = await that.$api.sealCreate(that.form);
						that.form.id = res.id;
					}
				}
			},
			submitSuccess(){
				uni.navigateTo({
					url: "/pages/index/index"
				})
			},
			timeRangeChange(val){
				this.form.lending_date = val?.[0] || null
				this.form.return_date = val?.[1] || null
			},
		}
	}
</script>

<style lang="scss" scoped>
.form-page {
	min-height: 100vh;
	background: #F0F2F5;
}

.form-scroll {
	padding: 20rpx 24rpx;
	padding-bottom: 180rpx;
}

.form-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.form-card-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #1F2937;
	margin-bottom: 16rpx;
	padding-left: 16rpx;
	border-left: 6rpx solid #2BA471;
}
</style>