<template>
    <transition appear enter-active-class="animated fadeIn">
        <q-card class="shadow-24">
            <!-- 搜索条件 -->
            <q-card-section>
                <div class="row q-col-gutter-md">
                    <!-- 刷新 查询 -->
                    <div class="col-xl-2 col-lg-2 col-sm-12">
                        <q-btn-group push glossy>
                            <q-btn push label="新增" icon="add" @click="addOrEditForm()">
                                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                    content-style="font-size: 12px">{{
                                        '新增一条数据' }}</q-tooltip>
                            </q-btn>
                            <q-btn push label="刷新" icon="refresh" @click="reFresh()">
                                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                    content-style="font-size: 12px">清空所有条件并，刷新数据</q-tooltip>
                            </q-btn>
                            <q-btn push label="查询" icon="search" @click="getPage()">
                                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                    content-style="font-size: 12px">按条件查询数据</q-tooltip>
                            </q-btn>
                        </q-btn-group>
                    </div>
                    <!-- 搜索条件 -->
                    <div class="col-xl-2 col-lg-2 col-sm-12">
                        <q-input dense label="用户账号" outlined v-model="pagination.data.userName" />
                    </div>
                    <div class="col-xl-2 col-lg-2 col-sm-12">
                        <q-select dense outlined v-model="pagination.data.activated" :options="activatedList" emit-value
                            map-options label="用户状态" />
                    </div>
                </div>
            </q-card-section>
            <q-card-section style="padding:0 10px 15px 10px;">
                <div class="row q-col-gutter-md">
                    <div class="col-xl-12 col-lg-12 col-sm-12">
                        <q-table class="my-sticky-header-column-table" :rows="list" row-key="id" separator="cell"
                            :loading="loading" :columns="columns" @request="onRequest" v-model:pagination="pagination"
                            :table-style="{ height: Screen.height - 190 + 'px' }" flat bordered
                            :rows-per-page-options="[20, 30, 40, 50, 100]">
                            <template v-slot:body="props">
                                <q-tr :props="props" class="tr_hover">
                                    <q-td style="font-size: 16px;" key="index" :props="props">{{ props.rowIndex + 1
                                    }}</q-td>
                                    <q-td style="font-size: 16px;" key="userName" :props="props">{{ props.row.userName
                                    }}</q-td>
                                    <q-td style="font-size: 16px;" key="nickName" :props="props">{{ props.row.nickName
                                    }}</q-td>
                                    <q-td style="font-size: 16px;" key="userType" :props="props">{{ props.row.userType
                                    }}</q-td>
                                    <q-td style="font-size: 16px;" key="email" :props="props">{{ props.row.email
                                    }}</q-td>
                                    <q-td style="font-size: 16px;" key="phonenumber" :props="props">{{ props.row.phonenumber
                                    }}</q-td>
                                    <q-td style="font-size: 16px;" key="sex" :props="props">{{ helper.getSex(props.row.sex)
                                    }}</q-td>
                                    <q-td style="font-size: 16px;" key="activated" :props="props">
                                        <q-badge style="font-size: 18px;height:30px;"
                                            :color="props.row.activated == 1 ? 'green' : 'red'"
                                            :label="props.row.activated == 1 ? '启用' : '停用'" />
                                    </q-td>
                                    <q-td style="font-size: 16px;" key="remark" :props="props">{{ props.row.remark
                                    }}</q-td>
                                    <q-td style="font-size: 16px;" key="loginIp" :props="props">{{ props.row.loginIp
                                    }}</q-td>
                                    <q-td style="font-size: 16px;" key="loginDate" :props="props">{{ props.row.loginDate
                                    }}</q-td>
                                    <q-td key="action" :props="props" style="width: 100px">
                                        <q-btn round flat push color="info" icon="edit" @click="addOrEditForm(props.row)">
                                            <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                                content-style="font-size: 12px">编辑这条数据</q-tooltip>
                                        </q-btn>
                                        <q-btn round flat push color="negative" icon="delete"
                                            @click="openDelDialog(props.row)">
                                            <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                                content-style="font-size: 12px">删除这条数据</q-tooltip>
                                        </q-btn>
                                    </q-td>
                                </q-tr>
                            </template>
                        </q-table>
                    </div>
                </div>
            </q-card-section>
        </q-card>
    </transition>

    <!-- 用户管理 -->
    <addOrEditDialog ref="addOrEdit" @refresh="getPage" />
    <!-- 删除弹窗 -->
    <customDialog ref="deleteDialogRef" @func="delFunc" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Notify, Screen, date } from 'quasar';
import { loginApi } from 'src/api/login/loginApi';
import helper from 'src/Utils/helper'
import { SysUserSearchEntity } from 'src/api/login/model/login';
import { Pagination, cconvert } from 'src/api/class';
import customDialog from 'src/components/customDialog.vue';
import addOrEditDialog from 'src/pages/sysUser/components/addOrEditDialog.vue'

//公共
const pagination = ref(new Pagination(new SysUserSearchEntity()));
const loading = ref(false);

const activatedList = ref([
    { label: '启用', value: true },
    { label: '停用', value: false }
])
const columns = ref([
    {
        name: 'index',
        label: '序号',
        field: 'index',
        align: 'center',
        headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
    },
    {
        name: 'userName',
        align: 'center',
        label: '用户账号',
        field: 'userName',
        headerClasses: 'text-h4 text-weight-bold',
        headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
    },
    { name: 'nickName', align: 'center', label: '用户昵称', field: 'nickName', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'userType', align: 'center', label: '用户类型', field: 'userType', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'email', align: 'center', label: '用户邮箱', field: 'email', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'phonenumber', align: 'center', label: '手机号码', field: 'phonenumber', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'sex', align: 'center', label: '用户性别', field: 'sex', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'activated', align: 'center', label: '用户状态', field: 'activated', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'remark', align: 'center', label: '备注', field: 'remark', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'loginIp', align: 'center', label: '最后登录IP', field: 'loginIp', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'loginDate', align: 'center', label: '最后登录时间', field: 'loginDate', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'action', align: 'center', label: '操作', field: 'action', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' }
])

const list = ref([]);

onMounted(() => {
    getPage();
})

const reFresh = () => {
    pagination.value.data = new SysUserSearchEntity();
    getPage();
};

const onRequest = (props: any) => {
    const { page, rowsPerPage, rowsNumber } = props.pagination;
    pagination.value.page = page;
    pagination.value.rowsPerPage = rowsPerPage != 0 ? rowsPerPage : rowsNumber;
    getPage();
};

const getPage = () => {
    loginApi.getSysUserPageList(pagination.value).then((res: any) => {
        list.value = res.data;
        cconvert(pagination.value, res);
    });
}

const addOrEdit = ref();
const addOrEditForm = (row?: any) => {
    addOrEdit.value.clickForm(row);
};

const deleteDialogRef = ref();
const openDelDialog = (row: any) => {
    deleteDialogRef.value.open(row);
}
// 删除
const delFunc = (e: any) => {
    loginApi.delete(e.id).then(() => {
        getPage();
    });
};

</script>
<style scoped>
/* .tr_hover {
    background: #aaaaaa;
  } */

.tr_hover:hover {
    background: #e8e8e8;
}

.click-hover {
    cursor: pointer;
    color: #1976d2;
}

.click-hover:hover {
    color: #2196f3;
    /* background-color: yellow; */
}
</style>