<template>
  <div class="table-box">
    <!-- 查询表单 -->
    <SearchForm
      v-show="isShowSearch"
      :columns="searchColumns"
      :searchCol="{ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }"
      :search="search"
    />
    <!-- 表格 -->
    <div class="card flex-1">
      <div :style="{ height: tableHeight }">
        <vxe-grid ref="xTableRef" v-bind="gridOptions" height="auto">
          <template #toolbar_buttons>
            <slot name="left_buttons"></slot>
            <el-button type="primary">功能1</el-button>
          </template>
          <template #toolbar_tools>
            <slot name="right_tools"></slot>
            <el-button circle :icon="Search" @click="isShowSearch = !isShowSearch" />
          </template>
          <!-- 默认插槽 -->
          <slot></slot>
        </vxe-grid>
      </div>
      <!-- 分页组件 -->
      <slot name="pagination">
        <Pagination
          :pageable="pageable"
          :handle-size-change="handleSizeChange"
          :handle-current-change="handleCurrentChange"
        />
      </slot>
    </div>
  </div>
</template>

<script setup>
  import SearchForm from '@/components/SearchForm/index.vue';
  import Pagination from '@/components/Pagination/index.vue';
  import { Refresh, Search, Setting } from '@element-plus/icons-vue';

  import { computed, reactive, ref } from 'vue';

  const xTableRef = ref(null);

  const tableData = ref([
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
    { id: 10014, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
    { id: 10024, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
    { id: 10034, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
    { id: 10044, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
    { id: 10054, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
    { id: 10064, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
  ]);
  const isShowSearch = ref(true);

  // 动态计算表格高度
  const tableHeight = computed(() => {
    // 去除分页控件，toolbar控件
    return `calc(100% - 52px)`;
  });
  const pageable = reactive({
    pageNum: 1,
    pageSize: 10,
    total: tableData.value.length,
  });
  // column 列类型
  const columnTypes = ['checkbox', 'radio', 'req', 'expand', 'sort'];
  const columns = ref([
    {
      prop: 'createTime',
      label: '创建时间444',
      width: 180,
      search: {
        el: 'date-picker',
        span: 2,
        order: 2,
        props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
        defaultValue: ['2022-11-12 11:35:00', '2022-12-12 11:35:00'],
      },
    },
    { prop: 'idCard', label: '身份证号', search: { el: 'input', order: 1 } },
    { prop: 'idCard1', label: '身份证号1', search: { el: 'input', order: 3 } },
    { prop: 'idCard2', label: '身份证号2', search: { el: 'input', order: 4 } },
    { prop: 'idCard3', label: '身份证号3', search: { el: 'input', order: 5 } },
    { prop: 'idCard4', label: '身份证号3', search: { el: 'input', order: 5 } },
    { prop: 'idCard5', label: '身份证号3', search: { el: 'input', order: 5 } },
    { prop: 'idCard6', label: '身份证号3', search: { el: 'input', order: 5 } },
    { prop: 'idCard7', label: '身份证号3', search: { el: 'input', order: 5 } },
  ]);

  const gridOptions = reactive({
    columns: [
      { type: 'checkbox', width: 70 },
      { field: 'name', title: 'Name', search: { el: 'input', order: 1 } },
      {
        field: 'sex',
        title: 'Sex',
        search: { el: 'select', order: 2, props: { filterable: true } },
      },
      { field: 'age', title: 'Age', search: { el: 'input', order: 4, props: { type: 'number' } } },
      {
        field: 'create_date',
        title: 'Create Date',
        search: {
          el: 'date-picker',
          span: 2,
          order: 3,
          props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
          defaultValue: ['2022-11-12 11:35:00', '2022-12-12 11:35:00'],
        },
      },
    ],
    data: [
      { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
      { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
      { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
      { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
    ],
    toolbarConfig: {
      slots: {
        buttons: 'toolbar_buttons',
        tools: 'toolbar_tools',
      },
      zoom: {
        iconIn: 'vxe-icon-fullscreen',
        iconOut: 'vxe-icon-minimize',
      },
      custom: {
        icon: 'vxe-icon-menu',
      },
    },
  });

  const searchColumns = computed(() =>
    gridOptions.columns
      .filter((item) => item.search?.el || item.search?.render)
      .sort((a, b) => a.search.order - b.search.order)
  );

  const handleSetting = () => {
    xTableRef.value.openCustom();
  };
  const handleSizeChange = () => {};
  const handleCurrentChange = () => {};

  const search = () => {};
</script>
<style lang="scss" scoped></style>
