<template>
  <Card :padding="0"    dis-hover :bordered="false"  :style="'background:#fff;height:' + clientHeight +'px'">
    <div ref="head">
        <Card :padding="0" style="padding-top:14px;padding-left:16px;padding-right:16px;border-radius:0px;" :bordered="false" dis-hover>
            <ListBtnToolbar ref="menutoolbar" :config="menuToolbar"  :moduleMethod="moduleMethod"   @doAction="doAction"/>
            <Divider style="margin-top:16px;margin-bottom:0px;" />
        </Card>
    </div>
    <Card :padding="0" :bordered="false" dis-hover style="padding-top:0px;padding-left:16px;padding-right:16px;">
        <EditGridCardS  ref="grid" :config="myConfig.gridConfig"  :dictData="dictData" />
    </Card>
  </Card>
</template>

<script>
import ListBtnToolbar from './listbtntoolbar.vue';
import EditGridCardS from './editgridcard.vue';
export default {
    name:'mbillsinglegrid',
    components:{ListBtnToolbar,EditGridCardS},
    data () {
        return {
            myConfig:{
               billKey:'ph_key',
               searchParam:{}
            },
            menuToolbar:{}
        };
    },
    props:{
        config: {
            type:Object,
            default:null
        },
        dictData: {
            type: Object,
            default:null
        },
        moduleMethod:{
            type:Array,
            default: () => {
                return [];      
            }
        }
    },
    computed: {
        clientHeight () {
            return this.$Store.state.app.clientHeight;
        }
    },
    created () {
        this.myConfig =  Object.assign({},this.myConfig, this.config);
        this.myConfig.gridConfig.headStyle='';
        this.myConfig.gridConfig.showCondition = false;
        this.myConfig.gridConfig.showAddBtn = false;
        this.myConfig.gridConfig.showDelBatchBtn = false;
        this.myConfig.gridConfig.onSelectionChange = this.gridOnSelectionChange;
        this.myConfig.gridConfig.height = 1;
        this.myConfig.gridConfig.width = 1;
        this.myConfig.gridConfig.adjustHeight = 0;
        this.myConfig.gridConfig.adjustWidth = 0;
        this.myConfig.gridConfig.modetype = '2';
        this.myConfig.gridConfig.showTitle = false;
        this.myConfig.gridConfig.showPage = false;
        this.myConfig.gridConfig.generalOrientation = true;
        
        if (this.myConfig.gridConfig.pageSizeNum === undefined) {
            this.myConfig.gridConfig.pageSizeNum = 20;
        }
        this.myConfig.gridConfig.items.forEach(el => {
            if (el.type !== 'CheckBox') {
                if (el.tooltip === undefined) {
                    el.tooltip = true;
                }
                if (el.resizable  === undefined) {
                    el.resizable  = true;
                }
            }
        });
        if (this.myConfig.menuToolbar && this.myConfig.menuToolbar.items) {
            this.menuToolbar = this.$Method.copy(this.myConfig.menuToolbar);     
        } 
    },
    methods: {
        doMenuToolbar() {
            if (this.$refs.menutoolbar) {
                this.$refs.menutoolbar.setAllReadOnly(true);
                this.$refs.menutoolbar.setReadOnly('addData',false);
                this.$refs.menutoolbar.setReadOnly('editData',false);
            }
        },
        doAction(obj) {
            const method = obj.name;
            const methodBefore = method + 'Before';
            const methodAfter = method + 'After';
            if (obj.name === 'addData' || obj.name === 'editData') {
                let flag =  true;
                if (this.$parent[methodBefore]) {
                    flag = this.$parent[methodBefore](obj);
                }
                if (flag) {
                    if (obj.name === 'addData') {
                        this.$refs.grid.setReadOnly(false);
                        this.$refs.menutoolbar.setAllReadOnly(true);
                        this.$refs.menutoolbar.setReadOnly('saveData', false);
                        if (flag !== true) {
                            this.$refs.grid.addRow(flag);
                        } else {
                             this.$refs.grid.addRow();
                        }
                       
                    }
                    if (obj.name === 'editData') {
                        this.$refs.grid.setReadOnly(false);
                        this.$refs.menutoolbar.setReadOnly('editData', true);
                        this.$refs.menutoolbar.setReadOnly('saveData', false);
                    }
                    if (this.$parent[methodAfter]) {
                        this.$parent[methodAfter]();
                    }
                }
            } else {
                if (obj.name === 'saveData') {
                    let flag = this.checkValidate();
                    if (flag) {
                        this.alert('必填项不允许为空');
                        return false;
                    }
                    obj.para = this.$refs.grid.getChangeData();
                }
                obj.onOk = this.onOk;
                let flag =  true;
                if (this.$parent[methodBefore]) {
                    flag = this.$parent[methodBefore](obj);
                }
                if (!flag) {
                    return;
                }
                if (obj.name === 'delData') {
                    let text = '删除';
                    obj.para = this.$refs.grid.getSelection();
                    let self = this;
                    self.$Modal.confirm({
                        title:'确认',
                        content:'是否确认' + text + '数据？',
                        onOk:() => {
                            obj.para.forEach(el => {
                                if (obj.name === 'delData') {
                                    el.flag = 'D';
                                }
                            });
                           this.$emit('doAction', obj);
                        }
                    });
                } else {
                    this.$emit('doAction', obj);
                }
            }
        },
        onOk(action, data) {
            if (action.name === 'saveData') {
                this.refurbish();
                this.$refs.menutoolbar.setReadOnly('editData', false);
                this.$refs.menutoolbar.setReadOnly('saveData', true);
            }
            if (action.name === 'delData') {
                this.refurbish();
                this.$refs.menutoolbar.setAllReadOnly(false);
                this.$refs.menutoolbar.setReadOnly('saveData', true);
            }
        },
        refurbish () {
            this.loading = true;
            let self = this;
            self.data = [];
            let para  = {};
            if (this.myConfig.gridConfig.searchParam) {
                para = Object.assign({},{}, this.myConfig.gridConfig.searchParam);
            }
            if (!para.page_size) {
                para.page_size = '99999';
            }
            self.asyncPost(self.myConfig.resources,self.myConfig.classPrefix+ '.' + 'search' ,para,function(data) {
                let curlData = [];
                if (data && data[self.myConfig.response]) {
                    curlData = self.$Method.copy(data[self.myConfig.response])
                }
                if (self.$parent.setBillData) {
                    curlData = self.$parent.setBillData(curlData);
                }
                self.data = curlData;
                self.$refs.grid.setData(self.data);
                self.$refs.grid.setReadOnly(true);
                self.loading = false;   
            },function() {
                self.loading = false;
            });
        },
        checkValidate () {
            return this.$refs.grid.checkValidate();
        },
        getGrid () {
            return this.$refs.grid;
        },
        onOpenChange(value) {
            this.setGridHeight(value);
        },
        setGridHeight() {
            let height =  this.clientHeight -  this.$refs.head.offsetHeight;
            this.$refs.grid.setCalHeight(height);
        },
        gridOnSelectionChange(rows) {
            let obj = {};
            obj.name = 'gridOnSelectionChange';
            obj.para = rows;
            if (rows.length > 0) {
                this.$refs.menutoolbar.setReadOnly('delData',false);
            } else {
                this.$refs.menutoolbar.setReadOnly('delData',true);
            }
        },
        getChangeData() {
            return this.$refs.grid.getChangeData();
        }
    },
    mounted () {
        this.doMenuToolbar();
        this.setGridHeight();
        this.refurbish();

    }
};
</script>

