<template>
	<div class="form-submit">
		<div class="i-layout-page-header">
			<PageHeader class="product_tabs" hidden-breadcrumb>
				<div slot="title">
					<router-link :to="{ path: `${roterPre}/erp/goods` }">
						<!-- <Button icon="ios-arrow-back" size="small" class="mr20"
              >返回</Button
            > -->
						<div class="font-sm after-line">
							<span class="iconfont iconfanhui"></span>
							<span class="pl10">返回</span>
						</div>
					</router-link>
					<span v-text="
              $route.query.id !== '0' ? '编辑要货单' : '添加要货单'
            " class="mr20 ml16"></span>
				</div>
			</PageHeader>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form class="formValidate mt20" ref="formValidate" :rules="ruleValidate" :model="formValidate"
				:label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
				<Row :gutter="24" type="flex">
					<Col span="24">
					<FormItem label="到货门店：" prop="my_store_id">
						<el-cascader placeholder="请选择到货门店" class="input-add" size="mini"
							v-model="formValidate.my_store_id" :options="staffData" :props="propss"
							@change="userSearchse" filterable clearable v-width="'400'">
						</el-cascader>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="要货途径：" prop="control">
						<RadioGroup v-model="formValidate.type">
							<Radio :label="0" :disabled="formValidate.id != 0">
								<Icon type="social-apple"></Icon>
								<span>仓库要货</span>
							</Radio>
							<Radio :label="1" :disabled="formValidate.id != 0">
								<Icon type="social-android"></Icon>
								<span>门店</span>
							</Radio>
						</RadioGroup>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="出货门店：" prop="store_id" v-if="formValidate.type == 1">
						<el-cascader placeholder="请选择出货门店" class="input-add" size="mini" v-model="formValidate.store_id"
							:options="staffData" :props="propss" @change="userSearchs" filterable clearable
							v-width="'400'">
						</el-cascader>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="出货仓库：" prop="wid" v-if="formValidate.type == 0">
						<el-cascader placeholder="请选择仓库" class="input-add" size="mini" v-model="formValidate.wid"
							:options="data1" :props="props" @change="userSearchss" filterable clearable v-width="'400'">
						</el-cascader>
					</FormItem>
					</Col>
					
					<Col span="24">
					<FormItem label="创建人：" prop="create_uid" v-if="formValidate.my_store_id != 0 ">
						<el-cascader placeholder="请选择创建人" class="input-add" size="mini"
							v-model="formValidate.create_uid" :options="authList" :props="propsss" @change="userSearchsss"
							filterable clearable v-width="'400'">
						</el-cascader>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="商品：" prop="goods">
						<Table :columns="formValidate.id == 0 ?columns:columnss" :data="chooseGoods" ref="table" :loading="loading"
							no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
							<!-- <template slot-scope="{ row }" slot="coupon_price">
								<span v-if="row.coupon_type==1">{{row.coupon_price}}元</span>
								<span
									v-if="row.coupon_type==2">{{parseFloat(row.coupon_price)/10}}折（{{row.coupon_price.toString().split(".")[0]}}%）</span>
							</template> -->
							<!-- want_product_num -->
							<!-- //chooseUnit -->
							<template slot-scope="{ row,index }" slot="want_product_num">
								<Input v-model="chooseGoods[index].want_product_num" placeholder="请输入要货数量" v-width="'150'" type="number"/>
							</template>
							<template slot-scope="{ row,index }" slot="unit_type" >
								<Select v-model="chooseGoods[index].unit_type" style="width:200px" >
									<Option v-for="item in row.unitList" :value="item.value" :key="item.value">
										{{ item.label }}</Option>
								</Select>
							</template>
							<template slot-scope="{ row,index }" slot="unit_types">
								{{row.unit_name}}
							</template>
							<template slot-scope="{ row,index }" slot="store_num">
								<span> {{ row.my.stock }}{{row.my.unit_name}}</span>
							</template>
							<template slot-scope="{ row, index }" slot="action">
								<a @click="del(index)">删除</a>
							</template>
							<!-- <template slot-scope="{ row }" slot="product">
								<div class="product">
									<div class="image" v-viewer>
										<img v-lazy="row.image">
									</div>
									<div class="title">{{ row.store_name }}</div>
								</div>
							</template> -->
						</Table>
						<Button type="primary" class="submission" style="margin-top:20px;" @click="getGoods()" v-if="formValidate.id == 0">选择商品</Button>
					</FormItem>
					</Col>
				</Row>
			</Form>
		</Card>
		<Card :bordered="false" dis-hover class="fixed-card"
			:style="{ left: `${!menuCollapse ? '200px' : isMobile ? '0' : '80px'}` }">
			<Form>
				<FormItem>
					<Button type="primary" class="submission" @click="handleSubmit('formValidate')">保存</Button>
				</FormItem>
			</Form>
		</Card>
		<good-detail ref="goodDetail" @setGoods="setGoods"></good-detail>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		staffListInfo
	} from "@/api/store";
	import {
		getGodownList,
		createGodown,
		getGodownInfo,
		getUserList,
		getOutGoods,
		createWant,
		getWantInfo
	} from "@/api/erp";
	import {
		keyApi,
		storeGetInfoApi,
		cityApi,
		storeUpdateApi,
		cascaderList
	} from '@/api/store';
	import {
		productSpecs,
		productSpecsInfo
	} from "@/api/product";
	import Setting from "@/setting";
	import goodDetail from './goodDetail.vue'
	export default {
		name: "wantAdd",
		components: {
			goodDetail
		},
		data() {
			return {
				loading: false,
				authList: [],
				columnss: [{
						title: '商品名称',
						key: 'product_name',
						minWidth: 160
					},
					{
						title: '要货数量',
						slot: 'want_product_num',
						minWidth: 90
					},
					{
						title: '要货单位',
						slot: 'unit_types',
						minWidth: 150
					},
					{
						title: '操作',
						slot: 'action',
						minWidth: 120
					},],
				columns: [{
						title: '商品名称',
						key: 'product_name',
						minWidth: 160
					},
					{
						title: '要货数量',
						slot: 'want_product_num',
						minWidth: 90
					},
					{
						title: '要货单位',
						slot: 'unit_type',
						minWidth: 150
					},
					// {
					// 	title: '门店库存',
					// 	slot: 'store_num',
					// 	minWidth: 120
					// },
					{
						title: '操作',
						slot: 'action',
						minWidth: 120
					},
					
				],
				chooseGoods: [],
				staffData: [],
				addresData: [],
				props: {
					emitPath: false,
					multiple: false,
					checkStrictly: true,
					value: "id",
					label: "title"
				},
				propss: {
					emitPath: false,
					multiple: false,
					checkStrictly: true,
					value: "id",
					label: "name"
				},
				propsss: {
					emitPath: false,
					multiple: false,
					checkStrictly: true,
					value: "id",
					label: "staff_name"
				},
				roterPre: Setting.roterPre,
				data1: [],
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24,
				},
				formValidate: {
					type: 0,
					id: 0,
					wid: 0,
					store_id: 0,
					goods: [],
					my_store_id: 0,
					create_uid: 0,
					create_admin_id: 0,
				},
				ruleValidate: {
					store_id: [{
						type: "number",
						required: true,
						message: "请选择门店",
						trigger: "blur"
					}, ],
					my_store_id: [{
						type: "number",
						required: true,
						message: "请选择门店",
						trigger: "blur"
					}, ],
					wid: [{
						type: "number",
						required: true,
						message: "请选择仓库",
						trigger: "blur"
					}, ],
					create_uid: [{
						type: "number",
						required: true,
						message: "请选择创建人",
						trigger: "blur"
					}, ],
					// goods: [{
					// 	type: "array",
					// 	required: true,
					// 	message: "请选择商品",
					// 	trigger: "change"
					// }, ],
				},
			};
		},
		computed: {
			...mapState("admin/layout", ["isMobile", "menuCollapse"]),
			labelWidth() {
				return this.isMobile ? undefined : 120;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			this.getGodownList()
			let data = {
				pid: 0
			}
			// this.cityInfo(data);
		},
		mounted() {
			// this.setCopyrightShow({
			// 	value: false
			// });
			this.staffList()
			if (this.$route.query.id != 0) {
				this.getWantInfo(this.$route.query.id)
			}
		},
		destroyed() {
			// this.setCopyrightShow({
			// 	value: true
			// });
		},
		methods: {
			...mapMutations("admin/layout", ["setCopyrightShow"]),
			getWantInfo(id) {
				getWantInfo(id).then(res => {
					console.log(res,'ddddd');
					let data = res.data
					this.formValidate.id = data.id
					this.formValidate.create_uid = data.create_uid
					this.chooseGoods = data.info
					this.formValidate.store_id = data.store_id
					console.log(this.formValidate.goods,'this.formValidate.goods');
					if(data.wid) {
						this.formValidate.type = 0
						this.formValidate.wid = data.wid
						this.getUserList({
							wid: this.formValidate.wid
						})
					}else {
						this.formValidate.type = 1
						this.getUserList({
							store_id: this.formValidate.store_id
						})
					}
				})
			},
			setGoods(e) {
				console.log(e, 'ddd');
				try {
					let arr = e.map(item => {
						item.unitList = [{
							value: 0,
							label: item.info.unit_name
						}]
						if (item.info.unit_name_1) {
							item.unitList.push({
								value: 1,
								label: item.info.unit_name_1
							})
						}
						if (item.info.unit_name_2) {
							item.unitList.push({
								value: 2,
								label: item.info.unit_name_2
							})
						}
						item.want_product_num = 0
						return item
					})
					this.chooseGoods = this.chooseGoods.concat(arr)
				} catch (e) {
					//TODO handle the exception
					console.log('err', e);
				}


				console.log(this.chooseGoods, 'this.chooseGoods');
			},
			getGoods() {
				try{
					this.$refs.goodDetail.formValidate.type = this.formValidate.type
					this.$refs.goodDetail.formValidate.my_store_id = this.formValidate.my_store_id
					if(this.formValidate.my_store_id == 0) {
						return this.$Message.error('请选择到货门店');
					}
					if(this.formValidate.type == 1) {
						if(this.formValidate.store_id == 0) {
							return this.$Message.error('请选择出货门店');
						}else {
							if(this.formValidate.store_id == this.formValidate.my_store_id) {
								return this.$Message.error('请选择出货门店和到货门店不能一致');
							}
							this.$refs.goodDetail.clearChoose()
							this.$refs.goodDetail.formValidate.wid = 0
							this.$refs.goodDetail.modals = true
							this.$refs.goodDetail.formValidate.my_store_id = this.formValidate.my_store_id
							this.$refs.goodDetail.formValidate.store_id = this.formValidate.store_id
							this.$refs.goodDetail.getList()
						}
					}else {
						if(this.formValidate.wid == 0) {
							return this.$Message.error('请选择出货仓库');
						}else {
							this.$refs.goodDetail.clearChoose()
							this.$refs.goodDetail.formValidate.wid = this.formValidate.wid
							this.$refs.goodDetail.formValidate.my_store_id = this.formValidate.my_store_id
							this.$refs.goodDetail.formValidate.store_id = 0
							this.$refs.goodDetail.modals = true
							this.$refs.goodDetail.getList()
						}
					}
				}catch(e){
					//TODO handle the exception
					console.log('err',e);
				}
				
			},
			getUserList() {
				getUserList({
					store_id: this.formValidate.my_store_id
				}).then(res => {
					// console.log(res);
					this.authList = res.data.data
					// .map(item => {
					// 		item.id += ''
					// 		return item
					// 	});
				})
			},
			staffList() {
				staffListInfo()
					.then((res) => {
						this.staffData = res.data
						// .map(item => {
						// 	item.id += ''
						// 	return item
						// });
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			getGodownInfo(id) {
				getGodownInfo(id).then(res => {
					this.formValidate = res.data
					this.formValidate.addressSelect = this.formValidate.addressSelect.map(item => item * 1)
					console.log(this.formValidate.addressSelect);
				})
			},
			addchack(e, selectedData) {
				console.log(selectedData, 'selectedData');
				e.forEach((i, index) => {
					if (index == 0) {
						this.formValidate.province = i
					} else if (index == 1) {
						this.formValidate.city = i
					} else if (index == 2) {
						this.formValidate.area = i
					} else {
						this.formValidate.street = i
					}
				})
				this.formValidate.address = (selectedData.map(o => o.label)).join('/')
				// console.log('this.formValidate.addressSelect',this.formValidate.addressSelect);

			},
			cityInfo(data) {
				cityApi(data).then(res => {
					this.addresData = res.data
				})
			},
			loadData(item, callback) {
				item.loading = true;
				cityApi({
					pid: item.value
				}).then(res => {
					item.children = res.data;
					item.loading = false;
					callback();
				});


			},
			getGodownList() {
				getGodownList().then(res => {
					console.log(res);
					this.data1 = res.data.data
					// .map(item => {
					// 		item.id += ''
					// 		return item
					// 	});
				})
			},
			del(index) {
				this.chooseGoods.splice(index, 1);
			},
			userSearchse(e) {
				this.formValidate.create_uid = "";
				this.authList = []
				this.getUserList()
			},
			userSearchs(e) {
				this.formValidate.wid = 0
				this.goods = []
			},
			userSearchss(e) {
				this.formValidate.create_uid = "";
				this.formValidate.store_id = 0
				this.authList = []
				this.goods = []
				this.getUserList()
			},
			userSearchsss(e) {
				if(e) {
					let obj = this.authList.find(item => item.id == e)
					this.formValidate.create_admin_id = obj.admin_id
				}
				
			},
			handleSubmit(name) {
				if(this.formValidate.id == 0) {
					let arr = []
					let arr1 = JSON.parse(JSON.stringify(this.chooseGoods))
					let uniqueArray = arr1.filter(function(item, index, self) {
					  return !self.slice(index + 1).some(function(otherItem) {
					    return item.product_id === otherItem.product_id && item.unit_type === otherItem.unit_type;
					  });
					});
					arr = uniqueArray.map(item => {
						let want = 0;
						for (let i = 0; i < arr1.length; i++) {
							if(item.product_id === arr1[i].product_id && item.unit_type === arr1[i].unit_type) {
								console.log(arr1[i].want_product_num*1,i,'i');
								want += arr1[i].want_product_num*1
							}
						}
						item.want_product_num = want
						return item
					})
					this.formValidate.goods = arr.map(item => {
						item.unit_name = item.info['unit_name' + (item.unit_type == 0 ? '':(item.unit_type == 1?"_1":"_2"))]
						return item
					})
				}else {
					this.formValidate.goods = this.chooseGoods
				}
				
				
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.formValidate.id = this.$route.query.id;
						
						createWant(this.formValidate.id,{
							wid: this.formValidate.wid,
							store_id: this.formValidate.store_id,
							my_store_id: this.formValidate.my_store_id,
							goods: this.formValidate.goods,
							create_uid: this.formValidate.create_uid,
							create_admin_id: this.formValidate.create_admin_id
						}).then(res => {
							this.$Message.success(res.msg);
							this.$router.push({
								path: this.roterPre + "/erp/goods"
							});
						}).catch(err => {
							this.$Message.error(err.msg);
						})
					} else {
						// this.$Message.error("请输入参数模板名称");
					}
				});
			},
		},
	};
</script>

<style scoped lang="stylus">
	.table {
		/deep/.ivu-table-header table {
			border: 0 !important;
		}

		/deep/.ivu-table-header thead tr th:nth-of-type(1) {
			padding-left: 16px;
		}

		/deep/.ivu-table td:nth-of-type(1) {
			padding-left: 16px;
		}

		/deep/.ivu-table-cell {
			padding: 0 !important;
		}

		/deep/.ivu-table-border th,
		/deep/.ivu-table-border td {
			border-right: unset;
		}

		/deep/.ivu-table td {
			height: 59px;
		}
	}

	.form-submit {
		/deep/.ivu-card {
			border-radius: 0;
		}

		margin-bottom: 79px;

		.fixed-card {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 200px;
			z-index: 99;
			box-shadow: 0 -1px 2px rgb(240, 240, 240);

			/deep/ .ivu-card-body {
				padding: 15px 16px 14px;
			}

			.ivu-form-item {
				margin-bottom: 0;
			}

			/deep/ .ivu-form-item-content {
				margin-right: 124px;
				text-align: center;
			}

			.ivu-btn {
				height: 36px;
				padding: 0 20px;
			}
		}
	}

	.after-line {
		display: inline-block;
		position: relative;
		margin-right: 16px;
	}

	.ml16 {
		margin-left: 16px;
	}
</style>