<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="4">
				<el-button
					type="primary"
					v-hasPermi="['warehouse:warehouse-info:create']"
					plain
					size="mini"
					@click="addWare">
					新增仓库
				</el-button>
				<el-divider content-position="left">仓库列表</el-divider>
				<el-card
					v-for="item in wareArr"
					:key="item.id"
					shadow="hover"
					@click.native="setWareInfo(item)"
					:style="{
						background: item.id === wareInfo.warehouseId ? '#37D97F' : '',
						color: item.id === wareInfo.warehouseId ? 'white' : '',
					}"
					class="ware-card">
					{{ item.name }}
					<el-dropdown class="el-dropdown-div">
						<span class="el-dropdown-link">
							<i
								class="el-icon-s-tools"
								style="color: #409eff; cursor: pointer; font-size: 25px" />
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item
								v-hasPermi="['warehouse:warehouse-info:update']"
								@click.native="dropdown(1, item.id)">
								编辑
							</el-dropdown-item>
							<el-dropdown-item @click.native="dropdown(2, item.id)">
								详情
							</el-dropdown-item>
							<el-dropdown-item
								v-hasPermi="['warehouse:warehouse-info:delete']"
								@click.native="dropdown(3, item.id, item.name)">
								删除
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-card>
			</el-col>
			<el-col :span="20">
				<!-- 搜索工作栏 -->
				<search-bar
					:formConfigs="formConfig"
					ref="searchBarForm"
					@headBtnClick="buttonClick" />

				<!-- 列表 -->
				<base-table
					v-loading="dataListLoading"
					:table-props="tableProps"
					:page="listQuery.pageNo"
					:limit="listQuery.pageSize"
					:table-data="tableData">
					<method-btn
						v-if="tableBtn.length"
						slot="handleBtn"
						:width="80"
						label="操作"
						:method-list="tableBtn"
						@clickBtn="handleClick" />
				</base-table>
				<pagination
					:limit.sync="listQuery.pageSize"
					:page.sync="listQuery.pageNo"
					:total="listQuery.total"
					@pagination="getDataList" />
			</el-col>
		</el-row>

		<!-- 对话框(添加 / 修改) -->
		<base-dialog
			:dialogTitle="addOrEditTitle"
			:dialogVisible="addOrUpdateVisible"
			@cancel="handleCancel"
			@confirm="handleConfirm"
			:before-close="handleCancel"
			:destroy-on-close="true"
			width="50%">
			<add-or-update
				ref="addOrUpdate"
				@refreshDataList="successSubmit"></add-or-update>
			<add-or-update1
				ref="addOrUpdate1"
				@refreshDataList="successSubmit1"></add-or-update1>
		</base-dialog>
	</div>
</template>

<script>
import AddOrUpdate from './add-or-updata';
import AddOrUpdate1 from './add-or-updata1';
import basicPage from '../mixins/basic-page';
import { parseTime } from '../mixins/code-filter';
import codeFilter from '../mixins/code-filter';
import {
	deleteWarehouse,
	getWarehouseList,
} from '@/api/warehouse/warehouse-info';
import {
	deleteWarehouseLocation,
	getWarehouseLocationPage,
} from '@/api/warehouse/warehouseLocation';
import { BackgroundClass } from 'quill';

const tableProps = [
	{
		prop: 'warehouseCode',
		label: '仓库编码',
	},
	{
		prop: 'warehouseName',
		label: '仓库名称',
	},
	{
		prop: 'code',
		label: '库位编码',
	},
	{
		prop: 'name',
		label: '库位名称',
	},
	{
		prop: 'arrange',
		label: '排',
	},
	{
		prop: 'col',
		label: '列',
	},
	{
		prop: 'layer',
		label: '层',
	},
	{
		prop: 'type',
		label: '库位类型',
		filter: codeFilter('wareType'),
	},
	{
		prop: 'enabled',
		label: '是否可用',
		filter: codeFilter('deactivate'),
	},
	{
		prop: 'remark',
		label: '备注',
	},
];

export default {
	mixins: [basicPage],
	data() {
		return {
			urlOptions: {
				getDataListURL: getWarehouseLocationPage,
				deleteURL: deleteWarehouseLocation,
				getWareListURL: getWarehouseList,
				deleteWareURL: deleteWarehouse,
			},
			tableProps,
			tableBtn: [
				this.$auth.hasPermi(`extend:warehouse-location:update`)
					? {
							type: 'edit',
							btnName: '编辑',
					  }
					: undefined,
				this.$auth.hasPermi(`extend:warehouse-location:delete`)
					? {
							type: 'delete',
							btnName: '删除',
					  }
					: undefined,
			].filter((v) => v),
			tableData: [],
			formConfig: [
				{
					type: 'input',
					label: '库位名称',
					placeholder: '库位名称',
					param: 'name',
				},
				{
					type: 'input',
					label: '库位编码',
					placeholder: '库位编码',
					param: 'code',
				},
				{
					type: 'button',
					btnName: '搜索',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: this.$auth.hasPermi('extend:warehouse-location:create')
						? 'button'
						: '',
					btnName: '新增',
					name: 'add',
					color: 'success',
					plain: true,
				},
				// {
				// 	type: 'button',
				// 	btnName: '重置',
				// 	name: 'reset',
				// },
				// {
				// 	type: this.$auth.hasPermi('extend:warehouse-location:create') ? 'separate' : '',
				// },
				// {
				// 	type: this.$auth.hasPermi('extend:warehouse-location:export') ? 'button' : '',
				// 	btnName: '导出',
				// 	name: 'export',
				// 	color: 'warning',
				// },
			],
			wareArr: [],
			listQuery: {
				pageSize: 10,
				pageNo: 1,
				total: 1,
				warehouseId: '',
			},
			wareInfo: {},
		};
	},
	components: {
		AddOrUpdate,
		AddOrUpdate1,
	},
	created() {
		this.urlOptions.getWareListURL().then((response) => {
			this.wareArr = response.data;
			if (this.wareArr) {
				this.wareInfo.warehouseId = this.wareArr[0].id;
				this.wareInfo.warehouseName = this.wareArr[0].name;
				this.wareInfo.warehouseCode = this.wareArr[0].code;
				this.getDataList();
			}
		});
	},
	methods: {
		// 获取数据列表
		getDataList() {
			if (!this.wareInfo.warehouseId) {
				return;
			}
			this.listQuery.warehouseId = this.wareInfo.warehouseId;
			this.dataListLoading = true;
			this.urlOptions.getDataListURL(this.listQuery).then((response) => {
				this.tableData = response.data.list;
				this.listQuery.total = response.data.total;
				this.dataListLoading = false;
			});
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 10;
					this.listQuery.name = val.name;
					this.listQuery.code = val.code;
					this.getDataList();
					break;
				case 'reset':
					this.$refs.searchBarForm.resetForm();
					this.listQuery = {
						pageSize: 10,
						pageNo: 1,
						total: 1,
					};
					this.getDataList();
					break;
				case 'add':
					this.addOrEditTitle = '新增库位';
					this.addOrUpdateVisible = true;
					this.addOrUpdateHandle();
					break;
				case 'export':
					this.handleExport();
					break;
				default:
					console.log(val);
			}
		},
		getWareArr() {
			this.urlOptions.getWareListURL().then((response) => {
				this.wareArr = response.data;
			});
		},
		addWare() {
			this.addOrEditTitle = '新增仓库';
			this.addOrUpdateVisible = true;
			this.addOrUpdate = 'addOrUpdate1';
			this.$nextTick(() => {
				this.$refs.addOrUpdate1.init();
			});
		},
		//dropdown点击
		dropdown(val, id, name) {
			if (val === 1) {
				this.addOrUpdateVisible = true;
				this.addOrEditTitle = '编辑仓库';
				this.addOrUpdate = 'addOrUpdate1';
				this.$nextTick(() => {
					this.$refs.addOrUpdate1.init(id);
				});
			} else if (val === 2) {
				this.addOrUpdateVisible = true;
				this.addOrEditTitle = '仓库详情';
				this.addOrUpdate = 'addOrUpdate1';
				this.$nextTick(() => {
					this.$refs.addOrUpdate1.init(id, true);
				});
			} else if (val === 3) {
				this.deleteWare(id, name);
			} else {
				console.log(val);
			}
		},
		// 删除仓库
		deleteWare(id, name) {
			this.$confirm(`确定对仓库[${name}]进行删除操作?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					this.urlOptions.deleteWareURL(id).then(({ data }) => {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getWareArr();
							},
						});
					});
				})
				.catch(() => {});
		},
		//tableBtn点击
		handleClick(val) {
			if (val.type === 'edit') {
				this.addOrUpdateVisible = true;
				this.addOrEditTitle = '编辑';
				this.$nextTick(() => {
					this.$refs.addOrUpdate.init(val.data.id, this.wareInfo);
				});
			} else if (val.type === 'delete') {
				this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex);
			} else if (val.type === 'change') {
				this.changeStatus(val.data.id);
			} else {
				this.otherMethods(val);
			}
		},
		// 新增 / 修改
		addOrUpdateHandle(id) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id, this.wareInfo);
			});
		},
		successSubmit1() {
			this.handleCancel();
			this.getWareArr();
		},
		setWareInfo(info) {
			this.wareInfo.warehouseName = info.name;
			this.wareInfo.warehouseCode = info.code;
			this.wareInfo.warehouseId = info.id;
			this.getDataList();
		},
	},
};
</script>

<style scoped>
.ware-card {
	margin-bottom: 10px;
	cursor: pointer;
}
.ware-card >>> .el-card__body {
	padding: 10px;
	font-size: 16px;
	line-height: 30px;
}
.el-dropdown-div {
	float: right;
	padding-top: 3px;
}
</style>
