<template>
<div>
    <div ref="head">
        <Row  v-if="showCondition">
            <Col span='24'>
                <ConditionBox  ref="condition" :config="myConfig"  @conditionAction="conditionAction"  :dictData="dictData" :isPop="isPop"></ConditionBox>
            </Col>
        </Row>
    </div>
    <template v-if="!myConfig.multiSelectGrid">
        <Card :padding="0" :bordered="false"  dis-hover>
        <Table ref="table"  :class="isFlag" :row-class-name="myConfig.rowClassName" :loading="loading"  :show-summary="myConfig.showSummary"  :summary-method="handleSummary"  :size="myConfig.tableSize"  :stripe="myConfig.showStripe" :border="myConfig.showBorder" :height="tableHeight" :max-height="tableMaxHeight" :show-header="myConfig.showHeader" :columns="tableColumns"  :data="tempData" @on-sort-change="sortChagne"  @on-current-change="onCurrentChange" :highlight-row="myConfig.highLightRow" @on-row-dblclick="dbclick"  @on-select="onSelect" @on-select-cancel="onSelectCancel" @on-selection-change="OnSelectionChange" @on-row-click="click"  @on-column-width-resize="onColumnWidthResize">
         <template  v-for="config in soltTableColumns" v-slot:[config.key]="{ row, index }" :key="'show_' + config.key">
               <ShowText :label="formatValue(index,config,row)" :contentAlign="config.contentAlign" :class="config.cellClassName" :config="config" :rowIndex="index"></ShowText>
         </template>
        </Table>
        </Card>
        <div ref="page" name="page">
            <div  v-if="myConfig.showPage"  style="padding-top:10px;" >
                <Card :bordered="false" :padding="0" :dis-hover="true" style="border-radius:0px">
                    <Row  type="flex" justify="end" style="padding-right:10px">
                        <PageCustom  v-model="culPage"  :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"></PageCustom>
                    </Row>
                </Card>
            </div>
        </div>
    </template>
    <template v-else>
        <Row type="flex" justify="center" align="middle" >
            <Col :span="gridCol">
                <Card :padding="0"  bordered dis-hover>
                    <template #title>
                    <span v-text="myConfig.gridTitle"></span>
                    </template>
                    <Table ref="table"  :row-class-name="myConfig.rowClassName"  :show-summary="myConfig.showSummary" :summary-method="handleSummary"  :loading="loading" :size="myConfig.tableSize"  :stripe="myConfig.showStripe" :border="myConfig.showBorder" :height="tableHeight" :max-height="tableMaxHeight" :show-header="myConfig.showHeader" :columns="tableColumns"  :data="tempData" @on-sort-change="sortChagne"  @on-current-change="onCurrentChange" :highlight-row="myConfig.highLightRow" @on-row-dblclick="dbclick"  @on-select="onSelect" @on-select-cancel="onSelectCancel" @on-selection-change="OnSelectionChange" @on-row-click="click" @on-column-width-resize="onColumnWidthResize">
                         <template   v-for="config in soltTableColumns" v-slot:[config.key]="{ row, index }" :key="'show_' + config.key">
                            <ShowText :label="formatValue(index,config,row)" :contentAlign="config.contentAlign" :class="config.cellClassName" :config="config" :rowIndex="index"></ShowText>
                         </template>
                    </Table>
                </Card>
                 <div ref="page" name="page">
                        <div  v-if="myConfig.showPage" ref="page" style="padding-top:10px;">
                            <Card :bordered="false" :padding="0" :dis-hover="true"  style="border-radius:0px">
                                <Row  type="flex" justify="end" style="padding-right:10px" :gutter="0">
                                    <PageCustom v-model="culPage"  :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"></PageCustom>
                                </Row>
                            </Card>
                        </div>
                    </div>
            </Col>
            <Col span= '2'>
                  <Row  type="flex" justify="center" align="middle" style="padding:5px;" >
                       <Tooltip content="添加" placement="right">
                            <Button type="primary" size="small"  icon="ios-arrow-forward" :disabled="!leftActive" @click="moveToRight"></Button>
                        </Tooltip>
                  </Row>
                <Row  type="flex" justify="center" align="middle" style="padding:5px;" >
                    <Tooltip content="删除" placement="left">
                        <Button type="primary" size="small"  icon="ios-arrow-back" :disabled="!rightActive" @click="moveToLeft"></Button>
                    </Tooltip>
                </Row>
            </Col>
            <Col :span="multiGridCol" style="padding-bottom: 40px;">
                <Card :padding="0" bordered dis-hover>
                     <template #title>
                        <span  v-text="myConfig.multiGridTitle"></span>
                     </template>
                     <Table ref="multiSelectTable"  :row-class-name="myConfig.rowClassName"  :size="myConfig.tableSize"  :stripe="myConfig.showStripe" :border="myConfig.showBorder" :height="tableHeight" :max-height="tableMaxHeight" :show-header="myConfig.showHeader" :columns="multiTableColumns"  :data="tempMultiSelectData" :highlight-row="myConfig.highLightRow" @on-selection-change="OnMultiSelectionChange">
                         <template  v-for="config in multiSoltTableColumns" v-slot:[config.key]="{ row, index }" :key="'mshow_' + config.key">
                            <ShowText  :label="formatMulValue(index,config,row)" :contentAlign="config.contentAlign" ></ShowText>
                         </template>
                     </Table>
                </Card>
            </Col>
        </Row>
    </template>
</div>
</template>
<script>
import Base from '@/components/grid/viewgridbase.vue';
export default {
    name: 'mimpleviewgrid',
    extends: Base,
    methods: {
        initCheckColumn(columns) {
            if (this.myConfig.showCheckBox) {
                let check = {};
                check.type = 'selection';
                check.align = 'center';
                check.key ='selection';
                check.width = 40;
                check.multiSelect = this.myConfig.multiSelect;
                columns.push(check);
            }
        },
        initIndexColumn(columns) {
            if (this.myConfig.showIndex) {
                 if (this.myConfig.showSumGroup) {
                    let indexConfig = {
                            label: '行号',
                            name: 'sumindex',
                            type: 'TextBox',
                            align: 'center',
                            width: 45
                    };
                    if (this.myConfig.items[0].name !== 'sumindex') {
                        this.myConfig.items.splice(0, 0, indexConfig);
                    }
                } else {
                    let index = {};
                    index.type = 'index';
                    index.key = 'index';
                    index.width = 45;
                    index.title = '行号';
                    index.align = 'center';
                    if (this.myConfig.fixedIndex){
                        index.fixed = 'left';
                    }
                    if (this.myConfig.headClassName !== undefined) {
                        index.className  = this.myConfig.headClassName;
                    }
                    index.indexMethod = this.indexRender;
                    if (this.myConfig.indexConfig !== undefined) {
                        Object.assign(index, this.myConfig.indexConfig);
                    }
                    columns.push(index);
                }
            }
        },
    },
     computed:{
         isFlag () {
             if (this.$refs.table) {
                if (this.$refs.table.el.height > this.tableHeight) {
                    return 'efuture-viewgrid'
                }
             }
             return '';
         }
     },
    mounted () {
    }
};
</script>
