<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<!-- 查询条件 -->
			<el-row class="NCC-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="门店">
							<el-select v-model="query.storeId" placeholder="请选择门店" clearable filterable>
								<el-option v-for="store in storeOptions" :key="store.id" :label="store.dm" :value="store.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="支出分类">
							<el-select v-model="query.expenseCategoryId" placeholder="请选择支出分类" clearable filterable>
								<el-option v-for="category in categoryOptions" :key="category.id" :label="category.typeName" :value="category.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="支出日期">
							<el-date-picker
								v-model="dateRange"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								format="yyyy-MM-dd"
								value-format="yyyy-MM-dd"
								style="width: 100%"
								clearable
							/>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<!-- 列表 -->
			<div class="NCC-common-layout-main NCC-flex-main">
				<div class="NCC-common-head">
					<div>
						<el-button type="primary" icon="el-icon-plus" @click="add()">添加店内支出</el-button>
						<el-button type="success" icon="el-icon-upload2" @click="handleImport()">导入</el-button>
						<el-button type="warning" icon="el-icon-download" @click="handleExport()">导出</el-button>
						<el-button type="text" icon="el-icon-download" @click="downloadTemplate()">下载模版</el-button>
					</div>
					<div class="NCC-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="initData()" />
						</el-tooltip>
						<screenfull isContainer />
					</div>
				</div>
				<NCC-table v-loading="loading" :data="list" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
					<el-table-column label="门店名称" align="center" prop="storeName" width="150">
						<template slot-scope="scope">
							<div class="store-info">
								<i class="el-icon-shop store-icon"></i>
								<span class="text-nowrap">{{ scope.row.storeName || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="支出分类" align="center" prop="expenseCategoryName" width="150">
						<template slot-scope="scope">
							<span>{{ scope.row.expenseCategoryName || '无' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="支出日期" align="center" prop="expenseDate" width="120">
						<template slot-scope="scope">
							<span>{{ formatDate(scope.row.expenseDate) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="单价" align="center" prop="unitPrice" width="100">
						<template slot-scope="scope">
							<span v-if="scope.row.unitPrice">¥{{ formatMoney(scope.row.unitPrice) }}</span>
							<span v-else>无</span>
						</template>
					</el-table-column>
					<el-table-column label="数量" align="center" prop="quantity" width="80">
						<template slot-scope="scope">
							<span>{{ scope.row.quantity || '无' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="金额" align="center" prop="amount" width="120">
						<template slot-scope="scope">
							<span class="amount-text">¥{{ formatMoney(scope.row.amount) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="备注" align="center" prop="memo" min-width="150">
						<template slot-scope="scope">
							<span>{{ scope.row.memo || '无' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="创建人" align="center" prop="createUser" width="120">
						<template slot-scope="scope">
							<span>{{ scope.row.createUser || '无' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="创建时间" align="center" prop="createTime" width="180">
						<template slot-scope="scope">
							<span>{{ formatDateTime(scope.row.createTime) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200" align="left" fixed="right">
						<template slot-scope="scope">
							<div class="action-buttons">
								<el-button type="text" icon="el-icon-edit" @click="edit(scope.row)" class="edit-btn">编辑</el-button>
								<el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" class="delete-btn">删除</el-button>
							</div>
						</template>
					</el-table-column>
				</NCC-table>
				<pagination :total="total" :page.sync="query.currentPage" :limit.sync="query.pageSize" @pagination="initData" />
			</div>
		</div>
		<!-- 表单弹窗 -->
		<FormDialog v-if="formDialogVisible" ref="FormDialog" @refresh="initData" />
		<!-- 导入弹窗 -->
		<ImportDialog v-if="importDialogVisible" ref="ImportDialog" @refresh="initData" />
	</div>
</template>

<script>
import request from '@/utils/request'
import define from '@/utils/define'
import FormDialog from './form-dialog.vue'
import ImportDialog from './import-dialog.vue'

export default {
	components: { FormDialog, ImportDialog },
	data() {
		return {
			loading: false,
			list: [],
			total: 0,
			query: {
				currentPage: 1,
				pageSize: 20,
				storeId: undefined,
				storeName: undefined,
				expenseCategoryId: undefined,
				expenseDateStart: undefined,
				expenseDateEnd: undefined
			},
			dateRange: [],
			storeOptions: [],
			categoryOptions: [],
			formDialogVisible: false,
			importDialogVisible: false
		}
	},
	created() {
		this.initStoreOptions()
		this.initCategoryOptions()
		this.initData()
	},
	methods: {
		initData() {
			this.loading = true
			let query = { ...this.query }
			// 处理日期范围
			if (this.dateRange && this.dateRange.length === 2) {
				query.expenseDateStart = this.dateRange[0]
				query.expenseDateEnd = this.dateRange[1]
			} else {
				query.expenseDateStart = undefined
				query.expenseDateEnd = undefined
			}
			// 移除空值
			Object.keys(query).forEach(key => {
				if (query[key] === undefined || query[key] === null || query[key] === '') {
					delete query[key]
				}
			})
			request({
				url: '/api/Extend/LqStoreExpense',
				method: 'GET',
				data: query
			}).then(res => {
				if (res.code == 200 && res.data) {
					this.list = res.data.list || []
					this.total = res.data.pagination ? res.data.pagination.total : 0
				} else {
					this.list = []
					this.total = 0
				}
				this.loading = false
			}).catch(() => {
				this.loading = false
				this.list = []
				this.total = 0
			})
		},
		initStoreOptions() {
			request({
				url: '/api/Extend/LqMdxx',
				method: 'GET',
				data: {
					currentPage: 1,
					pageSize: 1000
				}
			}).then(res => {
				if (res.data && res.data.list) {
					this.storeOptions = res.data.list
				}
			}).catch(() => {
				this.storeOptions = []
			})
		},
		initCategoryOptions() {
			request({
				url: '/api/Extend/LqReimbursementCategory',
				method: 'GET',
				data: {
					currentPage: 1,
					pageSize: 1000
				}
			}).then(res => {
				if (res.data && res.data.list) {
					this.categoryOptions = res.data.list
				}
			}).catch(() => {
				this.categoryOptions = []
			})
		},
		search() {
			this.query.currentPage = 1
			this.initData()
		},
		reset() {
			this.query = {
				currentPage: 1,
				pageSize: 20,
				storeId: undefined,
				storeName: undefined,
				expenseCategoryId: undefined,
				expenseDateStart: undefined,
				expenseDateEnd: undefined
			}
			this.dateRange = []
			this.initData()
		},
		add() {
			this.formDialogVisible = true
			this.$nextTick(() => {
				this.$refs.FormDialog.init()
			})
		},
		edit(row) {
			this.formDialogVisible = true
			this.$nextTick(() => {
				this.$refs.FormDialog.init(row.id)
			})
		},
		handleDelete(row) {
			this.$confirm('确定要删除该店内支出记录吗？', '提示', {
				type: 'warning'
			}).then(() => {
				request({
					url: `/api/Extend/LqStoreExpense/${row.id}`,
					method: 'DELETE'
				}).then(res => {
					this.$message({
						type: 'success',
						message: res.msg || '删除成功',
						onClose: () => {
							this.initData()
						}
					})
				}).catch(() => { })
			}).catch(() => { })
		},
		handleImport() {
			this.importDialogVisible = true
			this.$nextTick(() => {
				this.$refs.ImportDialog.init()
			})
		},
		downloadTemplate() {
			const templateUrl = 'https://erp.lvqianmeiye.com/moban/店内支出表.xlsx'
			window.location.href = templateUrl
			this.$message({
				type: 'success',
				message: '模板下载中...',
				duration: 1500
			})
		},
		handleExport() {
			let query = { ...this.query }
			// 处理日期范围
			if (this.dateRange && this.dateRange.length === 2) {
				query.expenseDateStart = this.dateRange[0]
				query.expenseDateEnd = this.dateRange[1]
			} else {
				query.expenseDateStart = undefined
				query.expenseDateEnd = undefined
			}
			// 移除空值和分页参数
			Object.keys(query).forEach(key => {
				if (query[key] === undefined || query[key] === null || query[key] === '' || key === 'currentPage' || key === 'pageSize') {
					delete query[key]
				}
			})
			request({
				url: '/api/Extend/LqStoreExpense/Actions/Export',
				method: 'GET',
				data: query
			}).then(res => {
				if (res.code === 200 && res.data && res.data.url) {
					window.location.href = define.comUrl + res.data.url
					this.$message({
						type: 'success',
						message: '导出成功'
					})
				} else {
					this.$message.error(res.msg || '导出失败')
				}
			}).catch(() => {
				this.$message.error('导出失败')
			})
		},
		formatDateTime(timestamp) {
			if (!timestamp) return '无'
			const date = new Date(timestamp)
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hours = String(date.getHours()).padStart(2, '0')
			const minutes = String(date.getMinutes()).padStart(2, '0')
			const seconds = String(date.getSeconds()).padStart(2, '0')
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
		},
		formatDate(timestamp) {
			if (!timestamp) return '无'
			const date = new Date(timestamp)
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			return `${year}-${month}-${day}`
		},
		formatMoney(amount) {
			if (amount === null || amount === undefined) return '0.00'
			return parseFloat(amount).toFixed(2)
		}
	}
}
</script>

<style lang="scss" scoped>
.text-nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.store-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.store-icon {
	color: #409EFF;
	font-size: 16px;
}

.amount-text {
	color: #F56C6C;
	font-weight: 600;
}

.action-buttons {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.edit-btn {
	color: #409EFF;

	&:hover {
		color: #66b1ff;
	}
}

.delete-btn {
	color: #F56C6C;

	&:hover {
		color: #f78989;
	}
}

::v-deep .el-table__row:hover {
	background-color: #f5f7fa;
}

::v-deep .el-table__header-wrapper {
	.el-table__header {
		th {
			background-color: #f5f7fa;
			color: #606266;
			font-weight: 600;
		}
	}
}
</style>

