<template>
	<div class="box-container">
		<!-- <Banner /> -->
		<div class="content">
			<byTable
				ref="singleTable"
				:source="sourceList.data"
				:pagination="sourceList.pagination"
				:config="config"
				:loading="loading"
				:height="tableHeight"
				highlight-current-row
				:selectConfig="selectConfig"
				:table-events="{
					//element talbe事件都能传
					'row-click': handleRowClick,
					'cell-contextmenu': handleRowClick.apply,
					'select-all': select,
				}"
				:action-list="[
					{
						text: '新建合同',
						plain: true,
						type: 'warning',
						action: () => openModal('add'),
					},
				]"
				@get-list="getList"
				@moreSearch="retrievalModal = true"
			>
				<template #slotName="{ item }">
					{{ item.createTime }}
				</template>
			</byTable>
		</div>
		<el-drawer v-model="retrievalModal" direction="rtl">
			<template #header>
				<h4>高级检索</h4>
			</template>
			<template #default>
				<byForm
					:formConfig="formConfig"
					:formOption="formOption"
					v-model="formData"
				>
					<template #slot> 可自定义所需功能 </template>
				</byForm>
			</template>
			<template #footer>
				<div style="flex: auto">
				<el-button @click="cancelClick">取消</el-button>
				<el-button type="primary" @click="confirmClick">确认</el-button>
				</div>
			</template>
		</el-drawer>
		<el-dialog
			:title="modalType == 'add' ? '新增' : '编辑'"
			v-model="dialogVisible"
			width="500"
			:before-close="handleClose"
		>
			<byForm
				:formConfig="formConfig"
				:formOption="formOption"
				v-model="formData"
			>
				<template #slot> 可自定义所需功能 </template>
			</byForm>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false"
						>确 定</el-button
					>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
  
<script setup>
/* eslint-disable vue/no-unused-components */
import { ElMessage, ElMessageBox } from 'element-plus'
import byTable from '@/components/byTable/index'
import byForm from '@/components/byForm/index'
import { computed, defineComponent, ref } from 'vue'
const loading = ref(false)
const retrievalModal = ref(false)
const fixedRight = ref('right')
const align = ref('center')
const tableHeight = ref(null)
const border = ref(true)
const sourceList = ref({
	data: [],
	pagination: {
		total: 3,
		pageNum: 1,
		pageSize: 10,
	},
})
const singleTable = ref({})
const dialogVisible = ref(false)
const modalType = ref('add')
const { proxy } = getCurrentInstance()
const selectConfig = computed(() => {
	return [
		{
			label: '合同状态1',
			prop: 'tdaProductId',

			data: [
				{
					label: '已关闭',
					value: '123',
				},
			],
		},
		{
			label: '合同状态22',
			prop: 'tdaApplicationId',
			data: [
				{
					label: '已关闭',
					value: '123',
				},
			],
		},
	]
})
const config = computed(() => {
	return [
		{
			type: 'selection',
			attrs: {
				checkAtt: 'isCheck',
			},
		},
		{
			attrs: {
				label: '权限字符',
				prop: 'roleKey',
			},
		},
		{
			attrs: {
				label: '显示顺序',
				prop: 'dataScope',
				align: 'center',
				width: 200,
			},
			// 渲染字符串，默认不想展示 prop 的值，而是想对它做一些处理的时候，可以用这个方法
			render(isForbid) {
				return isForbid ? '禁用中' : '非禁用'
			},
		},
		{
			attrs: {
				label: '状态',
				align: align.value,
				width: 100,
				click: (items) => {
					console.log(items)
				},
			},
			// 渲染组件，返回值为一个数组， data 作为组件的 v-model，适用于需要展示复杂的数据的场景
			renderComponent(row) {
				return [
					{
						name: 'el-switch',
						data: row.menuCheckStrictly,
						change: (e) => {
							console.log(e, 'change事件')
						},
						click: (e) => {
							console.log(e, 'click事件')
						},
					},
				]
			},
		},
		{
			attrs: {
				label: '创建时间',
				align: align.value,
				width: 200,
				prop: 'createTime',
				slot: 'slotName',
			},
		},
		{
			attrs: {
				label: '操作',
				width: '400',
				align: align.value,
				// 设置当前列恢复点击事件冒泡
				// isBubble: false,
				fixed: fixedRight.value,
			},
			// 渲染 el-button，一般用在最后一列。
			renderHTML(row) {
				return [
					{
						attrs: {
							label: '修改',
							type: 'primary',
							text: true,
							bg: true,
						},
						el: 'button',
						click() {
							ElMessage({
								message: JSON.stringify(row),
							})
						},
					},
					{
						attrs: {
							label: '删除',
							type: 'danger',
							text: true,
							bg: true,
						},
						el: 'button',
						click() {
							ElMessage({
								message: `编号${row.id} router -> 已跳转到编辑页面！`,
							})
						},
					},
					// {
					// 	attrs: {
					// 		label: '发布',
					// 		type: 'primary',
					// 		text: true,
					// 		bg: true,
					// 	},
					// 	el: 'button',
					// 	click() {
					// 		setPublish(row)
					// 	},
					// },
					// !row.isForbid
					// 	? {
					// 			attrs: {
					// 				label: '三元写法ture',
					// 				type: 'primary',
					// 				text: true,
					// 				bg: true,
					// 				disabled: false,
					// 			},
					// 			el: 'button',
					// 			click() {
					// 				setForbid(row)
					// 			},
					// 	  }
					// 	: {
					// 			attrs: {
					// 				label: '三元写法false',
					// 				text: true,
					// 				bg: true,
					// 				type: 'primary',
					// 				disabled: false,
					// 				style: {
					// 					color: '#e6a23c',
					// 				},
					// 			},
					// 			el: 'button',
					// 			click() {
					// 				setForbid(row)
					// 			},
					// 	  },
				]
			},
		},
	]
})

const formData = reactive({})
const formOption = reactive({
	inline: true,
	labelWidth: 100,
	itemWidth: 100,
	rules: [],
})
const formConfig = computed(() => {
	return [
		{
			type: 'input',
			prop: 'name',
			label: 'label名称',
			required: true,
			itemWidth: 100,
			//disabled:true,
			itemType: 'number',
		},
		{
			type: 'table',
			prop: 'tableData',
			column: [
				{
					label: '申购数量',
					type: 'number',
					prop: 'num',
					fn: (e, scope) => {
						console.log(e, scope)
					},
				},
				{
					label: '年龄',
					type: 'input',
					prop: 'age',
				},
				{
					label: '人员',
					type: 'select',
					prop: 'renyuan',
					data: [
						{
							label: '选择对象1',
							value: 1,
						},
						{
							label: '选择对象2',
							value: 2,
						},
						{
							label: '选择对象5',
							value: 5,
						},
					],
				},
			],
		},
		{
			type: 'select',
			prop: 'xiala',
			label: '下拉框',
			multiple: true,
			style: {
				width: '300px',
			},
			isLoad: {
				url: '/getRouters',
				resUrl: 'data',
				//如果接口回来为stringArray，可以把labelkey和labelval都设置为stringArray
				labelKey: 'name',
				labelVal: 'path',
				method: 'post',
			},
			//所有组件的change事件监听
			fn: (e) => {
				console.log(e)
			},
		},
		{
			type: 'date',
			prop: 'date',
			label: '时间',
			itemType: 'date',
		},
		{
			type: 'radio',
			prop: 'radio',
			label: '单选',
		},
		{
			type: 'slot',
			slotName: 'slot',
			label: '插槽',
		},
		{
			type: 'selectInput',
			label: '交易金额',
			itemWidth: 60,
			data: [],
			placeholder: '请输入',
			selectPlaceholder: '币种',
			selectProp: 'currency',
			isLoad: {
				url: '/supplierInfo/page',
				req: {
					pageNum: 1,
					pageSize: 9999,
				},
				labelKey: 'name',
				labelVal: 'id',
				method: 'post',
				resUrl: 'rows',
			},
		},
		{
			//使用此功能需要初始化prop数据至少是对象
			type: 'json',
			prop: 'standardJson',
			json: [
				{
					type: 'input',
					prop: 'englishName',
					label: '英文名',
				},
				{
					type: 'input',
					prop: 'code',
					label: '备注',
				},
				{
					type: 'input',
					prop: 'netWeight',
					label: '净重',
				},
				{
					type: 'input',
					prop: 'customhouse',
					label: '海关编码',
				},
			],
		},
	]
})

const sleep = (time = 1000) => {
	return new Promise((resolve) => setTimeout(resolve, time))
}
const getList = async (res) => {
	console.log(sourceList.value)
	console.log({ ...sourceList.value.pagination, ...res })
	loading.value = true
	proxy.get('/system/role/list?pageNum=1&pageSize=10').then((message) => {
		console.log(message)
		sourceList.value.data = message.rows
		setTimeout(() => {
			loading.value = false
		}, 200)
	})
}
const openModal = () => {
	dialogVisible.value = true
}
const select = (row, column, cell) => {
	ElMessage({
		dangerouslyUseHTMLString: true, // Be careful :)
		message: `点了全选`,
	})
}
const handleRowClick = (row, column, cell) => {
	ElMessage({
		dangerouslyUseHTMLString: true, // Be careful :)
		message: `row-click 事件，单击了<span style="color: red;"> 第${row.$index}行 </span>请看控制台 log`,
	})
	console.log('回调参数分别为: row, column, cell')
	console.log(row, column, cell)
}
const setPublish = (row) => {
	ElMessageBox.confirm(
		`此操作会将${row.name}发布到线上, 是否继续?`,
		`编号${row.id}提示`,
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
		.then(() => {
			ElMessage({
				type: 'success',
				message: '发布成功!',
			})
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消发布',
			})
		})
}
const setForbid = async (row) => {
	loading.value = true
	await sleep()
	loading.value = false
	row.isForbid = !row.isForbid
}
const copyLink = (row) => {
	ElMessage({
		type: 'success',
		message: '指令测试-复制成功，可以粘贴啦!',
	})
}
getList()
</script>
  
  <style lang="scss" scoped>
.box-container {
	.content {
		position: relative;
		margin: 0 auto;
	}
}
</style>