<template>
<Card ref="card" :padding="0"  :bordered="myConfig.bordered" :dis-hover="myConfig.disHover" :headClass="headClass" :extraClass="extraClass" >
    <template v-if="showTitle" #title>
    <p  :style="pStyle" @click="toggle" >
        <span :class="titleClass" v-text="myConfig.title" /><Icon v-if="myConfig.hide" class="efuture-title-icon" :style="iconStyle" type='ios-arrow-forward'/>
    </p>
    </template>
    <template #extra>
    <a   v-if="showBtn && myConfig.readOnly && myConfig.addBtnType === '3' && !btnReadOnly"  href="#" @click.prevent="editGrid">{{myConfig.editBtnName}} </a>
    <span   v-if="showBtn && myConfig.readOnly && myConfig.addBtnType === '3' && btnReadOnly">{{myConfig.editBtnName}} </span>
    <a   v-if="showBtn && !myConfig.readOnly && myConfig.addBtnType === '3'"  href="#" @click.prevent="cancelGrid">{{myConfig.cancelBtnName}} </a>
    <a   v-if="showBtn && myConfig.addBtnType === '3' && !btnReadOnly" style="margin-left: 10px;"  href="#" @click.prevent="addRow">{{myConfig.addBtnName}} </a>
    <span  v-if="showBtn && myConfig.addBtnType === '3' && btnReadOnly" style="margin-left: 10px;" >{{myConfig.addBtnName}}</span>
    <a   v-if="showBtn && !myConfig.readOnly && myConfig.addBtnType === '1'"  href="#" @click.prevent="addRow">{{myConfig.addBtnName}} </a>
     </template>
    <div  v-show="showGrid" :style="cardStyle" >
    <Row>
    <Table ref="table" :loading="loading" :size="myConfig.tableSize"   :row-class-name="rowClassName" :stripe="myConfig.showStripe" :border="myConfig.showBorder" :height="tableHeight" :maxHeight="tableMaxHeight" :show-header="myConfig.showHeader" :columns="tableColumns" @on-selection-change="OnSelectionChange" :data="data" @on-column-width-resize="onColumnWidthResize" :show-summary="myConfig.showSummary"  :summary-method="handleSummary">
         <template  v-for="config in soltTableColumns" v-slot:[config.key]="{ index }" :key="'show_' + config.key">
            <div @click="EditCell(index,config)" class="ivu-table-cell">
                <ControlBox v-if="editIndex === index && editKey=== config.key"  :config="getCellConfig(index,config)" :autofocus="true" :valueData="getCurRow(index)" @inputValue="input" :editIndex="index" @doAction="doAction"></ControlBox>
                <ShowText v-else style="display:inline-block;" :label="formatValue(index,config)"  :contentAlign="config.contentAlign"  :class="IsCellError(index,config)" ></ShowText>
            </div>
         </template>
    </Table>
    <div  ref="page" v-if="myConfig.showPage" style="background:#eee;padding-top:5px;width:100%" >
        <Card :bordered="false" :padding="0" :dis-hover="true" style="border-radius:0px">
            <Row  type="flex" justify="end" style="padding:5px;padding-right:10px">
                <Page  :total="myConfig.pageConfig.total_results"  :size="myConfig.pageSize"  :current="myConfig.pageConfig.page_no" :page-size="myConfig.pageConfig.page_size" :page-size-opts="myConfig.pageConfig.pageSizeList"  @on-page-size-change="changePageSize" @on-change="changePage"  :show-total="myConfig.pageShowTotal" :show-elevator="myConfig.pageShowElevator" :show-sizer="myConfig.pageShowSizer"></Page>
            </Row>
        </Card>
    </div>
    </Row>
    <Row v-if="showBtn && !myConfig.readOnly && myConfig.addBtnType === '2'"  type="flex" justify="center" style="margin-top: 10px;margin-bottom:10px;" >
      <Button type="default" style="background-color:#f8f8f9"  @click="addRow" long>{{myConfig.addBtnName}}</Button>
    </Row>
</div>
</Card>
</template>
<script>
import Base from './editgridbase.vue';
export default {
    name: 'editgridcard',
    extends: Base,
    data () {
        return {
            myConfig:{
                addBtnType:'2',
                hide:true,
                titleType:1,
                bordered:true,   
                disHover:false,
                operFixedFlag:false
            },
            btnReadOnly:false,
            showBtn:true,
            cardPadding:0,
            cardStyle:'',
            showGrid:true,
            showTitle:true,
            editFlag:false,
            pStyle:'',
            iconStyle:'',
            showDelRow:true,
            rowAction:[],
            delRowAction:[{
                iconcls: 'row',
                icon:'ios-trash',
                name: 'delRow',
                text: '删除',
                size:'20',
                type:'text'
            }],
        };
    },
    computed: {
        titleClass () {
            return `efuture-title-font-${this.myConfig.titleType}`;
        },
        headClass () {
            if (!this.showGrid) {
                return `efuture-card-head-title-${this.myConfig.titleType}` + ' efuture-card-head-title-nobottom';
            } else {
                return `efuture-card-head-title-${this.myConfig.titleType}`;
            }
         
        },
        extraClass () {
            return `efuture-card-extra-title-${this.myConfig.titleType}`;
        }
    },
    methods: {
        customInit2() {
            if (this.myConfig.hide) {
                this.pStyle = 'cursor:pointer';
                this.iconStyle = 'transform: rotate(90deg)';
            } 
            if (this.myConfig.titleType !== 1) {
                if (this.config.hide === undefined) {
                    this.myConfig.hide = false;
                }
                if (this.config.bordered === undefined) {
                    this.myConfig.bordered = false;
                }
                if (this.config.disHover === undefined) {
                    this.myConfig.disHover = true;
                }  
            } else {
                if (this.config.hide === undefined) {
                    this.myConfig.hide = true;
                }
                if (this.config.bordered === undefined) {
                    this.myConfig.bordered = true;
                }
                if (this.config.disHover === undefined) {
                    this.myConfig.disHover = false;
                }   
            }
            if (this.myConfig.showTitle !== undefined) {
                this.showTitle = this.myConfig.showTitle;
            }
            if (this.myConfig.showBtn !== undefined) {
                this.showBtn = this.myConfig.showBtn;
            }
            if (this.myConfig.showAddBtn !== undefined) {
                this.showBtn = this.myConfig.showAddBtn;
            }
            this.myToolConfig.icon = true;
            this.setTitleStyle();
        },
        toggle () {
            if (this.myConfig.hide) {
                this.showGrid = !this.showGrid;
                this.setTitleStyle();
            }
        },
        setShowGrid(value) {
            this.showGrid = value;
            this.setTitleStyle();
        },
        setTitleStyle () {
            if (this.showGrid) {
                this.iconStyle = 'transform: rotate(90deg)';
                this.cardPadding =  5 * Number(this.myConfig.titleType);
                this.cardStyle = 'padding-left:'+this.cardPadding+'px;padding-right:'+this.cardPadding+'px;padding-bottom: 10px;';
            } else {
                this.iconStyle = '';
                this.cardPadding  = 0;
                this.cardStyle = '';
            }
        },
        editGrid() {
            if (this.checkIsEdit()) {
                this.setReadOnly(false);
                let obj = {};
                obj.name = 'editGrid';
                obj.gridname = this.myConfig.name;
                this.$emit('doAction', obj);
            }
        },
        cancelGrid() {
            this.setData(this.initData);
            this.setReadOnly(true);
            let obj = {};
            obj.name = 'cancelGrid';
            obj.gridname = this.myConfig.name;
            this.$emit('doAction', obj);
        },
        checkIsEdit() {
            let flag = true;
            if (this.myConfig.editObjectBefore) {
                flag = this.myConfig.editObjectBefore(this.myConfig.name);
            }
            return flag;
        },
        setBtnType(value) {
            let obj = {};
            obj.addBtnType = value;
            this.setPro(obj);
        },
        setBtnReadOnly(value) {
            this.btnReadOnly = value;
        }
    },
    mounted() {
        if (this.$refs.card && this.$refs.card.$el) {
            this.$refs.card.$el.onmouseleave = () => {
                this.handleOut();
            };
        }
    }
};
</script>
