<template>
	<div class="app-list-content">
		<x-crud class="liu-crud-wrap" @load="onLoad">
			<template #slot-tabs>
				<el-tabs
					class="liu-tabs"
					type="border-card"
					v-model="tabIndex"
					@tab-click="tabClick"
				>
					<el-tab-pane
						v-for="(item, index) in tabsData"
						:key="index"
						:label="item.text"
						:name="item.key"
					>
					</el-tab-pane>
				</el-tabs>
			</template>

			<template #table-column-cover="{ scope }">
				<cl-avatar
					shape="square"
					:size="32"
					:src="scope.row.cover"
					:style="{ margin: 'auto' }"
				></cl-avatar>
			</template>

			<template #table-column-goodsName="{ scope }">
				<span>{{ scope.row.goodsName }}</span>
			</template>

			<template #table-column-inTurn="{ scope }">
				<span v-if="!sort.status">{{ scope.row.inTurn }}</span>
				<el-input
					ref="sort-input"
					focus
					size="mini"
					v-else
					v-model="scope.row.inTurn"
					@blur="changeSort(scope.row)"
				></el-input>
			</template>

			<template #slot-modify="{ scope }">
				<el-button
					type="text"
					@click.native.stop="replaceBtnFn(scope.row.id)"
					>修改</el-button
				>
			</template>

			<!-- 排序 -->
			<template #table-header-inTurn>
				<div class="set-sort">
					<span>排序</span>
					<el-button
						v-if="!sort.status"
						icon="el-icon-edit-outline"
						size="small"
						type="text"
						@click="showSort"
						class="show"
					></el-button>

					<el-button class="hide" v-else size="mini" @click="hideSort" type="primary"
						>完成</el-button
					>
				</div>
			</template>

			<template #slot-add-goods-btn>
				<el-button type="primary" size="mini" @click="replaceBtnFn(0)">添加</el-button>
			</template>
		</x-crud>

		<!-- 新增弹窗 -->
		<el-dialog
			:title="`${currentItemId == 0 ? '添加' : '修改'}花材`"
			:visible.sync="addDialog"
			:close-on-click-modal="false"
			width="600px"
		>
			<div class="ad-modal-content">
				<el-form
					:model="replaceForm"
					:rules="replaceFormRules"
					ref="replaceForm"
					label-width="100px"
					class="demo-form"
				>
					<el-form-item label="名称" prop="name">
						<el-input
							v-model="replaceForm.name"
							placeholder="请输入名称"
							size="small"
						></el-input>
					</el-form-item>

					<el-form-item label="别名" prop="alias">
						<el-input
							v-model="replaceForm.alias"
							placeholder="请输入别名"
							size="small"
						></el-input>
					</el-form-item>

					<el-form-item label="图片" prop="cover">
						<cl-upload v-model="replaceForm.cover" :success="uploadSuccess"></cl-upload>
						<p style="font-size: 14px; color: #cccccc">建议上传图片比例 400X400</p>
					</el-form-item>

					<el-form-item label="分类" prop="classId">
						<el-select
							v-model="replaceForm.className"
							size="small"
							placeholder="请选择分类"
							@change="selClassFn"
						>
							<el-option
								v-for="(item, index) in itemClassList"
								:key="index"
								:value="item.name"
								>{{ item.name }}</el-option
							>
						</el-select>
					</el-form-item>

					<el-form-item label="大单位" prop="bigUnitId">
						<el-select
							v-model="replaceForm.bigUnit"
							size="small"
							placeholder="请选择单位"
							@change="selBigUnitFn"
						>
							<el-option
								v-for="(item, index) in unitList"
								:key="index"
								:value="item.name"
								>{{ item.name }}</el-option
							>
						</el-select>
					</el-form-item>

					<el-form-item label="小单位" prop="smallUnitId">
						<el-select
							v-model="replaceForm.smallUnit"
							size="small"
							placeholder="请选择单位"
							@change="selSmallUnitFn"
						>
							<el-option
								v-for="(item, index) in unitList"
								:key="index"
								:value="item.name"
								>{{ item.name }}</el-option
							>
						</el-select>
					</el-form-item>

					<el-form-item label="单位比" prop="ratio">
						<el-input
							v-model="replaceForm.ratio"
							placeholder="1扎=20支，请输入20"
							size="small"
						></el-input>
					</el-form-item>

					<el-form-item label="库存预警" prop="stockWarning">
						<el-input
							v-model="replaceForm.stockWarning"
							placeholder="请输入数值"
							size="small"
						></el-input>
					</el-form-item>

					<el-form-item label="每扎重量" prop="weight">
						<el-input
							v-model="replaceForm.weight"
							placeholder="请输入斤数"
							size="small"
						></el-input>
					</el-form-item>

					<el-form-item label="每扎成本价" prop="cost">
						<el-input
							v-model="replaceForm.cost"
							placeholder="请输入成本价"
							size="small"
						></el-input>
					</el-form-item>

					<el-form-item label="每扎加价" prop="addPrice">
						<el-input
							v-model="replaceForm.addPrice"
							placeholder="请输入加价"
							size="small"
						></el-input>
					</el-form-item>

				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="replaceConfirmFn">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { mapGetters } from 'vuex';

export default {
	name: 'item_list',
	components: {},
	data() {
		return {
			app: null,
			sortLink: '',
			operateData: {},
			tabIndex: '0',
			tabsData: [
				{
					text: '花材列表',
					key: '0',
				},
			],
			selects: {},
			sort: {
				status: false,
			},
			classId: 0,
			addDialog: false,
			replaceForm: {
				name: '',
				alias: '',
				classId: '',
				className: '',
				cover: '',
				bigUnitId: '',
				bigUnit: '',
				smallUnitId: '',
				smallUnit: '',
				stockWarning:'',
				cost:'',
				addPrice:'',
				weight:'',
				ratio:''
			},
			replaceFormRules: {
				name: {
					required: true,
					message: '名称不能为空',
				},
				cover: {
					required: true,
					message: '图片不能为空',
				},
				classId: {
					required: true,
					message: '请选择分类',
				},
				bigUnitId: {
					required: true,
					message: '请选择大单位',
				},
				smallUnitId: {
					required: true,
					message: '请选择小单位',
				},
				ratio: {
					required: true,
					message: '比例不能为空',
				},
				stockWarning: {
					required: true,
					message: '最低库存不能为空',
				},
				cost: {
					required: true,
					message: '运费不能为空',
				},
				addPrice: {
					required: true,
					message: '加价不能为空',
				},
				weight: {
					required: true,
					message: '重量不能为空',
				}
			},
			//分类列表
			itemClassList: [],
			unitList: [],
			currentItemId: 0
		};
	},
	computed: {},
	methods: {
		selClassFn(val) {
			let index = this.itemClassList.findIndex((e) => e.name == val);
			this.replaceForm.classId = this.itemClassList[index].id;
		},
		selBigUnitFn(val) {
			let index = this.unitList.findIndex((e) => e.name == val);
			this.replaceForm.bigUnitId = this.unitList[index].id;
		},
		selSmallUnitFn(val) {
			let index = this.unitList.findIndex((e) => e.name == val);
			this.replaceForm.smallUnitId = this.unitList[index].id;
		},
		getAllClass() {
			if (!this.$util.isEmpty(this.itemClassList)) {
				return this.itemClassList;
			}
			this.$service.itemClass.getAllClass().then((res) => {
				this.itemClassList = res.list;
			});
		},
		getAllUnit() {
			if (!this.$util.isEmpty(this.unitList)) {
				return this.unitList;
			}
			this.$service.unit.getAllUnit().then((res) => {
				this.unitList = res.list;
			});
		},
		uploadSuccess() {
			this.$refs['replaceForm'].validateField('cover');
		},
		replaceBtnFn(id) {
			this.getAllClass()
			this.getAllUnit()
			this.addDialog = true
			this.currentItemId = id
			if(id == 0){
				this.replaceForm = {
					name: '',
					alias: '',
					classId:'',
					cover: '',
					bigUnitId: '',
					bigUnit: '',
					smallUnitId: '',
					smallUnit: '',
					stockWarning:'',
					cost:'',
					addPrice:'',
					className:'',
					weight:'',
					ratio:''
				}
			}else{
				this.$service.item.getDetail({id:id}).then(async res => {
					
					let index = this.itemClassList.findIndex((e) => e.id == res.classId)
					this.replaceForm.name = res.name
					this.replaceForm.alias = res.alias
					this.replaceForm.cover = res.cover
					this.replaceForm.bigUnitId = res.bigUnitId
					this.replaceForm.bigUnit = res.bigUnit
					this.replaceForm.smallUnitId = res.smallUnitId
					this.replaceForm.smallUnit = res.smallUnit
					this.replaceForm.stockWarning = res.stockWarning
					this.replaceForm.cost = res.cost
					this.replaceForm.addPrice = res.addPrice
					this.replaceForm.weight = res.weight
					this.replaceForm.ratio = res.ratio
					this.replaceForm.classId = res.classId
					this.replaceForm.className = this.itemClassList[index].name
					this.$forceUpdate()
					
				});
			}
		},
		tabClick(tab, e) {
			this.app.refresh({ classId: this.classId });
		},
		onLoad({ ctx, app }) {
			this.app = app;
			if (this.$route.query.classId) {
				this.classId = this.$route.query.classId;
				if (this.$route.query.name != '') {
					this.tabsData[0].text = this.$route.query.name;
					this.$forceUpdate();
				}
			}
			let getItem = () => {
				return this.$service.item.list({ classId: this.classId, showPage: '0' });
			};
			ctx.service({
				page: getItem,
			})
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center',
						},
						{
							prop: 'cover',
							label: '封面',
							align: 'center',
							'min-width': 100,
						},
						{
							prop: 'name',
							label: '名称',
							align: 'center',
							'min-width': 180,
						},
						{
							prop: 'className',
							label: '分类',
							align: 'center',
							'min-width': 100,
						},
						{
							prop: 'stockWarning',
							label: '库存预警值',
							align: 'center',
							'min-width': 100,
						},
						{
							prop: 'cost',
							label: '每扎成本价',
							align: 'center',
							'min-width': 100,
						},
						{
							prop: 'addPrice',
							label: '每扎加价',
							align: 'center',
							'min-width': 100,
						},
						{
							prop: 'weight',
							label: '重量',
							align: 'center',
							'min-width': 100,
						},
						{
							prop: 'bigUnit',
							label: '大单位',
							align: 'center',
							minWidth: 100,
						},
						{
							prop: 'smallUnit',
							label: '小单位',
							align: 'center',
							minWidth: 100,
						},
						{
							prop: 'inTurn',
							label: '排序',
							align: 'center',
							minWidth: 100,
						},
						{
							prop: 'addTime',
							label: '创建时间',
							align: 'center',
							minWidth: 180,
						},
					],
					op: {
						visible: true,
						props: {
							width: 250,
							align: 'center',
							fixed: 'right',
							label: '操作',
						},
						layout: ['slot-modify'],
					},
				})
				.set('dict', {
					search: {
						keyWord: 'goodsName',
					},
				})
				.set('search', {
					key: {
						placeholder: '分类名称',
					},
				})
				.set('layout', [
					['slot-tabs'],
					['flex1', 'slot-add-goods-btn',  'refresh-btn'],
					['data-table'],
					['flex1', 'pagination'],
				])
				.done();
			app.refresh({ classId: this.classId });
		},

		refresh(params) {
			this.app.refresh(params);
		},

		showSort(e) {
			this.sort.status = true;
		},

		hideSort(e) {
			this.sort.status = false;
		},

		changeSort(d) {
			this.$service.goods
				.sort({
					inTurn: d.inTurn,
					id: d.id,
				})
				.then(() => {
					this.$message.success('修改成功');
					this.refresh();
				})
				.catch((err) => {
					this.$message.error(err);
				});
		},
		resetForm() {
			this.goodsData = {};
			this.$refs['replaceForm'].resetFields();
			this.addDialog = false;
		},
		replaceConfirmFn() {
			this.$refs.replaceForm.validate((valid) => {
				if (valid) {
					let form = JSON.parse(JSON.stringify(this.replaceForm))
					let host = null
					if (this.currentItemId == 0) {
						host = () => {
							return this.$service.item.itemAdd(form)
						}
					} else {
						host = () => {
							return this.$service.item.update({
								id: this.currentItemId,
								...form,
							})
						}
					}
					host().then((res) => {
						this.$message.success('操作成功!')
						this.resetForm()
						this.app.refresh({ classId: this.classId })
					});
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.short-link {
	color: $mainColor;
	margin-left: 10px;
	cursor: pointer;
}
.set-sort {
	display: flex;
	align-items: center;
	justify-content: center;
	.el-button {
		margin-left: 10px;
	}
	.show {
		font-size: 16px;
	}
	.hide {
		padding: 2px 5px;
	}
}
</style>