<template>
  <div class="home">
    <a-card :bordered="false" style="width: 100%">
      <div class="homeIndex">
        <div>
          <a-form name="horizontal_login" layout="inline" autocomplete="off">
            <a-form-item label="名字" name="username">
              <a-input placeholder="请输入名字"> </a-input>
            </a-form-item>
            <a-form-item label="年龄" name="username">
              <a-input placeholder="请输入名字"> </a-input>
            </a-form-item>
            <a-form-item label="地址" name="username">
              <a-input placeholder="请输入名字"> </a-input>
            </a-form-item>
            <a-form-item label="时间" name="range-picker">
              <a-range-picker value-format="YYYY-MM-DD" />
            </a-form-item>
            <a-form-item label="名字" name="username">
              <a-input placeholder="请输入名字"> </a-input>
            </a-form-item>
          </a-form>
        </div>
        <div>
          <a-button type="primary">
            <template #icon>
              <ZoomInOutlined />
            </template>
            搜索</a-button
          >
        </div>
      </div>
    </a-card>
    <a-card :bordered="false" class="homeItem">
      <div>
        <a-button type="primary" style="margin-right: 10px">
          <template #icon>
            <PlusOutlined />
          </template>
          新增</a-button
        >
        <a-button
          type="primary"
          :disabled="!hasSelected"
          :loading="state.loading"
          @click="start"
        >
          Reload {{ state.selectedRowKeys.length }}
        </a-button>
      </div>
      <div style="margin-bottom: 16px"></div>
      <a-table
        :row-selection="{
          selectedRowKeys: state.selectedRowKeys,
          onChange: onSelectChange,
        }"
        :columns="columns"
        :data-source="data"
        :scroll="{ x: 1500, y: 430 }"
      />
    </a-card>
  </div>
</template>
<script lang="tsx" setup>
import { PlusOutlined, ZoomInOutlined } from "@ant-design/icons-vue";
import {computed, reactive, ref} from "vue";

type Key = string | number;

interface DataType {
  key: Key;
  name: string;
  age: number;
  address: string;
}

const columns = [
  {
    title: "名字",
    dataIndex: "name",
    customRender: (text: any) => {
      return text.value;
    },
  },
  {
    title: "年龄",
    dataIndex: "age",
  },
  {
    title: "地址",
    dataIndex: "address",
  },
  {
    title: " 操作",
    dataIndex: "operation",
    customRender: () => {
      return (
        <div>
          <a-button type="primary" danger class="margin-right-sm" >
            删除
          </a-button>
          <a-button class="margin-right-sm">查看</a-button>
          <a-button type="primary">编辑</a-button>
        </div>
      );
    },
  },
];

const dataSource = ref([])
const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
  dataSource.value =  data.push({
    key: i,
    name: `小明 ${i}`,
    age: 32 + i,
    address: `湖南省长沙市岳麓区. ${i}`,
  })as any;
}

const state = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [], //单击此处配置默认列
  loading: false,
});
const hasSelected = computed(() => state.selectedRowKeys.length > 0);

const start = () => {
  state.loading = true;
  // ajax request after empty completing
  setTimeout(() => {
    state.loading = false;
    state.selectedRowKeys = [];
  }, 1000);
};
const onSelectChange = (selectedRowKeys: Key[]) => {
  console.log("selectedRowKeys changed: ", selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};
</script>

<style lang="scss" scoped>
.home {
  height: calc(100vh - 130px);
  // background: #fff;
  overflow: hidden;
  .homeIndex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .homeItem {
    width: 100%;
    height: calc(100vh - 100px);
    overflow: hidden;
    margin-top: 20px;
  }
}
</style>
