<template>
    <div class="op-page">
        <cs-dynamic-table ref="child" :prop="csTable" :parent="this">
            <template slot="form" scope="props">
                <base-user-form :model="props.obj" :action="props.action" :tableVm="props.tableVm"
                                 @close-modal="props.closeModal" :tableInfo="props.tableInfo"
                                 ref="form"></base-user-form>
            </template>
        </cs-dynamic-table>
    </div>
</template>
<script lang="ts">
    import {Component, Prop, Vue, Emit} from "vue-property-decorator";
    import BaseUserForm from "./user-form.vue";

    @Component({
        components: {
            BaseUserForm
        }
    })
    export default class BaseUserIndex extends Vue {
        private authType: Array<any> = [{label: "密码", value: "0"}, {label: "LDAP", value: "1"}];
        private csTable: any = {
            module:"user",
            formWidth: 35,
            parentVm: this,
            dataSrc: this.$msPrefix.base + "/api/v1/data/all/user",
            delSrc: this.$msPrefix.base + "/api/v1/data/delete/user/",
            batchDelUri: this.$msPrefix.base + "/api/v1/data/batch/user",
            dataProp: "data.content",
            postMethod: false,
            showDefaultOpColumn:true,
            pageableProp: {
                pageSize: "data.size",
                total: "data.totalElements",
                currentPage: "data.number"
            },
            showIndex: true,
            emptyModel: {
                "username": "",
                "password": "",
                "confirmPassword": "",
                "name": "",
                "sex": 0,
                "phone": "",
                "authType": 0,
                "email": "",
                "groupId": 0,
                "status": 0,
                "remark": ""
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                }, {
                    key: 'username',
                    title: '用户名',
                    align: 'center',
                },
                {
                    key: 'name',
                    title: '姓名',
                    align: 'center',
                },
                {
                    key: 'sex',
                    title: '性别',
                    align: 'center',
                    render: (h, params) => {
                        let sexStr = params.row.sex == 0 ? '男' : '女';
                        return h("span", sexStr);
                    }
                },
                {
                    key: 'phone',
                    title: '联系电话',
                    align: 'center',
                }]
        }

        clickEvent(name: string, obj: any) {
            if (name == 'delete') {
                (this.$refs.child as any).handleDelete(obj.id)
            } else {
                (this.$refs.child as any).formInfo.title = name == 'update' ? "编辑" : "详情";
                (this.$refs.child as any).formInfo.action = name == 'update' ? 'update' : 'detail';
                (this.$refs.child as any).formInfo.model = _.cloneDeep(obj);
                (this.$refs.child as any).dialogVisible = true;
            }

        }

    }
</script>