<template>
	<!-- 营销-积分商品 -->
	<div>
		<!-- tab切换栏 -->
		
		<Card :bordered="false" dis-hover class="ivu-mt" :padding="0" v-if="currentTab == 0">
			<div class="new_card_pd">
				<!-- 查询条件 -->
				<Form ref="tableFrom" inline :model="tableFrom" :label-width="labelWidth"
					:label-position="labelPosition" @submit.native.prevent>
					<Form ref="tableFrom" inline :model="tableFrom" :label-width="labelWidth"
						:label-position="labelPosition" @submit.native.prevent>
						<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>
							</Select>
						</FormItem>
					</Form>
				</Form>
			</div>
		</Card>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<div class="new_tab">
			  <Tabs v-model="currentTab" @on-click="onClickTab">
			    <TabPane label="门店订单" name="0" />
				<TabPane label="商品在途" name="1" />
				<TabPane label="库间流转" name="2" />
			  </Tabs>
			</div>
			<!-- 操作 -->
			<Button v-auth="['admin-erp-out_add']" type="primary" @click="add" class="mr10">创建出库单</Button>
			<Button v-auth="['admin-erp-out_addt']" type="primary" @click="addt" class="mr10">创建调出单</Button>
			<Button v-auth="['admin-erp-printing']" type="primary" @click="printing('out')"
				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="passageway">
					<span> {{ row.bin_number.slice(0,2) }}</span>
				</template>
				<template slot-scope="{ row, index }" slot="control">
					<span> {{ row.bin_number.slice(2,3) }}</span>
				</template>
				<template slot-scope="{ row, index }" slot="layer">
					<span> {{ row.bin_number.slice(3,4) }}</span>
				</template>
				<template slot-scope="{ row, index }" slot="number">
					<span> {{ row.bin_number.slice(4) }}</span>
				</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="product">
					<div v-for="item in row.product" class="info">
						{{item.store_name}}
						<!-- <div>
							商品名称：{{item.store_name}}
						</div> -->
						<!-- <div>
							<div v-for="goods in item.group">
								<div v-if="goods.pur_number != 0">
									<span>
										批次：{{goods.batch_code || '/'}}
									</span>
									<Tag color="primary" >{{goods.pur_number *1}} {{goods.unit_name}}</Tag>
								</div>
							</div>
						</div> -->
				
					</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> -->
				</template>
				<template slot-scope="{ row, index }" slot="tware">
					<div>{{row.tware.title}}</div>
					<!-- <div>名称：{{row.tware.title}}</div>
					<div>ID:{{row.tware.id}}</div>
					<div>手机：{{row.tware.phone}}</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> -->
				</template>
				<template slot-scope="{ row, index }" slot="tstore">
					<div>{{row.tstore.name}}</div>
					<!-- <div>名称：{{row.tstore.name}}</div>
					<div>ID:{{row.tstore.id}}</div>
					<div>手机：{{row.tstore.phone}}</div> -->
				</template>
				<template slot-scope="{ row, index }" slot="create_time">
					<div>{{row.create_time|formatDate}}</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="action">
					<a @click="look(row.id)">详情</a>
					<template v-if="row.status == 0">
						<Divider type="vertical" />
						<a @click="edit(row)" v-if="row.status == 0">编辑</a>
						<Divider type="vertical" />
						<a @click="pass(row)">审核</a>
					</template>
					<template v-if="row.status == 1">
						<Divider type="vertical" />
						<a @click="storeReceipt(row,1)" v-if="row.to_store_id">门店收货</a>
						<a @click="storeReceipt(row,2)" v-if="row.to_wid">添加入库</a>
					</template>
					<template v-if="row.status <= 0">
						<Divider type="vertical" />
						<a @click="del(row, '删除出库单', index)">删除</a>
					</template>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current="tableFrom.page" show-elevator show-total @on-change="pageChange"
					:page-size="tableFrom.limit" />
			</div>
		</Card>
		<outDetails ref="outDetail"></outDetails>
		<Modal
		  v-model="modalpass"
		  scrollable
		  title="审核"
		  class="order_box"
		  :closable="false"
		  :mask-closable="false"
		>
		  <Form
		    ref="remarks"
		    :model="remarks"
		    :label-width="80"
		    @submit.native.prevent
		  >
		    <FormItem label="审核人：">
		     <!-- <Input
		        v-model="remarks.mark"
		        maxlength="200"
		        show-word-limit
		        type="textarea"
		        placeholder="请填写备注~"
		        style="width: 100%"
		      /> -->
			  <Select v-model="remarks.auth_uid" clearable filterable @on-change="userSearchse"
			  	class="input-add">
			  	<Option v-for="item in authLists" :value="item.id" :key="item.id">{{ item.staff_name }}
			  	</Option>
			  </Select>
		    </FormItem>
			<FormItem label="状态：">
			  <Select v-model="remarks.status" clearable filterable 
			  	class="input-add">
			  	<Option :value="1" >通过</Option>
				<Option :value="-1" >拒绝</Option>
				<!-- <Option :value="2" >部分完成</Option>
				<Option :value="3" >完成</Option>
				<Option :value="-2" >无效</Option> -->
			  </Select>
			</FormItem>
		  </Form>
		  <div slot="footer">
		    <Button type="primary" @click="putRemark()">提交</Button>
		    <Button @click="cancel()">取消</Button>
		  </div>
		</Modal>
	</div>
</template>

<script>
	import  outDetails from './outDetail.vue'
	
	import {mapState} from "vuex";
	import {getOutSimpleList,getReceiveList,getOutLists,getOutInfo,getUserList,outSave,wareDelivery} from "@/api/erp";
	import {formatDate} from "@/utils/validate";
	import timeOptions from "@/utils/timeOptions";
	import Setting from "@/setting";
	export default {
		name: "outList",
		components: {
			outDetails
		},
		filters: {
			formatDate(time) {
				if (time !== 0) {
					let date = new Date(time * 1000);
					return formatDate(date, "yyyy-MM-dd hh:mm");
				}
			},
		},
		data() {
			return {
				authLists:[],
				remarks: {
					id: 0,
					status: '',
					auth_uid: "",
					auth_admin_id: "",
				},
				modalpass:false,
				currentTab: 0,
				roterPre: Setting.roterPre,
				loading: false,
				options: timeOptions,
				columns1: [
					{
							type: 'selection',
							width: 60,
							align: 'center'
						},{
						title: "ID",
						key: "id",
						width: 80,
					},
					{
						title: "出库单号",
						key: "out_order_id",
						minWidth: 200,
					},
					{
						title: '商品信息',
						slot: 'product',
						minWidth: 250,
					},
					{
						title: "创建人",
						slot: "cuser",
						minWidth: 200,
					},
					{
						title: "调出仓库",
						slot: "ware",
						minWidth: 100,
					},
					
					{
						title: "调出门店",
						slot: "store",
						minWidth: 100,
					},
					
					{
						title: "调入仓库",
						slot: "tware",
						minWidth: 100,
					},
					{
						title: "调入门店",
						slot: "tstore",
						minWidth: 100,
					},
					{
						title: "总数量",
						key: "total_num",
						minWidth: 90,
					},
					{
						title: "总价格",
						key: "total_price",
						minWidth: 90,
					},
					{
						title: "创建时间",
						slot: "create_time",
						minWidth: 90,
					},
					{
						title: "状态",
						slot: "status",
						minWidth: 90,
					},
					{
						title: "操作",
						slot: "action",
						fixed: "right",
						width: 200,
					},
				],
				tableList: [],
				tableFrom: {
					status:-3,
					key: '',
					page: 1,
					limit: 10,
				},
				total: 0,
				checKList:[]
			};
		},
		computed: {
			...mapState("admin/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			this.getList();
		},
		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')
			
			},
			storeReceipt(row,type) {
				let url;
				this.$router.push({
					path: this.roterPre + "/erp/out_store?id=" +row.out_order_id +'&type=' + type,
				});
			},
			putRemark() {
				this.remarks.auth_status = 0
				outSave(this.remarks.id,this.remarks).then(res => {
					this.cancel()
					this.getList();
				})
			},
			cancel() {
				this.remarks = {
					id:0,
					status: '',
					auth_uid: "",
					auth_admin_id: "",}
					this.modalpass = false
			},
			pass(row) {
				let qdata = {}
				if(row.wid) {
					qdata.wid = row.wid
				}else {
					qdata.store_id = row.store_id
				}
				this.authLists = []
				this.remarks.id = row.id
				getUserList(qdata).then(res => {
					this.authLists = res.data.data
					this.modalpass = true;
				})
			},
			userSearchse(e) {
				let auth = this.authLists.find(item => item.id == e)
				console.log(auth,'auth');
				this.remarks.auth_admin_id = auth.admin_id
			},
			look(id) {
					this.$refs.outDetail.getInfo(id);
				// this.
				// getOutInfo(id).then(res => {
				// 	console.log(id);
				// })
			},
			//切换订单  
			onClickTab(e) {
				console.log(e);
				this.currentTab = e //current0 门店收货  2库建流转 1商品在途
				this.tableList = []
				this.getList()
			},
			//切换状态
			userSearchs(e) {
				console.log(e,'status');
				this.tableFrom.status = e
				this.tableFrom.page = 1;
				this.getList();
			},
			// 列表
			getList() {
				this.loading = true;
				let getList = getReceiveList;
				let qdata;
				try{
					if(this.currentTab == 1 || this.currentTab == 2) {
						this.tableFrom.type = this.currentTab
						getList = getOutSimpleList
						qdata = {
							status:-3,
							key: this.tableFrom.key,
							page:this.tableFrom.page,
							limit: this.tableFrom.limit,
							type: this.currentTab
						}
					}
					if(this.currentTab == 0){
						getList = getOutLists
						qdata = {
							status:this.tableFrom.status,
							key: this.tableFrom.key,
							page:this.tableFrom.page,
							limit: this.tableFrom.limit,
							type: this.currentTab
						}
					}
				}catch(e){
					//TODO handle the exception
					console.log(e,'err');
				}
				
				getList(qdata)
					.then(async (res) => {
						let data = res.data;
						this.tableList = data.data;
						this.total = data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			// 添加
			add() {
				this.$router.push({
					path: this.roterPre + "/erp/out_add?id=0"
				});
			},
			addt() {
				this.$router.push({
					path: this.roterPre + "/erp/out_addt?id=0"
				});
			},
			addMore() {
				this.$router.push({
					path: this.roterPre + "/marketing/store_integral/add_store_integral",
				});
			},
			orderList(row) {
				this.$router.push({
					path: this.roterPre + "/marketing/store_integral/order_list",
					query: {
						product_id: row.id,
					},
				});
			},
			// 导出
			exports() {
				let formValidate = this.tableFrom;
				let data = {
					start_status: formValidate.start_status,
					status: formValidate.status,
					store_name: formValidate.store_name,
				};
				storeSeckillApi(data)
					.then((res) => {
						location.href = res.data[0];
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 编辑
			edit(row) {
				this.$router.push({
					path: this.roterPre + "/erp/out_add?id=" + row.id
				});
			},
			// 一键复制
			copy(row) {
				this.$router.push({
					path: this.roterPre + "/marketing/store_integral/create/" + row.id + "/1",
				});
			},
			// 删除
			del(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `/erp/out/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.tableList = []
				this.getList();
			},
			// 表格搜索
			tableSearchs() {
				this.tableFrom.page = 1;
				this.getList();
			},
			// 具体日期
			onchangeTime(e) {
				this.timeVal = e;
				this.tableFrom.integral_time = this.timeVal[0] ? this.timeVal.join("-") : "";
			},
			// 修改是否显示
			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%;
		}
	}
	.info {
		padding-top: 10px;
		// border-bottom: 1px dashed #515a6e;
	
		&:last-of-type {
			border: none;
		}
	}
</style>