<template>
	<div id="bannerlist">
		<el-card class="box-card">
			<div slot="header" class="header">
				<el-form :inline="true" :model="searchform" @submit.native.prevent>
					<el-form-item label="">
						<el-button type="primary" size="medium" @click="aeDialogTrue">添加banner</el-button>
					</el-form-item>
		  		</el-form>
			</div>
			<template>
				<el-table :data="tableData" v-loading="listLoading" element-loading-text="数据加载中..." row-key="id" border default-expand-all :tree-props="{children:'children',hasChildren:'hasChildren'}">
					<el-table-column prop="Id" label="图片管理" align="center">
						<template slot-scope="scope">
							<img :src="scope.row.ImageUrl" style="height:100px;" />
						</template>
					</el-table-column>
					<el-table-column prop="ClassifyName" label="跳转地址" align="center" min-width="140">
						<template slot-scope="scope"> <span>{{scope.row.JumpUrl}}</span> </template>
					</el-table-column>
					<el-table-column prop="ModifyTime" label="更新时间" min-width="110" :formatter="formatter" sortable align="center"></el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<div style="color:#4099ef; font-size:24px;">
								<!-- <i class="el-icon-edit-outline" @click="edititem(scope.row)"></i> -->
								<span class="editsty" @click="edititem(scope.row)">编辑</span>
								&nbsp;&nbsp;
								<!-- <i class="el-icon-delete" @click="deleteitem(scope.row)"></i> -->
								<span class="deletesty" @click="deleteitem(scope.row)">删除</span>
							</div>
		  	    		</template>
					</el-table-column>
				</el-table>
			</template>
			<el-col :span="24" class="toolbar">
		  		<el-pagination v-if="ispage" layout="total,prev,pager,next,jumper" background @current-change="handleCurrentChange" :page-size="pageSize" @size-change="handleSizeChange" :total="total" style="float:right;"></el-pagination>
		  	</el-col>
		</el-card>
		<!-- 添加账号弹框 -->
		<el-dialog :modal-append-to-body='false' :title="isadd?'新增banner':'编辑banner'" :visible.sync="aeDialog" @open="" :close-on-click-modal="false" :center="true" v-dialogDrag custom-class="dialogclass" width="510px">
			<div slot="title" style="display:flex;alignItems:center;">
				<img :src="isadd?$icons.add:$icons.edit" style="color:#fff;width:16px;height:16px;marginRight:5px;">
				<span style="fontSize:16px;">{{isadd?'新增banner':'编辑banner'}}</span>
			</div>
			<el-form :model="aeForm" :rules="aerules" ref="aeForm" label-position="right" label-width="0px" class="demo-aeForm" id="login-container" @submit.native.prevent>
				<el-form-item prop="img_url" label="">
					<input type="file" name="file" @change="fileSelected()" id="file" class="true-file" style="display:none;">
					<el-input type="text" v-model="aeForm.img_url" placeholder="上传图片" readonly size="medium" style="width:350px;"></el-input>
					<el-button type="primary" size="medium" @click.native="clickinput" :loading="uploadloading">{{uploadloading?'上传中':'选择图片'}}</el-button>
				</el-form-item>
				<el-form-item prop="jump_url" label="">
					<el-input type="text" v-model="aeForm.jump_url" placeholder="绑定跳转链接" size="medium" style="width:430px;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align:right;">
				<el-button type="primary" plain size="medium" @click.native="aeDialog=false">取 消</el-button>
				<el-button type="primary" size="medium" @click.native="saveDialog">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { bannerlist,bannerupload,banneradd,banneredit,bannerdelete } from 'api/api.js';
export default{
	data(){
		return {
			PageIndex:0,
			total:0,
			pageSize:15,
			ispage:true,
			listLoading:false,
			tableData:[],
			aeDialog:false,
			uploadloading:false,
			aeForm:{
				img_url:'',
				banner_type:1,
				jump_url:'',
			},
			aerules:{
				img_url:[{
					required:true,
					message:'请上传图片',
					trigger:'blur'
				}],
				jump_url:[{
					required:true,
					message:'请输入跳转链接',
					trigger:'blur'
				}],
			},
			isadd:true,
		}
	},
	mounted(){
		this.getlist();
		// document.onkeydown=e=>{
		// 	let keyval=window.event.keyCode;
		//     if( keyval===13 && this.$route.path === '/bannerlist'){
		// 		this.getlist();
		//     }
		// }
	},
	methods:{
		clickinput(){  //上传模拟点击
			$("#file").click();
		},
		fileSelected(){  //选择文件上传
			const that = this;
		    if( document.getElementById('file').files[0] ){
		        let hostfile = document.getElementById('file').files[0];
		        let size = Math.floor(hostfile.size / 1024 / 1024);
		        if( size>200 ){
		            that.$message.error('上传文件大小不能大于200M！');
		            hostfile = {};
		            return false
		        }
		        if( hostfile.name.toLowerCase().includes('.png') || hostfile.name.toLowerCase().includes('.jpg') || hostfile.name.toLowerCase().includes('.jpeg') ){
		        	let form = new FormData();
		        	form.append('file',hostfile);  //hostfile.name
					that.uploadloading=true;
					bannerupload(form).then((res) => {
						if( res.Ret === 200 ){
							// that.$message.success( '上传成功' );
							that.aeForm.img_url=res.Data.ResourceUrl;
						}
						that.uploadloading=false;
						$("#file").val('');
						hostfile = {};
					});
				}else{
					that.$message.error('上传文件格式不正确！');
		        }
		    } 
		},
		edititem(item){  //去编辑
			this.aeForm={banner_id:parseInt(item.Id),img_url:item.ImageUrl,jump_url:item.JumpUrl,banner_type:1};
			this.isadd=false;
			this.aeDialog=true;
		},
		deleteitem(item){  //删除
			this.$confirm('确认删除吗?','提示',{
				type:'warning'
			}).then(() => {
				bannerdelete({BannerId:parseInt(item.Id)}).then(res =>{
					if( res.Ret === 200 ){
						this.$message.success( res.Msg );
						this.getlist();
					}
				});
			}).catch(() => {});
		},
		saveDialog(){  //保存
			this.$refs.aeForm.validate((valid)=>{
				if( valid ){
					let params={ImgUrl:this.aeForm.img_url,BannerType:this.aeForm.banner_type,JumpUrl:this.aeForm.jump_url};
					if( this.isadd ){
						banneradd(params).then(res =>{
							if( res.Ret === 200 ){
								this.$message.success( '上传成功' );
								this.getlist();
								this.aeDialog=false;
							}
						});
					}else{
						params.BannerId=this.aeForm.banner_id;
						banneredit(params).then(res =>{
							if( res.Ret === 200 ){
								this.$message.success( '上传成功' );
								this.getlist();
								this.aeDialog=false;
							}
						});
					}
				}
			});
		},
		aeDialogTrue(){  //去新增
			this.aeForm={img_url:'',jump_url:'',banner_type:1};
			this.isadd=true;
			this.aeDialog=true;
		},
		getlist(){  //获取用户列表
			let params={CurrentIndex:this.PageIndex,PageSize:this.pageSize,BannerType:1,KeyWord:''};
			this.listLoading = true;
			bannerlist(params).then((res) => {
				if( res.Ret === 200 ){
					this.tableData = res.Data.List || [];
					this.total=parseInt(res.Data.Paging.Totals);
				}
				this.listLoading = false;
			});
		},
		search(){  //搜索
			this.ispage = false;
			this.$nextTick(() => {
				this.PageIndex = 0;
				this.getlist();
				this.ispage = true;
			});
		},
		handleCurrentChange(current){  //分页页码跳转
			this.PageIndex = current;
			this.getlist();
		},
		handleSizeChange(val){    //分页页码改变
	        this.pageSize=val;
	        this.getlist();
	   	},
	}
}	
</script>

<style scoped lang="scss">
	#bannerlist{ overflow:hidden;
		.header .el-form-item{ margin-bottom:0; }
	}
</style>