<template>
	<ContainerQuery>
		<div v-if="parseInt(printTag) === 5" slot="tip" class="page-tip-div" style="margin-top: 0">
			<i class="el-icon-info"></i>
			<span>温馨提示：当前页面按键盘【F8】可进行页面刷新</span>
		</div>
		<div slot="left">
			<el-button v-if="parseInt(printTag) === 5" type="primary" plain size="small" @click="resetPage">
				刷新页面
			</el-button>
			<el-button size="small" type="primary" @click="getAllSaleOut(1)">
				导出
			</el-button>
		</div>
		<div v-if="$accessCheck($Access.InventoryOutSearchAllInventoryOut)" slot="more">
			<el-form inline size="small">
				<!--        <el-form-item>-->
				<!--          <el-input-->
				<!--            v-model="searchData.goodsName"-->
				<!--            placeholder="操作人"-->
				<!--            style="width: 220px"-->
				<!--            clearable-->
				<!--            @keyup.enter.native="pageChange(1)"-->
				<!--            @clear="pageChange(1)"-->
				<!--          >-->
				<!--            <el-button-->
				<!--              slot="append"-->
				<!--              class="el-icon-search"-->
				<!--              @click="pageChange(1)"-->
				<!--            ></el-button>-->
				<!--          </el-input>-->
				<!--        </el-form-item>-->
				<!--        <el-form-item v-if="systemType === 1">-->
				<!--          <el-select-->
				<!--            v-model="searchData.warehouseId"-->
				<!--            placeholder="出库仓库"-->
				<!--            clearable-->
				<!--            style="width: 150px"-->
				<!--            @change="pageChange(1)"-->
				<!--          >-->
				<!--            <el-option-->
				<!--              v-for="item in warehouseData"-->
				<!--              :key="item.id"-->
				<!--              :label="item.warehouseName"-->
				<!--              :value="item.id"-->
				<!--            ></el-option>-->
				<!--          </el-select>-->
				<!--        </el-form-item>-->
				<el-form-item>
					<el-select v-model="searchData.statusArr" multiple placeholder="审核状态(可多选)" style="width: 150px"
						@change="pageChange(1)">
						<el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker v-model="search_time" type="datetimerange" :unlink-panels="true" range-separator="-"
						start-placeholder="制单开始时间" end-placeholder="制单结束时间" @change="searchTimeChange"></el-date-picker>
				</el-form-item>
				<!--        <el-form-item>-->
				<!--          <el-input-->
				<!--            v-model="goods"-->
				<!--            placeholder="请输入商品名称"-->
				<!--            style="width: 220px"-->
				<!--            clearable-->
				<!--            @keyup.enter.native="getUserList()"-->
				<!--            @clear="getUserList()"-->
				<!--          >-->
				<!--            <el-button-->
				<!--              slot="append"-->
				<!--              icon="el-icon-search"-->
				<!--              @click="getUserList()"-->
				<!--            ></el-button>-->
				<!--          </el-input>-->
				<!--        </el-form-item>-->
			</el-form>
		</div>
		<el-tabs v-if="$accessCheck($Access.InventoryOutStatisticsAllInventoryOut)" v-model="top_sel" type="card"
			@tab-click="selTopType">
			<el-tab-pane :label="'销售出库（' + census[0].count + '）'" name="salesStock"></el-tab-pane>
			<el-tab-pane :label="'采购退货（' + census[2].count + '）'" name="purchaseReturns"></el-tab-pane>
			<el-tab-pane :label="'调拨出库（' + census[1].count + '）'" name="outBound"></el-tab-pane>
			<el-tab-pane :label="
          '全部单据（' +
          $NP.plus(census[1].count, census[0].count, census[2].count) +
          '）'
        " name="allDocuments"></el-tab-pane>
		</el-tabs>
		<el-tabs v-else v-model="top_sel" type="card" @tab-click="selTopType">
			<el-tab-pane label="销售出库" name="salesStock"></el-tab-pane>
			<el-tab-pane label="采购退货" name="purchaseReturns"></el-tab-pane>
			<el-tab-pane label="调拨出库" name="outBound"></el-tab-pane>
			<el-tab-pane label="全部单据" name="allDocuments"></el-tab-pane>
		</el-tabs>
		<!-- 表格 -->
		<el-table :data="outgoingList" :row-class-name="tableRowClassName" @row-dblclick="goDetail">
			<el-table-column prop="id" label="ID" fixed="left" min-width="80"></el-table-column>
			<el-table-column prop="no" min-width="210" label="单据编号" show-overflow-tooltip>
				<template slot-scope="scope">
					<span v-if="$accessCheck($Access.InventoryOutGetInventoryOutInfo)" class="click-div"
						@click="goDetail(scope.row)">
						{{ scope.row.no }}
					</span>
					<span v-else>{{ scope.row.no }}</span>
				</template>
			</el-table-column>
			<el-table-column v-if="timeFlag" prop="creatTime" min-width="160" label="制单时间">
				<template slot-scope="scope">
					{{ $_common.formatDate(scope.row.createTime) }}
				</template>
			</el-table-column>
			<el-table-column v-if="top_sel === 'outBound'" prop="warehouseName" min-width="160" label="调出仓库">
			</el-table-column>
			<el-table-column v-if="clientFlag && top_sel !== 'outBound'" min-width="140" prop="customerName"
				show-overflow-tooltip label="客户" />
			<el-table-column v-if="customerCallsFlag && top_sel !== 'outBound'" min-width="120" prop="customerMobile"
				label="客户电话" />
			<el-table-column v-if="sourceNumberFlag" prop="sourceNo" min-width="210" label="来源单号">
				<template slot-scope="scope">
					<span v-if="
              (scope.row.type === 8 &&
                $accessCheck($Access.AllocationFormGetAllocateInfo)) ||
              (scope.row.type === 5 &&
                $accessCheck($Access.newOrderLitGetOrderInfoById)) ||
              (scope.row.type === 14 &&
                $accessCheck($Access.PurchaseReturnOrderGetPurchaseOutInfoById))
            " class="click-div" @click="goOtherDetail(scope.row)">
						{{ scope.row.sourceNo }}
					</span>
					<span v-else>{{ scope.row.sourceNo }}</span>
				</template>
			</el-table-column>
			<el-table-column v-if="modeOfDistributionFlag" prop="deliveryName" min-width="120" label="配送方式">
				<template slot-scope="scope">
					{{ scope.row.deliveryName || "--" }}
				</template>
			</el-table-column>
			<el-table-column v-if="outboundTypeFlag" prop="typeName" label="出库类型" min-width="120"></el-table-column>
			<el-table-column v-if="auditorFlag" prop="auditName" label="审核人" min-width="110"></el-table-column>
			<el-table-column v-if="parseInt(printTag) === 5" prop="printNum" label="打印次数" min-width="80">
			</el-table-column>
			<el-table-column label="操作" fixed="right" min-width="120">
				<template slot="header" slot-scope="scope">
					<span v-if="false">{{ scope.$index }}</span>
					<span class="operation">操作</span>
					<el-popover popper-class="custom-table-checkbox" trigger="click">
						<el-checkbox-group v-model="checkList">
							<el-checkbox v-for="(item, index) in columns" :key="index" :label="item.label"
								@change="change"></el-checkbox>
						</el-checkbox-group>
						<el-button slot="reference" icon="el-icon-setting" type="text"></el-button>
					</el-popover>
				</template>
				<template slot-scope="scope">
					<!--           @click="updateSaleOutStatus(scope.row)"-->
					<el-button v-if="$accessCheck($Access.InventoryOutUpdateInventoryOutStatus)" type="text"
						:disabled="scope.row.auditStatus === 2" @click="goDetail(scope.row)">
						审核
					</el-button>
					<el-button v-if="
              $accessCheck($Access.outgoingGetSaleOutInfo) &&
              scope.row.typeName === '销售出库'
            " type="text" @click="openUrl(scope.row)">
						打印
					</el-button>
					<el-button v-if="scope.row.typeName === '调拨出库'" type="text" @click="openAllocating(scope.row)">
						打印
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- // 表格 -->
		<FooterPage :page-size="pageSize" :total-page.sync="total" :current-page.sync="page" @pageChange="pageChange"
			@sizeChange="sizeChange"></FooterPage>
		<OrderOut v-if="show_out" :out-id="out_id" :is-show="show_out" @cancel="show_out = false"
			@confirm="orderAuditConfirm"></OrderOut>
	</ContainerQuery>
</template>

<script>
	import OrderOut from "@/views/order/components/OrderOut.vue";
	import {
		statisticsAllSaleOut,
		updateSaleOutStatus,
		getAllSaleOut,
		exportGetAllSaleOut,
		searchAllSaleOut,
		getAllWarehouse,
		getAllPurchaseIn,
	} from "@/api/Stock";
	import {
		mapGetters
	} from "vuex";
	export default {
		name: "Outgoing",
		components: {
			OrderOut,
		},
		data() {
			return {
				goods: "",
				search_time: [],
				out_id: 0,
				show_out: false,
				census: [{
					count: 0
				}, {
					count: 0
				}, {
					count: 0
				}],
				warehouseData: [], // 所有仓库数据
				page: 1,
				pageSize: 10,
				total: 0,
				top_sel: "salesStock",
				source: 5,
				//  选择审核状态
				status: [{
						value: 1,
						label: "待审核"
					},
					{
						value: 2,
						label: "审核通过"
					},
				],
				searchData: {
					source: 5,
					shopId: "",
					shopName: "",
					statusArr: [],
					goodsName: "", // 商品名称
					warehouseId: "", // 仓库id
					startTime: "", // 制单开始时间
					endTime: "", // 制单结束时间
				},
				operatorList: [], // 获取所有操作人列表
				outgoingList: [], // 列表数据
				checkList: [
					"制单时间",
					"客户",
					"客户电话",
					"来源单号",
					"配送方式",
					"出库类型",
					"审核人",
				],
				columns: [{
						label: "制单时间",
					},
					{
						label: "客户",
					},
					{
						label: "客户电话",
					},
					{
						label: "来源单号",
					},
					{
						label: "配送方式",
					},
					{
						label: "出库类型",
					},
					{
						label: "审核人",
					},
				],
				timeFlag: true,
				clientFlag: true,
				customerCallsFlag: true,
				sourceNumberFlag: true,
				modeOfDistributionFlag: true,
				outboundTypeFlag: true,
				auditorFlag: true,
			};
		},
		computed: {
			...mapGetters({
				printTag: "MUser/printTag",
			}),
			type_on_color() {
				return {
					color: this.themeA
				};
			},
			type_on_style() {
				return {
					borderColor: this.themeA,
					// backgroundColor: this.hexToRgba(this.themeA, 10).rgba,
				};
			},
		},
		created() {
			// this.getAllWarehouse();
			this.getAllSaleOut();
			this.statisticsAllSaleOut();
		},
		activated() {
			if (this.$_isInit()) return;
			this.getData();
			this.statisticsAllSaleOut();
		},
		mounted() {
			//当前页面监视键盘输入
			// if (parseInt(this.printTag) === 5) {
			//   document.onkeydown = (e) => {
			//     let e1 =
			//       e || event || window.event || arguments.callee.caller.arguments[0];
			//     if (e1 && e1.keyCode === 40) {
			//       if (parseInt(this.printTag) === 5) {
			//         if (this.$route.name === "Outgoing") {
			//           this.resetPage();
			//         }
			//       }
			//     }
			//   };
			// }
		},
		methods: {
			tabClick() {},
			goDetail(row) {
				if (!this.$accessCheck(this.$Access.InventoryOutGetInventoryOutInfo)) {
					return;
				}
				this.$router.push("/stock/OutIn/outgoingInfo/" + row.id);
			},
			goOtherDetail(row) {
				switch (row.type) {
					case 5: // 销售出库
						this.$router.push("/order/manageO/OrderDetails/1/" + row.sourceId);
						break;
					case 8: // 调拨出库
						this.$router.push(
							"/stock/WarehouseManagement/DetailAllocationForm/" + row.sourceId
						);
						break;
					case 14: // 采购退货
						this.$router.push(
							"/Purchase/ManageP/PurchaseReturnOrderLook/" + row.sourceId
						);
						break;
				}
			},
			// 打印
			openUrl(row) {
				let routeData = this.$router.resolve({
					path: `/OutgoingPrinting/${row.id}`,
				});
				window.open(routeData.href, "_blank");
			},
			// 打印调拨出库单
			openAllocating(row) {
				let routeData = this.$router.resolve({
					path: `/AllocatingOutbound/${row.id}`,
				});
				window.open(routeData.href, "_blank");
			},
			clearShop() {
				this.searchData.shopId = "";
				this.searchData.shopName = "";
				this.searchData.warehouseId = "";
				this.pageChange(1);
			},
			selShop(val, row) {
				this.searchData.shopName = row[0].name;
				this.searchData.warehouseId = row[0].warehouseId;
				this.pageChange(1);
			},
			//  出库统计
			async statisticsAllSaleOut() {
				if (
					!this.$accessCheck(this.$Access.InventoryOutStatisticsAllInventoryOut)
				) {
					return;
				}
				const {
					data
				} = await statisticsAllSaleOut({
					type: [
						5, // 销售
						8, // 调拨
						14, // 采购
					],
				});

				this.census = data;
			},
			// 出库 审核状态
			orderAuditConfirm() {
				this.getData();
			},
			updateSaleOutStatus(row) {
				if (row.deliveryType === 1 && row.type === 5) {
					this.out_id = row.id;
					this.show_out = true;
					return;
				}
				this.$confirm("确定要审核该出库单吗？", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					const data = await updateSaleOutStatus({
						id: row.id,
						auditName: this.userName,
					});

					this.$message({
						type: "success",
						message: "操作成功!",
					});
					this.getData();
				});
			},
			//  获取列表
			async getAllSaleOut(exports) {
				const params = {
					type: this.searchData.source,
					warehouseId: this.searchData.warehouseId,
					auditStatus: this.searchData.statusArr,
					start: this.searchData.startTime,
					end: this.searchData.endTime,
					search: this.searchData.goodsName,
					page: this.page,
					pageSize: this.pageSize,
				};
				if (exports) {
					params.export = exports;
					const target = await exportGetAllSaleOut({
						...params,
					});
				} else {
					const data = await getAllSaleOut({
						...params,
					});
					this.outgoingList = data.data;
					this.total = data.pageTotal;
				}
			},
			//  搜索
			async searchAllSaleOut() {
				const data = await searchAllSaleOut({
					type: this.searchData.source,
					warehouseId: this.searchData.warehouseId,
					auditStatus: this.searchData.statusArr,
					start: this.searchData.startTime,
					end: this.searchData.endTime,
					search: this.searchData.goodsName,
					page: this.page,
					pageSize: this.pageSize,
				});
				this.outgoingList = data.data;
				this.total = data.pageTotal;
			},
			//  判断
			getData() {
				// const searchData = this.$_common.deepClone(this.searchData);
				// delete searchData.source;
				// const isKey = this.$_common.isSerch(searchData);
				// if (isKey) {
				//   this.searchAllSaleOut();
				// } else {
				//   this.getAllSaleOut();
				// }
				this.getAllSaleOut();
			},
			//  请求所有仓库列表
			async getAllWarehouse() {
				const data = await getAllWarehouse({
					page: 1,
					pageSize: 999,
				});
				this.warehouseData = data.data;
			},
			// 顶部筛选
			selTopType(tag) {
				switch (this.top_sel) {
					case "outBound": // 调拨出库
						this.searchData.source = 8;
						break;
					case "salesStock": // 销售出库
						this.searchData.source = 5;
						break;
					case "purchaseReturns": // 采购退货
						this.searchData.source = 14;
						break;
					case "allDocuments": // 全部单据
						// this.searchData.statusArr = []
						this.searchData.source = "";
						break;
				}
				this.source = this.searchData.source;
				this.pageChange(1);
			},
			pageChange(page) {
				this.page = page;
				this.getData();
			},
			sizeChange(size) {
				this.pageSize = size;
				this.pageChange(1);
			},
			// 搜索条件时间回调
			searchTimeChange(val) {
				if (val && val.length) {
					this.searchData.startTime = parseInt(val[0] / 1000);
					this.searchData.endTime = parseInt(val[1] / 1000);
				} else {
					this.searchData.startTime = "";
					this.searchData.endTime = "";
				}
				this.pageChange(1);
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (parseInt(this.printTag) === 5 && row.printNum > 0) {
					return "print-row";
				}
				return "";
			},
			// 刷新页面
			resetPage() {
				this.getData();
			},
			change() {
				this.timeFlag = this.checkList.some((item) => item === "制单时间");
				this.clientFlag = this.checkList.some((item) => item === "客户");
				this.customerCallsFlag = this.checkList.some(
					(item) => item === "客户电话"
				);
				this.sourceNumberFlag = this.checkList.some(
					(item) => item === "来源单号"
				);
				this.modeOfDistributionFlag = this.checkList.some(
					(item) => item === "配送方式"
				);
				this.outboundTypeFlag = this.checkList.some(
					(item) => item === "出库类型"
				);
				this.auditorFlag = this.checkList.some((item) => item === "审核人");
			},
		},
	};
</script>

<style scoped lang="scss">
	.query-form-view {
		padding: 10px;
		border: 1px solid #eee;
		margin-bottom: 10px;
	}

	.customer-type-li {
		background: #fff;
		padding: 10px;
		border: 1px solid #eee;
		cursor: pointer;
		box-shadow: 0 0 4px 0 hsla(0, 0%, 73%, 0.5);
	}

	.num-p {
		font-size: 12px;
		color: #969799;
	}

	/* .type-row{
    padding-bottom: 10px;
  } */
	.custom-table-checkbox {
		.el-checkbox {
			display: block !important;
			margin: 0 0 $base-padding/4 0;
		}
	}
</style>
