<template>
	<div>
		<el-row>
			<el-col :span="24" class="first-row">
				<div class="tag">广告管理</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="second-row">
				<div class="btn-add">
					<el-button type="primary" icon="el-icon-add" @click="handleAdd">添加</el-button>
				</div>
			</el-col>
		</el-row>
		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
		<el-row>
			<el-col :span="24" class="third-row">
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					highlight-current-row>
					<el-table-column label="名称" align="center" show-overflow-tooltip width="130">
						<template slot-scope="scope">{{ scope.row.url_name }}</template>
					</el-table-column>
					<el-table-column prop="number" label="图片URL" show-overflow-tooltip align="left">
						<template slot-scope="scope">
							<el-link :href="scope.row.url" target="_blank">{{scope.row.url}}</el-link>
						</template>
					</el-table-column>
					<el-table-column prop="password" label="备注" align="center" show-overflow-tooltip width="130">
						<template slot-scope="scope">{{ scope.row.remark }}</template>
					</el-table-column>
					<el-table-column prop="password" label="是否启用" align="center" show-overflow-tooltip width="130">
						<template slot-scope="scope">
							<span v-if="scope.row.state == 1">是</span>
							<span v-else>否</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="80">
						<el-button type="text" class="del-btn" slot-scope="scope"
							@click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</el-table-column>
					<el-table-column width="130">
						<el-button type="text" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 添加对话框 -->
				<el-dialog title="添加图片" :visible.sync="adddialogFormVisible" width="500px" top="0vh" class="my-dialog"
					:close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :model="addform" :rules="addRules" ref="addform">
						<el-form-item label="名称：" prop="url_name" :label-width="formLabelWidth">
							<el-input ref="add_url_name" v-model="addform.url_name" autocomplete="off" minlength="2"
								maxlength="16" readonly="">
							</el-input>
						</el-form-item>
						<el-form-item label="备注：" prop="remark" :label-width="formLabelWidth">
							<el-input ref="add_remark" v-model="addform.remark" autocomplete="off" minlength="2"
								maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="是否启用：" prop="remark" :label-width="formLabelWidth">
							<el-checkbox v-model="addform.checked">启用</el-checkbox>
						</el-form-item>
						<el-form-item label="图片：" :label-width="formLabelWidth">
							<el-upload ref="upload_send" :limit="1" :auto-upload="false" list-type="picture"
								accept=".jpg" action="#" :multiple="false" :on-change="addChange"
								:on-remove="addPicRemove">
								<el-button slot="trigger" size="small" type="primary">选取图片文件</el-button>
								<div slot="tip" class="el-upload__tip">提示：仅允许上传1个".jpg"文件，且不超过500kb</div>
							</el-upload>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="adddialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="send_ad">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 编辑对话框 -->
				<el-dialog title="替换图片" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog"
					:close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :model="form" :rules="formRules" ref="form">
						<el-form-item label="名称：" prop="url_name" :label-width="formLabelWidth">
							<el-input ref="nicheng" v-model="form.url_name" autocomplete="off" maxlength="16"
								readonly="">
							</el-input>
						</el-form-item>
						<el-form-item label="备注：" prop="remark" :label-width="formLabelWidth">
							<el-input ref="zhanghao" v-model="form.remark" autocomplete="off" maxlength="16"></el-input>
						</el-form-item>
						<el-form-item label="是否启用：" prop="remark" :label-width="formLabelWidth">
							<el-checkbox v-model="form.checked">启用</el-checkbox>
						</el-form-item>
						<el-form-item label="图片：" :label-width="formLabelWidth">
							<el-upload ref="upload_modi" :limit="1" :auto-upload="false" list-type="picture"
								accept=".jpg" action="#" :multiple="false" :file-list="form.url"
								:on-change="modifyChange" :on-remove="modifyPicRemove">
								<el-button slot="trigger" size="small" type="primary">选取图片文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过500kb</div>
							</el-upload>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="editdialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="modify_ad">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 删除对话框 -->
				<el-dialog :visible.sync="delDialogVisible" width="500px" center top="0vh" class="my-dialog"
					:close-on-click-modal="false" :close-on-press-escape="false">
					<div class="box-icon"></div>
					<span class="del-msg">确定删除【{{del_pic}}】吗？</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="delDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleDelRow">确 定</el-button>
					</span>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				adddialogFormVisible: false,
				delDialogVisible: false,
				editdialogFormVisible: false,
				del_id: '',
				formLabelWidth: '100px', // label宽度
				tableData: [],
				form: {
					id: '',
					remark: '',
					url_name: '',
					state: '',
					checked: true,
					url: [],
					file: false
				},
				formRules: {
					url_name: [{
							required: true,
							message: '请输入名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 16,
							message: '名称长度不小于2位',
							trigger: 'blur'
						}
					],
					remark: [{
							required: true,
							message: '请输入备注',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 16,
							message: '备注长度不小于2位',
							trigger: 'blur'
						}
					]
				},
				addform: {
					remark: '',
					url_name: '水电广告',
					state: 1,
					checked: true,
					file: false
				},
				addRules: {
					url_name: [{
							required: true,
							message: '请输入名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 16,
							message: '名称长度不小于2位',
							trigger: 'blur'
						}
					],
					remark: [{
							required: true,
							message: '请输入备注',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 16,
							message: '备注长度不小于2位',
							trigger: 'blur'
						}
					]
				},
				del_pic: '', // 要删除的图片
				del_id: '' // 删除的id
			}
		},
		created() {
			this.updateTable()
		},
		methods: {
			/**
			 * 删除指定的id所在的行
			 */
			handleDelRow() {
				var _this = this;
				let formData = new FormData();
				formData.append("id", this.del_id);
				this.$axios.post('/jxch-smartmp/HotWaters/advertdel_h.action', formData)
					.then(res => {
						// console.log(res.data.data);
						if (res.data.code == 200) {
							_this.$message.success('删除成功！');
							_this.delDialogVisible = false
							_this.updateTable()
							_this.del_pic = ''
						} else {
							_this.$message.success('删除失败！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【删除数据】请求异常: ' + err);
					})
			},
			/**
			 * 删除对话框
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleDelete(index, row) {
				// console.log(index, row);
				this.delDialogVisible = true
				this.del_id = row.id
				this.del_pic = row.url_name
			},
			/**
			 * 编辑对话框
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleEdit(index, row) {
				this.editdialogFormVisible = true;
				this.form.id = row.id;
				this.form.remark = row.remark;
				this.form.url_name = row.url_name;
				this.form.checked = row.state == 1 ? true : false;
				// this.form.url = [{
				// 	name: row.url.substr(row.url.lastIndexOf('/') + 1),
				// 	url: row.url
				// }]
			},
			/**
			 * 添加广告
			 */
			handleAdd() {
				this.adddialogFormVisible = true
			},
			/**
			 * 获取数据，填充表格变量
			 */
			updateTable() {
				var _this = this
				let formData = new FormData();
				formData.append("url_name", this.addform.url_name);
				_this.tableData = []
				this.$axios.post('/jxch-smartmp/HotWaters/advertquery_h.action', formData)
					.then(res => {
						// console.log(res.data.data);
						if (res.data.code == 200) {
							// _this.$message.success('数据加载成功！');
							_this.tableData = res.data.data
						} else {
							_this.$message.success('【获取广告数据】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取广告数据】请求异常: ' + err);
					})
			},
			addChange(file, fileList) {
				// console.log(file, fileList);
				if (fileList.length > 0) {
					this.addform.file = true
				} else {
					this.addform.file = false
				}
			},
			modifyChange(file, fileList) {
				// console.log(file, fileList);
				if (fileList.length > 0) {
					this.form.file = true
				} else {
					this.form.file = false
				}
			},
			addPicRemove(file, fileList) {
				// console.log(file, fileList);
				if (fileList.length > 0) {
					this.addform.file = true
				} else {
					this.addform.file = false
				}
			},
			modifyPicRemove(file, fileList) {
				// console.log(file, fileList);
				if (fileList.length == 0) {
					this.form.url = []
					this.form.file = false
				} else {
					this.form.file = true
				}
			},
			/**
			 * 上传广告图片
			 */
			send_ad() {
				if (this.addform.url_name == '') {
					setTimeout(() => {
						this.$refs['add_url_name'].focus()
					}, 100)
					this.$message.warning('请输入名称')
					return
				}
				if (this.addform.remark == '') {
					setTimeout(() => {
						this.$refs['add_remark'].focus()
					}, 100)
					this.$message.warning('请输入备注')
					return
				}
				if (this.addform.file == false) {
					this.$message.warning('请选择图片文件')
					return
				}
				let file = this.$refs.upload_send.uploadFiles.pop().raw; //这里获取上传的文件对象
				let formData = new FormData();
				formData.append("myFile", file);
				formData.append("url_name", this.addform.url_name);
				formData.append("remark", this.addform.remark);
				if (this.addform.checked == true) {
					this.addform.state = 1
				} else {
					this.addform.state = 0
				}
				formData.append("state", this.addform.state);
				var _this = this
				this.$axios.post('/jxch-smartmp/HotWaters/adverthimage.action', formData)
					.then(res => {
						// console.log(res.data);
						if (res.data.code == 200) {
							_this.$message.success(res.data.message);
							_this.adddialogFormVisible = false
							_this.updateTable()
							_this.addform = {
								remark: '',
								url_name: '水电广告',
								state: 1,
								checked: true,
								file: false
							}
						} else {
							_this.$message.warning(res.data.message);
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【上传图片】请求异常: ' + err);
					})
			},
			/**
			 * 修改广告图片
			 */
			modify_ad() {
				let formData = new FormData();
				if (this.form.file == true) {
					let file = this.$refs.upload_modi.uploadFiles.pop().raw; //这里获取上传的文件对象
					formData.append("myFile", file);
				}
				formData.append("url_name", this.form.url_name);
				formData.append("remark", this.form.remark);
				if (this.form.checked == true) {
					this.form.state = 1
				} else {
					this.form.state = 0
				}
				formData.append("state", this.form.state);
				formData.append("id", this.form.id);
				var _this = this
				this.$axios.post('/jxch-smartmp/HotWaters/adverth_uimage.action', formData)
					.then(res => {
						// console.log(res.data);
						if (res.data.code == 200) {
							_this.editdialogFormVisible = false
							_this.$message.success(res.data.message);
							_this.updateTable()
							_this.form = {
								id: '',
								remark: '',
								url_name: '',
								state: '',
								checked: true,
								url: []
							}
						} else {
							_this.$message.warning(res.data.message);
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【修改图片】请求异常: ' + err);
					})
			}
		}
	}
</script>

<style scoped>
	@import url("ad.css");
</style>
