<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="客户名称" name="searchKey">
						<a-input v-model:value="searchFormState.searchKey" placeholder="请输入客户名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="tableRef.refresh()">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			bordered
			:row-key="(record) => record.id"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('bizCustomerAdd')">
						<template #icon><plus-outlined /></template>
						新增
					</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record, index  }">
				<template v-if="column.dataIndex === 'serial'">
					{{ index + 1 }}
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="formRef.onOpen(record)" v-if="hasPerm('bizCustomerEdit')">编辑</a>
						<a-divider type="vertical" v-if="hasPerm(['bizCustomerEdit', 'bizCustomerDelete'], 'and')" />
						<a-button type="link" danger size="small" v-if="hasPerm('bizCustomerDelete')" @click="deleteConfig(record)">删除</a-button>
						<a-divider type="vertical" v-if="hasPerm(['bizCustomerDelete', 'customerAccount'], 'and')" />
						<a @click="showMore(record)" v-if="hasPerm('customerAccount')">账号</a>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="tableRef.refresh()" />

	<a-modal
		v-model:visible="moreFlag"
		title="关联账号信息"
		:footer="null"
		width="1100px"
		:body-style="{
			height: 'calc(100vh - 300px)',
			overflow: 'auto'
		}"
		@cancel="onCloseAccount"
	>
		<a-card :bordered="false">
			<a-button type="primary" @click="addAccount()" v-if="hasPerm('customerAccountAdd')" style="margin-bottom:10px;">
				<template #icon><plus-outlined /></template>
				新增账号
			</a-button>
			<a-table ref="tableAccountRef" :columns="columns1" :data-source="data1" bordered :row-key="(record) => record.id">
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'action'">
						<a @click="editAccount(record)" v-if="hasPerm('customerAccountEdit')">编辑</a>
						<a-divider type="vertical"  v-if="hasPerm(['customerAccountEdit','customerAccountDelete'],'and')" />
						<a-popconfirm title="确定要删除吗？" @confirm="removeUser(record)">
							<a-button type="link" danger size="small" v-if="hasPerm('customerAccountDelete')">删除</a-button>
						</a-popconfirm>
						<a-divider type="vertical"  v-if="hasPerm(['projectUserDelete','customerAccountRestPassword'],'and')"/>
						<a-popconfirm title="确定要重置密码吗？" @confirm="resetPassword(record)">
							<a-button type="link" v-if="hasPerm('customerAccountRestPassword')">重置密码</a-button>
						</a-popconfirm>
					</template>
				</template>
			</a-table>
		</a-card>
	</a-modal>

	<a-modal
		v-model:visible="editAccountFlag"
		:title="formData.id ? '编辑账号' : '添加账号'"
		class="custom-modal"
		width="800px"
		@ok="handleOk"
		@cancel="onClose"
	>

		<a-form ref="formSubmitRef" :model="formData" :rules="formRules" :wrapper-col="wrapperCol" :label-col="labelCol">
			<a-form-item label="账号：" name="account">
				<a-input v-model:value="formData.account" placeholder="请输入账号" allow-clear />
			</a-form-item>
			<a-form-item label="用户名称：" name="name">
				<a-input v-model:value="formData.name" placeholder="请输入用户名称" allow-clear />
			</a-form-item>
			<a-form-item label="手机号：" name="phone">
				<a-input v-model:value="formData.phone" placeholder="请输入手机号" allow-clear />
			</a-form-item>
		</a-form>

	</a-modal>
</template>

<script setup name="bizcustomer">
	import { cloneDeep } from 'lodash-es'
	import Form from './form.vue'
	import bizCustomerApi from '@/api/biz/bizCustomerApi'
	import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
	import {Modal} from 'ant-design-vue';
	import {createVNode} from 'vue';
	import bizUserApi from '@/api/biz/bizUserApi'
	import { required } from '@/utils/formRules'

	const searchFormState = ref({})
	const searchFormRef = ref()
	const tableRef = ref()
	const tableAccountRef = ref()
	const formRef = ref()
	const submitLoading = ref(false)
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const moreFlag = ref(false)
	const editAccountFlag = ref(false)
	const data1 = ref([])

	// 表单数据
	const formData = ref({})
	const labelCol = ref({ span: 5})
	const wrapperCol = ref({ span: 16})
	const formSubmitRef = ref()

	const columns = [
		{
			title: '序号',
			width: 80,
			dataIndex: 'serial',
			align:'center'
		},
		{
			title: '客户名称',
			dataIndex: 'customerName',
			width:120,
			align:'center'
		},
		{
			title: '联系人',
			dataIndex: 'customerContactName',
			width:120,
			align:'center'
		},
		{
			title: '手机号',
			dataIndex: 'customerPhone',
			width:120,
			align:'center'
		},
		{
			title: '客户地址',
			dataIndex: 'customerAddress',
			width:180,
			align:'center'
		},
	]
	// 操作栏通过权限判断是否显示
	columns.push({
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		width: 150
	})

	const selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const loadData = (parameter) => {
		const searchFormParam = cloneDeep(searchFormState.value)
		return bizCustomerApi.bizCustomerPage(Object.assign(parameter, searchFormParam)).then((data) => {
			return data
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
	// 删除
	const deleteBizCustomer = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		bizCustomerApi.bizCustomerDelete(params).then(() => {
			tableRef.value.refresh(true)
		})
	}
	// 删除
	const deleteConfig = (record) => {

		Modal.confirm({
			title: '确定删除该数据吗？',
			icon: createVNode(ExclamationCircleOutlined),
			content: '',
			onOk() {
				submitLoading.value = true
				let params = [
					{
						id: record.id
					}
				]

				bizCustomerApi
					.bizCustomerDelete(params)
					.then(() => {
						tableRef.value.refresh(true)
					})
					.finally(() => {
						submitLoading.value = false
					})
			},
			onCancel() {}
		})
	}
	// 批量删除
	const deleteBatchBizCustomer = (params) => {
		bizCustomerApi.bizCustomerDelete(params).then(() => {
			tableRef.value.clearRefreshSelected()
		})
	}

	//账号按钮点击时间
	const customerId = ref()
	const showMore = (record) => {
		customerId.value = record.id
		loadData1()
		moreFlag.value = true

	}

	const loadData1 = () => {
		let param={
			customerId:customerId.value
		}
		bizUserApi.getListByCustomerId(param).then((res)=>{
			data1.value = res
		})
	}


	const columns1 = [
		{
			title: '账号',
			dataIndex: 'account',
			align: 'center',
			resizable: true,
			ellipsis: true,
			width: 100
		},
		{
			title: '用户名称',
			dataIndex: 'name',
			align: 'center',
			resizable: true,
			ellipsis: true,
			width: 110
		},
		{
			title: '手机号',
			dataIndex: 'phone',
			align: 'center',
			resizable: true,
			ellipsis: true,
			width: 100
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			fixed: 'right',
			width: 120,
		}
	]


	//新增客户账号
	const addAccount = () =>{
		formData.value = {}
		formData.value.customerId = customerId.value
		editAccountFlag.value = true
	}

	const formRules = {
		account: [required('请输入账号')],
		name: [required('请输入用户姓名')],
		phone:[required('请输入手机号')],
	}

	//表单提交
	const handleOk = () => {
		formSubmitRef.value.validate().then(() => {
			submitLoading.value = true
			const formDataParam = cloneDeep(formData.value)
			bizUserApi
				.submitFormCustomer(formDataParam, formDataParam.id)
				.then(() => {
					onClose()
					emit('successful')
				})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}

	const onClose = () => {
		formSubmitRef.value.resetFields()
		formData.value = {}
		editAccountFlag.value = false
		loadData1()
	}

	const editAccount = (record) => {
		formData.value = record
		editAccountFlag.value = true
	}

	//删除客户账号
	const removeUser = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		bizUserApi.userDelete(params).then(() => {
			loadData1()
		})
	}

	// 重置人员密码
	const resetPassword = (record) => {
		bizUserApi.userResetPassword(record).then(() => {})
	}

	const onCloseAccount = () => {
		moreFlag.value = false
	}

</script>

<style scoped>

.custom-modal {
	height: 500px; /* 设置模态框的高度 */
	overflow: auto; /* 如果内容超出高度，显示滚动条 */
}
</style>
