<template>
	<div>
		<div class="container">
			<el-form :model="infolist" ref="infolist" :rules="rules" class="container-box">
				<h2 style="display: block;margin-bottom: 20px;">营销类短信群发申请</h2>
				<div style="height: calc(100% - 160px);overflow-y: scroll;">
					<div class="info-line">
						<el-form-item prop="terminalTypeName">
							<span><em style="color:red;margin-right:5px">*</em>文件名称</span>
							<el-input v-model="infolist.tit" placeholder="文件名称" :disabled="disableStatus"></el-input>
						</el-form-item>
						<el-form-item prop="terminal">
							<span><em style="color:red;margin-right:5px">*</em>申请流程</span>
							<el-select clearable v-model="terminal" placeholder="申请流程">
								<el-option v-for="items in options" :key="items.procId" :label="items.procName"
									:value="items.procId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<span>信息类型</span>
							<el-input v-model="infolist.xxlx" placeholder="信息类型" :disabled="disableStatus"></el-input>
						</el-form-item>
						<el-form-item>
							<span>项目分类</span>
							<el-input v-model="infolist.xmfl" placeholder="项目分类" :disabled="disableStatus"></el-input>
						</el-form-item>
						<el-form-item>
							<span>发送时间</span>
							<el-date-picker  style="display: inline-flex;width: calc(100% - 100px);" v-model="infolist.fssj" type="daterange" placeholder="发送时间">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<span>公务卡</span>
							<el-input v-model="infolist.gwk" placeholder="是否已剔除公务卡" :disabled="disableStatus"></el-input>
						</el-form-item>
					</div>
			       <el-form-item class="info-line online">
						<span>背景说明</span>
						<el-input v-model="infolist.bjsm" placeholder="背景说明" type="textarea" :rows="3"></el-input>
					</el-form-item>
					<el-form-item class="info-line online">
						<span>文件内容</span>
						<el-input v-model="infolist.wjnr" placeholder="补充说明" type="textarea" :rows="3"></el-input>
					</el-form-item>
					<div style="padding-left: 80px">
						<myUpload @uploadBack="uploadBack" :fileInfo="fileInfo" :fileList="fileInfo.fileList">
						</myUpload>
					</div>
				</div>
				<div class="t-footer">
					<el-button type="primary" @click="dialogCli(2)">确 定</el-button>
					<el-button @click="dialogCli(1)">取 消</el-button>
				</div>
			</el-form>
		</div>

	</div>
</template>
<script>
	import mySearch from "../../../components/search.vue";
	import myUpload from "../../../components/upload.vue";

	export default {
		components: {
			mySearch,
			myUpload
		},
		data() {
			const terminalTypeName = (rule, value, callback) => {
				if (!this.infolist.tit) {
					callback(new Error('不能为空'))
				} else {
					callback()
				}
			}
			const terminal = (rule, value, callback) => {
				if (!this.terminal) {
					callback(new Error('不能为空'))
				} else {
					callback()
				}
			}
			return {
				rules: {
					terminalTypeName: [{
						required: true,
						trigger: 'blur',
						validator: terminalTypeName
					}],
					terminal: [{
						required: true,
						trigger: 'change',
						validator: terminal
					}],
				},
				disableStatus: false,
				infolist: {},
				terminal: '',
				userInfo: {},
				params: {},
				attList: [],
				options: [],
				overtime: '',
				fileInfo: {
				    limit: 5,
				    url: '/bpm/api/upload',
				    fileList: []
				},
			}
		},
		methods: {
			//添加
			dialogCli(v) {
				if (v === 1) {
					this.infolist = {};
					return
				}
				let _this = this;
				let info = {};
				this.$http({
					url: "/sysmgr/csysuserinfo/queryUserListByLoginNoAndDuty",
					method: "post",
					headers: {
						"Content-Type": "application/json",
						"page": '{"pageNo":"' + 1 + '","pageSize":"100"}'
					},
					data: {"duty":"7,12"},
				}).then((res) => {
					if(res.data.length == 0){
						this.$message({
							message: '暂无领导审批，发起失败！',
							type: 'error'
						});
						return
					}
					this.infolist.secNo = res.data[0].loginNoStr;
					this.infolist.secName = res.data[0].loginNameStr;
					info.opTime = _this.$formatDate(new Date(), "YYYY-MM-DD");
					info.opNo = this.userInfo.loginNo;
					info.opName = this.userInfo.loginName;
					info.woTitle = this.infolist.tit;
					info.params = {};
					info.params.terminalRes = this.infolist;
					info.procId = this.terminal;
					for (let i = 0; i < this.options.length; i++) {
						if (this.terminal == this.options[i].procId) {
							info.procName = this.options[i].procName;
							info.procVersion = this.options[i].procVersion;
						}
					}
					let attList = [];
					for (let i = 0; i < this.attList.length; i++) {
					    attList.push({
					        id: this.attList[i].id,
					        fileCode: this.attList[i].fileCode,
					        fileName: this.attList[i].fileName,
					        opName: this.attList[i].opName,
					        opNo: this.attList[i].opNo,
					        opTime: this.attList[i].opTime,
					        woNo: this.infolist.woNo,
					        attchFileId: this.attList[i].attchFileId,
					    });
					}
					info.params.attList = JSON.stringify(attList)
					info.params.terminalRes = JSON.stringify(info.params.terminalRes);
					this.submitInfo("/bpm/api/startProc", info);
				});
			},
			submitInfo(u, v) {
				let _this = this;
				this.$refs.infolist.validate(valid => {
					if (valid) {
						this.$http({
							url: u,
							method: "post",
							headers: {
								"Content-Type": "application/json",
							},
							data: v,
						}).then((res) => {
							if (res.data.result === 1) {
								_this.$message({
									message: res.data.desc,
									type: 'error'
								});
							} else {
								_this.$message({
									message: '成功',
									type: 'success'
								});
								_this.dialogCli(1);
							}

						});
					}
				})
			},
			//流程
			getTermianl() {
				this.$http({
					url: "/bpm/api/queryBpmProcList",
					method: "post",
					headers: {
						"Content-Type": "application/json",
						"page": '{"pageNo":"' + 1 + '","pageSize":"100"}'
					},
					data: {},
				}).then((res) => {
					this.options = res.data.data;
				});
			},
			getUser() {
				this.userInfo = JSON.parse(window.sessionStorage.userInfo);
			},
			uploadBack(v) {
				this.attList = v;
			},	
		},
		mounted() {
			this.getTermianl();
			this.getUser();
		},
		created() {

		}
	}
</script>
<style scoped lang="scss">
	.img-box {
		height: calc(100vh - 240px);
		overflow-y: scroll;

		.boximg {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20px;

			div {
				display: inline-block;
				width: 18%;
				margin-right: 2%;
				margin-bottom: 20px;
				overflow: hidden;
				border: 1px solid #ddd;
				border-radius: 3px;
				background: #fff;
				position: relative;
				height: 100px;

				img {
					width: 100%;
					position: absolute;
					top: 0;
					bottom: 0;
					margin: auto;
					// height: 100%;
				}

			}
		}
	}

	.boximgc {
		display: flex;
		flex-wrap: wrap;
		width: calc(100% - 80px) !important;
		margin-left: 80px;

		div {
			display: inline-block;
			width: 18% !important;
			margin-right: 2%;
			margin-bottom: 20px;
			overflow: hidden;
			border: 1px solid #ddd;
			border-radius: 3px;
			background: #fff;
			position: relative;
			height: 100px;

			img {
				width: 100%;
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
				// height: 100%;
			}

		}
	}

	.typebox {
		div {
			border: 1px solid #ddd;
			border-top: transparent;

			span {
				display: inline-block;
				width: 20%;
				line-height: 30px;
				padding: 10px;
				vertical-align: top;
			}

			.big {
				width: 35%;
				// background: #f4f4f4;
			}

			.small {
				width: 5%;
				text-align: center;
				// border-right: 1px solid #ddd;
			}

			.gys {
				width: 40%;
			}
		}
	}

	.t-footer {
		text-align: right;
		padding-right: 20px;
		margin-top: 20px;
	}

	.onetab {
		padding: 20px;
		height: calc(100% - 180px);
	}

	.titbox {
		div {
			float: right;

			i {
				font-size: 22px;
				margin-left: 20px;
				cursor: pointer;
			}
		}
	}

	.tabbox {
		margin-top: 15px;
	}

	.pageBox {
		text-align: right;
		margin-top: 10px;
	}

	.info-line {
		width: 100%;
		display: block;
		padding-left: 20px;

		div {
			width: 50%;
			display: inline-block;
		}

		span {
			width: 80px;
			display: inline-block;
			text-align: left;

			i {
				color: red;
				display: inline-block;
				padding-right: 5px;
			}
		}

		.el-select,
		.el-input {
			width: calc(100% - 100px);
		}

		.el-checkbox-group {
			border: 1px solid #ddd;
			padding-left: 20px;
			height: 40px;
			width: calc(100% - 100px);
			border-radius: 5px;
		}
	}

	.online {
		width: 100%;

		.el-select {
			width: calc(100% - 100px);
		}

		span {
			vertical-align: top;
		}

		.el-textarea {
			width: calc(100% - 100px);
		}
	}
</style>
