<template>
  <div>
    <div class="text-left p-8">
        <el-form inline>
            <el-form-item>
                <el-button type="primary" plain @click="openAddUserDialog">创建用户</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" plain @click="handleConfirm">批量删除</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }" :row-style="{ height: '58px' }">
        <el-table-column type="selection" width="40" />
        <el-table-column property="name" label="序号" width="55" />
        <el-table-column property="name" label="用户名" show-overflow-tooltip />
        <el-table-column property="name" label="用户名称" show-overflow-tooltip />
        <el-table-column property="name" label="备注" show-overflow-tooltip />
        <el-table-column property="name" label="用户密码" show-overflow-tooltip />
        <el-table-column property="name" label="创建时间" width="280" show-overflow-tooltip />
        <el-table-column label="操作" width="220">
            <template #default="scope">
                <el-button type="primary" plain @click="handleDetails(scope.row)">
                    编辑
                </el-button>
                <el-button type="danger"  plain @click="handleConfirm(scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
        <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
            @pagination="getData" />
    </div>
    <!-- 删除弹窗组件 -->
    <deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" />
    <!-- 创建用户弹窗组件 -->
    <addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :user-count="userCount" :user-name="userName"
        :user-remark="userRemark" :user-password="userPassword " @confirm="handleConfirm" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import deleteDialog from '@/components/Delete/index.vue'
import addUserDialog from './components/addUserDialog.vue'

const userCount = ref('')
const userName = ref('')
const userRemark = ref('')
const userPassword = ref('')
const showDeleteDialog = ref(false)
const deleteMode = ref('2')
const dialogVisible = ref(false)
const mode = ref('1')
const tableData = ref([
    {
        name: '1',
    },
    {
        name: '1',
    },
    {
        name: '1',
    },
    {
        name: '1',
    },
    {
        name: '1',
    },
    {
        name: '1',
    },
    {
        name: '1',
    },
    {
        name: '1',
    },
    {
        name: '1',
    },
    {
        name: '1',
    }
])
const pageObj = ref({
    total: 10,
    pageSize: 10,
    pageNo: 1
})
const handleDetails = (row: any) => {
    mode.value = '2'
    // userCount.value = row.name
    // userName.value = row.name
    // userRemark.value = row.name
    // userPassword.value = row.name
    dialogVisible.value = true
    console.log(row);
}

const handleConfirm = (row: any) => {
    showDeleteDialog.value = true
}

const getData = () => {
    console.log('getData');
}

const handleDeleteConfirm = () => {

}
const openAddUserDialog = () => {
    mode.value = '1'
    dialogVisible.value = true
}
</script>

<style scoped>
/* 去除按钮边框 */
.el-button:focus {
    outline: none;
}
</style>

<style>
/* 修改弹窗样式 */
.el-dialog {
    background-image: url("@/assets/picture/dialog1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .el-dialog__title {
        color: #ffffff;
    }
}
/* 修改el输入框的样式 */
.el-input__wrapper {
    background-color: #1d5484;
    box-shadow: none;
}
</style>
