<template>
    <div class="oo-page">
        <div class="oo-server">
            <cs-dynamic-table ref="child" :prop="csTable" :parent="this">
                <template slot="form" scope="props">
                   <black-command-form :model="props.obj" :action="props.action" :tableVm="props.tableVm" @closeModal="props.closeModal" :tableInfo="props.tableInfo" ref="form"></black-command-form>
                </template>
            </cs-dynamic-table>
        </div>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from "vue-property-decorator";
    import BlackCommandForm from "./black-form.vue";
    let matchTypesObj: Object = {
            ALL_MATCH:"全匹配",
            CONTAINS_MATCH:"匹配包含",
            START_MATCH:"匹配开头",
            REG_MATCH:"正则匹配"
        };
    @Component({
        components: {
             BlackCommandForm
        }
    })
    export default class CommandBlackList extends Vue {
        modelFlag : boolean = false;
        private activeModel : any = {
            code:"",
            name:"",
            description:"",
            roleMenus:[]
        };
        private csTable : any = {
            formWidth: 35,
            parentVm: this,
            dataSrc: this.$msPrefix.automation+"/api/v1/data/list/commandBlack",
            delSrc: this.$msPrefix.automation+"/api/v1/data/delete/commandBlack/",
            batchDelUri: this.$msPrefix.automation+"/api/v1/data/batch/commandBlack",
            dataProp: "data.content",
            postMethod: true,
            pageableProp: {
                pageSize: "data.size",
                total: "data.totalElements",
                currentPage: "data.number"
            },
            showIndex: true,
            emptyModel:  {
                command:"",
                description:"",
                matchRuleType:"ALL_MATCH",
                keepBlank:0
            },
            search: {
                show: true,
                prop: "commandLike",
                value: "",
                placeholder: "输入命令内容,回车搜索"
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                }, {
                    key: 'command',
                    title: '命令',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    sortable: "custom"
                }, {
                    key: 'description',
                    title: '描述',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                     sortable: "custom"
                },{
                    key: 'matchRuleType',
                    title: '匹配方式',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                     sortable: "custom",
                    render:function(h,params){
                        let typeName=matchTypesObj[params.row.matchRuleType]
                        return h("span",typeName)
                    }
                },{
                    key: 'keepBlank',
                    title: '保留空格匹配',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                     sortable: "custom",
                    render:function(h,params){
                        let typeName=params.row.keepBlank==1?"是":"否";
                        return h("span",typeName)
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    minWidth:200,
                    align: 'center',
                    render: (h, params) => {
                        let menus = [{
                            icon: 'ios-eye',
                            action: 'detail',
                            label: '详情',
                            type:'primary'
                        },{
                            icon: 'ios-create-outline',
                            action: 'update',
                            label: '编辑',
                            type:'primary'
                        },{
                            icon: 'md-trash',
                            action: 'delete',
                            label: '删除',
                            type:'error'

                        }];
                        let clickEvent = this.clickEvent;
                        return h('div', [
                            h('CsButton', {
                                props: {
                                    actions: menus,
                                    click: clickEvent,
                                    data: params.row,
                                    size:"small",
                                    styleCss:"marginRight:5px",
                                    disabled:params.row._disabled
                                },
                            })
                        ]);
                    }
                }]
        }
        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;
            }

        }

        closeModal(){
            this.modelFlag=!1;
        }


    }
</script>
