<template>
	<view class="ex-page">
		<view scroll-y scroll-with-animation class="main-view">
			<view class="space-view ex-table">
				<block v-if="!$util.isEmpty(list.data)">
					<t-table :headerBackgroundColor="'#F0F2F6'">
						<t-tr header>
							<t-th v-for="(item, index) in columns" :key="index" :align="item.align">
								{{ item.name }}
							</t-th>
						</t-tr>
						<t-tr v-for="(item, index) in list.data" :key="item.id">
							<t-td>
								<view @click.stop="editEvent(item, index)" class="item">
									<view>{{ item.name }}</view>
								</view>
								<i @click.stop="editEvent(item, index)" class="iconfont iconxiangyou"></i>
							</t-td>
						</t-tr>
					</t-table>
					<view class='update_hint'>提示：修改花材请在电脑上操作。</view>
				</block>
				<block v-else>
					<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
				</block>

			</view>
		</view>

		<ModalModule
			:show="showEdit"
			@cancel="closeModal"
			@click="affirmEvent"
			:title="editTitle"
			color="#333"
			:size="32"
			padding="30rpx 30rpx"
		>
			<template slot="customContent">
				<view class="inpput-cmd_bx">
					<input v-model="editInfo.name" placeholder="请输入分类名" />
				</view>
			</template>
		</ModalModule>
    <kd-entrance></kd-entrance>
	</view>
</template>
<script>
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import { list } from "@/mixins";
import {
	getFlowerCategoryListApi,
	deleteFlowerCategoryApi,
	updateFlowerCategoryApi,
	addFlowerCategoryApi
} from "@/api/storehouse/flower";
import ModalModule from "@/components/plugin/modal";

export default {
	components: { AppWrapperEmpty, ModalModule },
	mixins: [list],
	data() {
		return {
			isRank:false,
			showEdit: false,
			editInfo: {
				name: "",
				id: null,
				inTurn: 0
			},
			columns: [
				{
					name: "分类",
					dataIndex: "name",
					align: "left",
					color: "info"
				},
				{
					name: "操作",
					align: "right",
					custom: "edit"
				}
			],
			headerBackgroundColor: "#F0F2F6"
		};
	},
	onPullDownRefresh() {
		this.resetList();
		this._list().then(res => {
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		if (!this.list.finished) {
			this._list().then(res => {
				uni.stopPullDownRefresh();
			});
		} else {
			uni.stopPullDownRefresh();
		}
	},
	computed: {
		editTitle() {
			let title = "新增";
			if (this.editInfo && this.editInfo.id) {
				title = this.editInfo.name;
			}
			return title;
		}
	},
	methods: {
		async init() {
			this._list();
		},
		_list() {
			let params = {
				page: this.list.page,
				pageSize: this.list.pageSize
			};
			return getFlowerCategoryListApi(params)
				.then(res => {
					this.completes(res);
				})
				.catch(err => {});
		},
		async upSortByIndex(item, index) {
			if (index == 0) {
				return;
			}
			try {
				let params = {
					id: item.id,
					name: item.name,
					inTurn: ++item.inTurn
				};
				let api = updateFlowerCategoryApi;

				await api(params);

				this.resetList();
				await this._list();
				this.closeModal();
			} catch (error) {}
		},
		async downSortByIndex(item, index) {
			if (index >= this.list.data.length - 1) {
				return;
			}
			try {
				let params = {
					id: item.id,
					name: item.name,
					inTurn: --item.inTurn
				};
				let api = updateFlowerCategoryApi;

				await api(params);

				this.resetList();
				await this._list();
				this.closeModal();
			} catch (error) {}
		},
		async delEvent(item, index) {
			uni.showModal({
				title: `确认删除${item.name}`,
				content: "",
				showCancel: true,
				cancelText: "取消",
				cancelColor: "#000000",
				confirmText: "确定",
				confirmColor: "#3CC51F",
				success: async result => {
					if (result.confirm) {
						try {
							await deleteFlowerCategoryApi(item.id);
							uni.showToast({
								title: "删除成功"
							});

							this.resetList();
							this._list();
						} catch (error) {}
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		editEvent(item) {
			uni.navigateTo({
				url: `/pagesStorehouse/flower/category?classId=${item.id}`,
				success: result => {},
				fail: () => {},
				complete: () => {}
			});
		},
		addEvent(obj) {
			if(obj){
				this.editInfo = {
					name: obj.name,
						id: obj.id,
						inTurn: obj.inTurn
				},
				console.log(obj)
			}
			this.showEdit = true;
		},
		closeModal() {
			this.editInfo = {
				name: "",
				id: null,
				inTurn: 0
			};
			this.showEdit = false;
		},
		async affirmEvent(e) {
			if(e.index==0){
				this.closeModal();
				return
			}
			try {
				let params = {
					...this.editInfo
				};
				let api = addFlowerCategoryApi;

				if (this.editInfo.id) {
					api = updateFlowerCategoryApi;
				}
				await api(params);
				uni.showToast({
					title: "保存成功"
				});
				this.resetList();
				await this._list();
				this.closeModal();
			} catch (error) {}
		}
	}
};
</script>
<style lang="scss" scoped>
.ex-page {
	height: 100%;
	display: flex;
	flex-direction: column;
	.under-bar {
		padding: 0 20upx;
		display: flex;

		flex-shrink: 0;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		height: 100upx;
		background-color: #fff;
		.admin-button-com {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 20upx;
			// width: 140upx;
			color: #FFFFFF;
			background: #0099ff;
			height: 70upx;
			font-size: 32upx;
			&.active{
				background: #ff0000;
				border:1px solid #ff0000;
			}
		}
	}
	.main-view {
		flex: 1;
		background-color: #f9fbfc;
		.space-view {
			background-color: #fff;
			.update_hint{
				color:#999999;
				margin:30rpx 30rpx;
			}
			.item{
				width:100%;
				text-align:left;
				height:50rpx;
				padding-top:8rpx;
			}
		}
		.ex-info {
			padding: 30upx;
			.info-cell {
				display: flex;
				align-items: center;
				font-size: 28upx;
				&:not(:first-child) {
					margin-top: 20upx;
				}
				.cell-label {
					width: 110upx;
					color: #666666;
				}
				.cell-value {
					margin-left: 40upx;
					color: #333;
					&.warning {
						color: #ffaf1d;
					}
					&.success {
						color: #27c325;
					}
				}
			}
		}
		.ex-table {
			/deep/.input-td {
				input {
					width: 130upx;
					height: 70upx;
					border: 1px solid #dddddd;
					border-radius: 4upx;
					text-align: center;
				}
			}
			/deep/.edit-td {
				.iconfont {
					font-size: 40upx;
					margin: 0 20upx;
					&.disabled {
						color: #eeeeee;
					}
				}
			}
		}
	}
	.bar-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		width: 100%;
		height: 100upx;

		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
		.info-view {
			font-size: 26upx;
		}
		.btn-view {
			display: flex;
			.admin-button-com {
				margin: 0 10upx;
			}
		}
	}

	/deep/.inpput-cmd_bx {
		margin: 20upx 0;

		width: 100%;

		input {
			padding: 0 20upx;
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			border: 1px solid #f3f3f3;
			border-radius: 20upx;
			font-size: 28upx;
		}
	}
}
</style>
