<template>
	<div class="page dish-order-list-page">
		<el-form :inline="true" v-if="searchVisible" class="query-form m-b-10" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @submit.native.prevent>
			<el-form-item label="订单编号" prop="orderNo">
				<el-input v-model="searchForm.orderNo" placeholder="请输入订单编号" clearable></el-input>
			</el-form-item>
			<el-form-item label="包房名称" prop="roomName">
				<el-input v-model="searchForm.roomName" placeholder="请输入包房名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="订单状态" prop="orderStatus">
				<el-select v-model="searchForm.orderStatus" placeholder="请选择状态" clearable style="width: 130px">
					<el-option label="使用中" value="0"></el-option>
					<el-option label="已结账" value="1"></el-option>
					<el-option label="已取消" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="结账方式" prop="settleType">
				<el-select v-model="searchForm.settleType" placeholder="请选择方式" clearable style="width: 150px">
					<el-option label="结账" value="0"></el-option>
					<el-option label="折扣结账" value="1"></el-option>
					<el-option label="优惠结账" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="下单时间" prop="createTimes">
				<el-date-picker v-model="searchForm.createTimes" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
					value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始时间"
					end-placeholder="结束时间" placement="bottom-start" style="width: 360px">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="结账/取消时间" prop="settleTimes">
				<el-date-picker v-model="searchForm.settleTimes" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
					value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始时间"
					end-placeholder="结束时间" placement="bottom-start" style="width: 360px">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="refreshList()" icon="el-icon-search">查询</el-button>
				<el-button @click="resetSearch()" icon="el-icon-refresh-right">重置</el-button>
			</el-form-item>
		</el-form>

		<div class="jp-table top">
			<vxe-toolbar ref="toolbarRef" :refresh="{ query: refreshList }" export custom>
				<template #buttons>
					<!-- <el-button type="primary" v-if="hasPermission('psi:order:export')" icon="el-icon-download"
						@click="exportFile()">导出</el-button> -->
				</template>
				<template #tools>
					<vxe-button text type="primary" :title="searchVisible ? '收起检索' : '展开检索'" icon="vxe-icon-search"
						class="tool-btn" @click="searchVisible = !searchVisible"></vxe-button>
				</template>
			</vxe-toolbar>
			<div style="height: calc(100% - 90px)">
				<vxe-table :export-config="{
					remote: true,
					filename: `${moment(new Date()).format('YYYY-MM-DD')}订单数据导出`,
					sheetName: `${moment(new Date()).format('YYYY-MM-DD')}订单数据导出`,
					exportMethod: exportMethod,
					types: ['xls'],
					modes: ['current', 'selected', 'all']
				}" :menu-config="{}" border="inner" auto-resize resizable height="auto" :loading="loading" ref="orderTable"
					show-header-overflow show-overflow highlight-hover-row :data="dataList">
					<!-- 多选 -->
					<vxe-column type="checkbox" width="60"></vxe-column>
					<vxe-column type="seq" width="60" title="序号" field="rowNo"></vxe-column>
					<vxe-column min-width="170" align="center" title="订单编号" field="orderNo">
						<template #default="scope">
							<el-link v-if="hasPermission('psi:order:detail')" type="primary" :underline="false"
								@click="view(scope.row.id)">{{ scope.row.orderNo
								}}</el-link>
							<span v-else>{{ scope.row.orderNo }}</span>
						</template>
					</vxe-column>
					<vxe-column min-width="130" align="center" title="包房编号" field="roomNo"></vxe-column>
					<vxe-column min-width="150" align="center" title="包房名称" field="roomName"></vxe-column>
					<vxe-column min-width="180" align="center" title="下单时间" field="createTime"></vxe-column>
					<vxe-column min-width="180" align="center" title="结账时间/取消时间" field="settleTime"></vxe-column>
					<vxe-column width="100" align="center" title="订单状态" field="orderStatus">
						<template #default="scope">
							<el-tag :type="orderStatusTagType(scope.row.orderStatus)">
								{{ orderStatusName(scope.row.orderStatus) }}
							</el-tag>
						</template>
					</vxe-column>
					<vxe-column width="120" align="center" title="结账方式" field="settleType">
						<template #default="scope">
							<span>{{ settleTypeName(scope.row.settleType) }}</span>
						</template>
					</vxe-column>
					<vxe-column width="110" align="center" title="账单原金额" field="totalAmount">
						<template #default="scope">￥{{ formatMoney(scope.row.totalAmount) }}</template>
					</vxe-column>
					<vxe-column width="110" align="center" title="折扣比例" field="discountRate">
						<template #default="scope">{{ scope.row.settleType === '1' ? formatMoney(scope.row.discountRate)
							+ '%' : '-' }}</template>
					</vxe-column>
					<vxe-column width="110" align="center" title="优惠金额" field="discountAmount">
						<template #default="scope">￥{{ formatMoney(scope.row.discountAmount) }}</template>
					</vxe-column>
					<vxe-column width="110" align="center" title="实收金额" field="payableAmount">
						<template #default="scope">￥{{ formatMoney(scope.row.payableAmount) }}</template>
					</vxe-column>
					<vxe-column min-width="150" align="center" title="创建人" field="createName"></vxe-column>

					<vxe-column title="操作" width="100" fixed="right" align="center">
						<template #default="scope">
							<el-button text type="primary" size="small" @click="view(scope.row.id)"
								v-if="hasPermission('psi:order:detail')">详情</el-button>
						</template>
					</vxe-column>
				</vxe-table>
				<vxe-pager background :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
					:total="tablePage.total" :page-sizes="[10, 20, 100, 1000]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					@page-change="currentChangeHandle">
				</vxe-pager>
			</div>
		</div>

		<DishOrderInfoDialog ref="dishOrderInfoDialog"></DishOrderInfoDialog>
	</div>
</template>

<script>
import DishOrderService from '@/api/psi/DishOrderService'
import DishOrderInfoDialog from './DishOrderInfoDialog'
import moment from 'moment'
export default {
	components: {
		DishOrderInfoDialog
	},
	data() {
		return {
			searchVisible: true,
			searchForm: {
				orderNo: '',
				roomName: '',
				orderStatus: '',
				settleType: '',
				createTimes: [],
				settleTimes: []
			},
			dataList: [],
			tablePage: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
				orders: []
			},
			loading: false,
			tooltipConfig: {
				showAll: false,
				enterable: true,
			},
		}
	},
	dishOrderService: null,
	created() {
		this.dishOrderService = new DishOrderService()
	},
	mounted() {
		this.$nextTick(() => {
			// 将表格和工具栏进行关联
			const $table = this.$refs.orderTable;
			const $toolbar = this.$refs.toolbarRef;
			$table.connect($toolbar);
		});
		this.refreshList()

	},
	activated() {
		this.refreshList()
	},
	methods: {

		refreshList() {
			this.loading = true
			this.dishOrderService.orderList({
				current: this.tablePage.currentPage,
				size: this.tablePage.pageSize,
				orders: this.tablePage.orders,
				...this.searchForm
			}).then((data) => {
				this.dataList = data.records
				this.tablePage.total = data.total
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		// 自定义服务端导出
		exportMethod({ options }) {
			// 传给服务端的参数
			const params = {
				'current': this.tablePage.currentPage,
				'size': this.tablePage.pageSize,
				'orders': this.tablePage.orders,
				...this.searchForm,
				filename: options.filename,
				sheetName: options.sheetName,
				isHeader: options.isHeader,
				original: options.original,
				mode: options.mode,
				selectIds: options.mode === 'selected' ? options.data.map(item => item.id) : [],
				exportFields: this.getExportFields(options.columns)
			}
			return this.dishOrderService.exportFile(params).then((res) => {
				// 将二进制流文件写入excel表，以下为重要步骤
				this.$utils.downloadExcel(res, options.filename + ".xls")
			}).catch(function (err) {
				if (err.response) {
					console.log(err.response)
				}
			})
		},
		view(id) {
			this.$refs.dishOrderInfoDialog.init(id)
		},
		currentChangeHandle({ currentPage, pageSize }) {
			this.tablePage.currentPage = currentPage
			this.tablePage.pageSize = pageSize
			this.refreshList()
		},
		resetSearch() {
			this.$refs.searchForm.resetFields()
			this.tablePage.currentPage = 1
			this.refreshList()
		},
		exportFile() {
			const options = {
				filename: `${moment(new Date()).format('YYYY-MM-DD')}订单数据导出`,
				sheetName: '订单数据导出',
				mode: 'all'
			}
			const $table = this.$refs.orderTable
			const tableColumn = $table && $table.getTableColumn ? $table.getTableColumn() : null
			const columns = tableColumn ? tableColumn.visibleColumn : ($table && $table.getColumns ? $table.getColumns() : [])
			this.loading = true
			this.dishOrderService.exportFile({
				current: this.tablePage.currentPage,
				size: this.tablePage.pageSize,
				orders: this.tablePage.orders,
				exportFields: this.getExportFields(columns),
				...options,
				...this.searchForm
			}).then((res) => {
				this.$utils.downloadExcel(res, options.filename)
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		orderStatusName(value) {
			if (value === '0') {
				return '使用中'
			}
			if (value === '1') {
				return '已结账'
			}
			if (value === '2') {
				return '已取消'
			}
			return '-'
		},
		orderStatusTagType(value) {
			if (value === '0') {
				return 'warning'
			}
			if (value === '1') {
				return 'success'
			}
			if (value === '2') {
				return 'info'
			}
			return 'info'
		},
		settleTypeName(value) {
			if (value === '1') {
				return '折扣结账'
			}
			if (value === '2') {
				return '优惠结账'
			}
			if (value === '0') {
				return '结账'
			}
			return '-'
		},
		formatMoney(value) {
			return Number(value || 0).toFixed(2)
		},
		getExportFields(columns) {
			return (columns || []).map(column => column.property).filter(Boolean)
		}
	}
}
</script>

<style scoped>
.dish-order-list-page {
	display: flex;
	flex-direction: column;
}
</style>
