<template>
    <PageHeader :title="title">
        <template #action>
            <Button v-if="elements.indexOf('4-1') != -1" name="添加用户" type="primary"
                @click="$router.push('userinfo')">添加用户</Button>
        </template>
        <template #content>
            <Space>
                <Input v-model="searchinfo.name" placeholder="请输入用户名" style="width: 260px"
                    @on-contextmenu="(row) => { choice_id = row.id }" />
                <Select v-model="searchinfo.organizations" multiple style="width:260px">
                    <Option v-for="item in organization" :value="item.id" :key="item.id">{{ item.path }}</Option>
                </Select>
                <Select v-model="searchinfo.roles" multiple style="width:260px">
                    <Option v-for="item in role" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
                <Button type="primary" @click="getusers">搜索</Button>
            </Space>
        </template>
    </PageHeader>
    <div style="margin-top: 8px">
        <Table row-key="id" :columns="columns" :data="users" show-context-menu @on-contextmenu="choiceRowMethod">
            <template #date="{ row, index }">
                <div>{{ row.create_date }}</div>
            </template>
            <template v-if="elements.indexOf('4-2') != -1" name="禁用" #action="{ row }">
                <Switch :model-value="row.disable" :true-value="1" :false-value="0"
                    @on-change="(status) => { changeDisable(row, status) }">
                    <template #open>
                        <span>开</span>
                    </template>
                    <template #close>
                        <span>关</span>
                    </template>
                </Switch>
            </template>
            <template #contextMenu>
                <DropdownItem @click="goEdit()">编辑</DropdownItem>
            </template>
        </Table>
        <Page :total="totals" :page-size="searchinfo.page_size" v-model="searchinfo.page_num" @on-change="getusers()"
            show-total style="margin-top: 20px;" />
    </div>
</template>

<script>

export default {
    props: ['isCollapsed',],
    data() {
        return {
            page_id: 17,
            title: "用户管理",
            choiceRow: null,
            columns: [
                {
                    title: '姓名',
                    key: 'name',
                    align: 'center'
                }, {
                    title: '角色',
                    key: 'role_name',
                    align: 'center'
                }, {
                    title: '组',
                    key: 'path',
                    align: 'center'
                },
                {
                    title: '创建时间',
                    slot: 'date',
                    align: 'center'
                }
            ],
            users: [
            ],
            totals: 0,
            organization: [],
            role: [],
            searchinfo: {
                name: null,
                roles: [],
                organizations: [],
                page_size: 10,
                page_num: 1
            },
            choice_id: null,
            elements: []
        }
    },
    methods: {
        choiceRowMethod(row) {
            if (this.elements.indexOf("4-3") == -1) return
            this.choiceRow = row
        },
        goEdit() {
            if (!this.choiceRow) return this.$Message.error("权限不足")
            this.$router.push({ name: 'userinfo', query: { id: this.choiceRow.id } })
        },
        getusers() {
            this.$request("get", '/user/user_list', this.searchinfo, this, (data) => { this.users = data.data.rows || []; this.totals = data.data.total || 0; console.info(this.users) })
        },
        changeDisable(row, status) {
            this.$request("post", "/user/updateuser", { id: row.id, disable: status ? 1 : 0 }, this)
        },
        getOrg() {
            this.$request("get", "/identity/organization_list", null, this, (data) => { this.organization = data.data })
        },
        getRole() {
            this.$request("get", "/identity/role_list", null, this, (data) => { this.role = data.data; console.info(this.role) })
        },
        jsonPath(target, key, key_value, get_value_key) {
            const index = target.findindex(item => { item[key] == key_value })
            if (index == -1) {
                return null
            } return target[index][get_value_key]
        }
    },
    watch: {
        elements(value) {
            if (value.indexOf('4-2') != -1 && this.columns.findIndex(each => { return each.title == '禁用' }) == -1) {
                this.columns.push({
                    title: '禁用',
                    slot: 'action',
                    align: 'center'
                }
                )
            } else {
                const index = this.columns.findIndex(ele => { return ele.title == '禁用' })
                index != -1 && this.columns.splice(index, 1)
            }
        }
    },
    created() {
        this.$getElements(this.page_id, this, (data) => this.elements = data.data)
        this.getOrg();
        this.getRole();
        this.getusers();
    }
};
</script>

<style>
.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vertical-center-modal .ivu-modal {
    top: 0;
}
</style>