<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  watch,
  nextTick,
  unref,
  watchEffect,
} from 'vue';
import { Search } from "@element-plus/icons-vue";
import {useRouter} from 'vue-router'
const router=useRouter()
interface props {
  type?: Number; // 1 执行记录 2 采集对象
  tableColumn?: any[]; // 表格标题
  tableDataList?: any[]; // 表格数据
  sizeWidth?: Number | String; // 抽屉宽度
  tableTotal?: Number | String; // 表格总页数
  tablePage?: Number | String; // 当页页码
  tableSize?: Number | String; // 一页显示条数
  layout?:String,//分页格式
  placeholder?:String,//input的placeholder
}
const {
  tableColumn = [],
  tableDataList = [],
  sizeWidth = '',
  type = 1,
  tableTotal = 0,
  tablePage = 1,
  tableSize = 20,
  layout='total,sizes, prev, pager, next',
  placeholder='请输入IP、域名或URL'
} = defineProps<props>();
const emit = defineEmits(['onSearch', 'sizeChangeOne', 'currentChangeOne','sortChange','handleToPreview','handleToDownload']);
const dialogProps = reactive({
  showDialog: false,
  title: '探测范围',
});
/**
 * @description 弹窗开关
 */
const openDialog = () => {
  recordSearch.value=''
  sortProp.value=null
  sort.value=null
  dialogProps.showDialog = true;
};
defineExpose({ openDialog,dialogProps });
//页容量变化
const sizeChange = (val: Number) => {
  emit('sizeChangeOne', val);
};
//当前页码变化
const currentPageChange = (val: Number) => {
  emit('currentChangeOne', val);
};
//按钮的点击事件
const tableBtnClick = (data,row) => {
  const {eventName}=data||{}
  if(eventName=='down'){
    emit('handleToDownload',row)
  }
  if(eventName=='preview'){
    emit('handleToPreview',row)
  }
}
let sort=ref()
let sortProp=ref()
const sortChange=(data)=>{
  const {order,prop}=data||{}
  sort.value=order!='descending'
  sortProp.value=prop
  emit('sortChange', recordSearch.value,sort.value,sortProp.value);
}
/**
 * @description 搜索条件
 */
const recordSearch = ref('');
watch(recordSearch, () => {
  if (!dialogProps.showDialog) return;
  emit('onSearch', recordSearch.value,sort.value,sortProp.value);
});
</script>
<template>
  <div class="record-table">
    <ya-dialog
      v-if="dialogProps.showDialog"
      :width="unref(sizeWidth)"
      :dialogProps="dialogProps"
      :column="tableColumn"
      :data="tableDataList"
      :headerIcon="false"
      :showConfirm="false"
    >
      <template #content>
        <ya-input
          class="search"
          v-if="type == 2"
          v-model="recordSearch"
          :placeholder="placeholder"
          clearable
        />
        <ya-table
          :column="tableColumn"
          :data="tableDataList"
          :currentPage="unref(tablePage)"
          :pageSize="unref(tableSize)"
          @sizeChange="sizeChange"
          @currentPageChange="currentPageChange"
          @btnClick="tableBtnClick"
          @sortChange="sortChange"
          :pagerCount="3"
          :pageObj="{
              layout:layout,
              total:unref(tableTotal)
          }"
        ></ya-table>
      </template>
    </ya-dialog>
  </div>
</template>
<style lang="scss" scoped>
.record-table {
  ::v-deep .el-dialog{
   .el-button--primary{
    display: none;
   }
  }
  ::v-deep .ya-layout-content-container {
    height: auto;
  }
  ::v-deep .ya-layout-content-table {
    padding: 0;
  }
  ::v-deep .ya-layout-content-table {
    margin-top: 0;
  }
  .search {
    margin-bottom: 16px;
  }
}
::v-deep .ya-split-panel-container {
  background-color: #fff !important;
}
::v-deep .ya-content {
  padding: 0 !important;
}

</style>
