<script setup>
import { computed, ref, watch } from 'vue';
import PageWrapperSearch from '@/components/search/PageWrapperSearch.vue';
import encryptFlag from '@/constants/encryptFlag.js';
import {
  Lock,
  Unlock,
  Delete
} from '@element-plus/icons-vue'
const emit = defineEmits(['update:modelValue', 'query', 'reset', 'deleteUnnecessaryColumns', 'bulkEncryption', 'batchDecryption']);


function deleteUnnecessaryColumns() {
  emit('deleteUnnecessaryColumns')
}

function bulkEncryption() {
  emit('bulkEncryption')
}

function batchDecryption() {
  emit('batchDecryption')
}
const props = defineProps({
  modelValue: Object
});

const queryForm = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    console.log('query computed', val);
    emit('update:modelValue', val);
  }
});

// 搜索
function onSearch() {
  emit('query');
}

// 重置
function onReset(formRef) {
  queryForm.value.datasource = '';
  queryForm.value.schema = '';
  queryForm.value.tableName = '';
  queryForm.value.fieldName = '';
  queryForm.value.status = [];
  emit('reset', formRef);
}


</script>

<template>

          <!-- <el-button
          type="primary"
          @click="deleteUnnecessaryColumns"
        > 
          删除多余列
        </el-button>
        <el-button
          type="primary"
          @click="bulkEncryption"
        > 
          批量加密
        </el-button>
        <el-button
          type="primary"
          @click="batchDecryption"
        > 
          批量解密
        </el-button> -->
  <!-- el-form -->
  <page-wrapper-search
    :model="queryForm"

    :extraButtons="[
      {
        text: '删除多余列',
        icon: Delete,
        plain: true,
        color: 'rgba(255, 141, 26, 1)',
        type: 'success',
        onClick: deleteUnnecessaryColumns
      },
      {
        text: '批量加密',
        icon: Lock,
        plain: true,
        color: 'rgba(11, 136, 251, 1)',
        type: 'success',
        onClick: bulkEncryption
      },
      {
        text: '批量解密',
        icon: Unlock,
        plain: true,
        color: 'rgba(0, 186, 173, 1)',
        type: 'success',
        onClick: batchDecryption
      }
    ]"    




    @search="onSearch"
    @reset="onReset">
    <!-- <el-form-item label="数据源名称" prop="datasource">
      <el-input
        v-model="queryForm.datasource"
        placeholder="请输入数据源名称"
        clearable
      />
    </el-form-item>
    
    <el-form-item label="SCHEMA" prop="schema">
      <el-input
        v-model="queryForm.schema"
        placeholder="请输入SCHEMA"
        clearable
      />
    </el-form-item> -->
    
    <el-form-item label="表名称" prop="tableName">
      <el-input
        style="width: 180px;"
        v-model="queryForm.tableName"
        placeholder="请输入表名称"
        clearable
      />
    </el-form-item>
    
    <el-form-item label="字段名称" prop="fieldName">
      <el-input
       style="width: 180px;"
        v-model="queryForm.fieldName"
        placeholder="请输入字段名称"
        clearable
      />
    </el-form-item>
    
    <!-- <el-form-item label="状态" prop="status">
      <el-select
        v-model="queryForm.status"
        placeholder="请选择状态"
        multiple
        clearable
      >
        <el-option v-for="value in encryptFlag" :label="value.label" :value="value.value" />
      </el-select>
    </el-form-item> -->
  </page-wrapper-search>
</template>

<style scoped>

</style>
