<template>
  <div class="flex h-full w-full flex-col gap-2">
    <div class="flex w-full items-center justify-between">
      <div class="title">
        {{ title }}
      </div>
      <div class="flex gap-4">
        <el-button type="primary" size="small">导出</el-button>
        <el-input
          clearable
          size="small"
          style="width: 250px"
          :placeholder="placeholder"
          v-model="searchVal"
        ></el-input>
        <el-button type="primary" size="small">搜索</el-button>
      </div>
    </div>
    <div class="grid w-full grid-cols-2">
      <y-table
        size="small"
        border
        :column="column"
        :data="letTableData"
      ></y-table>
      <y-table
        v-if="data.length > 5"
        size="small"
        border
        :column="column"
        :data="rightTableData"
      ></y-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    column: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "请输入业务名称关键字搜索",
    },
    border: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      searchVal: "",
    };
  },
  computed: {
    letTableData() {
      let arr = this.data.slice(0, 5);
      while (arr.length < 5) {
        arr.push(null);
      }
      return arr;
    },
    rightTableData() {
      let arr = this.data.slice(5, 10);
      while (arr.length < 5) {
        arr.push(null);
      }
      return arr;
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-weight: 600;
}
:deep(.el-table__header-wrapper) {
  th {
    background: #e6f1f9;
  }
}
:deep(.el-table) {
  border-color: #dfe9f2 !important ;
  th {
    border-color: #dfe9f2 !important ;
  }
}
</style>