<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-global"></i> Books管理
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Selection">添加</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="title" label="标题"></el-table-column>
				<el-table-column label="书皮图片" align="center" width="160">
					<template slot-scope="scope">
						<el-image class="table-td-thumb" :src="IMGdo_Url+'system/'+scope.row.icon"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 添加弹出框 -->
		<el-dialog title="添加" :visible.sync="addVisible" width="40%">
			<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="80px">
				<el-col :span="11">
					<el-form-item label="标题" prop="title">
						<el-input v-model="addForm.title"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="语言" prop="language">
						<el-input v-model="addForm.language"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="作者" prop="author">
						<el-input v-model="addForm.author"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="isbn" prop="isbn">
						<el-input v-model="addForm.isbn"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="price" prop="price">
						<el-input v-model="addForm.price"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="phone">
						<el-input v-model="addForm.phone"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="书皮图片" label-width="80px">
						<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Mysystem/up_file'" :show-file-list="false" name="system"
						 :on-success="handleAvatarSuccess" :on-error="handleAvatarError" :before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="销售二维码" label-width="100px">
						<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Mysystem/up_file'" :show-file-list="false" name="system"
						 :on-success="handleAvatarSuccess_" :on-error="handleAvatarError_" :before-upload="beforeAvatarUpload_">
							<img v-if="imageUrl_" :src="imageUrl_" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="sale_url" prop="sale_url">
						<el-input v-model="addForm.sale_url"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="PDF 文件" label-width="80px">
						<el-upload class="upload-demo" :action="IMGup_Url+'master/Mysystem/up_pdf_file'" :on-success="handleFileSuccess"
						 name="bookpdf" type="bookpdf" :on-error="handleFileError" :on-preview="handlePreview" :on-remove="handleRemove"
						 :before-remove="beforeRemove" :on-change="handleChange" accept=".pdf" :on-exceed="handleExceed" :file-list="file_pdf">
							<el-button size="small" type="primary">upload</el-button>
						</el-upload>
						<span style="font-size: 12px; color: #aaa;margin-left: 5px;">只能上传pdf文件</span>
					</el-form-item>
				</el-col>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false;">取 消</el-button>
				<el-button type="primary" @click="saveAdd(addForm)">确 定</el-button>
			</span>
		</el-dialog>


		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" :visible.sync="editVisible" width="40%">
			<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="85px">
				<el-col :span="11">
					<el-form-item label="标题" prop="title">
						<el-input v-model="editForm.title"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="语言" prop="language">
						<el-input v-model="editForm.language"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="作者" prop="author">
						<el-input v-model="editForm.author"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="isbn" prop="isbn">
						<el-input v-model="editForm.isbn"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="price" prop="price">
						<el-input v-model="editForm.price"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="phone">
						<el-input v-model="editForm.phone"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="书皮图片" label-width="80px">
						<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Mysystem/up_file'" :show-file-list="false" name="system"
						 :on-success="handleEditSuccess" :on-error="handleAvatarError" :before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="销售二维码" label-width="100px">
						<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Mysystem/up_file'" :show-file-list="false" name="system"
						 :on-success="handleEditSuccess_" :on-error="handleAvatarError_" :before-upload="beforeAvatarUpload_">
							<img v-if="imageUrl_" :src="imageUrl_" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="sale_url" prop="sale_url">
						<el-input v-model="editForm.sale_url"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="PDF 文件" label-width="85px">
						<el-upload class="upload-demo" :action="IMGup_Url+'master/Mysystem/up_pdf_file'" :on-success="handleFileSuccess_"
						 name="bookpdf" type="bookpdf" :on-error="handleFileError_" :on-preview="handlePreview_" :on-remove="handleRemove_"
						 :before-remove="beforeRemove_" :on-change="handleChange_" accept=".pdf" :on-exceed="handleExceed_" :file-list="file_pdf_">
							<el-button size="small" type="primary">upload</el-button>
						</el-upload>
						<span style="font-size: 12px; color: #aaa;">只能上传pdf文件</span>
					</el-form-item>
				</el-col>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit(editForm)">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				addForm: {},
				tableData: [],
				IMGdo_Url: this.IMGdoURL,
				IMGup_Url: this.IMGupURL,
				imageUrl: '',
				imageUrl_: '',
				addVisible: false,
				editVisible: false,
				editForm: {},
				aid: -1,
				idx: -1,
				id: -1,
				file_pdf: [],
				file_pdf_: [],
				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}],
					language: [{
						required: true,
						message: '请输入语言',
						trigger: 'blur'
					}],
					author: [{
						required: true,
						message: '请输入作者',
						trigger: 'blur'
					}],
					isbn: [{
						required: true,
						message: '请输入isbn',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						message: '请输入price',
						trigger: 'blur'
					}],
					sale_url: [{
						required: true,
						message: '请输入sale_url',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取book列表数据
			getData() {
				this.$api
					.post('master/Mysystem/getBooks', {})
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data.books;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 添加操作
			add_Selection(index, row) {
				this.aid = index;
				this.addVisible = true;
				this.imageUrl = "";
				this.imageUrl_ = "";
			},
			// 保存添加
			saveAdd(addForm) {
				if (this.addForm.icon == undefined || this.addForm.sale_icon == undefined) {
					this.$message.error("请插入书皮图片或销售二维码");
				} else {
					this.$refs.add_Form.validate((valid) => {
						if (valid) {
							this.$api
								.post('master/Mysystem/addBook', this.addForm)
								.then(res => {
									if (res.code == 0) {
										this.addVisible = false;
										this.$refs.add_Form.resetFields();
										this.$message.success(`添加成功`);
										this.imageUrl = "";
										this.imageUrl_ = "";
										this.addForm.pdf = '';
										this.getData();
									} else {
										this.$message.error(res.msg);
									}
								})
								.catch(err => {
									this.$message.error(err);
								});
						} else {
							return false;
						}
					});
				}

			},
			// 编辑操作
			handleEdit(index, row) {
				this.idx = index;
				this.editForm = Object.assign({}, row);
				this.editVisible = true;
				this.imageUrl = this.IMGdo_Url + 'system/' + row.icon;
				this.imageUrl_ = this.IMGdo_Url + 'system/' + row.sale_icon;
				if (row.pdf != "") {
					this.file_pdf_ = [{}];
					this.file_pdf_[0].name = 'PDF';
					this.file_pdf_[0].url = this.IMGdo_Url + 'bookpdf/' + row.pdf;
				}
			},
			// 保存编辑
			saveEdit(editForm) {
				this.$refs.edit_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Mysystem/editBook', this.editForm)
							.then(res => {
								if (res.code == 0) {
									this.editVisible = false;
									this.$message.success(`更改第 ${this.idx + 1} 行成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Mysystem/delBook', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除成功');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},
			//上传图片
			handleAvatarSuccess(res, file) {
				if (res.code == 0) {
					this.addForm.icon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleEditSuccess(res, file) {
				if (res.code == 0) {
					this.editForm.icon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleAvatarError(res, file) {

			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 1;
				if (!isLt2M) {
					this.$message.error('图片大小不能超过 1M!');
				}
				return isLt2M;
			},
			handleAvatarSuccess_(res, file) {
				if (res.code == 0) {
					this.addForm.sale_icon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl_ = URL.createObjectURL(file.raw);
			},
			handleEditSuccess_(res, file) {
				if (res.code == 0) {
					this.editForm.sale_icon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl_ = URL.createObjectURL(file.raw);
			},
			handleAvatarError_(res, file) {
				const isLt2M_ = file.size / 1024 / 1024 < 1;
				if (!isLt2M_) {
					this.$message.error('图片大小不能超过 1M!');
				}
				return isLt2M_;
			},
			beforeAvatarUpload_(file) {

			},

			// 更改图片
			handleChange(file, fileList) {
				if (fileList.length > 0) {
					this.file_pdf = [fileList[fileList.length - 1]]
					this.file_pdf[0].name = 'PDF';
				}
			},
			handleChange_(file, fileList) {
				if (fileList.length > 0) {
					this.file_pdf_ = [fileList[fileList.length - 1]]
					this.file_pdf_[0].name = 'PDF';
				}
			},
			// 上传文件
			handleFileSuccess(res, file) {
				this.addForm.pdf = res.upurl
			},
			handleFileError(res, file) {
			
			},
			handleRemove(file, fileList) {
			
			},
			handlePreview(file) {
				window.open(file.url);
			},
			handleExceed(files, fileList) {
				this.$message.warning("当前限制选择 1 个文件，请先删除当前文件！");
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`).then(() => {
					this.addForm.pdf = ''
				});
			},
			
			handleFileSuccess_(res, file) {
				this.editForm.pdf = res.upurl
			},
			handleFileError_(res, file) {

			},
			handleRemove_(file, fileList) {

			},
			handlePreview_(file) {
				window.open(file.url);
			},
			handleExceed_(files, fileList) {
				this.$message.warning("当前限制选择 1 个文件，请先删除当前文件！");
			},
			beforeRemove_(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`).then(() => {
					this.editForm.pdf = ''
				});
			},
		},
	};
</script>

<style>
	.handle-box {
		margin-bottom: 20px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 140px;
		height: 140px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 140px;
		height: 140px;
		line-height: 140px;
		text-align: center;
	}

	.avatar {
		width: 140px;
		height: 140px;
		display: block;
	}

	.el-upload--text {
		border: none;
		height: 35px;
		text-align: left;
		width: 100px;
	}

	.el-upload-list {
		margin-top: -10px;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.green {
		color: #0fa31d;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 50px;
		height: 65px;
	}
</style>
