<template>
  <div
    style="
      padding: 20px;
      background-color: white;
      width: 1400px;
      margin: 0 auto;
    "
  >
    <div style="font-weight: 700; font-size: 23px">图书管理 - 图书入库信息</div>
    <div style="">
      <div style="margin-top: 20px">
        <div style="display: inline-block">
          图书名称：<el-input
            style="width: 300px"
            v-model="input"
            placeholder="请输入图书名称"
          />
        </div>
        <div style="display: inline-block; margin: 0 20px">
          入库时间：
          <el-date-picker
            v-model="value2"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
          />
          <el-button type="primary" style="margin-left: 15px"
            ><el-icon><Search /></el-icon> 搜索</el-button
          >
        </div>

        <el-button style="float: right; margin-top: 3px" type="primary"
          ><el-icon><Plus /></el-icon>新增图书信息</el-button
        >
      </div>
    </div>

    <div style="margin-top: 20px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><timer /></el-icon>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="图书名称" width="240">
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="hover"
              placement="top"
              width="auto"
            >
              <template #default>
                <div>name: {{ scope.row.name }}</div>
                <div>address: {{ scope.row.address }}</div>
              </template>
              <template #reference>
                <el-tag>{{ scope.row.name }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="图书位置"></el-table-column>
        <el-table-column label="入库日期"></el-table-column>
        <el-table-column label="入库人"></el-table-column>
        <el-table-column label="入库数量"></el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px; float: right"
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
const value2 = ref("");
import { Timer } from "@element-plus/icons-vue";
const currentPage4 = ref(4);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
// 分页
const handleSizeChange = (val: number) => {};
const handleCurrentChange = (val: number) => {};
//表单
interface User {
  date: string;
  name: string;
  address: string;
}

const handleEdit = (index: number, row: User) => {};
const handleDelete = (index: number, row: User) => {};

const tableData: User[] = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<style lang="scss" scoped></style>
