<template>
  <div>
    <div @animationstart="getWrapperWidth" ref="box" class="kt-canvas-table-box">
      <div
        ref="table"
        :class="{ 'kt-canvas-table_border': border, 'is-phone': isPhone }"
        class="kt-canvas-table"
      >
        <canvas
          :style="{
        height: wrapperHeight + 'px',
        width: wrapperWidth + 'px',
      }"
          ref="canvas"
        ></canvas>
        <right-menu
          class="right-menu"
          :target="contextMenuTarget"
          :show="contextMenuVisible"
          @update:show="(show) => contextMenuVisible = show"
          v-if="!setOldStatus"
        >
          <a href="javascript:;" @click="refresh">
            <i class="el-icon-refresh-right"></i>刷新数据
          </a>
          <a href="javascript:;" @click="columnSetting">
            <i class="el-icon-setting"></i>表列设置
          </a>
          <a href="javascript:;" @click="copyContent" class="copy">
            <i class="el-icon-document-copy"></i>复制内容
          </a>
          <a href="javascript:;" @click="fullScreen">
            <i class="el-icon-full-screen"></i>
            {{isFullScreen? '退出全屏':'全屏展示'}}
          </a>
        </right-menu>
        <operate-board
          ref="operate"
          class="kt-canvas-table-operate-board"
          :style="{
        '--bar-width': barWidth + 'px',
        '--background': style.background,
        '--border-color': style.borderColor,
        '--header-height': headerHeight + 'px',
        '--primary': style.primary,
        fontSize: style.fontSize + 'px',
        color: style.color
      }"
          :wrapperWidth="wrapperWidth"
          :contentWidth="contentWidth"
          :maxScrollWidth="maxScrollWidth"
          :maxScrollHeight="maxScrollHeight"
          :contentHeight="contentHeight"
          :maxContentHeight="maxContentHeight"
          :bodyHeight="bodyHeight"
          @scroll="setScroll"
          @row-click="onRowClick"
          @col-resize="onColResize"
          @checkbox-click="onCheckboxClick"
          @checkbox-all-click="onCheckboxAllClick"
          @sort-click="onSortClick"
          @query-change="onQueryChange"
          v-on="events"
        >
          <template v-for="wrapRow in slotList">
            <div style="clear:both">
            <div
              class="kt-canvas-table-slot-wrap"
              v-for="(wrapCol, wrapIndex) in wrapRow.list"
              :style="{
            height: wrapCol.height() + 'px',
            width: wrapCol.width() + 'px',
            overflow: 'hidden',
            clear: (wrapRow.type === 'head' && wrapIndex === 2) ?'':''
          }"
              :key="wrapRow.type + wrapCol.type"
            >
              <div
                :style="getSlotWColStyle(wrapCol.type, wrapRow.type === 'body' ?getSlotColumns( wrapCol.list, wrapCol.type)[0]: null)"
              >
                <template v-if="wrapRow.type === 'body'">
                  <div
                    :key="col.key"
                    :style="getSlotColStyle(wrapCol.type, col)"
                    v-for="col in getSlotColumns(wrapCol.list, wrapCol.type)"
                  >
                    <div
                      class="kt-canvas-table-slot"
                      :style="getSlotCellStyle(wrapCol.type, col)"
                      v-for="n in displayRowCount()"
                      :key="col.key + n"
                    >
                      <slot
                        :index="currentIndex(n)"
                        :name="col.key + '_' + wrapRow.type"
                        :col="col"
                        :row="newData[currentIndex(n)]"
                      >
                        <template v-if="col.customRender !== true">
                          <custome-rander
                            v-if="typeof(col.customRender) === 'function'"
                            :type="wrapRow.type"
                            :col="col"
                            :index="currentIndex(n)"
                            :row="newData[currentIndex(n)]"
                          />
                          <component
                            v-else
                            :is="col.customRender"
                            :type="wrapRow.type"
                            :col="col"
                            :index="currentIndex(n)"
                            :row="newData[currentIndex(n)]"
                          />
                        </template>
                      </slot>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div
                    class="kt-canvas-table-slot"
                    :style="getSlotStyle(wrapRow.type, wrapCol.type, item)"
                    v-for="item in getSlotColumns(wrapCol.list, wrapCol.type)"
                    :key="item.key"
                  >
                    <slot
                      :name="item.key + '_' + wrapRow.type"
                      :col="item"
                      :row="wrapRow.type === 'sum' ? summary : null"
                    >
                      <template
                        v-if="(wrapRow.type === 'head' && item.headerCustomRender !== true) || (wrapRow.type === 'sum' && item.summaryCustomRender !== true)"
                      >
                        <custome-rander
                          v-if="(wrapRow.type === 'head' && typeof(item.headerCustomRender) === 'function') || (wrapRow.type === 'sum' && typeof(item.summaryCustomRender) === 'function')"
                          :type="wrapRow.type"
                          :col="item"
                          :row="wrapRow.type === 'sum' ? summary : null"
                        />
                        <component
                          v-else
                          :col="item"
                          :row="wrapRow.type === 'sum' ? summary : null"
                          :is="wrapRow.type === 'sum' ? item.summaryCustomRender : item.headerCustomRender"
                        />
                      </template>
                    </slot>
                  </div>
                </template>
              </div>
            </div>
            </div>
          </template>
        </operate-board>
      </div>
      <div class="hidden-columns" ref="hiddenColumns">
        <slot></slot>
      </div>
      <div class="kt-canvas-table-current-length" v-if="queryTotalShow">
        <div class="query-label">搜索条件：</div>
        <div class="query">
          <el-tag
            closable
            @close="handleClose(key)"
            size="small"
            effect="plain"
            type="info"
            v-for="(item, key) in currentQueryTotal.queryArrText"
            :key="key"
          >{{item}}</el-tag>
        </div>
        <div class="total">共 {{currentQueryTotal.length}} 条</div>
      </div>
      <Setting ref="setting" />
    </div>
  </div>
</template>

<script>
import OperateBoard from './components/operate-board';
import RightMenu from './components/right-menu';
import data from './options/data';
import props from './options/props';
import computed from './options/computed';
import drawMethods from './options/methods-draw';
import baseMethods from './options/methods-base';
import watch from './options/watch';
import CustomeRander from './components/custome-render';
import ElTag from '../../tag';
import Setting from './components/setting.vue';
let tableIdSeed = 1;
export default {
  name: 'ElTableV2',
  components: { OperateBoard, CustomeRander, ElTag, RightMenu, Setting },
  props,
  data,
  computed,
  watch,
  methods: {
    ...drawMethods,
    ...baseMethods
  },
  created() {
    this.tableId = 'el-table-v2_' + tableIdSeed++;
  },
  mounted() {
    this.init();
  },
  activated() {
    this.redraw();
  },
  beforeDestroy() {
    this.removeEvents();
  }
};
</script>