<template>
	<div class="editMsg">
		<headNav :title="'消息编辑'"></headNav>

		<div class="top">
			<div class="item">
				<div class="label">消息接收</div>
				<div class="content">
					<div @click="showSelect = true">{{ tellPerson }}</div>
					<div class="df aic"><van-icon name="arrow"></van-icon></div>
				</div>
			</div>
			<div class="item">
				<div class="label">标题</div>
				<div class="content OPoint">
					<van-field
						placeholder="请输入通知标题"
						input-align="right"
						v-model="noticeTitle"
					></van-field>
				</div>
			</div>
			<div class="item">
				<div class="label">发送时间</div>
				<div class="content OPoint">
					<div @click="show_time = true">{{ tellSendTime }}</div>
					<div class="df aic"><van-icon name="arrow"></van-icon></div>
				</div>
			</div>
		</div>

		<div class="msg">
			<div class="headTip FontColorInfo">检查计划</div>
			<div class="editor">
				<!-- 富文本 -->
<!-- 				<quill-editor
					v-model="editContent"
					:options="custom"
					ref="myQuillEditor"
				></quill-editor> -->
				
				<!-- 输入框 -->
				<van-field
				  v-model="editContent"
				  rows="5"
				  autosize
				  type="textarea"
				  maxlength="500"
				  placeholder="请输入发送内容"
				  show-word-limit
				/>
			</div>
		</div>
		
		<div class="send">
			<van-button type="info" @click="sendMsg">发送</van-button>
		</div>

		<!-- 任务弹窗 -->
		<van-popup v-model="showSelect" :style="{ height: '40%' }" position="bottom">
			<div class="checkContent">
				<div class="checkContainer">
					<van-checkbox-group v-model="checkGroup">
						<van-cell-group>
							<van-cell
								v-for="(item, index) in missionSelect"
								clickable
								:key="item.index"
								:title="item.sendName"
								@click="toggle(index)"
							>
								<template #right-icon>
									<van-checkbox
										:name="item.sendPhone"
										shape="square"
										icon-size="16px"
										ref="checkboxes"
									/>
								</template>
							</van-cell>
						</van-cell-group>
					</van-checkbox-group>
				</div>
				<div class="btn">
					<van-button type="info" plain @click="showSelect = false">取消</van-button>
					<van-button type="info" @click="sureSelect">确定</van-button>
				</div>
			</div>
		</van-popup>

		<!-- 时间弹窗 -->
		<van-popup v-model="show_time" position="bottom">
			<van-datetime-picker
				v-model="currentDate"
				type="datetime"
				:visible-item-count="4"
				title="选择发送时间"
				:min-date="minDate"
				:max-date="maxDate"
				@cancel="show_time = false"
				@confirm="chooseDate"
			/>
		</van-popup>

		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
	</div>
</template>

<script>
import headNav from '@/components/headNav.vue';
import { get, post } from '@/utils/http.js';
import mask_overLay from '@/components/overLay_xy.vue';

export default {
	name: 'editMsg',
	components: {
		headNav,
		'v-mask': mask_overLay
	},
	data() {
		return {
			editContent: '',
			custom: {
				modules: {
					toolbar: [
						[
							'image',
							'bold',
							'italic',
							'underline',
							{ list: 'ordered' },
							{ list: 'bullet' },
						]
					]
				}
			},
			tellPerson: '请选择通知人',
			tellSendTime: '选择发送时间',
			noticeTitle: '',
			showSelect: false,
			show_time: false,
			missionSelect: [],
			showOverLay: false,
			checkGroup: [],
			tipMsg: '加载中',
			currentDate: new Date(),
			minDate: new Date(),
			maxDate: new Date(2050, 10, 1)
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		async init() {
			this.tipMsg = '加载中';

			this.showOverLay = true;

			await this.getCompanyInfoApi();

			this.showOverLay = false;
		},

		// 获取单位信息
		async getCompanyInfoApi() {
			const byCheckId = this.$store.state.taskInfo.taskInfo.companyId;
			await get(`/cdSuperObjE/get/${byCheckId}`)
				.then(res => {
					if (res.success == true) {
						this.missionSelect = [];
						// this.missionSelect.push({
						// 	sendName: res.data.companyPerson,
						// 	sendPhone: res.data.contactType,
						// 	index: 0
						// });
						this.missionSelect.push({
							sendName: res.data.unitlegalPerson,
							sendPhone: res.data.principalPhone,
							index: 0
						});
					}
				})
				.catch(err => {
					this.$toast.fail('读取联系人失败');
				});
		},

		backPage() {
			this.$router.go(-1);
		},

		// 选取一个状态
		chooseStatus() {
			this.showSelect = false;
		},

		toggle(index) {
			this.$refs.checkboxes[index].toggle();
		},


		sureSelect() {
			this.showSelect = false;
			let tellPerson = [];
			this.missionSelect.forEach(i => {
				this.checkGroup.forEach(j => {
					if (i.sendPhone === j) {
						tellPerson.push(i.sendName);
					}
				});
			});
			this.tellPerson = tellPerson.join(',');
			if (this.tellPerson === '') {
				this.tellPerson = '请选择通知人';
			}
		},

		chooseDate() {
			this.show_time = false;
			this.tellSendTime = this.$getTime(this.currentDate);
		},

		// 发送短信
		sendMsg() {
			if (this.tellPerson == '请选择通知人') {
				this.$toast.fail('未选择通知人');
				return;
			} else if (this.noticeTitle == '') {
				this.$toast.fail('未填写标题');
				return;
			} else if (this.editContent == '') {
				this.$toast.fail('未填写通知内容');
				return;
			} else {
				this.$dialog
					.confirm({
						title: '发送短信',
						message: '是否确定发送本条消息 ?'
					})
					.then(() => {
						// on confirm
						this.showOverLay = true;
						this.tipMsg = '通知发送中';
						let subData = {
							taskId: this.$route.params.ID,
							recipient: this.checkGroup.join(','),
							recipientName: this.tellPerson,
							fileName: this.noticeTitle,
							fileCont: this.editContent,
							timerSendTime:
								this.tellSendTime === '选择发送时间' ? '' : this.tellSendTime
						};

						post('/cdsupervisionNotice/add', subData).then(res => {
							this.showOverLay = false;
							if (res.success === true) {
								this.$router.go(-1);
							} else {
								this.$toast.fail(`选择时间小于当前时间`);
							}
						});
					})
					.catch(() => {
						// on cancel
					});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.editMsg {
	font-size: 14px;

	.headTip {
		margin-bottom: 10px;
		padding: 0 15px;
	}

	.msg {
		margin-top: 10px;

		.editor {
			background-color: #fff;
			position: relative;
			padding: 10px 15px;

		}
	}
	
	.send {
		position: absolute;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 10px 15px;
		
		button {
			width: 100%;
		}
	}

	.top {
		margin-top: 57px;
		background-color: #fff;
		padding: 0 15px;

		.item {
			padding: 12px 0;
			display: flex;
			justify-content: space-between;

			&:first-child {
				border-bottom: 1px solid #f5f5f5;
			}
		}

		.label {
			width: 80px;
			color: #323233;
		}

		.content {
			color: #959595;
			margin-left: 5px;

			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.ql-editor.ql-blank {
		height: 500px;
	}
}
</style>

<style lang="scss">
.editMsg {
	.ql-editor.ql-blank {
		height: 300px;
	}

	.ql-editor {
		height: 300px;
	}

	.van-icon.van-icon-share {
		font-size: 18px;
		color: #02a2f0;

		&:active {
			color: #00d1ff;
		}
	}

	.van-cell.van-field {
		padding: 0;
	}

	.checkContent {
		position: relative;
		height: 100%;

		.checkContainer {
			height: calc(100% - 70px);
			overflow: hidden;
			overflow-y: auto;
		}

		.btn {
			position: absolute;
			width: 100%;
			bottom: 0;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10px 0;

			button {
				flex: 1;
				margin: 0 20px;
				height: 40px;
			}
		}
	}
}
</style>
