<template>
	<div>
		<Card :bordered="false" dis-hover class="mt15">
			<Form ref="orderData" :model="orderData" :label-width="labelWidth" :label-position="labelPosition"
				class="tabform" @submit.native.prevent>
				<div class="acea-row">
					<FormItem label="时间选择：">
						<DatePicker :editable="false" :clearable="true" @on-change="onchangeTime" :value="timeVal"
							format="yyyy/MM/dd HH:mm:ss" type="datetimerange" placement="bottom-start"
							placeholder="自定义时间" style="width: 250px" class="mr30" :options="options"></DatePicker>
					</FormItem>
					<FormItem label="订单审核：">
						<Select v-model="orderData.status" style="width: 250px" class="mr30" clearable
							@on-change="userSearchs" placeholder="全部">
							<Option value="-1">全部</Option>
							<Option value="0">审核中</Option>
							<Option value="1">已通过</Option>
							<Option value="2">未通过</Option>
						</Select>
					</FormItem>
					<FormItem label="凭证：">
						<Select v-model="orderData.pay_img_status" style="width: 250px" class="mr30" clearable
							@on-change="userSearchs" placeholder="全部订单">
							<Option :value="0">没有凭证</Option>
							<Option :value="1">有凭证</Option>
						</Select>
					</FormItem>
					<FormItem label="货架：">
						<Select v-model="orderData.level_id" style="width: 250px" class="mr30" clearable
							@on-change="userSearchs" placeholder="全部">
							<Option value="">全部</Option>
							<Option :value="it.id" v-for="it in levelList">{{it.name}}</Option>
						</Select>
					</FormItem>
					<FormItem label="用户UID：">
						<Input v-model="orderData.uid" placeholder="请输入用户UID" element-id="name" clearable
							style="width:250px;" maxlength="20">
						</Input>
					</FormItem>
					<Button type="primary" @click="userSearchs" class="ml20">查询</Button>
					<Button @click="reset" class="ml20">重置</Button>
				</div>
			</Form>
		</Card>
		<Card :bordered="false" dis-hover class="mt15">
			<div class="acea-row row-between">
				<div>
					<Tooltip content="本页至少选中一项" :disabled="!!checkUidList.length && isAll==0">
						<Button class="mr10" type="primary" :disabled="!checkUidList.length && isAll==0" @click="delAll">批量审核</Button>
					</Tooltip>
					<!-- <Button class="mr10" type="primary" @click="manualModal = true">手动批量发货</Button> -->
					<Tooltip content="本页至少选中一项" :disabled="!!checkUidList.length && isAll==0">
					</Tooltip>
				</div>
			</div>
			<vxe-table border="inner" ref="xTable" class="mt25" :loading="loading" row-id="id"
				:expand-config="{accordion: true}" :checkbox-config="{reserve: true}" @checkbox-all="checkboxAll"
				@checkbox-change="checkboxItem" :data="orderList">
				<vxe-column type="" width="0"></vxe-column>
				<vxe-column type="checkbox" width="100">
					<template #header>
						<div>
							<Dropdown transfer @on-click="allPages">
								<a href="javascript:void(0)" class="acea-row row-middle">
									<span>全选({{isAll==1?(total-checkUidList.length):checkUidList.length}})</span>
									<Icon type="ios-arrow-down"></Icon>
								</a>
								<template #list>
									<DropdownMenu>
										<DropdownItem name="0">当前页</DropdownItem>
										<!-- <DropdownItem name="1">所有页</DropdownItem> -->
									</DropdownMenu>
								</template>
							</Dropdown>
						</div>
					</template>
				</vxe-column>
				<vxe-column field="id" title="ID"  width="80"></vxe-column>
				<vxe-column field="info" title="进货货架" min-width="100">
					<template v-slot="{ row }">
						{{row.level_name}}
					</template>
				</vxe-column>
				<vxe-column field="store_name" title="进货门店" min-width="130">
					<template v-slot="{ row }">
						{{ row.store_name }}
						(ID:{{ row.store_id }})[UID:{{row.uid}}]
					</template>
				</vxe-column>
				<vxe-column field="img" title="支付凭证" min-width="130">
					<template v-slot="{ row }">
						<div class="tabBox" v-for="it in row.img" v-if="row.img.length>0">
							<div class="tabBox_img" v-viewer><img v-lazy="it" /></div>
						</div>
						<div v-else>
							无凭证
						</div>
					</template>
				</vxe-column>

				<vxe-column field="add_time" title="创建时间" min-width="110"></vxe-column>
				<vxe-column field="number" title="进货数量" min-width="90">
					<template v-slot="{ row }">
						<div>{{row.number}}</div>
					</template>
				</vxe-column>
				<vxe-column field="is_status" title="审核状态" min-width="90">
					<template v-slot="{ row }">
						<div v-if="row.is_status==0">审核中</div>
						<div v-if="row.is_status==1">已通过</div>
						<div v-if="row.is_status==2">已拒绝</div>
					</template>
				</vxe-column>
				<vxe-column field="action" title="操作" align="center" width="130" fixed="right">
					<template v-slot="{ row }">
						<a v-if="row.is_status==0" @click="checkedSend(row)">审核</a>
						<a v-if="row.is_status==1" @click="backOrder(row)">退单</a>
					</template>
				</vxe-column>
			</vxe-table>
			<div class="acea-row row-right mt15">
				<Page :total="total" :current="orderData.page" show-elevator show-total @on-change="pageChange"
					:page-size="orderData.limit" />
			</div>
		</Card>
		<Modal v-model="showSend" title="进货单审核" width="750">
			<Form :label-width="labelWidth" :label-position="labelPosition" ref="orderData" :model="sendData"
				class="tabform">
				<FormItem label="支付凭证：">
					<div class="tabBox"  v-if="actionSendData.img.length>0">
						<div class="alert_img" v-for="it in actionSendData.img" v-viewer>
							<img v-lazy="it" />
						</div>
					</div>
					<div v-else>
						无凭证
					</div>
				</FormItem>
				<FormItem label="备注：">
					<Input v-model="sendData.mark" placeholder="备注" element-id="name" clearable style="width:500px;"
						maxlength="20">
					</Input>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button @click="sendOrder(2)">拒绝</Button>
				<Button type="primary" @click="sendOrder(1)">通过</Button>
			</div>
		</Modal>
		<!-- 会员详情-->
		<user-details ref="userDetails" fromType="order"></user-details>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import userDetails from "@/components/userDetails/userDetails";
	import timeOptions from "@/utils/timeOptions";
	import util from "@/libs/util";
	import Setting from "@/setting";
	import exportExcel from "@/utils/newToExcel.js";
	import {
		orderShelvesLst,
		shelves_lst,
		storeOrderApi,
		shelves_verify
	} from "@/api/order";
	export default {
		name: "index",
		components: {
			userDetails,
		},
		data() {
			return {
				showSend: false, //显示审核弹窗
				actionSendData: {
					img:[]
				}, //保存点击的商品
				levelList: [], //货架列表
				sendData: {
					id: '',
					status: "",
					mark: '',
				},
				isAll: 0,
				isCheckBox: false,
				checkUidList: [],
				timeVal: [],
				options: timeOptions,
				// 订单列表
				orderData: {
					page: 1,
					limit: 10,
					level_id: "",
					status: "0",
					start_time: "",
					end_time: "",
					pay_img_status:1,
					uid:''
				},
				orderList: [],
				total: 0,
				loading: false,
				orderId: 0,
				delfromData: {},
				rowActive: {},
				exportListOn: 0,
				exportList: [
					// {
					//   name: "1",
					//   label: "导出发货单",
					// },
					{
						name: "0",
						label: "导出订单",
					},
				],
			};
		},
		watch: {
			$route() {
				if (this.$route.fullPath === `${Setting.roterPre}/order/list?type=7&status=1`) {
					this.getPath();
				}
			}
		},
		computed: {
			...mapState("store/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 80;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			if (this.$route.fullPath === `${Setting.roterPre}/order/list?type=7&status=1`) {
				this.getPath();
			} else {
				this.getList();
			}
		},
		mounted() {
			this.shelves_lst();
		},
		methods: {
			// 通过拒绝审核
			sendOrder(type) {
				if (type == 2 && this.sendData.mark == "") {
					this.$Message.error("请填写拒绝原因");
					return
				}
				this.sendData.status = type;
				shelves_verify(this.sendData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.getList();
						this.showSend = false;
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});

			},
			// 点击显示弹窗
			checkedSend(item) {
				this.showSend = true;
				this.actionSendData = item;
				this.sendData.id = item.id;
			},
			// 获取货架列表
			shelves_lst() {
				shelves_lst().then((res) => {
					this.levelList = res.data;
					console.log(this.levelList)
				});
			},
			//跳转刷新
			getPath() {
				this.orderData.page = 1;
				this.orderData.status = this.$route.query.status;
				this.getList();
			},
			allReset() {
				this.isAll = 0;
				this.isCheckBox = false;
				this.$refs.xTable.setAllCheckboxRow(false);
				this.checkUidList = [];
			},
			allPages(e) {
				this.isAll = e;
				if (e == 0) {
					this.$refs.xTable.toggleAllCheckboxRow();
					// this.checkboxAll();
				} else {
					if (!this.isCheckBox) {
						this.$refs.xTable.setAllCheckboxRow(true);
						this.isCheckBox = true;
						this.isAll = 1;
					} else {
						this.$refs.xTable.setAllCheckboxRow(false);
						this.isCheckBox = false;
						this.isAll = 0;
					}
					this.checkUidList = []
				}
			},
			checkboxItem(e) {
				let id = parseInt(e.rowid);
				let index = this.checkUidList.indexOf(id);
				if (index !== -1) {
					this.checkUidList = this.checkUidList.filter((item) => item !== id);
				} else {
					this.checkUidList.push(id);
				}
			},
			checkboxAll() {
				// 获取选中当前值
				let obj2 = this.$refs.xTable.getCheckboxRecords(true);
				// 获取之前选中值
				let obj = this.$refs.xTable.getCheckboxReserveRecords(true);
				if (this.isAll == 0 && this.checkUidList.length <= obj.length && !this.isCheckBox) {
					obj = [];
				}
				obj = obj.concat(obj2);
				let ids = [];
				obj.forEach((item) => {
					ids.push(parseInt(item.id))
				})
				this.checkUidList = ids;
				if (!obj2.length) {
					this.isCheckBox = false;
				}
			},
			reset() {
				this.timeVal = [];
				this.orderData = {
					page: 1,
					limit: 10,
					level_id: "",
					status: "0",
					start_time: "",
					end_time: "",
					pay_img_status:1,
					uid:''
				};
				this.getList();
			},
			queuemModal() {
				this.$refs.queue.modal = true;
			},
			delAll() {
				if (this.checkUidList.length === 0 && this.isAll == 0) {
					return this.$Message.error('请先选择删除的订单！')
				}
				let idss = {
					all: this.isAll,
					ids: this.checkUidList,
				}
				
				this.sendData.id=this.checkUidList.join(',');
				this.sendData.status =1
				let delfromData = {
					title: "审核通过订单",
					url: `/order/shelves_verify`,
					method: "post",
					ids: this.sendData,
				};
				this.$modalSure(delfromData).then((res) => {
					this.$Message.success(res.msg);
					this.allReset();
					this.getList();
				}).catch((res) => {
					this.$Message.error(res.msg);
				});
			},
			// 退单
			backOrder(item) {
				let delfromData = {
					title: "进货单退单",
					url: `/order/update_shelves_refund/${item.id}`,
					method: "put",
				};
				this.$modalSure(delfromData).then((res) => {
					this.$Message.success(res.msg);
					this.allReset();
					this.getList();
				}).catch((res) => {
					this.$Message.error(res.msg);
				});
			},
			onAuto() {
				this.$refs.sends.modals = true;
				this.$refs.sends.getList();
				this.$refs.sends.getDeliveryList();
			},
			// 订单导出
			async exports(value) {
				this.exportListOn = this.exportList.findIndex(
					(item) => item.name === value
				);
				let [th, filekey, data, fileName] = [
					[],
					[],
					[], ""
				];
				let excelData = JSON.parse(JSON.stringify(this.orderData));
				excelData.page = 1;
				excelData.type = value;
				excelData.ids = this.checkUidList.join();
				for (let i = 0; i < excelData.page + 1; i++) {
					let lebData = await this.downOrderData(excelData);
					if (!fileName) fileName = lebData.filename;
					if (!filekey.length) {
						filekey = lebData.filekey;
					}
					if (!th.length) th = lebData.header;
					if (lebData.export.length) {
						data = data.concat(lebData.export);
						excelData.page++;
					} else {
						exportExcel(th, filekey, fileName, data);
						return;
					}
				}
			},
			downOrderData(excelData) {
				return new Promise((resolve, reject) => {
					storeOrderApi(excelData).then((res) => {
						return resolve(res.data);
					});
				});
			},
			// 删除单条订单
			delOrder(row, data) {
				if (row.is_del === 1) {
					this.$modalSure(data)
						.then((res) => {
							this.$Message.success(res.msg);
							this.getList();
							this.$refs.detailss.modals = false;
						})
						.catch((res) => {
							this.$Message.error(res.msg);
						});
				} else {
					const title = "错误！";
					const content =
						"<p>您选择的的订单存在用户未删除的订单，无法删除用户未删除的订单！</p>";
					this.$Modal.error({
						title: title,
						content: content,
					});
				}
			},
			getList() {
				this.loading = true;
				orderShelvesLst(this.orderData).then(res => {
					let data = res.data;
					let list = data.list.map((s)=>{
						if(s.status=="已通过"){
							s.is_status = 1
							return s;
						}
						if(s.status=="已拒绝"){
							s.is_status = 2
							return s;
						}
						if(s.status=="审核中"){
							s.is_status = 0
							return s;
						}
					})
					this.$set(this, 'orderList', data.list);
					this.total = res.data.count;
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					this.$Message.error(err.msg)
				})
			},
			// 具体日期
			onchangeTime(e) {
				if (e[1].slice(-8) === "00:00:00") {
					e[1] = e[1].slice(0, -8) + "23:59:59";
					this.timeVal = e;
				} else {
					this.timeVal = e;
				}
				this.orderData.start_time = this.timeVal[0] || "";
				this.orderData.end_time = this.timeVal[1] || "";
				this.orderData.page = 1;
				this.allReset();
				this.getList();
			},
			// showUserInfo(row) {
			// 	this.$refs.userDetails.modals = true;
			// 	this.$refs.userDetails.activeName = 'info';
			// 	this.$refs.userDetails.getDetails(row.uid);
			// },
			pageChange(index) {
				this.orderData.page = index;
				this.getList();
			},
			userSearchs() {
				this.allReset();
				this.orderData.page = 1;
				this.getList();
			}
		},
	};
</script>

<style lang="stylus" scoped>
	.tdinfo {
		margin-left: 75px;
		margin-top: 16px;
	}

	.expand-row {
		margin-bottom: 16px;
		font-size: 12px;
	}

	.tabBox {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		.alert_img{
			width: 300px;
			height: 300px;

			img {
				width: 100%;
				height: 100%;
			}
		}
		.tabBox_img {
			width: 30px;
			height: 30px;

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

		.tabBox_tit {
			width: 267px;
			height: 30px;
			line-height: 30px;
			font-size: 12px !important;
			margin: 0 2px 0 10px;
			letter-spacing: 1px;
			box-sizing: border-box;
		}
	}

	.tabBox+.tabBox {
		margin-top: 5px;
	}
</style>