<template>
<div>
    <div ref="head">
    <div v-if="$slots.header" :style="myConfig.headStyle">
        <slot name="header"></slot>
    </div>
    <div v-else :style="myConfig.headStyle">
        <div v-if="showCondition">
            <Row v-if="myConfig.gridType === 'billGrid'" :gutter="4">
                <Col span='18'>
                    <ConditionBox ref="condition" :config="myConfig"  @conditionAction="conditionAction"  :dictData="dictData" modelType="billSearch"></ConditionBox>
                </Col>
                <Col span='6'>
                    <Row type="flex" justify="end" :gutter="8">
                        <Col>
                            <Toolbar :config="myToolConfig"  @doAction="doBatchAction" tooltype="batch" :moduleMethod="globalConfig.moduleMethod" ></Toolbar>
                        </Col>
                        <Col v-if="showHelpBtn">
                            <a  href="#" @click.prevent="openHelp">
                                <Tooltip content="帮助中心" placement="left">
                                    <CommonIcon   size="32" color="#2d8cf0" type="md-help-circle" />
                                </Tooltip>
                            </a>
                        </Col>
                        <Col v-if="modulecode">
                            <Tooltip :content="modulecode" placement="left">
                                <CommonIcon size="32" color="#2d8cf0" type="ios-information-circle-outline" />
                            </Tooltip>
                        </Col>
                    </Row>
                </Col>
            </Row>
            <Row v-else>
                <Col span='24'>
                    <ConditionBox  ref="condition" :config="myConfig"  @conditionAction="conditionAction"  :dictData="dictData" :isPop="isPop"></ConditionBox>
                </Col>
            </Row>
        </div>
    </div>
    </div>
    <template v-if="!myConfig.multiSelectGrid">
        <Table ref="table"  :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]="{ index }" :key="'show_' + config.key">          
               <ShowText :label="formatValue(index,config)"  :contentAlign="config.contentAlign" :rowIndex="index" ></ShowText>
         </template>
        </Table>
         <div v-if="$slots.footer">
            <slot name="footer"></slot>
        </div>
        <div ref="page" name="page">
        <div  v-if="myConfig.showPage"  style="background:#eee;padding-top:5px;" >
            <Card :bordered="false" :padding="0" :dis-hover="true" style="border-radius:0px">
                 <Row  type="flex" justify="end" style="padding:5px;padding-right:10px">
                     <Page 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"></Page>
                </Row>
            </Card>
        </div>
        </div>
    </template>
    <template v-else>
        <Row type="flex" justify="center" align="middle" >
            <Col :span="gridCol">
                <Card :padding="0" :bordered="false">
                    <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]="{ index }" :key="'show_' + config.key">  
                            <ShowText  :label="formatValue(index,config)"  :contentAlign="config.contentAlign" :rowIndex="index"></ShowText>
                         </template>
                    </Table>
                </Card>
            </Col>
            <Col span= '2'>
                  <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>
                  <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>
            </Col>
            <Col :span="multiGridCol">
                <Card :padding="0" :bordered="false">
                     <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]="{ index }" :key="'show_' + config.key">  
                            <ShowText  :label="formatMulValue(index,config)"  :contentAlign="config.contentAlign" ></ShowText>
                         </template>
                     </Table>
                </Card>
            </Col>
        </Row>
         <div ref="page" name="page">
         <div v-if="$slots.footer">
                <slot name="footer"></slot>
        </div>
        <div  v-if="myConfig.showPage" ref="page" style="background:#eee;padding-top:5px;">
            <Card :bordered="false" :padding="0" :dis-hover="true"  style="border-radius:0px">
                 <Row  type="flex" justify="start" style="padding:5px;padding-right:10px">
                     <Page  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"></Page>
                </Row>
            </Card>
        </div>
        </div>
    </template> 
</div>
</template>
<script>
import Base from './viewgridbase.vue';
export default {
    name: 'viewgrid',
    extends: Base,
    mounted () {  
    }
};
</script>