<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange"
				height="245">
				<el-table-column type="index" label="行号" align="center" width="60">
					<template #default="scope">
						<span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column v-if="true" prop="tempTy" label="款型类型" width="100px" header-align="center"
					align="center" show-overflow-tooltip>
					<template #default="{ row }">
						{{ dicList.CONTRACT_TYPE.find(item => item.dicCode === row.tempTy)?.dicName }}
					</template>
				</el-table-column>
				<el-table-column v-if="true" prop="clsTitle" label="条款标题" width="150px" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="clsCont" label="条款内容" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>

				<el-table-column label="操作" header-align="center" align="center" width="200px">
					<template #default="scope">
						<el-button plain type="primary" @click="handleEdit(scope.row)"
							style="margin-right: 12px;">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<el-card :body-style="cardBodyStyle">
			<el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
				background="background" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</el-card>

		<el-dialog :close-on-click-modal="false" draggable title="编辑" v-model="dialogVisible" width="800px" top="5vh"
			@open="openDialog">
			<el-form :model="form" label-width="120px" label-position="right" ref="ruleFormRef" :rules="rules">
				<el-form-item label="款型类型">
					<el-select v-model="form.tempTy" placeholder="请选择" clearable style="width: 200px" class="dicSelect"
						disabled>
						<el-option v-for="item in dicList.CONTRACT_TYPE" :key="item.dicCode" :label="item.dicName"
							:value="item.dicCode" />
					</el-select>
				</el-form-item>
				<el-form-item label="模板条款标题">
					<el-input v-model="form.clsTitle" clearable style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="模板条款内容">
					<el-input type="textarea" v-model="form.clsCont" clearable style="width: 500px; height: 100px;"
						rows="4" disabled></el-input>
				</el-form-item>
			</el-form>

			<template #footer>
				<div class="dialog-footer">
					<el-button plain type="success" @click="handleSave(ruleFormRef)">保存</el-button>
					<el-button plain type="danger" @click="handleCancelSave">取消</el-button>
				</div>
			</template>
		</el-dialog>

	</div>
</template>

<script setup>
import ButtonBar from '@/components/ButtonBar.vue'

import {
	ref,
	reactive,
	onMounted,
	getCurrentInstance,
	defineProps,
	watch
} from 'vue'

const {
	proxy
} = getCurrentInstance()

import tools from '@/tools'
import { sum } from 'element-plus/es/components/table-v2/src/utils.mjs';
const cardBodyStyle = ref(tools.style.card)
const inputStyle = ref(tools.style.input)

onMounted(() => {
	handleSearch()
	getDictList()
})

const props = defineProps({
	cotHead: {
		type: Object,
		required: true,
	},
	dialogVisibleCot: {
		type: Boolean,
		required: true,
	}
})

watch(() => props.cotHead.tempId, (newVal, oldVal) => {
	handleSearch()
})

/**
 * 查询公司代码
 */
const dept = JSON.parse(window.localStorage.getItem('dept'))
const deptTree = JSON.parse(window.localStorage.getItem('deptTree'))
/**
 * 查询公司代码
 */


/**
 *  查询字典
 */
const dicList = ref({
	CONTRACT_TYPE: []
})
const getDictList = () => {
	var url = 'framework/Common/querySelectorList'
	var param = {
		type: JSON.stringify(['CONTRACT_TYPE'])
	}
	proxy.$axios.get(url, param).then(response => {
		if (response.data.code == '0') {
			dicList.value = response.data.data
		} else {
			ElMessage.error('操作失败！' + response.data.msg)
		}
	})
}
/**
 *  查询字典
 */


/**
* 重置查询条件
*/
const reset = () => {
	Object.keys(query.value).map(key => {
		query.value[key] = ''
	})
}

/**
 *   查询
 */
const query = ref({
	tempId: '',
})
const tableData = ref([])
const handleSearch = () => {
	query.value.tempId = props.cotHead.tempId
	currentPage.value = 1
	getTableData()
}

const getTableData = () => {
	var url = 'cot/TmpLine/queryPopup'
	var param = {
		page: currentPage.value,
		rows: pageSize.value,
		params: JSON.stringify(query.value)
	}
	proxy.$axios.get(url, param).then(response => {
		if (response.data.code == '0') {
			tableData.value = response.data.data.records
			totalRows.value = response.data.data.total
		} else {
			ElMessage.error('操作失败！' + response.data.msg)
		}
	})
}
/**
 *   查询
 */


/**
 * 分页
 */
const currentPage = ref(1)
const totalRows = ref(0)
const pageSizes = ref([5, 10, 20, 30, 40])
const pageSize = ref(5)
const handleSizeChange = (val) => {
	pageSize.value = val
	getTableData()
}
const handleCurrentChange = (val) => {
	currentPage.value = val
	getTableData()
}
/**
 * 分页
 */


/**
 * 新增
 */
const dialogVisible = ref(false)
const form = ref({
	cmpCd: '',
	cmpNm: '',
	clsType: '',
	clsTitle: '',
	clsCont: '',
	addName: '',
	addDeptId: '',
	addDeptCode: '',
	addDeptName: '',
})
const ruleFormRef = ref()
const rules = reactive({
})

const handleAdd = () => {
	if (window.localStorage.getItem('dept') == JSON.stringify(new Array())) {
		ElMessage({
			type: 'warning',
			message: '请添加登录人所在公司'
		})
		return
	}

	form.value = {
		cmpCd: deptTree[0].deptCode,
		cmpNm: deptTree[0].deptName,
		clsType: '',
		clsTitle: '',
		clsCont: '',
		addName: window.localStorage.getItem('userDesc'),
		addDeptId: dept[0].id,
		addDeptCode: dept[0].deptCode,
		addDeptName: dept[0].deptName,
	}
	dialogVisible.value = true
}
/**
 * 新增
 */


/**
 * 保存、修改、删除
 */

const openDialog = () => {
}

const handleSave = (ruleFormRef) => {
	ruleFormRef.validate((valid, fields) => {
		if (valid) {
			var url = 'cot/TmpLine/save'
			var param = {
				json: JSON.stringify(form.value),
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == 0) {
					form.value = response.data.data
					ElMessage({
						message: '保存成功',
						type: 'success',
					})
					getTableData()
					dialogVisible.value = false
				} else {
					// ElMessage.error('操作失败！' + response.data.msg)
					ElMessage({
						message: '操作失败' + response.data.msg,
						type: 'error'
					})
				}
			})

		} else {
			console.log('error submit!', fields)
		}
	})
}
const handleCancelSave = () => {
	dialogVisible.value = false
}
const handleEdit = (row) => {
	dialogVisible.value = true
	form.value = row
}
const handleDelete = (row) => {
	ElMessageBox.confirm(
		'确定删除本条记录?',
		'提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
	}
	)
		.then(() => {
			var url = 'cot/TmpLine/remove'
			var param = {
				id: row.id
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == 0) {
					ElMessage({
						type: 'success',
						message: '删除成功',
					})
					getTableData()
				} else {
					ElMessage({
						type: 'error',
						message: '删除失败' + response.data.msg
					});
				}
			});
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消',
			})
		})
}

/**
 * 保存、修改、删除
 */

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
	multipleSelection.value = val
}

const handleRemoveBatch = () => {
	console.log('handleRemoveBatch')

	if (multipleSelection.value.length < 1) {
		ElMessage({
			type: 'warning',
			message: '请选择要删除的数据!'
		})
		return
	}

	ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		var ids = []
		multipleSelection.value.forEach((item, index) => {
			ids.push(item.id)
		})
		var url = 'cot/TmpLine/removeBatch'
		var param = {
			ids: JSON.stringify(ids)
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				ElMessage({
					type: 'success',
					message: '操作成功!',
				});
				getTableData()
				dialogVisible.value = false
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
			}
		})
	}).catch(() => {
		ElMessage({
			type: 'info',
			message: '已取消删除'
		})
	})
}

const handleEditBatch = () => {
	console.log('handleEditBatch')
	if (multipleSelection.value.length != 1) {
		ElMessage({
			type: 'warning',
			message: '请选择一条数据编辑!'
		})
		return
	}
	handleEdit(multipleSelection.value[0])
}

const dialogVisibleAttachment = ref(false)
const fId = ref('')
const AttachmentRefAuto = ref(null)
const handleUpload = () => {
	if (multipleSelection.value.length != 1) {
		ElMessage({
			type: 'warning',
			message: '请选择一条数据上传文件!'
		})
		return
	}
	dialogVisibleAttachment.value = true
	fId.value = multipleSelection.value[0].id
	AttachmentRefAuto.value.upload()
}

const handleDownload = () => {
	console.log('handleDownload')
}

const importUrl = ref('cot/TmpLine/importExcel')
const formData = ref({
	fId: 'conTmpClause'
})
const handleImport = () => {
	ImportExcelRef.value.open()
}
const importSuccess = () => {
	handleSearch()
}

const handleExport = () => {
	location.href = import.meta.env.VITE_BASE_API +
		'/cot/TmpLine/exportExcel?params=' + encodeURIComponent(JSON.stringify(query.value))
}

</script>

<style scoped>
::v-deep .dicSelect .el-select__wrapper .el-select__selected-item {
	color: #a8abb2;
}
</style>