@extends('layouts.base')
@section('title', '编辑文章')
@section('content')
	<style>
		.user-list{
			--user-block-margin-right-: 15px;
			width: 100%;
			display: inline-flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
		}
		.user-list .user-block{
			width: calc((100% - (2 * var(--user-block-margin-right-))) / 3);
			margin-right: var(--user-block-margin-right-)!important;
			margin-bottom: 15px!important;
			display: inline-flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			background: #fff;
			border-radius: 5px;
			padding: 10px 15px;
			box-shadow: 0 0 5px 0 #14141433;
			position: relative;
		}
		.user-list .user-block:nth-child(3n){
			margin-right: 0!important;
		}
		.user-list .user-block .avatar{
			width: 65px!important;
			height: 65px!important;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 10px;
		}
		.user-list .user-block .avatar .avatar-image{
			width: 100%;
			height: 100%;
		}
		.user-list .user-block .user-info{
			width: calc(100% - 75px) !important;
			height: 65px!important;
		}
		.user-list .user-block .user-info .user-title{
			height: 35px;
			line-height: 35px;
			font-size: 14px;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-weight: 800;
		}
		.user-list .user-block .user-info .user-id{
			height: 30px;
			line-height: 30px;
			font-size: 14px;
			font-weight: 500;
		}
		.user-list .user-block .del-btn{
			position: absolute;
			right: 0;
			top: 0;
			border-top-right-radius: 5px;
			background: #f56c6c;
			color: #FFF;
			width: 20px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			cursor: pointer;
		}
	</style>
	<div class="all">
		<div id="app" v-cloak>
			<el-form ref="form" :model="info" :rules="rules" label-width="15%">
				<div class="vue-head" style="width: 70%!important;margin-top: 20px;">
					<el-form-item label="消息标题" prop="message_title">
						<el-input v-model.trim="info.message_title" placeholder="请输入消息标题"></el-input>
					</el-form-item>
					<el-form-item label="通知类型" prop="notice_type">
						<div style="line-height:40px">
							<el-radio v-model.number="info.notice_type" :label="0">全部用户</el-radio>
							<el-radio v-model.number="info.notice_type" :label="1">指定用户</el-radio>
						</div>
					</el-form-item>
					<el-form-item label="通知用户" v-if="info.notice_type == 1">
						<div class="user-list" v-if="Object.values(user_list).length > 0">
							<div class="user-block" v-for="(item,index) in user_list">
								<div class="avatar">
									<img class="avatar-image" :src="item.member_avatar" />
								</div>
								<div class="user-info">
									<div class="user-title">[[ item.member_name ]]</div>
									<div class="user-id">ID：[[ item.uid ]]</div>
								</div>
								<div class="del-btn" @click="delUser(item.uid,index)">
									<i class='fa fa-remove'></i>
								</div>
							</div>
						</div>
						<el-button type="button" size="small" @click="addUser">添加用户</el-button>
					</el-form-item>
					<el-form-item label="消息内容">
						<tinymceee v-model.trim="info.message_content" ref="tinymceee"></tinymceee>
					</el-form-item>
					<el-form-item label="">
						<el-button type="primary" @click="submitForm()">发布</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>
	</div>
	<script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
	@include('public.admin.tinymceee')
	<script>
		new Vue({
			el:"#app",
			delimiters: ['[[', ']]'],
			name: 'send_message',
			data() {
				return{
					// 消息内容
					info:{
						message_title: '',// 消息标题
						message_content: '',// 消息内容
						notice_type: 0,// 通知类型：0=全部，1=指定用户
						user_ids: [],// 用户ID列表（仅指定用户存在）
					},
					user_list: [],
					rules:{
						message_title:{ required: true, message: '请输入消息标题'}
					},
				}
			},
			created() {},
			mounted() {},
			methods: {
				// 添加用户
				addUser(){
					let _this = this;
					let popup = util.selectMember('{!! yzWebUrl('member.query.selected') !!}',{},{
						confirm:function (userInfo) {
							if(_this.info.user_ids[userInfo.uid] === 'undefined' || _this.info.user_ids[userInfo.uid] === undefined){
								_this.user_list = _this.user_list.concat([{
									member_name: userInfo.nickname,
									member_avatar: userInfo.avatar_image,
									uid: userInfo.uid,
								}]);
								_this.info.user_ids[userInfo.uid + ''] = userInfo.uid;
								_this.$forceUpdate();
							}
							// 关闭弹框
							popup.modal('hide');
						}
					});
				},
				// 删除用户
				delUser(uid,index){
					let _this = this;
					let userList = Object.assign({},_this.user_list);
					let userIds = Object.assign({},_this.info.user_ids);
					delete userList[index];
					delete userIds[uid];

					_this.user_list = Object.values(userList);
					_this.info.user_ids = userIds;
					_this.$forceUpdate();
				},
				// 点击发布
				submitForm() {
					let _this = this;
					let info = Object.assign({},_this.info);
					// 内容校验
					if(info.notice_type === 1 && Object.values(info.user_ids).length <= 0){
						_this.$message({type: 'error',message: '请至少选择一个用户!'});
						return false;
					}
					if(info.message_content.length <= 0){
						_this.$message({type: 'error',message: '请输入消息内容!'});
						return false;
					}
					// 提交内容
					_this.$refs['form'].validate((valid) => {
						if (valid) {
							let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
							this.$http.post("{{yzWebUrl('plugin.message-center.admin.index.edit-info')}}", { info: info }).then(response => {
								if (response.data.result) {
									this.$message({type: 'success',message: '操作成功!'});
									window.location.href = "{{yzWebUrl('plugin.message-center.admin.index.index')}}";
								} else {
									this.$message({message: response.data.msg,type: 'error'});
								}
								loading.close();
							},response => {
								loading.close();
							});
						}
						else {
							console.log('error submit!!');
							return false;
						}
					});
				},





			},
		})
	</script>
@endsection