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

@Component({
  components: {
    JdbcForm
  }
})
export default class SmsJdbc extends Vue {
    private csTable:any = {
            formWidth: 35,
            parentVm: this,
             dataSrc: this.$msPrefix.sms+"/api/v1/data/all/jdbcProfile",
            delSrc: this.$msPrefix.sms+"/api/v1/data/delete/jdbcProfile/",
            batchDelUri: this.$msPrefix.sms+"/api/v1/data/batch/jdbcProfile",
            dataProp: "data.content",
            postMethod: false,
            pageableProp: {
                pageSize: "data.size",
                total: "data.totalElements",
                currentPage: "data.number"
            },
            showIndex: true,
            emptyModel:  {
              name: "",
              code: "",
              sql: "",
              params: "",
              extInfo: ""
            },
            columns: [
            {
                type: 'selection',
                width: 60,
                align: 'center',
            }, {
                key: 'name',
                title: '名称',
                align: 'center',
            }, {
                'key': 'code',
                'title': '数据源',
                'align': 'center',
            }, 
           {

                title: '操作',
                key: 'action',
               
                align: 'center',
                render: (h, params) => {
                    let menus = [{
                        icon: 'ios-eye',
                        action: 'detail',
                        label: '详情',
                        type:'info'
                    }, {
                        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;
        }
        
    }
  
}
</script>