<template>
	<div class="container">
		<div class="search-area">
			<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
				<FormItem prop="name" label="企业名称：">
					<Input type="text" v-model="formInline.name" placeholder="" />
				</FormItem>
				<FormItem prop="credit_code" label="企业代码：">
					<Input type="text" v-model="formInline.credit_code" placeholder="" />
				</FormItem>
				<FormItem>
					<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
					<Button type="primary" @click="resetSubmit('formInline')" style="margin-left: 8px">重置</Button>
				</FormItem>
			</Form>
		</div>
		<div class="action-btn">
			<Button type="primary" @click="add">添加</Button>
			<!-- <Button type="error">删除</Button> -->
		</div>
		<div class="table-container">
			<Table border :columns="columns" stripe :height="tableHeight" :data="data">
				<template #action="{ row, index }">
					<Button type="primary" size="small" style="margin-right: 5px"
						@click="show_user_list(row.id)">员工账号</Button>
					<Button type="primary" size="small" style="margin-right: 5px" @click="show_car_list(row.id)">企业车辆</Button>
					<Button type="primary" size="small" style="margin-right: 5px" @click="show_rechage_list(row.id)">充值记录</Button>
					<Button type="primary" size="small" style="margin-right: 5px" @click="show_chage_list(row.id)">充电记录</Button>
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.id)">编辑</Button>
					<Button type="error" size="small" @click="remove(row.id)">删除</Button>
				</template>
			</Table>
			<Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
				@on-page-size-change="onChangePageSize" />
		</div>


		<!-- 添加、编辑 -->
		<Modal v-model="show_modal" :title="formValidate.id ? '编辑企业'  : '新增企业'" :mask-closable="false">
			<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
				<FormItem label="企业名称" prop="name">
					<Input v-model="formValidate.name" placeholder="请输入企业名称" />
				</FormItem>
				<FormItem label="企业统一社会信用代码" prop="credit_code">
					<Input v-model="formValidate.credit_code" placeholder="请输入企业统一社会信用代码" />
				</FormItem>
				<div style="display: flex;">
					<FormItem label="联系人" prop="username">
						<Input v-model="formValidate.username" placeholder="请输入联系人" />
					</FormItem>
					<FormItem label="联系电话" prop="phone">
						<Input v-model="formValidate.phone" placeholder="请输入联系电话" />
					</FormItem>
				</div>
				<FormItem label="折扣" prop="discount">
					<RadioGroup v-model="formValidate.discount">
						<Radio label="1">电费和服务费</Radio>
						<Radio label="2">仅服务费</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="折扣范围" prop="range">
					<Input v-model="formValidate.range" placeholder="请输入折扣">
					<template #suffix>
						<div style="line-height:32px;border-left:1px solid #c3b8b8;">%</div>
					</template>
					</Input>
				</FormItem>
				<FormItem label="扣款账户" prop="account">
					<RadioGroup v-model="formValidate.account">
						<Radio label="1">企业账户</Radio>
						<Radio label="2">个人钱包</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="备注" prop="marks">
					<Input v-model="formValidate.marks" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
						placeholder="请输入备注信息..." />
				</FormItem>
			</Form>
			<!--解决弹框自动关闭-->
			<div slot="footer">
				<Button type="text" @click="cancel">取消</Button>
				<Button type="primary" @click="ok">确定</Button>
			</div>

		</Modal>

		<!-- 员工账号 -->
		<Modal v-model="user_list_show_modal" title="员工账号" :mask-closable="false" :fullscreen="true"
			:footer-hide="true">
			<div class="action-btn">
				<Button type="primary" @click="addUser">添加</Button>
			</div>
			<div class="table-container">
				<Table border :columns="user_columns" stripe :height="tableHeight" :data="user_data">
					<template #group_id="{ row }">
						<strong v-if="row.group_id == 1">管理员</strong>
					</template>
					<template #action="{ row, index }">
						<Button type="primary" size="small" style="margin-right: 5px"
							@click="showUser(row.id)">编辑</Button>
						<Button type="error" size="small" @click="removeUser(row.id)">删除</Button>
					</template>
				</Table>
				<Page :total="user_total" show-total show-sizer class="page" @on-change="onChangeUserPage"
					@on-page-size-change="onChangeUserPageSize" />
			</div>
		</Modal>
		<!-- 员工账号 添加、编辑 -->
		<Modal v-model="user_show_modal" :title="formUserValidate.id ? '编辑员工账号' : '新增员工账号'" :mask-closable="false">
			<Form ref="formUserValidate" :model="formUserValidate" :rules="ruleUserValidate" :label-width="80">
				<FormItem label="联系电话" prop="phone">
					<Input v-model="formUserValidate.phone" placeholder="请输入联系电话" />
				</FormItem>
				<FormItem label="管理员" prop="group_id">
					<RadioGroup v-model="formUserValidate.group_id">
						<Radio label="1">是</Radio>
						<Radio label="0">否</Radio>
					</RadioGroup>
				</FormItem>
			</Form>
			<!--解决弹框自动关闭-->
			<div slot="footer">
				<Button type="text" @click="user_cancel">取消</Button>
				<Button type="primary" @click="user_ok">确定</Button>
			</div>

		</Modal>

		<!-- 企业车辆 -->
		<Modal v-model="car_list_show_modal" title="企业车辆" :mask-closable="false" :fullscreen="true"
			:footer-hide="true">
			<div class="action-btn">
				<Button type="primary" @click="addCar">添加</Button>
			</div>
			<div class="table-container">
				<Table border :columns="car_columns" stripe :height="tableHeight" :data="car_data">
					<template #vin_type="{ row }">
						{{ row.vin_type == 2 ? '关闭' : '开启' }}
					</template>
					<template #action="{ row, index }">
						<Button type="primary" size="small" style="margin-right: 5px"
							@click="showCar(row.id)">编辑</Button>
						<Button type="error" size="small" @click="removeCar(row.id)">删除</Button>
					</template>
				</Table>
				<Page :total="user_total" show-total show-sizer class="page" @on-change="onChangeUserPage"
					@on-page-size-change="onChangeUserPageSize" />
			</div>
		</Modal>
		<!-- 企业车辆 添加、编辑 -->
		<Modal v-model="car_show_modal" :title="formCarValidate.id ? '编辑车辆信息' : '新增企业车辆'" :mask-closable="false">
			<Form ref="formCarValidate" :model="formCarValidate" :rules="ruleCarValidate" :label-width="80">
				<FormItem label="车辆" prop="car_number">
					<Input v-model="formCarValidate.car_number" placeholder="请输入车辆车牌号" />
				</FormItem>
				<FormItem label="VIN码" prop="car_vin">
					<Input v-model="formCarValidate.car_vin" placeholder="请输入VIN码" />
				</FormItem>
				<FormItem label="内部编号" prop="car_no">
					<Input v-model="formCarValidate.car_no" placeholder="请输入内部编号" />
				</FormItem>
				<FormItem label="车辆所有人" prop="car_user">
					<Input v-model="formCarValidate.car_user" placeholder="请输入车辆所有人" />
				</FormItem>
				<FormItem label="VIN充电类型" prop="vin_type">
					<RadioGroup v-model="formCarValidate.vin_type">
						<Radio label="1">开启</Radio>
						<Radio label="2">关闭</Radio>
					</RadioGroup>
				</FormItem>
			</Form>
			<!--解决弹框自动关闭-->
			<div slot="footer">
				<Button type="text" @click="car_cancel">取消</Button>
				<Button type="primary" @click="car_ok">确定</Button>
			</div>

		</Modal>

	</div>
</template>

<script>
import {
	getEnterpriseList, getEnterpriseSave, getEnterpriseDelete, getEnterpriseRead, getEnterpriseUpdate,
	getEnterpriseUserList, getEnterpriseUserUpdate, getEnterpriseUserSave, getEnterpriseUserRead, getEnterpriseUserDelete,
	getEnterpriseCarList, getEnterpriseCarUpdate, getEnterpriseCarSave, getEnterpriseCarRead, getEnterpriseCarDelete } from '@/api'


export default {
	name: 'charging_station',
	data() {
		return {
			show_modal: false,
			total: 100,
			page: 1,
			pageSize: 10,
			tableHeight: 500,
			formInline: {
				name: '',
				credit_code: '',
			},
			ruleInline: {
			},
			columns: [{
				title: 'ID',
				key: 'id',
			},
			{
				title: '企业名称',
				key: 'name',
			},
			{
				title: '企业统一社会信用代码',
				key: 'credit_code',
			},
			{
				title: '账户余额',
				key: 'money',
			},
			{
				title: '联系人',
				key: 'username',
			},
			{
				title: '联系电话',
				key: 'phone',
			},
			{
				title: '操作',
				slot: 'action',
				width: 300,
				align: 'center',
			},
			],
			data: [],
			formValidate: {
				id: null,
				name: '',
				credit_code: '',
				username: '',
				phone: '',
				discount: '1',
				range: '',
				account: '1',
				marks: '',
			},
			ruleValidate: {
				name: [{
					required: true,
					message: '请输入企业名称',
					trigger: 'blur',
				}],
				credit_code: [{
					required: true,
					message: '请输入企业统一社会信用代码',
					trigger: 'blur',
				}],
				username: [{
					required: true,
					message: '请输入联系人',
					trigger: 'change',
				}],
				phone: [{
					required: true,
					message: '请输入联系电话',
					trigger: 'change',
				}],
			},
			// 用户
			user_list_show_modal: false,
			user_show_modal: false,
			user_columns: [{
				title: 'ID',
				key: 'id',
			},
			{
				title: '用户',
				key: 'phone',
			},
			{
				title: '管理员',
				slot: 'group_id',
			},
			{
				title: '操作',
				slot: 'action',
				width: 300,
				align: 'center',
			}],
			formUserValidate: {
				id: null,
				phone: '',
				group_id: '0',
				enterprise_id: '',
			},
			ruleUserValidate: {
				phone: [{
					required: true,
					message: '请输入联系电话',
					trigger: 'blur',
				}],
			},
			user_data: [],
			user_total: 0,
			userPage: 1,
			userPageSize: 10,
			// 车辆
			car_list_show_modal: false,
			car_show_modal: false,
			car_columns: [{
				title: 'ID',
				key: 'id',
			},
			{
				title: '车辆',
				key: 'car_number',
			},
			{
				title: 'VIN码',
				key: 'car_vin',
			},
			{
				title: '内部编号',
				key: 'car_no',
			},
			{
				title: '车辆所有人',
				key: 'car_user',
			},
			{
				title: 'VIN充电类型',
				slot: 'vin_type',
			},
			{
				title: '操作',
				slot: 'action',
				width: 300,
				align: 'center',
			}],
			formCarValidate: {
				id: null,
				car_number: '',
				car_vin: '',
				enterprise_id: '',
				car_no: '',
				car_user: '',
				vin_type: '1',
			},
			ruleCarValidate: {
				car_number: [{
					required: true,
					message: '请输入车辆车牌号',
					trigger: 'blur',
				}],
				car_vin: [{
					required: true,
					message: '请输入车辆VIN码',
					trigger: 'blur',
				}],
			},
			car_data: [],
			car_total: 0,
			carPage: 1,
			carPageSize: 10,
		}
	},
	mounted() {
		this.getList()
		this.calculateTableHeight()
		window.addEventListener('resize', this.calculateTableHeight)
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.calculateTableHeight)
	},
	methods: {
		calculateTableHeight() {
			// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
			const searchHeight = document.querySelector('.search-area').offsetHeight
			const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
			const pageHeight = 32 // 分页组件大约高度
			const margins = 40 // 上下边距总和
			this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
		},
		// 列表
		async getList() {
			await getEnterpriseList({
				page: this.page,
				pageSize: this.pageSize,
				...this.formInline,
			}).then((res) => {
				this.total = res.total
				this.data = res.data
			})
		},
		handleSubmit() {
			this.getList()
		},
		resetSubmit() {
			this.$refs.formInline.resetFields()
			this.getList()
		},
		// 详情
		async show(id) {
			await getEnterpriseRead({ id }).then(res => {
				this.formValidate = { ...res.data }
				this.formValidate.discount = String(this.formValidate.discount)
				this.formValidate.account = String(this.formValidate.account)
				this.show_modal = true
			})
		},
		// 删除
		async remove(id) {
			const confirm = await new Promise(resolve => {
				this.$Modal.confirm({
					title: '确认删除',
					content: '您确定要删除此项吗？',
					onOk: () => resolve(true),
					onCancel: () => resolve(false),
				})
			})

			if (!confirm) {
				this.$Message.info('已取消删除')
				return
			}

			await getEnterpriseDelete({ id }).then(res => {
				this.$Message.success(res.msg)
				this.getList()
			})
		},
		// 新增
		async ok() {
			const valid = await new Promise(resolve => this.$refs.formValidate.validate(resolve))

			if (!valid) {
				this.$Message.error('请正确填写表单')
				return
			}
			if (this.formValidate.id) {
				await getEnterpriseUpdate(this.formValidate).then(res => {
					this.$Message.success(res.msg)
					this.getList()
					this.cancel()
				})
			} else {
				await getEnterpriseSave(this.formValidate).then(res => {
					this.$Message.success(res.msg)
					this.getList()
					this.cancel()
				})
			}
		},
		add() {
			this.show_modal = true
			this.$refs.formValidate.resetFields()
			this.formValidate.id = ''
		},
		cancel() {
			this.$refs.formValidate.resetFields()
			this.show_modal = false
		},
		onChangePage(e) {
			if (this.page != e) {
				this.page = e
				this.getList()
			}
		},
		onChangePageSize(e) {
			if (this.pageSize != e) {
				this.page = 1
				this.pageSize = e
				this.getList()
			}
		},
		// 员工账号列表
		show_user_list(id) {
			this.user_list_show_modal = true
			this.formUserValidate.enterprise_id = id
			this.getEnterpriseUserList()
		},
		async getEnterpriseUserList() {
			await getEnterpriseUserList({
				enterprise_id: this.formUserValidate.enterprise_id,
				page: this.userPage,
				pageSize: this.userPageSize,
			}).then((res) => {
				this.user_data = res.data
				this.user_total = res.total
			})
		},
		// 添加员工账号 弹窗显示
		addUser() {
			this.$refs.formUserValidate.resetFields()
			this.formUserValidate.id = ''
			this.user_show_modal = true
		},
		// 关闭新增弹窗
		user_cancel() {
			this.user_show_modal = false
			this.$refs.formUserValidate.resetFields()
		},
		// 提交员工账号数据
		async user_ok() {
			const valid = await new Promise(resolve => this.$refs.formUserValidate.validate(resolve))

			if (!valid) {
				this.$Message.error('请正确填写表单')
				return
			}
			if (this.formUserValidate.id) {
				await getEnterpriseUserUpdate(this.formUserValidate).then(res => {
					this.$Message.success(res.msg)
					this.getEnterpriseUserList()
					this.user_cancel()
				})
			} else {
				await getEnterpriseUserSave(this.formUserValidate).then(res => {
					this.$Message.success(res.msg)
					this.getEnterpriseUserList()
					this.user_cancel()
				})
			}
		},
		// 编辑员工账号信息
		async showUser(id) {
			await getEnterpriseUserRead({ id }).then(res => {
				this.formUserValidate = { ...res.data }
				this.formUserValidate.group_id = String(this.formUserValidate.group_id)
				this.user_show_modal = true
			})
		},
		// 删除员工账号信息
		async removeUser(id) {
			const confirm = await new Promise(resolve => {
				this.$Modal.confirm({
					title: '确认删除',
					content: '您确定要删除此项吗？',
					onOk: () => resolve(true),
					onCancel: () => resolve(false),
				})
			})

			if (!confirm) {
				this.$Message.info('已取消删除')
				return
			}

			await getEnterpriseUserDelete({ id }).then(res => {
				this.$Message.success(res.msg)
				this.getEnterpriseUserList()
			})
		},
		onChangeUserPage(e) {
			if (this.userPage != e) {
				this.userPage = e
				this.getEnterpriseUserList()
			}
		},
		onChangeUserPageSize(e) {
			if (this.userPageSize != e) {
				this.userPage = 1
				this.userPageSize = e
				this.getEnterpriseUserList()
			}
		},
		// 企业车辆列表
		show_car_list(id) {
			this.car_list_show_modal = true
			this.formCarValidate.enterprise_id = id
			this.getEnterpriseCarList()
		},
		async getEnterpriseCarList() {
			await getEnterpriseCarList({
				enterprise_id: this.formCarValidate.enterprise_id,
				page: this.carPage,
				pageSize: this.carPageSize,
			}).then((res) => {
				this.car_data = res.data
				this.car_total = res.total
			})
		},
		// 添加车辆信息 弹窗显示
		addCar() {
			this.$refs.formCarValidate.resetFields()
			this.formCarValidate.id = ''
			this.car_show_modal = true
		},
		// 关闭新增弹窗
		car_cancel() {
			this.car_show_modal = false
			this.$refs.formCarValidate.resetFields()
		},
		// 提交车辆数据
		async car_ok() {
			const valid = await new Promise(resolve => this.$refs.formCarValidate.validate(resolve))

			if (!valid) {
				this.$Message.error('请正确填写表单')
				return
			}
			if (this.formCarValidate.id) {
				await getEnterpriseCarUpdate(this.formCarValidate).then(res => {
					this.$Message.success(res.msg)
					this.getEnterpriseCarList()
					this.car_cancel()
				})
			} else {
				await getEnterpriseCarSave(this.formCarValidate).then(res => {
					this.$Message.success(res.msg)
					this.getEnterpriseCarList()
					this.car_cancel()
				})
			}
		},
		// 编辑车辆信息
		async showCar(id) {
			await getEnterpriseCarRead({ id }).then(res => {
				this.formCarValidate = { ...res.data }
				this.formCarValidate.vin_type = String(this.formCarValidate.vin_type)
				this.car_show_modal = true
			})
		},
		// 删除车辆信息
		async removeCar(id) {
			const confirm = await new Promise(resolve => {
				this.$Modal.confirm({
					title: '确认删除',
					content: '您确定要删除此项吗？',
					onOk: () => resolve(true),
					onCancel: () => resolve(false),
				})
			})

			if (!confirm) {
				this.$Message.info('已取消删除')
				return
			}

			await getEnterpriseCarDelete({ id }).then(res => {
				this.$Message.success(res.msg)
				this.getEnterpriseCarList()
			})
		},
		onChangeCarPage(e) {
			if (this.carPage != e) {
				this.carPage = e
				this.getEnterpriseCarList()
			}
		},
		onChangeCarPageSize(e) {
			if (this.carPageSize != e) {
				this.carPage = 1
				this.carPageSize = e
				this.getEnterpriseCarList()
			}
		},
	},
}
</script>
<style scoped>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding: 20px;
	box-sizing: border-box;
}

.action-btn {
	margin: 20px 0;
	background-color: white;
	padding: 20px;
	border: 1px solid #F3F7FD;
	border-radius: 15px;
	display: flex;
	align-items: center;

	button {
		margin-right: 20px;
	}
}

.table-container {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.page {
	margin-top: 10px;
	text-align: right;
}

.search-area {
	background-color: white;
	padding-top: 20px;
	border: 1px solid #F3F7FD;
	border-radius: 15px;
}
</style>