<template>
  <div class="dialog">
    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        width="1000px"
        @close="closeDialog()"
    >
      <div class="app-container">
        <div class="filter-container">
          <el-input @keyup.enter="handleSearch" class="w200px mr5px" v-model="queryForm.keyWord" placeholder="关键字搜索"/>
          <el-button type="primary" @click="handleSearch">
            <i-ep-search/>
            搜索
          </el-button>
        </div>
        </div>
      <div class="table-con">
        <el-table
            ref="tableRef"
            :max-height="tableHeight"
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            border
        >
          <el-table-column label="操作" width="90">
            <template #default="{row}">
              <el-button link @click="checkRow(row)" type="primary">
                <i-ep-check/>
                选择
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
              type="index"
              label="#"
              width="50">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="paperName" width="250" label="分类名称"/>
          <el-table-column prop="paperTypeName" width="300" label="纸张类型名称"/>
          <el-table-column
              prop="status"
              label="状态">
            <template #default="{row}">
              <el-tag v-if="row.voidFlag==0" type="success">
                正常
              </el-tag>
              <el-tag v-else="row.voidFlag==1" type="danger">
                停用
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="创建时间"
              width="155">
            <template #default="{row}">
          <span v-if="row.createTime">
           {{ $filters.getTime(row.createTime) }}
          </span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryPage.pageIndex"
            v-model:limit="queryPage.pageSize"
            @pagination="getTableData"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {
  getPaperBaseInfoList
} from "@/api/baseInfo";
import { ElTable } from 'element-plus'
const tableRef = ref<InstanceType<typeof ElTable>>()
import {useTable} from '@/hooks/useTable'
let dialogVisible = ref(false)
let dialogTitle = ref("")
const emit = defineEmits(['tableChange'])
const queryForm = reactive({
  keyWord: '',
  voidFlag: 0
})
function checkRow(row) {
  dialogVisible.value = false
  emit('tableChange',row);
}
/**关闭弹窗 */
function closeDialog() {
  dialogVisible.value = false
}
const {
  tableData,
  queryPage,
  total,
  loading,
  getTableData,
  tableHeight,
  handleSearch,//搜索
} = useTable(getPaperBaseInfoList, queryForm);
defineExpose({
  dialogVisible,
  dialogTitle
})

</script>


<style scoped lang="scss">
:deep(.el-dialog__body){
  padding-top: 0px !important;
}
</style>
