<template>
    <div id="stage">
        <div class="op-page device-type-page">
            <cs-dynamic-table ref="child" :prop="csTable" :parent="this" class="cubic front">
                <template slot="form" scope="props">
                    <device-type-form :model="props.obj" :action="props.action" :tableVm="props.tableVm" @close-modal="props.closeModal" :tableInfo="props.tableInfo" ref="form"></device-type-form>
                </template>
            </cs-dynamic-table>
            <Index :src="targetSrc" class="cubic end" :name="targetName" @back="back"></Index>
        </div>
    </div>
</template>
<script lang="ts">
    import { Component, Prop, Vue, Emit } from "vue-property-decorator";
    import DeviceTypeForm from "./device-type-form.vue";
    import Index from "./index.vue";

    @Component({
        components: {
            DeviceTypeForm,Index
        }
    })
    export default class DeviceType extends Vue {
        targetSrc : String = "";
        targetName : any = "";
        private csTable:any = {
            formWidth: 35,
            parentVm: this,
            dataSrc: this.$msPrefix.psem+"/api/v1/data/all/PSEMDeviceType",
            delSrc: this.$msPrefix.psem+"/api/v1/data/delete/PSEMDeviceType/",
            batchDelUri: this.$msPrefix.psem+"/api/v1/data/batch/PSEMDeviceType",
            dataProp: "data.content",
            postMethod: false,
            pageableProp: {
                pageSize: "data.size",
                total: "data.totalElements",
                currentPage: "data.number"
            },
            showIndex: true,
            actions: { //表头操作按钮
                replace: false, //替换现有菜单
                def: [{
                    name: "导出配置文件",
                    icon: "ios-download-outline",
                    type: 'primary',
                    action: ()=> {
                        this.downloadSetting();
                    }
                },{
                    name: "导出指标",
                    icon: "ios-cloud-download-outline",
                    type: 'primary',
                    action: ()=> {
                        this.export();
                    }
                }]
            },
            emptyModel:  {
                name:"",
                uniqueKey:"",
                uri:"",
                show:true,
                nameZh:"",
                profileId:"",
                accessType:null,
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                }, {
                    key: 'name',
                    title: '设备类型标识',
                    align: 'center',
                },
                {
                    key: 'uniqueKey',
                    title: '设备类型键',
                    align: 'center'
                },
                {
                    key: 'uri',
                    title: '资源前缀',
                    align: 'center',
                },
                {
                    key: 'show',
                    title: '是否展示',
                    align: 'center',
                     render: (h, params) => {
                        let value=params.row.show?"是":"否";
                        return h('span',value)
                    }
                },
                {
                    key: 'nameZh',
                    title: '设备类型名称',
                    align: 'center',
                },
                {
                    key: 'accessType',
                    title: '指标值获取方式',
                    align: 'center',
                    render: (h, params) => {
                        let value=['标准批量获取','标准遍历获取','遍历设备实例获取'][params.row.accessType];
                        return h('span',value)
                    }
                },
                {

                    title: '操作',
                    key: 'action',
                    minWidth:200,
                    align: 'center',
                    render: (h, params) => {
                        let menus = [{
                            icon: 'ios-list',
                            action: 'list',
                            label: '设备指标',
                            type:'primary'
                        },{
                            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=="list"){
                this.targetSrc=this.$msPrefix.psem+"/api/v1/data/list/PSEMIndicator"
                this.targetName=obj.name;
                jq(".device-type-page").removeClass("left").addClass("right");
            }else 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';
                obj.profileId=obj.psemProfile.id;
                (this.$refs.child as any).formInfo.model = _.cloneDeep(obj);
                (this.$refs.child as any).dialogVisible = true;
            }

        }

        export(){
            this.exportFile(this.$msPrefix.psem+'/api/v1/psem/export/',"设备指标.xlsx")
        }

        back(){
            jq(".device-type-page").toggleClass("left right");
            (this.$refs.child as any).getData();
        }

        downloadSetting(){
            this.exportFile(this.$msPrefix.psem + '/api/v1/psem/exportXml',"dc-openplat-showparaConfig.xml")
        }

        exportFile(url,name){
             var deviceNames = (this.$refs.child as any).multipleSelection.map((item) => {
                return item.name;
            })
            this.download(url,deviceNames,name)
        }
        
        mounted(){
            this.$nextTick(()=>{
                let width=Math.floor(jq(".device-type-page").width()/2);
                jq(".front").css("transform",`translateZ(${width}px)`)
                jq(".end").css("transform",`rotateY(90deg) translateZ(${width}px)`)
            })
        }

    }
</script>