<template>
	<!-- 营销-积分商品 -->
	<div>
		<!-- tab切换栏 -->

		<Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
			<div class="new_card_pd">
				<!-- 查询条件 -->
				<Form ref="tableFrom" inline :model="tableFrom" :label-width="labelWidth"
					:label-position="labelPosition" @submit.native.prevent>
					<FormItem label="仓库：" prop="pid" label-for="pid">
						<Select v-model="tableFrom.wid" @on-change="userSearchs" clearable class="input-add">
							<Option v-for="item in data1" :value="item.id" :key="item.id">
								{{ item.title }}
							</Option>
						</Select>
					</FormItem>
					<FormItem label="状态：" label-for="status">
						<Select v-model="tableFrom.status" placeholder="请选择" clearable @on-change="userSearchs"
							class="input-add">
							<Option value="-3">全部</Option>
							<Option value="0">待审核</Option>
							<Option value="1">通过</Option>
							<Option value="-1">拒绝</Option>
							<Option value="2">部分上架</Option>
							<Option value="3">已上架</Option>
						</Select>
					</FormItem>
				</Form>
			</div>
		</Card>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<!-- 操作 -->
			<Button v-auth="['marketing-store_seckill-create']" type="primary" @click="add" class="mr10">创建入库单</Button>
			<Button v-auth="['admin-erp-printing']" type="primary" @click="printing('in')" class="mr10">打印入库单</Button>
			<Table :columns="columns1" :data="tableList" :loading="loading" highlight-row no-userFrom-text="暂无数据"
				no-filtered-userFrom-text="暂无筛选结果" class="ivu-mt" @on-selection-change="checkItem">
				<template slot-scope="{ row, index }" slot="info">
					<div>{{row.info[0].product_name}}</div>
					<div v-if="row.info.length >1">{{row.info[1].product_name}}</div>
					<div v-if="row.info.length >2">{{row.info[2].product_name}}</div>
				</template>
				<template slot-scope="{ row, index }" slot="cuser">
					<div>{{row.cuser.staff_name}}</div>
					<!-- <div>名称：{{row.cuser.staff_name}}</div>
					<div>ID:{{row.cuser.id}}</div>
					<div>手机：{{row.cuser.phone}}</div> -->
				</template>
				<!-- <template slot-scope="{ row, index }" slot="cadmin">
					<div>名称：{{row.cadmin.account}}</div>
					<div>ID:{{row.cadmin.id}}</div>
				</template> -->
				<template slot-scope="{ row, index }" slot="ware">
					<div>{{row.ware.title}}</div>
					<!-- <div>名称：{{row.ware.title}}</div>
					<div>ID:{{row.ware.id}}</div>
					<div>手机：{{row.ware.phone}}</div>
					<div>地址：{{row.ware.detailed_address}}</div> -->
				</template>
				<template slot-scope="{ row, index }" slot="store">
					<div>{{row.store.name}}</div>
					<!-- <div>名称：{{row.store.name}}</div>
					<div>ID:{{row.store.id}}</div>
					<div>手机：{{row.store.phone}}</div>
					<div>地址：{{row.store.detailed_address}}</div> -->
				</template>
				<template slot-scope="{ row, index }" slot="status">
					<Tag color="default" v-if="row.status == 0">待审核</Tag>
					<Tag color="primary" v-if="row.status == 1">通过</Tag>
					<Tag color="error" v-if="row.status == -1">拒绝</Tag>
					<Tag color="success" v-if="row.status == 2">部分上架</Tag>
					<Tag color="warning" v-if="row.status == 3">已上架</Tag>
				</template>
				<template slot-scope="{ row, index }" slot="create_time">
					<div>{{row.create_time | formatDate}}</div>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<a v-if="row.status == 0" @click="auditing(row, index)">审核</a>
					<Divider v-if="row.status == 0" type="vertical" />
					<a @click="info(row, index)">详情</a>
					<Divider v-if="row.status == 3" type="vertical" />
					<template v-if="row.status == 1 || row.status == 2">
						<Divider type="vertical" />
						<a @click="openInfo(row)">上架</a>
						<Divider type="vertical" />
					</template>
					<a v-if="row.status == 3" @click="del(row, index)">删除</a>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="tableFrom.total" :current="tableFrom.page" show-elevator show-total
					@on-change="pageChange" :page-size="tableFrom.limit" />
			</div>
		</Card>
		<Modal v-model="modal" title="上架" @on-ok="ok" @on-cancel="cancel" footer-hide>
			<Table :columns="infoColumns" :data="infoList" :loading="loading" highlight-row no-userFrom-text="暂无数据"
				no-filtered-userFrom-text="暂无筛选结果" class="ivu-mt">
				<template slot-scope="{ row, index }" slot="position">
					<el-cascader placeholder="请选择仓位" class="value" size="mini" v-model="infoList[index].bin_number"
						:options="positionList" :props="props" filterable v-width="'150'">
					</el-cascader>
					<a @click="addPosition">添加仓位</a>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<a @click="listing(row)">上架</a>
				</template>
			</Table>
		</Modal>
		<Modal v-model="modalPosition" scrollable title="添加仓位" class="order_box" :closable="false"
			:mask-closable="false">
			<Form ref="remarks" :model="remarks" :rules="rulePosition" :label-width="100" @submit.native.prevent>
				<Col span="24">
				<FormItem label="仓位名称：" prop="title">
					<Input v-model="remarks.title" placeholder="请输入仓位名称/编号" v-width="'200'" />
				</FormItem>
				</Col>
				<Col span="24">
				<FormItem label="通道：" prop="passageway">
					<Input v-model="remarks.passageway" placeholder="请输入通道" type="number" v-width="'200'"
						:disabled="remarks.id != 0" /> (1~99)
				</FormItem>
				</Col>
				<Col span="24">
				<FormItem label="左右：" prop="control">
					<RadioGroup v-model="remarks.control">
						<Radio label="L" :disabled="remarks.id != 0">
							<Icon type="social-apple"></Icon>
							<span>左</span>
						</Radio>
						<Radio label="R" :disabled="remarks.id != 0">
							<Icon type="social-android"></Icon>
							<span>右</span>
						</Radio>
					</RadioGroup>
				</FormItem>
				</Col>
				<Col span="24">
				<FormItem label="层数：" prop="layer">
					<Input v-model="remarks.layer" placeholder="请输入层数" type="number" v-width="'200'"
						:disabled="remarks.id != 0" /> (1~9)
				</FormItem>
				</Col>
				<Col span="24">
				<FormItem label="仓位编号：" prop="number">
					<Input v-model="remarks.number" placeholder="请输入仓位编号" type="number" v-width="'200'"
						:disabled="remarks.id != 0" /> (1~999)
				</FormItem>
				</Col>
			</Form>
			<div slot="footer">
				<Button type="primary" @click="putRemark()">提交</Button>
				<Button @click="cancels()">取消</Button>
			</div>
		</Modal>
		<inDetail ref="inDetail"></inDetail>
	</div>
</template>

<script>
	import inDetail from './inDetail.vue'
	import {
		mapState
	} from "vuex";
	import {
		getInList,
		getInInfo,
		listing,
		getGodownList
	} from "@/api/erp";
	import {
		formatDate
	} from "@/utils/validate";
	import timeOptions from "@/utils/timeOptions";
	import Setting from "@/setting";
	import {
		getPosition,
		createPosition,
		getPositionList
	} from "@/api/erp";
	const jy = (min, max) => {
		return {
			validator(rule, value) {
				if (!value || value > max || value < min) {
					return [{
						message: `范围为${min}~${max}`
					}];
				} else {
					return [];
				}
			}
		}
	}
	export default {
		name: "inList",
		components: {
			inDetail
		},
		filters: {
			formatDate(time) {
				if (time !== 0) {
					let date = new Date(time * 1000);
					return formatDate(date, "yyyy-MM-dd");
				}
			},
		},
		data() {
			return {
				data1: [],
				modalPosition: false,
				remarks: {
					id: 0,
					title: "",
					wid: '0',
					passageway: '',
					control: "L",
					layer: '',
					number: ''
				},
				modal: false,
				currentTab: 0,
				roterPre: Setting.roterPre,
				loading: false,
				options: timeOptions,
				props: {
					emitPath: false,
					multiple: false,
					checkStrictly: true,
					value: "bin_number",
					label: "bin_number"
				},
				infoColumns: [{
						title: '商品名称',
						key: 'product_name',
						minWidth: 200,
					},
					{
						title: '仓位',
						slot: 'position',
						minWidth: 250,
					}, {
						title: "操作",
						slot: "action",
						width: 80,
					},

				],
				columns1: [
					{
							type: 'selection',
							width: 60,
							align: 'center'
						},{
						title: "ID",
						key: "id",
						width: 80,
					},
					{
						title: "入库单号",
						key: "in_order_id",
						minWidth: 160,
					},
					{
						title: "出库单号",
						key: "out_order_id",
						minWidth: 160,
					},
					{
						title: "仓库",
						slot: "ware",
						minWidth: 150,
					},
					{
						title: "入库商品",
						slot: "info",
						minWidth: 180,
					},
					{
						title: "创建人",
						slot: "cuser",
						minWidth: 150,
					},
					// {
					// 	title: "审核人",
					// 	slot: "auser",
					// 	minWidth: 150,
					// },
					{
						title: "总数量",
						key: "total_num",
						minWidth: 100,
					},
					{
						title: "总价格",
						key: "total_price",
						minWidth: 100,
					},
					{
						title: "审核状态",
						slot: "status",
						minWidth: 120,
					},
					{
						title: "创建时间",
						slot: "create_time",
						minWidth: 100,
					},
					{
						title: "操作",
						slot: "action",
						fixed: "right",
						width: 200,
					},
				],
				rulePosition: {
					title: [{
						required: true,
						message: "请输入仓位名称",
						trigger: "blur"
					}, ],
					wid: [{
						required: true,
						message: "请选择仓库",
						trigger: "blur"
					}, ],
					passageway: [{
						required: true,
						message: "请输入通道",
						trigger: "blur"
					}, jy(1, 99)],
					control: [{
						required: true,
						message: "请选择左右",
						trigger: "blur"
					}, ],
					layer: [{
						required: true,
						message: '请输入层数',
						trigger: 'blur',
					}, jy(1, 9)],
					number: [{
						required: true,
						message: '请输入仓位编号',
						trigger: 'blur',
					}, jy(1, 999)],
				},
				tableList: [],
				tableFrom: {
					key: '',
					page: 1,
					limit: 10,
					status: -3,
					// total: 0,
				},
				inInfo: {},
				infoList: [],
				positionList: [],
				basePosition: []
			};
		},
		computed: {
			...mapState("admin/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			this.getList();
			this.getGodownList()
		},
		methods: {
			checkItem(e) {
				this.checKList = e
			},
			printing(name) {
				if (this.checKList.length == 0) {
					return this.$Message.error('请选择要打印的要货单')
				}
				let id = this.checKList.map(e => {
					return e.id
				})
				let routeData = this.$router.resolve(({
					path: this.roterPre + '/erp/printing',
					query: {
						type: name,
						id: id.join(','),
					}
				}))
				window.open(routeData.href, '_blank')
			},
			getGodownList() {
				getGodownList().then(res => {
					console.log(res);
					this.data1 = res.data.data
				})
			},
			putRemark() {
				this.$refs.remarks.validate((valid) => {
					if (valid) {
						// this.remarks.id = this.$route.query.id;
						createPosition({
							id: this.remarks.id,
							title: this.remarks.title,
							wid: this.remarks.wid,
							passageway: this.remarks.passageway,
							control: this.remarks.control,
							layer: this.remarks.layer,
							number: this.remarks.number
						}).then(res => {
							this.$Message.success(res.msg);
							this.getPositionList(this.inInfo.wid)

							this.cancel()
							// this.$router.push({
							// 	path: this.roterPre + "/erp/position_list"
							// });
						}).catch(err => {
							this.$Message.error(err.msg);
						})
					} else {
						// this.$Message.error("请输入参数模板名称");
					}
				});
			},
			cancels() {
				this.modalPosition = false
				this.remarks = {
					id: 0,
					title: "",
					wid: '0',
					passageway: '',
					control: "L",
					layer: '',
					number: ''
				}
			},
			addPosition() {
				this.modalPosition = true
				this.remarks.wid = this.inInfo.wid
			},
			getPositionList(id) {
				getPositionList({
					wid: id,
					not_used: 1
				}).then(res => {
					this.positionList = res.data.data.concat(this.basePosition).filter((obj, index, arr) =>
						arr.map(mapObj => mapObj.bin_number).indexOf(obj.bin_number) === index
					)
				})
			},
			cancel() {
				this.inInfo = {}
				this.getList()
			},
			ok() {

			},
			listing(row) {
				console.log(row);
				if (row.bin_number == '') {
					return this.$Message.error('请选择仓位')
				}

				// listing({
				// 	in_order_id: this.inInfo.in_order_id,
				// 	info: this.inInfo.info

				// })
				listing({
					in_order_id: this.inInfo.in_order_id,
					purchase_order_id: this.inInfo.purchase_order_id,
					wid: this.inInfo.wid,
					info: {
						item: row
					}
				}).then(res => {
					this.openInfo(this.inInfo)
				})
			},
			openInfo(row) {
				this.basePosition = []
				getInInfo(row.in_order_id).then(res => {
					this.inInfo = res.data
					this.infoList = res.data.info.filter(item => {
						if (item.bin_number) {
							this.basePosition.push({
								bin_number: item.bin_number
							})
						}
						return item.status == 0
					})
					// this.basePosition= this.basePosition;
					console.log(this.basePosition, 'this.basePosition');
					this.getPositionList(this.inInfo.wid)
					this.modal = true
				})
			},
			// 列表
			getList() {
				this.loading = true;
				this.tableList = []
				getInList(this.tableFrom)
					.then(async (res) => {
						let data = res.data;
						this.tableList = data.data;
						this.tableFrom.total = data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			userSearchs(e) {
				this.tableFrom.status = e
				this.tableFrom.page = 1;
				this.getList();
			},
			// 添加入库单
			add() {
				this.$router.push({
					path: this.roterPre + "/erp/add_inList?id=0"
				});
			},
			// 详情
			info(row) {
				this.$refs.inDetail.getInfo(row.id)
			},
			// 删除
			del(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `/erp/Warehouse/position_del/${row.id}`,
					method: "DELETE",
					ids: "",
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.tableList.splice(num, 1);
						if (!this.tableList.length) {
							this.tableFrom.page =
								this.tableFrom.page == 1 ? 1 : this.tableFrom.page - 1;
						}
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			pageChange(index) {
				this.tableFrom.page = index;
				this.getList();
			},
			// 表格搜索
			tableSearchs() {
				this.tableFrom.page = 1;
				this.getList();
			},
			// 修改是否显示
			onchangeIsShow(row) {
				let data = {
					id: row.id,
					is_show: row.is_show,
				};
				integralIsShowApi(data)
					.then(async (res) => {
						this.$Message.success(res.msg);
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
		},
	};
</script>

<style scoped lang="stylus">
	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}
	}

	/deep/ .ivu-modal {
		width: 650px !important;
	}
</style>