<!-- 报表开发列明细 -->
<template>
	<div>
		<el-tabs v-model="activeName" :stretch="true">
			<el-tab-pane label="列明细" name="orderItemModels">
				<el-row>
					<el-col :span="24">
						<el-input v-model="props.form.columnShowList" type="textarea"></el-input>
					</el-col>
				</el-row>
				<el-row style="margin: 10px 0;">
					<el-button type="primary" @click="tableItemRest(0)">刷新列表排序，记得自己点确认保存</el-button>
					<el-button type="primary" @click="tableItemRest(1)">获取列表显示字段,并且刷新列表排序</el-button>
				</el-row>
				<el-table :data="props.form.fastReportItemList" border stripe :height="tableHeight">
					<el-table-column label="列属性" align="left" prop="columnName" show-overflow-tooltip width="180">
						<template #default="scope">
							<el-input v-model="scope.row.columnName" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="列JAVA属性" align="left" prop="columnJavaName" show-overflow-tooltip width="180">
						<template #default="scope">
							<el-input v-model="scope.row.columnJavaName" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="列名称" align="left" prop="columnLabel" show-overflow-tooltip width="180">
						<template #default="scope">
							<el-input v-model="scope.row.columnLabel" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="列宽度" align="left" prop="columnWidth" show-overflow-tooltip width="100">
						<template #default="scope">
							<el-input v-model="scope.row.columnWidth" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="列类型" align="left" prop="columnType" show-overflow-tooltip width="160">
						<template #default="scope">
							<el-input v-model="scope.row.columnType" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="序号" align="left" prop="orderNum" show-overflow-tooltip width="60">
						<template #default="scope">
							<el-input v-model="scope.row.orderNum" size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="排序" align="left" prop="isOrder" show-overflow-tooltip width="60">
						<template #default="scope">
							<el-checkbox v-model="scope.row.isOrder" true-label="1" false-label="0"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column label="字典CODE" align="left" prop="dictCode" show-overflow-tooltip width="100">
						<template #default="scope">
							<el-input v-model="scope.row.dictCode" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>

					<el-table-column label="显示" align="left" prop="isShow" show-overflow-tooltip width="60">
						<template #default="scope">
							<el-checkbox v-model="scope.row.isShow" true-label="1" false-label="0"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column label="查询" align="left" prop="isSearch" show-overflow-tooltip width="60">
						<template #default="scope">
							<el-checkbox v-model="scope.row.isSearch" true-label="1" false-label="0"></el-checkbox>
						</template>
					</el-table-column>
          <el-table-column label="查询隐藏" align="left" prop="searchHidden" show-overflow-tooltip width="60">
            <template #default="scope">
              <el-checkbox v-model="scope.row.searchHidden" true-label="1" false-label="0"></el-checkbox>
            </template>
          </el-table-column>
					<el-table-column label="查询字段表别名" align="left" prop="whereName" show-overflow-tooltip width="140">
						<template #default="scope">
							<el-input v-model="scope.row.whereName" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="查询默认值" align="left" prop="searchDefaultValue" show-overflow-tooltip width="100">
						<template #default="scope">
							<el-input v-model="scope.row.searchDefaultValue" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="显现在SQL中的位置" align="left" prop="searchSqlName" show-overflow-tooltip width="170">
						<template #default="scope">
							<el-input v-model="scope.row.searchSqlName" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="查询模式" align="left" prop="searchMode" show-overflow-tooltip width="100">
						<template #default="scope">
							<el-select v-model="scope.row.searchMode" clearable placeholder="">
								<el-option value="10" label="简单" />
								<el-option value="20" label="区间" />
								<el-option value="30" label="多选" />
							</el-select>
						</template>
					</el-table-column>
					<el-table-column label="查询分组标题" align="left" prop="searchGroupTitle" show-overflow-tooltip width="140">
						<template #default="scope">
							<el-input v-model="scope.row.searchGroupTitle" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="取值表达式" align="left" prop="replaceVal" show-overflow-tooltip width="160">
						<template #default="scope">
							<el-input v-model="scope.row.replaceVal" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="字段跳转URL" align="left" prop="columnHref" show-overflow-tooltip width="160">
						<template #default="scope">
							<el-input v-model="scope.row.columnHref" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="left" fixed="right" width="80">
						<template #default="scope">
							<el-button type="text" @click="handleOrderItemDelete(scope.$index)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="非列表内查询条件" name="searchItemModels">
				<el-table :data="props.form.fastReportSeachList" border stripe :height="tableHeight">
					<el-table-column label="列属性" align="left" prop="columnName" show-overflow-tooltip width="180">
						<template #default="scope">
							<el-input v-model="scope.row.columnName" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="列JAVA属性" align="left" prop="columnJavaName" show-overflow-tooltip width="180">
						<template #default="scope">
							<el-input v-model="scope.row.columnJavaName" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="列名称" align="left" prop="columnLabel" show-overflow-tooltip width="180">
						<template #default="scope">
							<el-input v-model="scope.row.columnLabel" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="列类型" align="left" prop="columnType" show-overflow-tooltip width="160">
						<template #default="scope">
							<el-input v-model="scope.row.columnType" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="查询" align="left" prop="isSearch" show-overflow-tooltip width="60">
						<template #default="scope">
							<el-checkbox v-model="scope.row.isSearch" true-label="1" false-label="0"></el-checkbox>
						</template>
					</el-table-column>
          <el-table-column label="查询隐藏" align="left" prop="searchHidden" show-overflow-tooltip width="60">
            <template #default="scope">
              <el-checkbox v-model="scope.row.searchHidden" true-label="1" false-label="0"></el-checkbox>
            </template>
          </el-table-column>
					<el-table-column label="查询字段表别名" align="left" prop="whereName" show-overflow-tooltip width="140">
						<template #default="scope">
							<el-input v-model="scope.row.whereName" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="查询默认值" align="left" prop="searchDefaultValue" show-overflow-tooltip width="100">
						<template #default="scope">
							<el-input v-model="scope.row.searchDefaultValue" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="查询模式" align="left" prop="searchMode" show-overflow-tooltip width="100">
						<template #default="scope">
							<el-select v-model="scope.row.searchMode" clearable placeholder="">
								<el-option value="10" label="简单" />
								<el-option value="20" label="区间" />
							</el-select>
						</template>
					</el-table-column>
					<el-table-column label="显现在SQL中的位置" align="left" prop="searchSqlName" show-overflow-tooltip>
						<template #default="scope">
							<el-input v-model="scope.row.searchSqlName" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="查询SQL" align="left" prop="searchSql" show-overflow-tooltip>
						<template #default="scope">
							<el-input v-model="scope.row.searchSql" clearable size="small" placeholder="" style="width: 100%"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="left" fixed="right" width="80">
						<template #default="scope">
							<el-button type="text" @click="handleSearchItemDelete(scope.$index)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import { isEmpty } from '@/utils/validate'
import { defineProps, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
	form: {
		type: Object,
		required: true,
		default: () => {}
	}
})

const tipHeaderData = reactive({
	searchSqlName: '显现位置'
})
const tableHeight = ref(window.innerHeight - 500)
const activeName = ref('orderItemModels')

const addOrderItemModels = item => {
	if (!isEmpty(item)) {
		item.id = null
		item.isSearch = '0'
    item.searchHidden = '0'
		item.isOrder = '0'
		item.isShow = '1'
		item.searchMode = '10'
		props.form.fastReportItemList.push(item)
	}
}

const handleOrderItemDelete = index => {
	props.form.fastReportItemList.splice(index, 1)
}
const handleSearchItemDelete = index => {
	props.form.fastReportSeachList.splice(index, 1)
}
const addSearchItemModels = item => {
	if (!isEmpty(item)) {
		item.id = null
		item.isSearch = '1'
    item.searchHidden = '0'
		item.searchMode = '10'

		props.form.fastReportSeachList.push(item)
	}
}

const tableItemRest = (type: any) => {
	if (type == 1) {
		var columnShowList = ','
		props.form.fastReportItemList.forEach(item => {
			if (item.isShow == '1') {
				columnShowList += item.columnLabel + ','
			}
		})
		props.form.columnShowList = columnShowList
		tableItemRest(0)
	} else {
		var objf = {}
		Object.assign(objf, props.form)
		var oldList = objf.fastReportItemList
		var showList = []
		var c = 10
		var cccc = props.form.columnShowList.split(',')
		var noFindLabels = ''
		cccc.forEach(item => {
			if (item != '') {
				var kk = 0 //是否找到对应的字段
				for (var i = 0; i < oldList.length; i++) {
					if (oldList[i].columnLabel == item) {
						oldList[i].orderNum = c
						showList.push(oldList[i])
						c += 10
						kk = 1
						break
					}
				}
				if (kk == 0) {
					noFindLabels += item + ','
				}
			}
		})

		if (noFindLabels != '') {
			ElMessage.error(noFindLabels + '字段错误，找不到对应的字段')
			return
		}

		oldList.forEach(item => {
			if (props.form.columnShowList.indexOf(',' + item.columnLabel + ',') < 0) {
				item.orderNum = c
				showList.push(item)
				c += 10
			}
		})
		objf.fastReportItemList = showList
		Object.assign(props.form, objf)
	}
}

const initCloumnList = (checkbox: any, row: any) => {
	debugger
	var columnShowList = ','
	props.form.fastReportItemList.forEach(item => {
		if (item.isShow == '1') {
			columnShowList += item.columnLabel + ','
		}
	})
	props.form.columnShowList = columnShowList
}

defineExpose({
	addSearchItemModels,
	handleOrderItemDelete,
	addOrderItemModels
})
</script>

<style scoped></style>
