<template>
    <div class="de-instance-page op-page">
         <cs-dynamic-table ref="child" :prop="csTable" :parent="this">
             <template slot="form" scope="props">
                <device-instance-form :model="props.obj" :action="props.action" :tableVm="props.tableVm" @close-modal="props.closeModal" :tableInfo="props.tableInfo" ref="form"></device-instance-form>
            </template>
        </cs-dynamic-table>
        <Modal v-model="importFlag" title="设备实例导入" width="50" :mask-closable="false" @on-cancel="closeModal">
            <device-instance-import @close-modal="closeModal" ref="deploy" @get-data="searchTable"></device-instance-import>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script lang="ts">
    import { Component, Prop, Vue, Emit,Watch } from "vue-property-decorator";
    import DeviceInstanceForm from "./device-instance-form.vue";
    import DeviceInstanceImport from "./device-instance-import.vue";

    @Component({
        components: {
            DeviceInstanceForm,DeviceInstanceImport
        }
    })
    export default class Setting extends Vue {
        private model : object ={
            nameLike:""
        }
        importFlag : boolean =false;
        private csTable:any = {
            formWidth: 35,
            parentVm: this,
            dataSrc: this.$msPrefix.psem+"/api/v1/data/list/PSEMDeviceInstance",
            delSrc: this.$msPrefix.psem+"/api/v1/data/delete/PSEMDeviceInstance/",
            batchDelUri: this.$msPrefix.psem+"/api/v1/data/batch/PSEMDeviceInstance",
            dataProp: "data.content",
            postMethod: true,
            pageableProp: {
                pageSize: "data.size",
                total: "data.totalElements",
                currentPage: "data.number"
            },
             search: {
                show: true,
                prop: "nameLike",
                value: "",
                placeholder: "按设备名称搜索"
            },
            actions: { //表头操作按钮
               def:[
                   {
                       name: "导入",
                       icon: "ios-cloud-upload-outline",
                       type: 'primary',
                       action: ()=> {
                           this.import();
                       }
                   },{
                       name: "导出",
                       icon: "ios-cloud-download-outline",
                       type: 'primary',
                       action: ()=> {
                           this.export();
                       }
                   }
               ]
            },
            showIndex: true,
            emptyModel:  {
                name: "",
                typeName: "",
                indicatorKey:"",
                indicatorParam:""
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    key: 'name',
                    title: '设备名称',
                    align: 'center',
                },
                {
                    key: 'typeName',
                    title: '设备类型',
                    align: 'center',
                    // render: (h, params) => {
                    //     let value={0:"jdbc",1:"snmp",2:"二次开发"}[params.row.type]
                    //     return h('span',value)
                    // }
                },
                {
                    key: 'indicatorName',
                    title: '设备指标',
                    align: 'center',
                },
                {
                    key: 'indicatorKey',
                    title: '指标关键字',
                    align: 'center',
                },
                {
                    key: 'indicatorParam',
                    title: '指标参数',
                    align: 'center',
                },
                {

                    title: '操作',
                    key: 'action',
                    minWidth:200,
                    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
                                },
                            })
                        ]);
                    }
                }]
        }

        import(){
            this.importFlag=!0;
        }
        export(){
            this.download(this.$msPrefix.psem+'/api/v1/psem/export/instance/instance',(this.$refs.child as any).multipleSelection,"instance.xlsx")
        }

        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.form as any).getIndexData(obj.typeName);
                (this.$refs.child as any).dialogVisible = true;
            }

        }
        downloadSetting(){
            this.download(this.$msPrefix.psem + '/api/v1/psem/exportXml',{},"配置文件.xml")
        }
        mounted(){
           
        }

        getPostData() {
            var data = _.cloneDeep(this.model);
            var postData = {};
            this.filterData(postData, data)
            this.csTable.postData = postData;
        }
        filterData(postData, data) {
            var keys = Object.keys(data);
            keys.forEach((item) => {
                if(data[item]){
                    postData[item] = [""+data[item]]
                }
            })
        }

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

        searchTable(){
            this.getPostData();
            (this.$refs.child as any).getData();
        }

    }
</script>

