<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
	<div>
		<el-dialog
			:title="title"
			:close-on-click-modal="false"
			draggable
			append-to-body
			width="1300px"
			@close="close"
			@keyup.enter.native="doSubmit"
			v-model="visible">
		<el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method === 'view'"
				 label-width="160px" @submit.native.prevent>
			<el-row  :gutter="15">
				<el-col :span="24">
					<el-form-item label="项目情况:" prop="projectStatus"
								  :rules="[
							   {required: true, message:'请选择项目情况', trigger:'blur'}
                 ]">
						<el-radio-group v-model="inputForm.projectStatus">
							<el-radio label="1"  >有项目</el-radio> <el-radio label="0"  >无项目</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider content-position="left"><i class="el-icon-document"></i>
				基本信息
			</el-divider>
			<el-row  :gutter="15">

				<el-col :span="12">
					<el-form-item label="月报时间" prop="monthDate"
					>
						<el-input :disabled="true" v-model="inputForm.monthDate" placeholder="请输入月报时间" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="发起人" prop="createName"
					>
						<el-input :disabled="true" v-model="inputForm.createName" placeholder="请输入申请人名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="发起人部门" prop="officeName"
					>
						<el-input :disabled="true" v-model="inputForm.officeName" placeholder="请输入申请人部门" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="发起时间" prop="createTime">
						<el-input :disabled="true" v-model="inputForm.createTime" placeholder="请输入申请时间" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注" prop="remarks"
								  :rules="[ ]">
						<el-input :disabled="method === 'view'" type="textarea" placeholder="请输入备注"  maxlength="500"  style="width:100%" v-model="inputForm.remarks" show-word-limit></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row  :gutter="15" v-show="inputForm.projectStatus === '1'">
				<el-divider content-position="left"><i class="el-icon-document"></i>
					项目进度信息
				</el-divider>
				<el-col :span="24">
					<vxe-table
						border
						:footer-method="footerMethod2"
						show-overflow
						show-footer
						ref="baseTable"
						:key="baseKey"
						class="vxe-table-element"
						:data="inputForm.processList"
						style="margin-left: 5em"
						@cell-click=""
						@edit-closed=""
						keep-source
						:readonly="true"
						highlight-current-row
						:edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true, icon: '-'}"
					>
						<vxe-table-column field="projectName" align="center" title="项目名称" :edit-render="{}" show-overflow="title">
							<template v-slot:edit="scope">
								<el-input  :disabled="true" placeholder="请填写项目名称" :readonly="true" v-model="scope.row.projectName"/>
							</template>
						</vxe-table-column>
						<vxe-table-column field="no" align="center" title="报告号" :edit-render="{}">
							<template v-slot:edit="scope">
								<el-input :disabled="true" :readonly="true" placeholder="请填写报告号" v-model="scope.row.no"/>
							</template>
						</vxe-table-column>
						<vxe-table-column  field="projectLeader" align="center" title="项目负责人" :edit-render="{}">
							<template v-slot:edit="scope">
								<el-input :disabled="true" placeholder="请填写项目负责人" v-model="scope.row.projectLeader"/>
							</template>
						</vxe-table-column>
						<vxe-table-column  field="officeName" align="center" title="部门" :edit-render="{}">
							<template v-slot:edit="scope">
								<el-input :disabled="true" placeholder="请填写部门" v-model="scope.row.officeName"/>
							</template>
						</vxe-table-column>
						<vxe-table-column  field="process" align="center" title="当前项目进度" :edit-render="{}">
							<template v-slot:edit="scope">
								<el-input :disabled="true" placeholder="请填写项目负责人" v-model="scope.row.process"/>
							</template>
						</vxe-table-column>
						<vxe-table-column field="processTime" align="center" title="进度完成时间" :edit-render="{}">
							<template v-slot:edit="scope">
								<el-input :disabled="true" placeholder="请填写创建时间" v-model="scope.row.processTime"/>
							</template>
						</vxe-table-column>
					</vxe-table>
				</el-col>
			</el-row>
		</el-form>
		<UpLoadComponent ref="uploadComponent"></UpLoadComponent>
			<template #footer>
			<span class="dialog-footer">
			  <el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
			  <el-button type="primary" @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
			</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import XEUtils from 'xe-utils'
	import MonthlyService from '@/api/jy/MonthlyService'
	import { ElDatePicker } from 'element-plus';
	import UpLoadComponent from '@/views/common/UpLoadComponent'
	export default {
		props: {
			businessId: {
				type: String,
				default: ''
			},
			formReadOnly: {
				type: Boolean,
				default: false
			},
			status: {
				type: String,
				default: ''
			}
		},
		data () {
			return {
				title: '',
				method: '',
				loading: false,
				visible: false,
				inputForm: {
					id: '',
					createName:'',
					officeName:'',
					createTime:'',
					monthDate:'',
					files: [], // 附件信息
					processList:[],
					remarks:'',
					projectStatus:'1'
				},
				baseKey: '',
				keyWatch: '',
				programRow:'',

			}
		},
		MonthlyService:null,
		created () {
			this.monthlyService=new MonthlyService()
		},
		mounted () {
		},
		activated () {
		},
		components: {
			ElDatePicker,
			UpLoadComponent,
		},
		computed: {
			bus: {
				get () {
					this.$refs.uploadComponent.setDividerName('附件')
					return this.businessId
				},
				set (val) {
					this.businessId = val
				}
			}
		},
		watch: {
			'keyWatch': {
				handler (newVal) {
					console.log('几里路')
					if (this.bus) {
						if (this.bus !== 'false') {
							this.init('', this.bus)
						}
					} else {
						this.$nextTick(() => {
							this.$refs.inputForm.resetFields()
						})
					}
				}
			},
			'loading': {
				handler (newVal) {
					this.$emit('changeLoading', newVal)
					this.$refs.uploadComponent.changeLoading(newVal)
				}
			}
		},
		methods: {
			getKeyWatch(keyWatch) {
				this.keyWatch = keyWatch
			},
			init(method, id) {
				this.method = method
				console.log('method',this.method)
				this.inputForm={
					id: '',
					createName:this.$store.state.user.name,
					officeName:this.$store.state.user.office.name,
					createTime:'',
					monthDate:'',
					files: [], // 附件信息
					processList:[],
					remarks:'',
					projectStatus:'1'
				}
				this.inputForm.id = id
				console.log('this.inputForm.id', this.inputForm.id)
				this.loading = false
				this.visible = true
				this.$nextTick(() => {
					this.$refs.inputForm.resetFields()
					this.loading = true
					this.$refs.uploadComponent.clearUpload()
						this.monthlyService.queryById(this.inputForm.id).then((data)=>{
							this.inputForm = this.recover(this.inputForm, data)
							if (this.commonJS.isEmpty(this.inputForm.createName)){
								this.inputForm.createName=this.$store.state.user.name
							}
							if (this.commonJS.isEmpty(this.inputForm.officeName)){
								this.inputForm.officeName=this.$store.state.user.office.name							}
							if (this.commonJS.isEmpty(this.inputForm.createTime)){
								this.inputForm.createTime=this.moment(new Date()).format('YYYY-MM-DD')
							}
							if (this.commonJS.isEmpty(this.inputForm.projectStatus)){
								this.inputForm.projectStatus='1'
							}
							if (this.commonJS.isEmpty(this.inputForm.monthDate)){
								this.modifiedDateTime()
							}
							this.inputForm.remarks=data.remarks
							this.inputForm.files=data.files
							console.log('s',this.inputForm)
							this.$refs.uploadComponent.newUpload(method, this.inputForm.files, 'monthly',null,null,null,null,null)
							this.loading = false
						})
				})
			},
			// 表单提交
			async doSubmit(status, callback) {
				this.loading = true
				this.$refs['inputForm'].validate((valid) => {
					if (valid) {
						this.loading = true
						console.log('form',this.inputForm)
						this.inputForm.createTime=''
						this.inputForm.files = this.$refs.uploadComponent.getDataList()
						this.monthlyService.saveForm(this.inputForm).then((data) => {
							this.visible=false
							this.$emit('refreshList')
						}).catch(() => {
							this.$refs.inputForm.resetFields()
							this.loading = false
						})
					} else {
						this.loading = false
					}
				})
			},
			close() {
				this.inputForm = {
					id: '',
					createName:'',
					officeName:'',
					createTime:'',
					monthDate:'',
					files: [], // 附件信息
					processList:[],
					remarks:'',
					projectStatus:'1'
				}
				this.visible = false
			},
			modifiedDateTime() {
				const now=new Date()
				let month =now.getMonth()+1 ; // 月份从0开始，所以需要加1
				let year = now.getFullYear()
				let dayOfMonth = now.getDate();

				// 如果当月为12月，年份加1，月份从1开始
				if (month === 12) {
					// 如果当天为25号之后，月份加1
					if (dayOfMonth > 25) {
						year = year +1;
						month = 1; // 月份重新从0开始
					}
				}else {
					// 如果当天为25号之后，月份加1
					if (dayOfMonth >= 25) {
						month = month + 1;
					}
				}
				if (month<10){
					this.inputForm.monthDate = year+"-0"+month;
				}else {
					this.inputForm.monthDate = year+"-"+month;
				}

			},



		}

	}
</script>
<style scoped>
	/deep/ .el-input-number .el-input__inner {
		text-align: left;
	}
	/deep/ .vxe-footer--row .vxe-footer--column:nth-child(1) .vxe-cell--item {
		font-weight:700;
	}
</style>
