
<template>
    <div style="width: 85vw;height:90vh;position: relative">
        <div style="padding:20px 10px;">
            <Space>
                <span>用户id:</span>
                <Input v-model="value" placeholder="id" clearable style="width: 200px" />
                <span>用户名称：</span>
                <Input prefix="ios-contact" placeholder="Enter name" style="width: auto" />
                <Button type="primary" shape="circle" icon="ios-search">查询</Button>
                <Button type="primary" ghost  @click="modal = true">新增</Button>
              <Modal v-model="modal" title="Common Modal dialog box title" @on-ok="ok" @on-cancel="cancel">
                <p>Content of dialog</p>
                <p>Content of dialog</p>
                <p>Content of dialog</p>
              </Modal>
            </Space>
        </div>
        <div style="width: 85vw; height: 78vh">
            <Table border ref="selection" :columns="columns" :data="data" style="height: 72vh" :row-class-name="setRowClassName" >
                <template #name="{ row }">
                    <strong>{{ row.name }}</strong>
                </template>
                <template #action="{ row, index }">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
                    <Button type="error" size="small" @click="remove(index)">删除</Button>
                </template>
            </Table>
            <div style="height: 6vh ;text-align: left;padding-top: 20px">
                <Page :total="40" size="small" show-elevator show-sizer />

            </div>
        </div>
    </div>
</template>

<script>
import { Page, Space } from "view-ui-plus";

export default {
    components: { Page, Space },
    data() {
        return {
            value: "", // 添加一个属性来绑定输入框的值
            currentPage: 1,            // 当前页码
            pageSize: 10,              // 每页显示的数据条数
            modal: false,
            columns: [
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    title: "姓名",
                    key: "name"
                },
                {
                    title: "年龄",
                    key: "age"
                },
                {
                    title: "地址",
                    key: "address"
                },
                {
                    title: "操作",
                    slot: "action",
                    width: 150,
                    align: "center"
                }
            ],
            data: [
                {
                    name: "John Brown",
                    age: 18,
                    address: "New York No. 1 Lake Park",
                    date: "2016-10-03"
                },
                {
                    name: "Jim Green",
                    age: 24,
                    address: "London No. 1 Lake Park",
                    date: "2016-10-01"
                },
                {
                    name: "Joe Black",
                    age: 30,
                    address: "Sydney No. 1 Lake Park",
                    date: "2016-10-02"
                },
                {
                    name: "Jon Snow",
                    age: 26,
                    address: "Ottawa No. 2 Lake Park",
                    date: "2016-10-04"
                },
                {
                    name: "Jon Snow",
                    age: 26,
                    address: "Ottawa No. 2 Lake Park",
                    date: "2016-10-04"
                },
                {
                    name: "Jon Snow",
                    age: 26,
                    address: "Ottawa No. 2 Lake Park",
                    date: "2016-10-04"
                },
                {
                    name: "Jon Snow",
                    age: 26,
                    address: "Ottawa No. 2 Lake Park",
                    date: "2016-10-04"
                },
                {
                    name: "Jon Snow",
                    age: 26,
                    address: "Ottawa No. 2 Lake Park",
                    date: "2016-10-04"
                },{
                name: "Jon Snow",
                age: 26,
                address: "Ottawa No. 2 Lake Park",
                date: "2016-10-04"
              },{
                name: "Jon Snow",
                age: 26,
                address: "Ottawa No. 2 Lake Park",
                date: "2016-10-04"
              }
            ]
        };
    },
    methods: {
        handleSelectAll(status) {
            this.$refs.selection.selectAll(status);
        },
      setRowClassName(row, index) {
        return 'custom-row';
      },
        show(index) {
            this.$Modal.info({
                title: "编辑用户信息",
                content: `姓名：<input value="${this.data[index].name}"><br>年龄：<input value="${this.data[index].age}"><br>住址：<input value="${this.data[index].address}">`
            });
        },
        remove(index) {
            this.data.splice(index, 1);
        },   // ... (现有的方法)
      handlePageChange(newPage) {
        this.currentPage = newPage;   // 更新当前页码
      },
    },
    ok () {
      this.$Message.info('Clicked ok');
    },
    cancel () {
      this.$Message.info('Clicked cancel');
    },
};
</script>