<!-- 参数配置界面 -->
<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType,ref,reactive, watch,unref } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
const { required } = useValidator()

const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => null
  }
})

const tableColumns = reactive<ElTableColumn[]>([
  {
    field: 'selection',
    type: 'selection',
    width: 50,
  },
  {
    field: 'index',
    label: '序号',
    fixed:"left",
    width: 120,
  },
  {
    field: 'jId',
    label: '参数名称',
  },
  {
    field: 'jId',
    label: '参数注释',
  },
  {
    field: 'jId',
    label: '参数默认值',
  },
  {
    field: 'jId',
    label: '测试运行默认值',
  },
  {
    field: 'jId',
    label: '字段类型'
  }
])

const formSchema = reactive<FormSchema[]>([
  
])

const rules = reactive({

})

const { formRegister, formMethods } = useForm()
const { setValues,getFormData, getElFormExpose } = formMethods
watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

let searchParam = reactive({
  paramsType:"code",//参数类型
  searchText:"",//参数名称
})
let filterList = reactive([]);//当前表格的列项
//表格的信息多选
const onSelectionChange = (ids)=>{

}
//添加参数
const handleAddParams = ()=>{

}


</script>

<template>
  <ElContainer>
    <ElContainer>
      <ElHeader>
        <ElButton type="success" @click="handleAddParams">添加参数</ElButton>
        <ElButton type="danger">批量删除</ElButton>
        <ElInput
          v-model="searchParam.searchText"
          placeholder="按参数名称或注释搜索"
          clearable
          style="margin-left:15px; width: 300px"
        >
          <template #prepend>
            <el-select v-model="searchParam.paramsType" placeholder="Select" style="width: 115px">
              <el-option label="参数名称" value="code" />
              <el-option label="参数注释" value="name" />
            </el-select>
          </template>
        </ElInput>
      </ElHeader>
      <ElMain>
        <!-- 参数配置字段信息的表格 -->
        <ElTable
          align="center"
          headerAlign="center"
          :data="filterList"
          @selection-change="onSelectionChange"
          style="width:100%;"
          height="calc(100% - 50px)"
        >
          <ElTableColumn fixed type="selection" width="55" />
          <ElTableColumn width="{60}" fixed label="序号" align="center" />
          <ElTableColumn prop="filedName" label="参数名称" />
          <ElTableColumn prop="label" label="参数注释" />
          <ElTableColumn prop="defaultVal" label="参数默认值" />
          <ElTableColumn prop="testVal" label="测试运行默认值" />
          <ElTableColumn prop="fieldType" label="字段类型" />
        </ElTable>
      </ElMain>
    </ElContainer>
    <ElAside width="10px">
      <Form :rules="rules" @register="formRegister" :schema="formSchema" />
    </ElAside>
  </ElContainer>
</template>
<style scoped>
  .vue3-cron-plus-container>>>.language{
    top:40px !important;
  }
</style>