<style lang="less">
	@import "@/styles/table-common.less";
	@import "./orderManage.less";
</style>
<template>
	<div class="search">
		<Card>
			<Row v-show="openSearch" @keydown.enter.native="handleSearch">
				<Form ref="searchForm" :model="searchForm" inline :label-width="70">
					<FormItem label="状态" prop="orderId">
						<Select ref="dep" @on-change="checkStatus" clearable="true">
							<Option v-for="(item, i) in dictData" :key="i" :value="item.value">{{
						    item.title
						  }}</Option>
						</Select>

					</FormItem>
					<FormItem label="名称" prop="orderLogistics">
						<Input type="text" v-model="searchForm.searchStr" clearable placeholder="请输入收发货人名称"
							style="width: 200px" />
					</FormItem>
					<FormItem label="收货人id" prop="kdOrderId1">

						<Select v-model="shou" clearable='false' @on-clear="clearShou=true" filterable
							:remote-method="getShouValue" :loading="loading1" placeholder="请选择或输入添加">
							<Option v-for="item in shouList" :value="item.id" :key="item.username"
								:label="item.shipperOrReceiverName" @on-change="checkShouValue(item)">
								<span style="margin-right: 10px">{{ item.shipperOrReceiverName }}</span>
								<span style="color: #ccc">{{ item.mobile }}</span>
							</Option>
						</Select>
					</FormItem>
					<FormItem label="发货人id" prop="kdOrderId">
						<Select v-model="fa" clearable='false' filterable @on-clear="searchForm.shipperId =''"
							:remote-method="getFaValue" :loading="loading2" placeholder="请选择或输入添加">
							<Option v-for="item in faList" @on-change="checkFaValue(item)" :value="item.id"
								:key="item.mobile" :label="item.shipperOrReceiverName">
								<span style="margin-right: 10px">{{ item.shipperOrReceiverName }}</span>
								<span style="color: #ccc">{{ item.mobile }}</span>
							</Option>
						</Select>
					</FormItem>
					<FormItem label="创建时间">
						<DatePicker :options="options" clearable v-model="selectDate" type="daterange"
							format="yyyy-MM-dd"  @on-change="selectDateRange" placeholder="选择起始时间"
							style="width: 200px">
						</DatePicker>
					</FormItem>
					<FormItem label="物流公司" prop="kdOrderId2">

						<Select v-model="wuliuValue" clearable filterable @on-clear="clearWuLiuValue"
							:remote-method="getWuLiuValue" :loading="loading1" placeholder="请选择或输入添加">
							<Option v-for="item in wuliuList" :value="item.companyName" :key="item.id"
								:label="item.companyName" @on-change="checkWuLiuValue(item)">
								<span style="margin-right: 10px">{{ item.companyName }}</span>
							</Option>
						</Select>
					</FormItem>
					<FormItem style="margin-left: -35px" class="br">
						<Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
						<Button @click="handleReset">重置</Button>
					</FormItem>
				</Form>
			</Row>
			<Row align="middle" justify="space-between" class="operation">
				<div>
					<!-- <Button @click="add" type="primary" icon="md-add">创建订单</Button> -->
					<Button @click="" icon="md-add">批量确认</Button>
					<Button @click="checkOrderStatus('','0')" icon="md-add">批量已付</Button>
					<Button @click="checkOrderStatus('','1')" icon="md-add">批量未付</Button>
					<Dropdown @on-click="handleDropdown">
						<Button>
							更多操作
							<Icon type="md-arrow-dropdown" />
						</Button>
						<DropdownMenu slot="list">
							<!-- <DropdownItem name="reset">重置用户密码</DropdownItem> -->
							<DropdownItem name="exportData">导出所选数据</DropdownItem>
							<DropdownItem name="exportAll">导出全部数据</DropdownItem>
							<!-- <DropdownItem name="importData">导入数据</DropdownItem> -->
						</DropdownMenu>
					</Dropdown>
					<!-- <span style="width:180px;display:inline-block;font-size:16px;">
						客户运费:{{orderStatistics.totalFreight == null ?0:orderStatistics.totalFreight}}
					</span>
					<span style="width:120px;display:inline-block;font-size:16px;">
						总单数:{{orderStatistics.totalOrder == null ?0:orderStatistics.totalOrder}}
					</span>
					<span style="width:120px;display:inline-block;font-size:16px;">
						客户数:{{orderStatistics.totalCustomer == null ?0:orderStatistics.totalCustomer}}
					</span>
					<span style="width:120px;display:inline-block;font-size:16px;">
						运输费:{{orderStatistics.totalTransportationFee == null ?0:orderStatistics.totalTransportationFee}}
					</span>
					<span style="width:120px;display:inline-block;font-size:16px;">
						装车费:{{orderStatistics.totalLoadingFee == null ?0:orderStatistics.totalLoadingFee}}
					</span>
					<span style="width:120px;display:inline-block;font-size:16px;">
						小费:{{orderStatistics.totalTip == null ?0:orderStatistics.totalTip}}
					</span>
					<span style="width:120px;display:inline-block;font-size:16px;">
						保费:{{orderStatistics.totalInsuranceFee == null ?0:orderStatistics.totalInsuranceFee}}
					</span> -->
				</div>
				<div class="icons">
					<Tooltip content="刷新" placement="top" transfer>
						<Icon type="md-refresh" size="18" class="item" @click="getDataList" />
					</Tooltip>
					<Tooltip :content="openSearch ? '关闭搜索' : '开启搜索'" placement="top" transfer>
						<Icon type="ios-search" size="18" class="item tip" @click="openSearch = !openSearch" />
					</Tooltip>
					<Tooltip :content="openTip ? '关闭提示' : '开启提示'" placement="top" transfer>
						<Icon type="md-bulb" size="18" class="item tip" @click="openTip = !openTip" />
					</Tooltip>
					<Tooltip content="表格密度" placement="top" transfer>
						<Dropdown @on-click="changeTableSize" trigger="click">
							<Icon type="md-list" size="18" class="item" />
							<DropdownMenu slot="list">
								<DropdownItem :selected="tableSize == 'default'" name="default">默认</DropdownItem>
								<DropdownItem :selected="tableSize == 'large'" name="large">宽松</DropdownItem>
								<DropdownItem :selected="tableSize == 'small'" name="small">紧密</DropdownItem>
							</DropdownMenu>
						</Dropdown>
					</Tooltip>
				</div>
			</Row>
			<Alert show-icon v-show="openTip">
				已选择
				<span class="select-count">{{ selectList.length }}</span> 项
				<a class="select-clear" @click="clearSelectAll">清空</a>
			</Alert>
			<Table :loading="loading" border :columns="colHidden" :data="data" :size="tableSize" sortable="custom"
				@on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
			<Row type="flex" justify="end" class="page">
				<Page :current="searchForm.pageNum" :total="total" :page-size="searchForm.pageSize"
					@on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
					size="small" show-total show-elevator show-sizer></Page>
			</Row>
		</Card>

		<!-- 自定义导出数据 -->
		<Modal v-model="exportModalVisible" :title="exportTitle" :loading="loadingExport" @on-ok="exportCustomData">
			<Form ref="exportForm" :label-width="100">
				<FormItem label="导出文件名">
					<Input v-model="filename" />
				</FormItem>
				<FormItem label="自定义导出列">
					<CheckboxGroup v-model="chooseColumns">
						<Checkbox v-for="(item, i) in exportColumns" :label="item.title" :key="i" :value="item.checked"
							:disabled="item.disabled"></Checkbox>
					</CheckboxGroup>
				</FormItem>
			</Form>
		</Modal>
		<!-- 导入数据 -->
		<Drawer title="导入数据" closable v-model="importModalVisible" width="800" draggable>
			<div style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        ">
				<Upload action :before-upload="beforeUploadImport" accept=".xls, .xlsx">
					<Button :loading="reading" icon="ios-cloud-upload-outline"
						style="margin-right: 10px">上传Excel文件</Button>
					<span v-if="uploadfile.name">当前选择文件：{{ uploadfile.name }}</span>
				</Upload>
				<Button @click="clearImportData" icon="md-trash">清空数据</Button>
			</div>
			<Alert type="warning" show-icon>导入前请下载查看导入模版数据文件查看所需字段及说明，确保数据格式正确，不得修改列英文名称</Alert>
			<Table :columns="importColumns" border :height="height" :data="importTableData" ref="importTable"></Table>
			<div class="drawer-footer">
				<Button @click="downloadTemple" type="info">下载导入模板</Button>
				<div style="position: absolute; right: 15px; display: inline-block">
					<Button @click="importModalVisible = false">关闭</Button>
					<Button :loading="importLoading" :disabled="importTableData.length <= 0" @click="importData"
						style="margin-left: 8px" type="primary">
						确认导入
						<span v-if="importTableData.length > 0">{{ importTableData.length }} 条数据</span>
					</Button>
				</div>
			</div>
		</Drawer>

		<addEdit :data="form" :type="showType" v-model="showOrder" @on-submit="getDataList" />
	</div>
</template>

<script>
	import {
		getLogisticsOrderPageList,
		getLogisticsOrderStatistics,
		batchUpdateOrderStatus,
		findByMobile,
		enableUser,
		getLogisticsAddressBookPageList,
		disableUser,
		deleteOrder,
		getAllUserData,
		importUserData,
		resetUserPass,
		getDictDataByType,
	} from "@/api/index";
	import {
		getAllLogiticsCompanyData,
		getLogiticsCompanyData,
	} from "@/api/app";
	import {
		shortcuts
	} from "@/libs/shortcuts";
	// 模版导入文件表数据
	import {
		userColumns,
		userData
	} from "./importTemplate";
	// 指定导出列数据
	import {
		exportColumn
	} from "./exportColumn";
	import excel from "@/libs/excel";
	import addEdit from "./addEdit.vue";
	import dict from "@/views/my-components/hiver/dict";
	export default {
		name: "order-manage",
		components: {
			addEdit,
			dict,
		},
		data() {
			return {
				tableSize: "default",
				height: 510,
				wuliuValue:'',
				loading1: false,
				loading2: false,
				showOrder: false,
				clearShou: false,
				clearWuLiu: false,
				clearFa: false,
				shouList: [],
				wuliuList: [],
				shou: '',
				fa: '',
				faList: [],
				orderStatistics: {},
				showType: "0",
				openSearch: true,
				openTip: true,
				loading: true,
				reading: false,
				importLoading: false,
				loadingExport: true,
				exportModalVisible: false,
				importModalVisible: false,
				drop: false,
				dropDownContent: "展开",
				dropDownIcon: "ios-arrow-down",
				selectList: [],
				searchForm: {
					pageNum: 1,
					pageSize: 10,
					searchStr: '',
					orderStatus: '',
					companyName: "",
					companyId: "",
					circuitName: "",
					circuitId: "",
					arrivalStationId: "",
					shipperName: "",
					shipperId: "",
					shipperMobile: "",
					shipperAddress: "",
					receiverName: "",
					receiverId: "",
					startDate: "",
					endDate: ""
				},
				selectDate: null,
				options: {
					shortcuts: shortcuts,
				},
				form: {},
				columns: [{
						type: "selection",
						width: 60,
						align: "center",
						fixed: "left",
					},
					{
						type: "index",
						width: 60,
						align: "center",
						fixed: "left",
					},
					{
						title: "发站",
						key: "goStationName",
						width: 150,
						align: "center",
					},
					{
						title: "到站",
						key: "arrivalStationName",
						width: 150,
						align: "center",
					},
					{
						title: "单号",
						key: "orderNumber",
						minWidth: 165,
						render: (h, params) => {
							return h(
								"a", {
									on: {
										click: () => {
											this.showDetail(params.row);
										},
									},
								},
								params.row.orderNumber
							);
						},
					},
					{
						title: "物品名称",
						key: "objectName",
						width: 100,
						align: "center",
					},
					{
						title: "物流公司",
						key: "companyName",
						width: 100,
						align: "center",
					},
					{
						title: "件数",
						key: "count",
						width: 100,
						align: "center",
					},
					{
						title: "收货人",
						key: "receiverName",
						width: 150,
						align: "center",
					},
					{
						title: "重量",
						key: "weight",
						width: 100,
						align: "center",
					},
					{
						title: "运费",
						key: "freight",
						width: 100,
						align: "center",
					},
					{
						title: "总费用",
						key: "allCost",
						width: 100,
						align: "center",
					},
					{
						title: "现金",
						key: "methodOfSettlement",
						minWidth: 100,
						render: (h, params) => {
							let re = "",
								color = "";
							if (params.row.methodOfSettlement == 0) {
								re = params.row.allCost;
								color = "blue";
							}
							return h("div", [
								re
							]);
						},
					},
					{
						title: "月结",
						key: "methodOfSettlement",
						minWidth: 100,
						render: (h, params) => {
							let re = "",
								color = "";
							if (params.row.methodOfSettlement == 1) {
								re = params.row.allCost;
								color = "yellow";
							}
							return h("div", [
								re
							]);
						},
					},
					{
						title: "小费",
						key: "tips",
						width: 100,
						align: "center",
					},
					{
						title: "状态",
						key: "orderStatus",
						minWidth: 100,
						render: (h, params) => {
							let re = "",
								color = "";
							if (params.row.orderStatus == "0") {
								re = "已付";
								color = "blue";
							} else if (params.row.orderStatus == "1") {
								re = "未付";
								color = "red";
							} else if (params.row.orderStatus == "2") {
								re = "挂单";
								color = "yellow";
							}
							return h("div", [
								h(
									"a", {
										props: {
											color: color,
										},
										on: {
											click: () => {
												this.checkOrderStatus(params.row, params.row
													.orderStatus == '2' || params.row
													.orderStatus == '1' ? '0' : '1');
											},
										},
									},
									re
								)
							]);
						},
					},
					{
						title: "备注",
						key: "remark",
						width: 200,
						align: "center",
					},
					{
						title: "操作",
						key: "action",
						width: 170,
						align: "center",
						fixed: "right",
						render: (h, params) => {
							return h("div", [
								h(
									"a", {
										on: {
											click: () => {
												this.edit(params.row);
											},
										},
									},
									"修改"
								),
								h("Divider", {
									props: {
										type: "vertical",
									},
								}),
								h(
									"a", {
										on: {
											click: () => {
												this.remove(params.row);
											},
										},
									},
									"确认"
								),
								h("Divider", {
									props: {
										type: "vertical",
									},
								}),
								h(
									"a", {
										on: {
											click: () => {
												this.getDetail(params.row);
											},
										},
									},
									"查看详情"
								),
							]);
						},
					},
				],
				exportColumns: exportColumn,
				chooseColumns: [],
				filename: "订单数据",
				exportTitle: "确认导出",
				exportType: "",
				importTableData: [],
				importColumns: [],
				uploadfile: {
					name: "",
				},
				tempColumns: userColumns,
				tempData: userData,
				data: [],
				exportData: [],
				total: 0,
				dictData: [{
					title: "全部",
					value: ""
				}, {
					title: "已付",
					value: 0
				}, {
					title: "未付",
					value: 1
				}, {
					title: "挂单",
					value: 2
				}],
			};
		},
		computed: {
			colHidden: function() {
				return this.columns.filter(function(e) {
					return !e.hidden;
				})
			}
		},
		mounted() {
			// 计算高度
			this.height = Number(document.documentElement.clientHeight - 230);
			let dayTime = this.getMonth()
			this.selectDate = [dayTime, dayTime]
			this.searchForm.startDate = dayTime
			this.searchForm.endDate = dayTime
			this.init();
		},
		methods: {
			init() {
				this.getLogisticsInfo()
				// 初始化导出列数据
				let array = [];
				this.exportColumns.forEach((e) => {
					// 指定列限制权限
					//e.disabled = false;
					array.push(e.title);
				});
				this.chooseColumns = array;

			},
			checkOrderStatus(v, status) {
				let listStr = ''
				if (v == '') {

					console.log('selectList', this.selectList)
					for (let i = 0; i < this.selectList.length; i++) {
						if (this.selectList.length != (i + 1)) {
							listStr += this.selectList[i].id + ','
						} else {
							listStr += this.selectList[i].id
						}
					}
				}

				this.$Modal.confirm({
					title: "确认更改",
					content: "您确认要更改此条数据吗?",
					loading: true,
					onOk: () => {
						batchUpdateOrderStatus({
							orderIds: v == '' ? listStr : v.id,
							status: status
						}).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.$Message.success("修改成功");
								this.getDataList();
							}
						});
					},
				});
			},
			getMonth() {
				let date = new Date()
				let year = date.getFullYear().toString() //'年'
				let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1)
					.toString() //'月'
				let da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString() //'日'
				let single = year + '-' + month + '-' + da //当天
				return single
			},
			checkStatus(v) {
				console.log('下拉框选择', v)
				this.searchForm.orderStatus = v
			},
			handleDropdown(name) {
				if (name == "exportData") {
					if (this.selectList.length <= 0) {
						this.$Message.warning("您还未选择要导出的数据");
						return;
					}
					this.exportType = "part";
					this.exportModalVisible = true;
					for (let i = 0; i < this.selectList.length; i++) {
						// this.selectList[i].orderStatus = this.selectList[i].orderStatus == 0 ? '已付' : this.selectList[i]
						// 	.orderStatus == 1 ? '未付' : this.selectList[i].orderStatus == 2 ? '挂单' : ""
						if (this.selectList[i].methodOfSettlement == 0) { //现金
							this.selectList[i].xianjin = this.selectList[i].allCost
							this.selectList[i].yuefu = ""
						} else if (this.selectList[i].methodOfSettlement == 1) {
							this.selectList[i].xianjin = ""
							this.selectList[i].yuefu = this.selectList[i].allCost
						}
						// this.selectList[i].methodOfSettlement = this.selectList[i].methodOfSettlement == 0 ? '现金' : this
						// 	.selectList[i].methodOfSettlement == 1 ? '月付' : this.selectList[i].methodOfSettlement == 2 ?
						// 	'提付' : ""

					}
					this.exportTitle = "确认导出 " + this.selectList.length + " 条数据";
				} else if (name == "exportAll") {
					this.exportType = "all";
					this.exportModalVisible = true;
					this.exportTitle = "确认导出全部 " + this.total + " 条数据";
					this.searchForm.pageSize = 10000
					getLogisticsOrderPageList(this.searchForm).then((res) => {
						this.loading = false;
						if (res.success) {
							for (let i = 0; i < res.result.records.length; i++) {
								// res.result.records[i].orderStatus = res.result.records[i].orderStatus == 0 ? '已付' :
								// 	res.result.records[i].orderStatus == 1 ? '未付' : res.result.records[i]
								// 	.orderStatus == 2 ? '挂单' : ""
								if (res.result.records[i].methodOfSettlement == 0) { //现金
									res.result.records[i].xianjin = res.result.records[i].allCost
									res.result.records[i].yuefu = ""
								} else if (res.result.records[i].methodOfSettlement == 1) {
									res.result.records[i].xianjin = ""
									res.result.records[i].yuefu = res.result.records[i].allCost
								}
								// res.result.records[i].methodOfSettlement = res.result.records[i]
								// 	.methodOfSettlement == 0 ? '现金' : res.result.records[i].methodOfSettlement ==
								// 	1 ? '月付' : res.result.records[i].methodOfSettlement == 2 ? '提付' : ""

							}
							console.log(res.result.records)
							this.exportData = res.result.records;
						}
					});


				}
			},
			handleSelectDep(v) {
				this.searchForm.departmentId = v;
			},
			changePage(v) {
				this.searchForm.pageNum = v;
				this.getDataList();
				this.clearSelectAll();
			},
			changePageSize(v) {
				this.searchForm.pageSize = v;
				this.getDataList();
			},
			selectDateRange(v) {
				if (v) {
					console.log(v)
					this.searchForm.startDate = v[0];
					this.searchForm.endDate = v[1];
				}
			},
			clearWuLiuValue(){
				console.log('wuliuValue',this.wuliuValue)
				this.searchForm.companyId = ""
				this.searchForm.companyName = ""
			},
			checkWuLiuValue(v) {
				this.searchForm.companyId = v.id
				this.searchForm.companyName = v.companyName
			},
			checkShouValue(v) {
				if (this.clearShou == true) {
					this.searchForm.receiverId = ""
					this.searchForm.receiverName = ""
					this.searchForm.receiverMobile = ""
				} else {
					console.log('shou', v)
					this.searchForm.receiverId = v.id
				}

			},
			checkFaValue(v) {
				if (this.clearFa == true) {
					this.searchForm.shipperId = ""
					this.searchForm.shipperName = ""
					this.searchForm.shipperMobile = ""
				} else {
					console.log('发', v)
					this.searchForm.shipperId = v.id
				}

			},
			getWuLiuValue(v) {
				console.log('物流',v)
				this.searchForm.companyName = v
				
				getLogiticsCompanyData({
					companyName: v,
					id: "",
					contacts: "",
					mobile: "",
					pageNumber: 1,
					pageSize: 10,
					sort: "createTime",
					order: "desc",
					startDate: "",
					endDate: "",
					signCompany: "",
				}).then((res) => {
					this.loading = false;
					if (res.success) {
						this.wuliuList = res.result.content
					}
				});

			},
			getShouValue(v) {
				console.log(v)
				this.searchForm.receiverName = v
				getLogisticsAddressBookPageList({
					pageNum: 1,
					pageSize: 100,
					keyWord: v,
					companyId: this.searchForm.companyId,
					addressType: '2'
				}).then((res) => {
					this.loading = false;
					if (res.success) {
						this.shouList = res.result.records
					}
				});

			},
			getFaValue(v) {
				console.log(v)
				this.searchForm.shipperName = v
				getLogisticsAddressBookPageList({
					pageNum: 1,
					pageSize: 100,
					keyWord: v,
					companyId: this.searchForm.companyId,
					addressType: '1'
				}).then((res) => {
					this.loading = false;
					if (res.success) {
						this.faList = res.result.records
					}
				});
			},

			changeTableSize(v) {
				this.tableSize = v;
			},
			//根据登录手机号查询所属物流公司信息
			getLogisticsInfo() {
				findByMobile({
					mobile: JSON.parse(window.localStorage.getItem("userInfo")).mobile
				}).then((res) => {
					this.loading = false;
					if (res.success) {
						this.searchForm.companyId = res.result[0].companyId
						this.getAllNum()
						this.getDataList();
					}
				});
			},
			//查询统计数据
			getAllNum() {
				getLogisticsOrderStatistics({
					companyId: this.searchForm.companyId,
					startDate: this.searchForm.startDate,
					endDate: this.searchForm.endDate
				}).then((res) => {
					this.loading = false;
					if (res.success) {
						this.orderStatistics = res.result
					}
				});
			},
			getDataList() {
				this.loading = true;
				getLogisticsOrderPageList(this.searchForm).then((res) => {
					this.loading = false;
					if (res.success) {
						this.data = res.result.records;
						this.total = res.result.total;
						if (this.data.length == 0 && this.searchForm.pageNum > 1) {
							this.searchForm.pageNum -= 1;
							this.getDataList();
						}
					}
				});
			},
			handleSearch() {
				this.searchForm.pageNum = 1;
				this.searchForm.pageSize = 10;
				this.getDataList();
			},
			handleReset() {
				this.$refs.searchForm.resetFields();
				this.searchForm.pageNum = 1;
				this.searchForm.pageSize = 10;
				this.selectDate = null;
				let dayTime = this.getMonth()
				this.selectDate = [dayTime, dayTime]
				this.searchForm.startDate = dayTime
				this.searchForm.endDate = dayTime
				this.searchForm.searchStr = "";
				
				this.searchForm.companyId = "";
				this.searchForm.companyName = "";
				this.$refs.dep.clearSelect();
				this.searchForm.departmentId = "";
				// 重新加载数据
				this.getDataList();
			},
			changeSort(e) {
				this.searchForm.sort = e.key;
				this.searchForm.order = e.order;
				if (e.order == "normal") {
					this.searchForm.order = "";
				}
				this.getDataList();
			},
			exportCustomData() {
				if (this.filename == "") {
					this.filename = "用户数据";
				}
				// 判断勾选导出列
				let exportColumns = [];
				this.exportColumns.forEach((e) => {
					this.chooseColumns.forEach((c) => {
						if (e.title == c && !e.disabled) {
							exportColumns.push(e);
						}
					});
				});
				this.exportModalVisible = false;
				let title = [];
				let key = [];
				exportColumns.forEach((e) => {
					title.push(e.title);
					key.push(e.key);
				});
				const params = {
					title: title,
					key: key,
					data: this.exportData,
					autoWidth: true,
					filename: this.filename,
				};
				excel.export_array_to_excel(params);
			},
			beforeUploadImport(file) {
				this.uploadfile = file;
				const fileExt = file.name.split(".").pop().toLocaleLowerCase();
				if (fileExt == "xlsx" || fileExt == "xls") {
					this.readFile(file);
					this.file = file;
				} else {
					this.$Notice.warning({
						title: "文件类型错误",
						desc: "所选文件‘ " +
							file.name +
							" ’不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。",
					});
				}
				return false;
			},
			// 读取文件
			readFile(file) {
				this.reading = true;
				const reader = new FileReader();
				reader.readAsArrayBuffer(file);
				reader.onerror = (e) => {
					this.reading = false;
					this.$Message.error("文件读取出错");
				};
				reader.onload = (e) => {
					const data = e.target.result;
					const {
						header,
						results
					} = excel.read(data, "array");
					const tableTitle = header.map((item) => {
						return {
							title: item,
							key: item,
							minWidth: 130,
							align: "center"
						};
					});
					this.importTableData = results;
					this.importColumns = tableTitle;
					this.reading = false;
					this.$Message.success("读取数据成功");
				};
			},
			clearImportData() {
				this.importTableData = [];
				this.importColumns = [];
				this.uploadfile = {};
			},
			downloadTemple() {
				let title = [];
				let key = [];
				userColumns.forEach((e) => {
					title.push(e.title);
					key.push(e.key);
				});
				const params = {
					title: title,
					key: key,
					data: userData,
					autoWidth: true,
					filename: "导入用户数据模版",
				};
				excel.export_array_to_excel(params);
			},
			importData() {
				this.importLoading = true;
				importUserData(this.importTableData).then((res) => {
					this.importLoading = false;
					if (res.success) {
						this.importModalVisible = false;
						this.getDataList();
						this.$Modal.info({
							title: "导入结果",
							content: res.message,
						});
					}
				});
			},
			showDetail(v) {
				// 转换null为""
				for (let attr in v) {
					if (v[attr] == null) {
						v[attr] = "";
					}
				}
				let str = JSON.stringify(v);
				let data = JSON.parse(str);
				this.form = data;
				if (this.form.methodOfSettlement == 0) { //现金
					this.form.xianjin = this.form.allCost
					this.form.yuefu = ""
				} else if (this.form.methodOfSettlement == 1) {
					this.form.xianjin = ""
					this.form.yuefu = this.form.allCost
				}
				this.showType = "0";
				this.showOrder = true;
			},
			add() {
				this.showType = "2";
				this.showOrder = true;
			},
			edit(v) {
				// 转换null为""
				for (let attr in v) {
					if (v[attr] == null) {
						v[attr] = "";
					}
				}
				let str = JSON.stringify(v);
				let data = JSON.parse(str);
				this.form = data;
				if (this.form.methodOfSettlement == 0) { //现金
					this.form.xianjin = this.form.allCost
					this.form.yuefu = ""
				} else if (this.form.methodOfSettlement == 1) {
					this.form.xianjin = ""
					this.form.yuefu = this.form.allCost
				}
				this.showType = "1";
				this.showOrder = true;
				console.log('this.form', this.form)
			},
			enable(v) {
				this.$Modal.confirm({
					title: "确认启用",
					content: "您确认要启用用户 " + v.username + " ?",
					loading: true,
					onOk: () => {
						enableUser(v.id).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.$Message.success("操作成功");
								this.getDataList();
							}
						});
					},
				});
			},
			disable(v) {
				this.$Modal.confirm({
					title: "确认禁用",
					content: "您确认要禁用用户 " + v.username + " ?",
					loading: true,
					onOk: () => {
						disableUser(v.id).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.$Message.success("操作成功");
								this.getDataList();
							}
						});
					},
				});
			},
			getDetail(v) {
				this.showDetail(v);
			},
			dropDown() {
				if (this.drop) {
					this.dropDownContent = "展开";
					this.dropDownIcon = "ios-arrow-down";
				} else {
					this.dropDownContent = "收起";
					this.dropDownIcon = "ios-arrow-up";
				}
				this.drop = !this.drop;
			},
			showSelect(e) {
				this.exportData = e;
				this.selectList = e;
			},
			clearSelectAll() {
				this.$refs.table.selectAll(false);
			},
			delAll() {
				if (this.selectList.length <= 0) {
					this.$Message.warning("您还未选择要删除的数据");
					return;
				}
				this.$Modal.confirm({
					title: "确认删除",
					content: "您确认要删除所选的 " + this.selectList.length + " 条数据?",
					loading: true,
					onOk: () => {
						let ids = "";
						this.selectList.forEach(function(e) {
							ids += e.id + ",";
						});
						ids = ids.substring(0, ids.length - 1);
						deleteUser({
							ids: ids
						}).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.$Message.success("删除成功");
								this.clearSelectAll();
								this.getDataList();
							}
						});
					},
				});
			},
		}
	};
</script>