<template>
	<view class="ex-page">
		<scroll-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'" :fontSize="28">
						<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
								v-for="(column, colIndex) in columns"
								:key="colIndex"
								:align="column.align"
								:color="column.color"
							>
								<view v-if="column.custom == 'edit'" class="edit-td">
									<template v-if="isSort">
										<text :class="['iconfont', 'iconshangyi', { disabled: index == 0 }]" @click.stop="upSortByIndex(item, index)"></text>
										<text :class="['iconfont','iconxiayi',{ disabled: index >= parentData.dataList.length - 1 }]" @click.stop="downSortByIndex(item, index)"></text>
									</template>
									<text v-else class="iconfont icondelete" @click.stop="delEvent(item, index)"></text>
								</view>
								<view v-else-if="column.custom">
									<view class="input-td">
										{{item[column.dataIndex]}}
									</view>
								</view>
								<view v-else>
									{{ item[column.dataIndex] || "" }}
								</view>
							</t-td>
						</t-tr>
					</t-table>
					
				</block>
				<block v-else>
					<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
				</block>
			</view>
		</scroll-view>
		<AppFlowerSel
			:selectList="list.data"
			:show.sync="showFlower"
			@select="changeFlowerEvent"
		/>
    <kd-entrance></kd-entrance>
	</view>
</template>
<script>
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import { list } from "@/mixins";
import {
	getFlowerListApi,
	updateFlowerApi,
	addFlowerApi,
	deleteFlowerApi
} from "@/api/storehouse/flower";
import lodash from "lodash";

import AppFlowerSel from "@/components/app-flower-sel";
export default {
	components: { AppFlowerSel, AppWrapperEmpty },
	mixins: [list],
	data() {
		return {
			classId: null,
			isSort: false,
			showFlower: false,
			columns: [
				{
					name: "名称",
					dataIndex: "itemName",
					color: "info"
				},
				{
					name: "库存预警",
					width: 130,
					color: "info",
					align: "center",
					dataIndex: "stockWarning",
					custom: "warn"
				},
				{
					name: "每扎成本",
					width: 130,
					color: "info",
					align: "center",
					dataIndex: "cost",
					custom: "cost"
				},
				{
					name: "每扎加价",
					width: 130,
					color: "info",
					align: "center",
					dataIndex: "addPrice",
					custom: "price"
				}
			]
		};
	},
	onLoad(options) {
		const { classId } = options;

		this.classId = classId;
		this.initData();
	},
	onPullDownRefresh() {
		this.resetList();
		this._list().then(res => {
			uni.stopPullDownRefresh();
		});
	},
	methods: {
		async initData() {
			this._list();
		},
		_list() {
			let params = {
				classId: this.classId,
				page: this.list.page,
				pageSize: this.list.pageSize
			};
			return getFlowerListApi(params)
				.then(res => {
					this.completes(res);
				})
				.catch(err => {});
		},
		// upSortByIndex(index) {
		// 	if (index > 0) {
		// 		const delItem = this.dataList.splice(index, 1, this.dataList[index - 1]);
		// 		this.$set(this.dataList, index - 1, delItem[0]);
		// 	}
		// },
		// downSortByIndex(index) {
		// 	if (index < this.dataList.length - 1) {
		// 		const delItem = this.dataList.splice(index, 1, this.dataList[index + 1]);
		// 		this.$set(this.dataList, index + 1, delItem[0]);
		// 	}
		// },
		async upSortByIndex(item, index) {
			if (index == 0) {
				return;
			}
			try {
				let params = {
					id: item.id,
					stockWarning: item.stockWarning,
					weight: item.weight,
					cost: item.cost,
					addPrice: item.addPrice,
					inTurn: ++item.inTurn
				};
				let api = updateFlowerApi;

				await api(params);

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

				await api(params);

				this.resetList();
				await this._list();
			} catch (error) {}
		},
		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 deleteFlowerApi(item.id);
							uni.showToast({
								title: "删除成功"
							});
							this.resetList();
							this._list();
						} catch (error) {}
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		changeItem: lodash.debounce(function(e, item, key, index) {
			console.log(33333, e);
			try {
				const {
					detail: { value }
				} = e;
				let params = {
					id: item.id,
					stockWarning: item.stockWarning,
					weight: item.weight,
					cost: item.cost,
					addPrice: item.addPrice
				};
				params[key] = value;
				updateFlowerApi(params)
					.then(data => {
						uni.showToast({
							title: "保存成功"
						});
						this.resetList();
						this._list();
					})
					.catch(err => {});
			} catch (error) {}
		}, 500),
		async changeFlowerEvent(item) {
			try {
				let options = {
					itemId: item.id,
					classId: this.classId
				};
				await addFlowerApi(options);
				uni.showToast({
					title: "添加成功"
				});
				this.resetList();
				this._list();
			} 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;
			color: #FFFFFF;
			background: #0099ff;
			// width: 140upx;
			height: 70upx;
			font-size: 32upx;
			&.active{
				background: #ff0000;
				border:1px solid #ff0000;
			}
		}
	}
	.main-view {
		flex: 1;
		background-color: #f9fbfc;
		.space-view {
			background-color: #fff;
		}
		.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 5upx;
					&.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;
			}
		}
	}
}
</style>
