<template>
	<div>

		
		<div style="display: inline-block;">
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="handleAdd">新增
			</el-button>
		</div>
		<el-table v-loading="tableDataLoading" :data="tableData.records">
			<el-table-column prop="id" label="编号" width="60" fixed="left"></el-table-column>
			<el-table-column prop="title" label="标签名称"></el-table-column>
			<el-table-column label="操作" prop="id" width="200" >
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="primary"
						style="margin: 5px"
						@click="handleUpdate(scope.row)"
					>修改
					</el-button>
					<el-button 
						size="mini"
						type="danger"
						style="margin: 5px"
						@click="handleDel(scope.row)"
					>删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="text-align: center; margin-top: 10px">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="limit"
				:current-page="page"
				layout="total,sizes, prev, pager, next,jumper"
				:total="tableData.total"
			>
			</el-pagination>
		</div>

		<el-dialog title="新增标签信息" :visible.sync="dialogSaveVisible" center>
			<el-form :model="saveForm">
				<el-form-item label="标签名称" :label-width="formLabelWidth">
					<el-input v-model="saveForm.title" type="text" style="width:65%;" > </el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogSaveVisible = false">取 消</el-button>
				<el-button type="primary" @click="handelQueren()">确 定</el-button>
			</div>
		</el-dialog>
		
		<el-dialog title="修改标签信息" :visible.sync="dialogUpdateVisible" center>
			<el-form :model="saveForm">
				<el-input v-model="saveForm.id" type="text" style="width:65%;" hidden> </el-input>
				<el-form-item label="标签名称" :label-width="formLabelWidth">
					<el-input v-model="saveForm.title" type="text" style="width:65%;" > </el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogUpdateVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleEdit()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import axios from "axios";
import {jsonp} from "vue-jsonp";
export default {
	data() {
		return {
			tableDataLoading: false,
			dialogSaveVisible: false,
			dialogUpdateVisible: false,
			tableData: {},
			page: 1,
			limit: 10,
			saveForm: {},
			formLabelWidth: '200px',
		};
	},
	methods: {
		//打开新增页面
		handleAdd(){
			this.dialogSaveVisible = true;
			this.saveForm = {};
		},
		//新增数据
		handelQueren(){
			var saveForm = this.saveForm;
			if(!saveForm.title){
				this.$notify({
						title: "提示",
						duration: 1800,
						message: "标签名称不能为空",
						type: "warning",
					});
			}
			this.$http({
				url: this.$http.adornUrl("bl/pingjiaTag/add"),
				method: "post",
				params: this.$http.adornParams(saveForm),
			}).then(({data}) => {
				console.log(`🚀 ~ handelQueren ~ data:`, data)
				if (data.code == 0) {
					this.dialogSaveVisible = false;
					this.handleSelect();
				} else {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: data.msg,
						type: "warning",
					});
				}
			});
		},
		//打开修改页面
		handleUpdate(record){
			this.dialogUpdateVisible = true;
			this.saveForm = Object.assign({}, record);
			
		},
		//修改数据
		handleEdit(record){
			var saveForm = this.saveForm;
			if(!saveForm.title){
				this.$notify({
						title: "提示",
						duration: 1800,
						message: "标签名称不能为空",
						type: "warning",
					});
			}
			this.$http({
				url: this.$http.adornUrl("bl/pingjiaTag/modify"),
				method: "post",
				params: this.$http.adornParams(saveForm),
			}).then(({data}) => {
				if (data.code == 0) {
					this.dialogUpdateVisible = false;
					this.handleSelect();
				} else {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: data.msg,
						type: "warning",
					});
				}
			});
		},
		//删除数据
		handleDel(record){
			this.$http({
				url: this.$http.adornUrl("bl/pingjiaTag/delete"),
				method: "post",
				params: this.$http.adornParams({id:record.id}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.handleSelect();
					this.$notify({
						title: "提示",
						duration: 1800,
						message: "删除成功",
						type: "success",
					});
				} else {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: data.msg,
						type: "warning",
					});
				}
			});
		},
		// 获取列表数据
		handleSelect() {
			this.tableDataLoading = true;
			this.$http({
				url: this.$http.adornUrl("bl/pingjiaTag/list"),
				method: "get",
				params: this.$http.adornParams({
					page: this.page,
					limit: this.limit,
				}),
			}).then(({data}) => {
				console.log(`🚀 ~ handleSelect ~ data:`, data)
				if (data.code == 0) {
					let returnData = data.data;
					this.tableData = returnData;
				} else {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: data.msg,
						type: "warning",
					});
				}
				this.tableDataLoading = false;
			});
		},

		//分页
		handleSizeChange(val) {
			this.limit = val;
			this.handleSelect();
		},

		//翻页
		handleCurrentChange(val) {
			this.page = val;
			this.handleSelect();
		},
		
	},
	mounted() {
		this.handleSelect();
	},
};
</script>

<style>
.customWidth {
	width: 80% !important;
}
.el-dialog--center {
	text-align: center;
}

.el-tooltip__popper {
width: 200px;
padding: 10px;
color: #000 !important;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
background-color: #fff !important;
}

</style>
