<template>
  <el-drawer
    v-model="visible"
    title="文件搜索"
    :size="400"
    :close-on-click-modal="false"
    @close="closeFun"
  >
    <div class="content">
      <TableForm ref="tableFormRef" v-model:data="searchData" tableName="DATA_OVERVIEW_SEARCH">
        <template #form-fileSize>
          <div class="file-size">
            <el-input-number class="size" v-model="searchData.fileSize" />
            <el-select class="unit" v-model="searchData.fileSizeUnit">
              <el-option
                v-for="(item, index) in FILE_SIZE_UNIT.A"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </div>
        </template>
      </TableForm>
    </div>
    <template #footer>
      <div>
        <el-button @click="resetFun">重置</el-button>
        <el-button type="primary" @click="searchFun">搜索</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import TableForm from '@/components/common/table/tableForm.vue';
import { useDict } from '@/utils/useDict';
import { cloneDeep } from 'lodash-es';

const { FILE_SIZE_UNIT } = useDict('FILE_SIZE_UNIT');
const emit = defineEmits(['update:modelValue', 'search', 'reset']);
const visible = ref(false);
const searchData = ref<any>({});

interface Props {
  modelValue: boolean;
  data: any;
  fileIds: any;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  data: {},
  fileIds: [],
});

watch(
  () => props.modelValue,
  (val: boolean) => {
    visible.value = val;
  }
);

const searchFun = () => {
  const params = searchData.value;
  if (props.data.id) {
    params.parentDirIds = props.fileIds;
  } else {
    // 根目录
    params.dirType = 2;
  }
  emit('search', cloneDeep(params));
  closeFun();
};

const resetFun = () => {
  searchData.value = {};
  emit('reset');
  closeFun();
};

const closeFun = () => {
  emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.content {
  .file-size {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .size {
      width: 150px;
    }
    .unit {
      width: 100px;
    }
  }
}
</style>
