<template>
<Card ref="card"  :bordered="false" :padding="0" dis-hover>
        <template v-if="myConfig.modetype === '1'">
            <p  v-if="showTitle" @click="toggle" style="cursor:pointer;" >
            <Row type="flex" justify="start" align="middle" style="margin-top:14px;margin-bottom:14px">
            <Icon custom='iconfont icon-custom-pack' color="#f3b352" v-show="showGrid" size="14" />
                <Icon  v-show="!showGrid" color="#f3b352" custom='iconfont icon-custom-spread' size="14"/> <span style="margin-left:10px;font-size: 14px;font-weight:bold" v-text="myConfig.title" />
            </Row>
            </p>
            <Divider style="margin-left:24px;margin-top:0px;margin-bottom:10px;"/>
        </template>
        <template v-if="myConfig.modetype === '2'">
            <div v-if="showTitle" style="margin-bottom:10px;">
                <span class="efuture-title-verticalline"/><span style="font-size: 14px;font-weight:bold" v-text="myConfig.title" />
            </div>
        </template>
        <div class="table-wrapper" :class="{'is--maximize':showZoom && isFull}" :style="divStyle">
            <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>
                <Col class="col-align" v-if="showZoom">
                    <Button type="ghost" shape="circle" :title="isFull ? '还原' : '全屏'" :customIcon="[isFull ? 'iconfont icon-custom-minimize' : 'iconfont icon-custom-fullscreen']" @click="setZoom"></Button>
                </Col>
            </Row>
            <Row v-show="showGrid" >
                <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" @on-row-click="rowClick" :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" :cell-row="index" :cell-col="config.key">
                            <ControlBox v-if="editIndex === index && editKey=== config.key"  :ref="'cell_'+ index + '_' + 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>
            <p  v-show="showGrid && showEffectValue" @click="toggleEffect" style="cursor:pointer;background-color:#FFF2DE;height:36px;line-height:36px;border: 1px solid #F3B352;margin-top: 10px;" >
              <Icon custom='iconfont icon-custom-help' size="20" style="margin-left: 10px;" color="#D5882E" />  <span style="margin-left: 4px;color:#D5882E">参考数据</span>    
            </p>    
            <Row v-show="showGrid && showEffectValue && showEffectGrid"  class="efuture-effect-grid" style="margin-top: 10px;">
                <Table  ref="effect_table"  :row-class-name="rowClassName" :loading="loading" :size="myConfig.tableSize"  :border="myConfig.showBorder" :stripe="myConfig.showStripe"  :maxHeight="tableMaxHeight"   :columns="tableColumns"  :data="curlEffectData" @on-column-width-resize="onColumnWidthResize" >
                    <template  v-for="config in soltTableColumns" v-slot:[config.key]="{ row, index }" :key="'show_effect' + config.key">          
                        <ShowText :label="effectFormatValue(index,config,row)" :contentAlign="config.contentAlign" :class="config.cellClassName" :config="config" :rowIndex="index"></ShowText>
                    </template>
                </Table>
            </Row>  
        </div>
        <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: 'meditgridcard',
    extends: Base,
    data () {
        return {
            myConfig:{
                title:'',
                modetype:'1',
                operFixedFlag:false,
                showCheckBox:true,
                showPage:false,
                showAppendixCol:false,
                appedixLable:'附件'
            },
            btnStyle:'padding-left:0px;padding-right:0px',
            divStyle:'padding-left:24px',
            showAddBtn:true,
            showZoom: false,
            isFull: false,
            showDelBatchBtn:true,
            showGrid:true,
            showTitle:true,
            showEffectValue:false,
            showEffectGrid:true,
            actionAppendixConfig:{
                label:'附件',
                key:'actionappendix',
                align: 'center',
                fixed: 'right',
                render:this.actionAppendixRender,
                width:45
            },
            curlEffectData:[],
            effectData:[]
        };
    },
    computed: {
        tableHeight() {
            if(this.isFull) {
                return this.clientHeight - this.$refs.table.$el.offsetTop;
            } else {
                if (!this.myConfig.dynamicHeight) {
                    let currentHeight = this.currentHeight;
                    if (this.extraHeight) {
                        currentHeight =  currentHeight - Number(this.extraHeight);
                    }
                    if (this.outsideHeight) {
                        currentHeight =  currentHeight - Number(this.outsideHeight);
                    }
                    if (this.myConfig.showSummary) {
                        currentHeight = currentHeight  - 50; 
                    }
                    return currentHeight;
                } else {
                    return null;
                }
                 
            }
        },
        tableMaxHeight() {
            if(this.isFull) {
                return this.clientHeight - this.$refs.table.$el.offsetTop;
            } else {
                if (this.myConfig.dynamicHeight) {
                    let currentHeight = this.currentHeight - this.extraHeight - this.outsideHeight;
                    if (this.myConfig.showSummary) {
                        currentHeight = currentHeight  - 50; 
                    }
                    return currentHeight;
                } else {
                    return null;
                }
            }
        }
    },
    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);
            }

            if (this.myConfig.showEffectValue !== undefined) {
                this.showEffectValue = this.myConfig.showEffectValue;
            }
            if (this.showEffectValue) {
                this.myConfig.dynamicHeight = true;
            }
            if (this.myConfig.modetype === '1') {
                this.btnStyle = 'padding-left:0px;padding-right:0px';
                this.divStyle = 'padding-left:24px';
            } else {
                this.btnStyle = '';
                this.divStyle = 'padding-left:2px';
            }
        },
        toggle () {
            this.showGrid = !this.showGrid;
        },
        toggleEffect () {
            this.showEffectGrid = !this.showEffectGrid;
        },
        setShowEffectGrid(value) {
            this.showEffectGrid = value;
        },
        setShowGrid(value) {
            this.showGrid = value;
        },
        setShowZoom(value) {
            this.showZoom = value;
        },
        setZoom() {
            this.isFull = !this.isFull;
        },
        rowClick(e) {
            if (this.showEffectValue) {
                this.curlEffectData = [];
                let key = '';
                if (this.myConfig.effectKey) {
                    key = this.myConfig.effectKey;
                }
                if (key) {
                    let index = this.effectData.findIndex(el => e[key] === el[key]);
                    if (index > -1) {
                        this.curlEffectData.push(this.$Method.copy(this.effectData[index]));
                    }
                }
            }
        },
        setEffectData(obj) {
            this.effectData = [];
            this.effectData = this.$Method.copy(obj);
            this.curlEffectData = [];
            if (this.myConfig.showEffectValue) {
                if (obj.length === 0) {
                   this.showEffectValue = false;
                } else {
                   this.showEffectValue = true;
                }
            }
        },
        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.myConfig.readOnly;
                                    this.$emit('doAction',tmp);
                                }
                            })
            ]);
        },
        effectFormatValue(index, column) {
            let value = '';
            let row = this.$Method.copy(this.curlEffectData[index]);
            if (column.name) {
                value = row[column.name];
            }
            let config = column;
            let valueFormat = this.$Method.formatValue(value, row, config);
            let obj = {};
            obj.value = value;
            obj.row = row;
            obj.config = config;
            obj.valueFormat = valueFormat;
            if (column.formatValue) {
                return column.formatValue(obj);
            } else if (this.myConfig.formatValue) {
                return this.myConfig.formatValue(obj);
            } else {
                return valueFormat;
            }
        },
    },
    mounted() {
        if (this.$refs.card && this.$refs.card.$el) {
            this.$refs.card.$el.onmouseleave = () => {
               // this.handleOut();
            };
        }
    }
};
</script>
<style lang="less" scoped>
    .table-wrapper{
        transition: all .2s;
        .row-box{
            display: flex;
        }
        .col-align{
            flex:1;
            text-align: right;
        }
    }
    .is--maximize{
        padding:0.5em 1.5em;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
</style>