<template>
<Card ref="card"  :bordered="false" :padding="0" dis-hover>
    <div v-if="$slots.header">
        <slot name="header"></slot>
    </div>
    <Row class-name="row-box" v-else v-show="showGrid" type="flex" justify="start"  align="middle" :gutter="0"  style="margin-bottom: 10px;">
        <Col v-if="showAddBtn">
            <Button  :style="btnStyle" customIcon="iconfont icon-custom-rowadd3"  type="text"  :disabled="myConfig.readOnly" @click="addRow" >添加</Button>
        </Col>
        <Col v-if="showAddBtn && showDelBatchBtn">
            <Divider  type="vertical"  style="margin: 0 6px 0 6px;"/>
        </Col>
        <Col v-if="showDelBatchBtn">
            <Button :style="btnStyle" customIcon="iconfont icon-custom-rowdel3"  type="text" :disabled="myConfig.readOnly" @click="delBatchRow">删除</Button>
        </Col>
    </Row>
    <Row  style="margin-top: 10px;">
        <Table ref="table"  :row-class-name="rowClassName" :loading="loading" :size="myConfig.tableSize"  :stripe="myConfig.showStripe"  :border="myConfig.showBorder"  :height="tableHeight" :maxHeight="tableMaxHeight" :show-header="myConfig.showHeader" @on-selection-change="OnSelectionChange" :columns="tableColumns"  :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="config.cellClassName">
                    <ControlBox v-if="editIndex === index && editKey=== config.key"   :autofocus="true" :config="getCellConfig(index,config)"  :valueData="getCurRow(index)" @inputValue="input" :editIndex="index" @doAction="doAction"></ControlBox>
                    <ShowText v-else :label="formatValue(index,config)"  :contentAlign="config.contentAlign"  :class="IsCellError(index,config)" :config="config" :rowIndex="index"></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>
    <Modal v-if="!editRowFlag"  v-model="showEditRowForm"  width="90%" title="编辑" @on-ok="editRow">
        <div>
           <ExpandRow ref="rowForm"  :config="myConfig" :dictData="dictData"/>
        </div>
    </Modal>
</Card>
</template>
<script>
import { resolveComponent } from 'vue';
import Base from '@/components/grid/editgridbase.vue';
export default {
    name: 'meditgridcard2',
    extends: Base,
    data () {
        return {
            myConfig:{
                title:'',
                modetype:'1',
                operFixedFlag:false,
                showCheckBox:true,
                showPage:false,
                showAppendixCol:false,
                appedixLable:'附件'
            },
            btnStyle:'padding-left:0px;padding-right:0px',
            showAddBtn:false,
            showDelBatchBtn:false,
            showGrid:true,
            showTitle:true,
            actionAppendixConfig:{
                label:'附件',
                key:'actionappendix',
                align: 'center',
                render:this.actionAppendixRender,
                fixed:'right'
            }

        };
    },
    created () {
        this.myConfig = Object.assign({}, this.myConfig, this.config);
    },
    methods: {
        customInit2() {
            if (this.myConfig.showTitle !== undefined) {
                this.showTitle = this.myConfig.showTitle;
            }
            this.myConfig.items.forEach(el => {
                if (el.resizable  === undefined) {
                    el.resizable  = true;
                }
                if (!el.width && !el.minWidth) {
                    el.minWidth = 60;
                }
            });
            if (this.myConfig.showAppendixCol) {
                this.actionAppendixConfig.label = this.myConfig.appedixLable;
                this.myConfig.items.push(this.actionAppendixConfig);
            }


        },
        toggle () {
            this.showGrid = !this.showGrid;
        },
        setShowGrid(value) {
            this.showGrid = value;
        },
        actionAppendixRender(h, params) {
            return h('div', [
                            h(resolveComponent('Button'), {
                                type: 'text',
                                size: 'small',
                                customIcon:'iconfont icon-custom-anniu-fujian',
                                onClick:(e) =>{
                                    let tmp = {};
                                    tmp.rowinfo = params;
                                    tmp.name = 'actionappendix';
                                    tmp.readOnly = this.readOnly;
                                    this.$emit('doAction',val);
                                }
                            })
            ]);
        }
    },
    mounted() {
        if (this.$refs.card && this.$refs.card.$el) {
            this.$refs.card.$el.onmouseleave = () => {
               // this.handleOut();
            };
        }
    }
};
</script>
