<template>
	<el-dialog :title="modalTitle" :visible.sync="modalVisible" :width="formLabelWidth" top="2vh" @close="handleCancel">
		<div class="gardenMobile" v-loading="loading">
			<el-form label-width="100px" :model="form" :rules="rules" label-position="right" ref="form" class="gardenFrom">
				<el-row :gutter="20">
					<el-col :span="20">
						<el-form-item label="文章标题:" prop="title">
							<el-input v-model="form.title" :disabled="limit.isRead"></el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="20">
						<el-form-item label="数据来源:">
							<el-input v-model="form.origin" :disabled="limit.isRead"></el-input>
						</el-form-item>
					</el-col> -->
					<!-- <el-col :span="20">
						<el-form-item label="文章类型:" prop="noticeType">
							<el-select v-model="form.noticeType" placeholder="请选择" :disabled="limit.isRead">
								<el-option v-for="item in list.articleType" :key="item.id" :label="item.name" :disabled="limit.isRead" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<!-- <el-col :span="20"> 
						<el-form-item label="文章状态:" prop="state">
							<el-select v-model="form.state" placeholder="请选择" :disabled="limit.isRead">
								<el-option v-for="item in list.stateType" :key="item.id" :label="item.name" :disabled="limit.isRead" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<!-- <el-col :span="20">
						<el-form-item label="内容:" prop="content">
							<el-input type="textarea" :rows="9" placeholder="请输入内容" v-model="form.content" :disabled="limit.isRead"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="20">
						<el-form-item label="上传照片" v-if="!limit.isRead">
							<el-upload
							  class="upload-demo"
							  ref="upload"
							  :multiple="true"
							  :show-file-list="false"
							  :auto-upload="true"
							  :action="uploadImgUrl"
							  :on-progress="handelProgress"
							  :before-upload="beforeAvatarUpload"
							  :on-success="handelSuccess">
							  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
							  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
							</el-upload>
							<span v-show="uploadStatus"><i class="el-icon-loading"></i>正在非常努力的上传...</span>
						</el-form-item>
					</el-col>
					<el-col :span="20">
						<label for="content" class="el-form-item__label" style="width: 100px;" v-show="this.form.files.length > 0">已上传图片:</label>
						<el-form-item>
							<ul class="imgList">
								<li v-for="(item,index) in this.form.files">
									<div class="img">
										<img :src="'/htdata/' + item.fileUrl">
									</div>
									<div class="textarea">
										<span class="icon" @click="delUploadImg(index)" v-if="!limit.isRead"><i class="el-icon-close"></i></span>
										<el-input type="textarea" v-model="item.fileDesc" :rows="5" :disabled="limit.isRead" placeholder="请输入图片描述内容"></el-input>
									</div>
								</li>
							</ul>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleCancel">取 消</el-button>
			<el-button type="primary" @click="submit" v-if="!limit.isRead">保 存</el-button>
		</div>
	</el-dialog>
</template>

<script>
import { uploadImgUrl } from '@/api/CONST';
export default {
	name: 'userMobiel',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: 'title'
		},
		action: {
			type: String,
			default: 'add'
		},
		selectRow: {
			type: Object,
			default: {}
		}
	},
	watch: {
		visible(newVal, oldVal) {
			this.modalVisible = newVal;
		},
		title(newVal, oldVal) {
			this.modalTitle = newVal;
		},
		action(newVal, oldVal) {
			this.modalAction = newVal;
		},
		selectRow(newVal, oldVal) {
			this.modalSelectRow = newVal;
		}
	},
	data() {
		return {
			modalTitle: this.title,
			modalVisible: this.visible,
			modalAction: this.action,
			modalSelectRow: this.selectRow,
			formLabelWidth: '60%',
			tabPosition: 'left',
			uploadImgUrl:uploadImgUrl,
			fileList:[],
			uploadStatus:false,
			list:{
				articleType:[{
						id:1,
						name:'新闻'
					},
					{
						id:2,
						name:'通知公告'
					},
					{
						id:9,
						name:'产业扶贫'
				}],
				stateType:[{
					id:0,
					name:'未发布'
				},{
					id:1,
					name:'已发布'
				},{
					id:2,
					name:'撤回'
				}]
			},
			limit: {
				isRead: false,
				isAdd: false
			},
			rules: {
				title: [{ required: true, message: '文章标题不能为空!', trigger: 'blur' }],
				// noticeType: [{ required: true, message: '文章类型不能为空!', trigger: 'blur' }],
				// state: [{ required: true, message: '文章状态不能为空!', trigger: 'blur' }],
				// content: [{ required: true, message: '内容不能为空!', trigger: 'blur' }],
			},
			form: {
				noticeType:9,
				files:[]
			}
		};
	},
	created() {
		switch (this.modalAction) {
			case 'add':
				this.limit.isAdd = true;
				break;
			case 'edit':
				this.getDetail(this.modalSelectRow.id);
				break;
			case 'view':
				this.getDetail(this.modalSelectRow.id);
				this.limit.isRead = true;
				break;
			default:
				break;
		}
	},
	mounted() {},
	methods: {
		handelProgress(event, file, fileList){
			this.uploadStatus = true
		},
		handelSuccess(file,fileList){
			console.log(fileList)
			this.uploadStatus = false
			let item = {
				fileDesc:'',
				...file.retBody
			}
			this.form.files.push(item)
		},
		beforeAvatarUpload(file) {
			var isImg = /^image\/(jpeg|png|jpg)$/.test(file.type)
			// const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isImg) {
			  this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
			}
			if (!isLt2M) {
			  this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isImg && isLt2M;
		},
		delUploadImg(index){
			this.form.files.splice(index,1)
		},
		//获取详情
		getDetail(id) {
			this.loading = true
			let params = {
				id: id
			};
			this.$port.getNotice(params).then(res => {
				this.form = res
				this.loading = false
			});
		},
		//提交前校验一把
		submit() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.slUpSource()
				}else {
					return false;
				}
			})
		},
		//判断数据提交方式
		slUpSource() {
			switch (this.modalAction) {
				case 'add':
					this.add();
					break;
				case 'edit':
					this.update();
					break;
				default:
					break;
			}
		},
		//数据新增
		add() {
			let params = Object.assign({},this.form)
			console.log(params)
			this.$port.addNotice(params).then(res => {
				if (!res.code) {
					this.$message.success("操作成功！")
					this.modalVisible = false
					this.$emit('closeModal', true);
				}
			});
		},
		//数据修改
		update() {
			let params = Object.assign({},this.form)
			this.$port.updateNotice(params).then(res => {
				if (!res.code) {
					this.$message.success("操作成功！")
					this.modalVisible = false
					this.$emit('closeModal', true);
				}
			});
		},
		//窗口关闭
		handleCancel() {
			this.$emit('closeModal', false);
		}
	}
};
</script>

<style scoped lang="less">
.imgList{
	list-style:none;
	margin:0;
	padding:0;
	li{
		display:block;
		padding:6px;
		margin-bottom:10px;
		border:1px solid #ddd;
		border-radius:3px;
		.img{
			float:left;
			width:120px;
			height:120px;
			position:relative;
			.fileName{
				position:absolute;
				left:0;
				right:0
			}
			img{
				width:120px;
				height:120px;
			}
		}
		.textarea{
			position:relative;
			margin-left:130px;
			.icon{
				display:none;
				background:red;
				position:absolute;
				top:-10px;
				right:-10px;
				z-index:999;
				font-size:28px;
				cursor:pointer;
				width:20px;
				height:20px;
				border-radius:50%;
				color:#fff;
				text-align:center;
				line-height:13px;
				i{
					font-size:16px;
					font-weight:block;
				}
			}
			&:hover{
				.icon{
					display:block;
				}
			}
		}
		
	}
}

</style>
