<template>
	<div class="app-container">
		<el-form
			:model="queryParams"
			ref="queryForm"
			:inline="true"
			v-show="showSearch"
			label-width="68px"
		>
			<el-form-item label="名称" prop="name">
				<el-input
					v-model="queryParams.name"
					placeholder="请输入表达式名称"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select
					v-model="queryParams.status"
					placeholder="请选择状态"
					clearable
				>
					<el-option
						v-for="dict in sys_common_status"
						:key="dict.value"
						:label="dict.label"
						:value="dict.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					:icon="Search"
					size="small"
					@click="handleQuery"
					>搜索</el-button
				>
				<el-button
					:icon="Refresh"
					size="small"
					@click="resetQuery"
					>重置</el-button
				>
			</el-form-item>
		</el-form>

		<el-table
			v-loading="loading"
			:data="expressionList.value"
			row-key="id"
			@current-change="handleSingleExpSelect"
		>
			<el-table-column width="55" align="center">
				<template #default="scope">
					<!-- 可以手动的修改label的值，从而控制选择哪一项 -->
					<el-radio v-model="radioSelected" :label="scope.row.id">{{
						""
					}}</el-radio>
				</template>
			</el-table-column>
			<el-table-column label="主键" align="center" prop="id" />
			<el-table-column label="名称" align="center" prop="name" />
			<el-table-column
				label="表达式内容"
				align="center"
				prop="expression"
			/>
			<el-table-column label="备注" align="center" prop="remark" />
		</el-table>

		<pagination
			v-show="total > 0"
			:total="total"
			:page-sizes="[5, 10]"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>
	</div>
</template>

<script lang="ts" name="Expression" setup>
import {
	ref,
	reactive,
	watchEffect,
	getCurrentInstance
} from "vue";
import { listExpression } from "@/api/flowable/expression";
import { StrUtil } from "@/utils/StrUtil.js";
import { Search, Refresh, Plus, Edit, Delete, Download } from '@element-plus/icons-vue'
import type { FormInstance, FormRules, ElForm } from "element-plus";

// 引入全局方法
const { proxy } = getCurrentInstance() as any;
const { sys_common_status } = proxy.useDict("sys_common_status");

const queryForm = ref<InstanceType<typeof ElForm>>();
const formRef = ref<FormInstance>()
// 接受父组件的值
const props = defineProps<{
  // 回显数据传值
  selectValues: {
    type: number | string,
    default: null,
    required: false
  }
}>()

// handleSingleExpSelect传值
const emit = defineEmits(["handleSingleExpSelect"]);

// 遮罩层
const loading = ref<boolean>(true);
// 选中数组
const ids = reactive<any>({
	value: [],
});
// 非单个禁用
const single = ref<boolean>(true);
// 非多个禁用
const multiple = ref<boolean>(true);
// 显示搜索条件
const showSearch = ref<boolean>(true);
// 总条数
const total = ref<number>(0);
// 流程达式表格数据
const expressionList = reactive<any>({
	value: [],
});
// 弹出层标题
const title = ref<string>("");
// 是否显示弹出层
const open = ref<boolean>(false);
// 查询参数
const queryParams = reactive<any>({
	pageNum: 1,
	pageSize: 10,
	name: null,
	expression: null,
	status: null,
});
// 单选框传值
const selectValues = ref();
const radioSelected = ref();

/** 查询流程达式列表 */
const getList = () => {
	loading.value = true;
	listExpression(queryParams).then((res: any) => {
		if (res.code === 200) {
			// prettier-ignore
			expressionList.value = res.rows;
			total.value = res.total;
			loading.value = false;
		}
	});
};
getList();

/** 搜索按钮操作 */
const handleQuery = () => {
	queryParams.pageNum = 1;
	getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
	proxy.resetForm(queryForm);
	handleQuery();
};

// 单选框选中数据
const handleSingleExpSelect = (selection: any) => {
	radioSelected.value = selection.id;
	emit("handleSingleExpSelect", selection);
};

watchEffect(() => {
	if (StrUtil.isNotBlank(selectValues.value)) {
		radioSelected.value = selectValues.value;
	}
});
</script>
