<template>
	<el-dialog title="导出拓客活动" :close-on-click-modal="false" :visible.sync="visible" width="500px">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
			<el-form-item label="导出格式" prop="fileType">
				<el-radio-group v-model="dataForm.fileType">
					<el-radio label="excel">Excel</el-radio>
					<el-radio label="csv">CSV</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="导出范围" prop="exportRange">
				<el-radio-group v-model="dataForm.exportRange">
					<el-radio label="all">全部数据</el-radio>
					<el-radio label="current">当前页</el-radio>
					<el-radio label="selected">选中数据</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="导出字段" prop="fields">
				<el-checkbox-group v-model="dataForm.fields">
					<el-checkbox label="eventName">活动名称</el-checkbox>
					<el-checkbox label="eventNumber">活动编号</el-checkbox>
					<el-checkbox label="eventCoordinator">活动负责人</el-checkbox>
					<el-checkbox label="startTime">开始时间</el-checkbox>
					<el-checkbox label="endTime">结束时间</el-checkbox>
					<el-checkbox label="memberCount">参与人数</el-checkbox>
					<el-checkbox label="createTime">创建时间</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="文件名" prop="fileName">
				<el-input v-model="dataForm.fileName" placeholder="请输入文件名" />
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="dataFormSubmit()" :loading="exportLoading">确定导出</el-button>
		</span>
	</el-dialog>
</template>

<script>
import { exportLqEvent } from '@/api/extend/lqevent'
import { saveAs } from 'file-saver'

export default {
	name: 'LqEventExportBox',
	data() {
		return {
			visible: false,
			exportLoading: false,
			dataForm: {
				fileType: 'excel',
				exportRange: 'all',
				fields: ['eventName', 'eventNumber', 'eventCoordinator', 'startTime', 'endTime', 'memberCount', 'createTime'],
				fileName: '拓客活动数据'
			},
			dataRule: {
				fileType: [
					{ required: true, message: '请选择导出格式', trigger: 'change' }
				],
				exportRange: [
					{ required: true, message: '请选择导出范围', trigger: 'change' }
				],
				fields: [
					{ required: true, message: '请选择导出字段', trigger: 'change' }
				],
				fileName: [
					{ required: true, message: '请输入文件名', trigger: 'blur' }
				]
			}
		}
	},
	methods: {
		init() {
			this.visible = true
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields()
				this.dataForm = {
					fileType: 'excel',
					exportRange: 'all',
					fields: ['eventName', 'eventNumber', 'eventCoordinator', 'startTime', 'endTime', 'memberCount', 'createTime'],
					fileName: '拓客活动数据'
				}
			})
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (valid) {
					this.exportLoading = true
					
					const exportData = {
						...this.dataForm,
						query: this.$parent.query || {}
					}
					
					exportLqEvent(exportData).then(response => {
						// 创建文件名
						const timestamp = new Date().getTime()
						const fileExtension = this.dataForm.fileType === 'excel' ? 'xlsx' : 'csv'
						const fileName = `${this.dataForm.fileName}_${timestamp}.${fileExtension}`
						
						// 保存文件
						const blob = new Blob([response], {
							type: this.dataForm.fileType === 'excel' 
								? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
								: 'text/csv;charset=utf-8'
						})
						saveAs(blob, fileName)
						
						this.$message({
							message: '导出成功',
							type: 'success'
						})
						this.visible = false
						this.exportLoading = false
					}).catch(() => {
						this.exportLoading = false
					})
				}
			})
		}
	}
}
</script>

<style scoped>
.dialog-footer {
	text-align: right;
}

.el-checkbox-group {
	display: flex;
	flex-wrap: wrap;
}

.el-checkbox {
	margin-right: 20px;
	margin-bottom: 10px;
}
</style>
