<template>
  <div>
    <template>
      <div class="ipub-table mar-b-30">
        <div ref="ipub-table__content"
             class="ipub-table__content">
          <div class="ipub-table__scroll"
               v-if="tableData && tableData.length"
               :style="{minWidth: Math.max(offsetWidth,totalWidth)+'px'}">
            <div class="ipub-table__thead"
                 :ref="uuid+'thead'"
                 v-show="showColumns">
              <div class="ipub-table__thead__columns ipub-p4">
                <div v-if="checkbox"
                     style="padding-left:20px"
                     class="flex-center">
                  <ipub-radio checkBox></ipub-radio>
                </div>
                <div v-if="draggable"
                     class="ipub-table__draggable"></div>
                <!-- 左侧悬停菜单 -->
                <template v-for="(item, index) in columns">
                  <div :style="{minWidth: item.width+'px',width: (item.width / (totalWidth-(checkbox?40:0)-(draggable?40:0)))*offsetWidth+'px'}"
                       v-if="item && item.fixed === 'left'"
                       :key="'ipub-columns' + index">
                    <div style="display:inline-block"
                         class="ipub-table__thead__columns__item ipub-p3">
                      <template v-if="language === 'en-US'">
                        {{ item.enTitle || item.title }}
                      </template>
                      <template v-else-if="language === 'zh-CN'">
                        {{ item.title }}
                      </template>
                    </div>
                  </div>
                </template>
                <!-- 中部不悬停菜单 -->
                <template v-for="(item, index) in columns">
                  <div :style="{minWidth: item.width+'px',width: (item.width / (totalWidth-(checkbox?40:0)-(draggable?40:0)))*offsetWidth+'px'}"
                       v-if="item && !item.fixed"
                       :key="'ipub-columns' + index">
                    <div style="display:inline-block "
                         :class="['ipub-table__thead__columns__item ipub-p3', item.sort?'ipub-cursor-pointer':'']"
                         @click="onSortChanage(item, index)">
                      <template v-if="language === 'en-US'">
                        {{ item.enTitle || item.title }}
                      </template>
                      <template v-else-if="language === 'zh-CN'">
                        {{ item.title }}
                      </template>
                      <font class="link-color ipub-table__thead__columns__item__sort"
                            style="font-size: 16px;font-weight:normal"
                            v-if="item.sort">
                        <ipub-icon type="iconOrder"
                                   v-if="item.order===''" />
                        <ipub-icon type="iconReverseOrder"
                                   v-else-if="item.order==='-'" />
                        <ipub-icon type="iconranking-02"
                                   v-else />
                      </font>
                    </div>
                  </div>
                </template>
                <!-- 右侧悬停菜单 -->
                <template v-for="(item, index) in columns">
                  <div :style="{minWidth: item.width+'px',width: (item.width / (totalWidth-(checkbox?40:0)-(draggable?40:0)))*offsetWidth+'px'}"
                       v-if="item && item.fixed === 'right'"
                       :key="'ipub-columns' + index">
                    <div style="display:inline-block"
                         class="ipub-table__thead__columns__item ipub-p3">
                      <template v-if="language === 'en-US'">
                        {{ item.enTitle || item.title }}
                      </template>
                      <template v-else-if="language === 'zh-CN'">
                        {{ item.title }}
                      </template>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <div class="ipub-p4 ipub-table__tbody">
              <!-- :style="{paddingTop: showColumns?'40px':'0'}"> -->
              <draggable v-if="draggable"
                         v-model="dragData"
                         @update="handleDrag"
                         handle=".ipub-draggable-icon">
                <div :class="['ipub-table__tbody__tr', border?'border':'']"
                     :ref="uuid+'tr'"
                     v-for="(item, index) in tableData"
                     :key="'ipub-dataSource'+index">
                  <div class="ipub-table__tbody__tr__columns">
                    <div class="ipub-draggable-icon">
                      <ipub-icon type="iconOrder1" />
                    </div>
                    <div v-if="checkbox"
                         style="padding-left:20px"
                         class="flex-center">
                      <ipub-radio checkBox></ipub-radio>
                    </div>
                    <!-- 左侧悬停菜单 -->
                    <template v-for="(val, num) in columns">
                      <div :style="{minWidth: val.width+'px',width: (val.width / (totalWidth-(checkbox?40:0)-((draggable?40:0))))*offsetWidth+'px'}"
                           v-if="val.fixed === 'left'"
                           :key="'ipub-columns' + num">
                        <columns-item :item="item"
                                      :index="index"
                                      :val="val">
                          <template :slot="val.slot"
                                    slot-scope="{text, record, index}">
                            <slot :name="val.slot"
                                  v-bind:text="text"
                                  v-bind:record="record"
                                  v-bind:index="index"></slot>
                          </template>
                        </columns-item>
                      </div>
                    </template>
                    <!-- 中部不悬停菜单 -->
                    <template v-for="(val, num) in columns">
                      <div :style="{minWidth: val.width+'px',width: (val.width / (totalWidth-(checkbox?40:0)-((draggable?40:0))))*offsetWidth+'px'}"
                           v-if="!val.fixed"
                           :key="'ipub-columns' + num">
                        <columns-item :item="item"
                                      :index="index"
                                      :val="val">
                          <template :slot="val.slot"
                                    slot-scope="{text, record, index}">
                            <slot :name="val.slot"
                                  v-bind:text="text"
                                  v-bind:record="record"
                                  v-bind:index="index"></slot>
                          </template>
                        </columns-item>
                      </div>
                    </template>
                    <!-- 右侧悬停菜单 -->
                    <template v-for="(val, num) in columns">
                      <div :style="{minWidth: val.width+'px',width: (val.width / (totalWidth-(checkbox?40:0)-((draggable?40:0))))*offsetWidth+'px'}"
                           v-if="val.fixed === 'right'"
                           :key="'ipub-columns' + num">
                        <columns-item :item="item"
                                      :index="index"
                                      :val="val">
                          <template :slot="val.slot"
                                    slot-scope="{text, record, index}">
                            <slot :name="val.slot"
                                  v-bind:text="text"
                                  v-bind:record="record"
                                  v-bind:index="index"></slot>
                          </template>
                        </columns-item>
                      </div>
                    </template>
                  </div>
                </div>
              </draggable>
              <template v-else>
                <div :class="['ipub-table__tbody__tr', border?'border':'']"
                     :ref="uuid+'tr'"
                     v-for="(item, index) in tableData"
                     :key="'ipub-dataSource'+index">
                  <div class="ipub-table__tbody__tr__columns">
                    <!-- 左侧悬停菜单 -->
                    <div v-if="checkbox"
                         style="padding-left:20px"
                         class="flex-center content-bg">
                      <ipub-radio checkBox></ipub-radio>
                    </div>
                    <template v-for="(val, num) in columns">
                      <div :style="{minWidth: val.width+'px',width: (val.width / (totalWidth-(checkbox?40:0)-((draggable?40:0))))*offsetWidth+'px'}"
                           v-if="val.fixed === 'left'"
                           :key="'ipub-columns' + num">
                        <columns-item :item="item"
                                      :index="index"
                                      :val="val">
                          <template :slot="val.slot"
                                    slot-scope="{text, record, index}">
                            <slot :name="val.slot"
                                  v-bind:text="text"
                                  v-bind:record="record"
                                  v-bind:index="index"></slot>
                          </template>
                        </columns-item>
                      </div>
                    </template>
                    <!-- 中部不悬停菜单 -->
                    <template v-for="(val, num) in columns">
                      <div :style="{minWidth: val.width+'px',width: (val.width / (totalWidth-(checkbox?40:0)-((draggable?40:0))))*offsetWidth+'px'}"
                           v-if="!val.fixed"
                           :key="'ipub-columns' + num">
                        <columns-item :item="item"
                                      :index="index"
                                      :val="val">
                          <template :slot="val.slot"
                                    slot-scope="{text, record, index}">
                            <slot :name="val.slot"
                                  v-bind:text="text"
                                  v-bind:record="record"
                                  v-bind:index="index"></slot>
                          </template>
                        </columns-item>
                      </div>
                    </template>
                    <!-- 右侧悬停菜单 -->
                    <template v-for="(val, num) in columns">
                      <div :style="{minWidth: val.width+'px',width: (val.width / (totalWidth-(checkbox?40:0)-((draggable?40:0))))*offsetWidth+'px'}"
                           v-if="val.fixed === 'right'"
                           :key="'ipub-columns' + num">
                        <columns-item :item="item"
                                      :index="index"
                                      :val="val">
                          <template :slot="val.slot"
                                    slot-scope="{text, record, index}">
                            <slot :name="val.slot"
                                  v-bind:text="text"
                                  v-bind:record="record"
                                  v-bind:index="index"></slot>
                          </template>
                        </columns-item>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
        <!-- <div v-if="checkbox && fixed && tableData && tableData.length"
             class="ipub-table--fixed ipub-table--fixed__left">
          <div class="ipub-table--fixed__thead">
            <div class="ipub-table__checkbox"></div>
          </div>
          <div class="ipub-table--fixed__tbody"
               v-for="(item, index) in tableData"
               :key="'ipub-dataSource-tbody__checkbox'+index">
            <div class="ipub-table__checkbox"></div>
          </div>
        </div>
        <div class="ipub-table--fixed ipub-table--fixed__right ipub-p4"
             v-if="actions && fixed && tableData && tableData.length">
          <div class="ipub-table--fixed__thead"
               :style="{minWidth: actions.width+'px',width: (actions.width / (totalWidth-(checkbox?40:0)-(draggable?40:0)))*offsetWidth+'px'}">
            <div style="display:inline-block"
                 class="ipub-table__thead__columns__item">
              <template v-if="language === 'en-US'">
                {{ actions.enTitle || actions.title }}
              </template>
              <template v-else-if="language === 'zh-CN'">
                {{ actions.title }}
              </template>
            </div>
          </div>
          <div class="ipub-table--fixed__tbody"
               v-for="(item, index) in tableData"
               :key="'ipub-dataSource-tbody__checkbox'+index">
            <div class="table-actions">
              <slot name="actions"
                    v-bind:record="item"
                    v-bind:index="index"></slot>
            </div>
          </div>
        </div> -->
        <div :class="['ipub-table--fixed ipub-table--fixed__left', border?'border':'noborder']"
             :style="'border-right: 6px solid $body_color'"
             v-if="tableData && tableData.length && (hasLeft || checkbox)">
          <div class="ipub-table--fixed__thead"
               :style="{height:thead_h+'px',background: border?'#fff':''}">
            <div v-if="checkbox"
                 style="padding-left:20px;height:40px"
                 class="flex-center body-bg">
              <ipub-radio :checked="checkAll"
                          @change="checkTotal"
                          checkBox></ipub-radio>
            </div>
            <template v-for="(item, index) in columns">
              <div :style="{minWidth: item.width+'px',width: (item.width / (totalWidth-(checkbox?40:0)-(draggable?40:0)))*offsetWidth+'px'}"
                   v-if="item && item.fixed === 'left'"
                   :key="'ipub-columns' + index">
                <div style="display:inline-block"
                     class="ipub-table__thead__columns__item ipub-p3">
                  <template v-if="language === 'en-US'">
                    {{ item.enTitle || item.title }}
                  </template>
                  <template v-else-if="language === 'zh-CN'">
                    {{ item.title }}
                  </template>
                </div>
              </div>
            </template>
          </div>
          <div class="ipub-p4 ipub-table__tbody">
            <div :class="['ipub-table__tbody__tr', border?'border':'']"
                 v-for="(item, index) in tableData"
                 :key="'ipub-dataSource'+item.id||item.name||index">
              <div class="ipub-table__tbody__tr__columns"
                   :style="{height: tr_h[index]+'px'}">
                <!-- 左侧悬停菜单 -->
                <div v-if="checkbox"
                     style="padding-left:20px"
                     class="flex-center content-bg">
                  <ipub-radio :checked="selectOptions.some(e=>{return e[checkKey] === item[checkKey]})"
                              @change="onSelectChange(item)"
                              checkBox></ipub-radio>
                </div>
                <template v-for="(val, num) in columns">
                  <div :style="{minWidth: val.width+'px',width: (val.width / (totalWidth-(checkbox?40:0)-((draggable?40:0))))*offsetWidth+'px'}"
                       v-if="val.fixed === 'left'"
                       :key="'ipub-columns' + num">
                    <columns-item :item="item"
                                  :index="index"
                                  :val="val">
                      <template :slot="val.slot"
                                slot-scope="{text, record, index}">
                        <slot :name="val.slot"
                              v-bind:text="text"
                              v-bind:record="record"
                              v-bind:index="index"></slot>
                      </template>
                    </columns-item>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div :class="['ipub-table--fixed ipub-table--fixed__right', border?'border':'noborder']"
             v-if="tableData && tableData.length && hasRight">
          <div class="ipub-table--fixed__thead"
               :style="{height:thead_h+'px',background: border?'#fff':''}">
            <template v-for="(item, index) in columns">
              <div :style="{minWidth: item.width+'px',width: (item.width / (totalWidth-(checkbox?40:0)-(draggable?40:0)))*offsetWidth+'px'}"
                   v-if="item && item.fixed === 'right'"
                   :key="'ipub-columns' + index">
                <div style="display:inline-block"
                     class="ipub-table__thead__columns__item ipub-p3">
                  <template v-if="language === 'en-US'">
                    {{ item.enTitle || item.title }}
                  </template>
                  <template v-else-if="language === 'zh-CN'">
                    {{ item.title }}
                  </template>
                </div>
              </div>
            </template>
          </div>
          <div class="ipub-p4 ipub-table__tbody">
            <div :class="['ipub-table__tbody__tr', border?'border':'noborder']"
                 v-for="(item, index) in tableData"
                 :key="'ipub-dataSource'+index">
              <div class="ipub-table__tbody__tr__columns"
                   :style="{height: tr_h[index]+'px'}">
                <!-- 左侧悬停菜单 -->
                <template v-for="(val, num) in columns">
                  <div :style="{minWidth: val.width+'px',width: (val.width / (totalWidth-(checkbox?40:0)-((draggable?40:0))))*offsetWidth+'px'}"
                       v-if="val.fixed === 'right'"
                       :key="'ipub-columns' + num">
                    <columns-item :item="item"
                                  :index="index"
                                  :val="val">
                      <template :slot="val.slot"
                                slot-scope="{text, record, index}">
                        <slot :name="val.slot"
                              v-bind:text="text"
                              v-bind:record="record"
                              v-bind:index="index"></slot>
                      </template>
                    </columns-item>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="relative"
           v-if="pagination && tableData && tableData.length">
        <div class="ipub-p1 line-h-40">Data in total: {{pagination.total}}</div>
        <div class="right-option line-h-40">
          <ipub-pagination v-model="pagination.current"
                           :total="pagination.total"
                           :current="pagination.current"
                           :sizeChange="pagination.sizeChange"
                           :pageSizeOptions="pagination.pageSizeOptions"
                           :showQuickJumper="pagination.showQuickJumper"
                           :pageSize="pagination.size"
                           @change="onPageChange"
                           @showSizeChange="showSizeChange" />
        </div>
      </div>
    </template>
    <template v-if="(!tableData || !tableData.length) && showEmpty">
      <ipub-empty :text="empty.text||emptyText"
                  :icon="empty.icon"
                  :title="empty.title" />
    </template>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import IpubPagination from '../../pagination'
import IpubIcon from '../../icon'
import IpubEmpty from '../../empty'
import IpubRadio from '../../radio'
import ColumnsItem from './columns-item.vue'
import elementResizeDetectorMaker from 'element-resize-detector'
import { guid } from '../../../src/utils/utils'
export default {
  name: 'IpubTable',
  components: {
    IpubPagination, draggable, IpubIcon, IpubEmpty, ColumnsItem, IpubRadio
  },
  props: {
    // type: {
    //   type: String,
    //   default: ''
    // },
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    showColumns: {
      type: Boolean,
      default: true
    },
    dataSource: {
      type: Array,
      default () {
        return []
      }
    },
    language: {
      type: String,
      default: 'en-US'
    },
    checkbox: {
      type: Boolean,
      default: false
    },
    checkKey: {
      type: String,
      default: 'id'
    },
    showEmpty: {
      type: Boolean,
      default: true
    },
    draggable: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    emptyText: String,
    empty: {
      type: Object,
      default () {
        return {
          icon: 'iconfolder',
          title: 'No Data',
          text: ''
        }
      }
    },
    pagination: {
      type: [Object, Boolean],
      default () {
        return {
          auto: true,
          total: this.dataSource.length,
          size: 10,
          current: 1,
          sizeChange: true,
          pageSizeOptions: [5, 10, 30, 50, 100], // 每页数量选项
          showQuickJumper: true,
        }
      }
    }
  },
  data () {
    return {
      uuid: '',
      thead_h: 0,
      tr_h: [],
      screenWidth: document.body.clientWidth,
      offsetWidth: 0,
      actions: '',
      totalData: [],
      dragData: [],
      hasLeft: false,
      hasRight: false,
      checkAll: false,
      selectOptions: []
    }
  },
  watch: {
    screenWidth (val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        setTimeout(() => {
          // 打印screenWidth变化的值
          this.offsetWidth = this.$refs['ipub-table__content'].offsetWidth
          this.timer = false
        }, 400)
      }
    },
    columns (val) {
      val.forEach(item => {
        if (item.fixed === 'left') {
          this.hasLeft = true
        }
        if (item.fixed === 'right') {
          this.hasRight = true
        }
      })
    },
    dataSource: {
      handler () {
        // 清空排序情况
        this.columns.forEach(item => {
          if (item.sorter) {
            item._order = 'def'
          }
        })
        this.totalData = JSON.parse(JSON.stringify(this.dataSource))
        if (this.pagination.auto) {
          this.pagination.total = this.dataSource.length
        }
        this.selectOptions = []
      },
      immediate: true
    },
    tableData: {
      handler (val) {
        this.dragData = JSON.parse(JSON.stringify(val))
        this.getHeight()
      },
      immediate: true
    }
  },
  computed: {
    totalWidth () {
      let totalWidth = (this.checkbox ? 40 : 0) + (this.draggable ? 40 : 0)
      this.columns.forEach(item => {
        totalWidth += item.width
      })
      return totalWidth
    },
    tableData: {
      get () {
        if (this.pagination.auto) {
          const { current, size } = this.pagination
          return JSON.parse(JSON.stringify(this.totalData.slice((current - 1) * size, current * size)))
        } else {
          return JSON.parse(JSON.stringify(this.totalData))
        }
      },
      set (newValue) {
        this.$emit('setSort', newValue)
      }
    },
    total () {
      if (this.pagination.auto) {
        return this.dataSource.length
      } else {
        return this.pagination.total || this.dataSource.length
      }
    },
    onPageChange () {
      return this.pagination.onPageChange || this.pageChange
    },
    showSizeChange () {
      return this.pagination.showSizeChange || this.sizeChange
    },
  },
  mounted () {
    const that = this
    this.uuid = guid()
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
    this.totalData = JSON.parse(JSON.stringify(this.dataSource))
    this.offsetWidth = this.$refs['ipub-table__content'].offsetWidth
    this.columns.forEach(item => {
      if (item.fixed === 'left') {
        this.hasLeft = true
      }
      if (item.fixed === 'right') {
        this.hasRight = true
      }
    })

    this.watchSize()
  },
  methods: {
    getHeight () {
      setTimeout(() => {
        this.thead_h = this.$refs[this.uuid + 'thead'] ? this.$refs[this.uuid + 'thead'].offsetHeight : 0
        this.tr_h = []
        if (this.$refs[this.uuid + 'tr']) {
          for (let i of this.$refs[this.uuid + 'tr']) {
            this.tr_h.push(i ? (this.border ? i.offsetHeight - 4 : i.offsetHeight) : 0)
          }
        }
      })
    },
    pageChange (current, size) {
      this.pagination.current = current
      this.pagination.size = size
    },
    sizeChange (current, size) {
      this.pagination.current = 1
      this.pagination.size = size
      this.onPageChange(1, size)
    },
    handleDrag () {
      this.$emit('drag', this.dragData)
    },
    watchSize () {
      const erd = elementResizeDetectorMaker()
      erd.listenTo(this.$refs['ipub-table__content'], (el) => {
        const width = el.offsetWidth
        this.$nextTick(() => {
          this.offsetWidth = width
          this.getHeight()
        })
      })
    },
    checkTotal (val) {
      this.checkAll = !val
      if (this.checkAll) {
        this.selectOptions = JSON.parse(JSON.stringify(this.tableData))
      } else {
        this.selectOptions = []
      }
    },
    onSelectChange (val) {
      const index = this.selectOptions.findIndex(item => { return item[this.checkKey] === val[this.checkKey] })
      if (index === -1) {
        this.selectOptions.push(val)
      } else {
        this.selectOptions.splice(index, 1)
      }
      if (this.selectOptions.length !== this.tableData.length) {
        this.checkAll = false
      } else {
        this.checkAll = true
      }
      this.$emit('select', this.selectOptions, val)
    },
    onSortChanage (item, index) {
      if (!item.sort) {
        return
      }
      let val = ''
      switch (item.order) {
        case '':
          val = '-'
          break
        case '-':
          val = undefined
          break
      }
      let sorted = ''
      this.columns.forEach(item => {
        // if (item.order === '-') {
        //   sorted += ('-' + item.dataIndex + ',')
        // } else if (item.order === '') {
        //   sorted += (item.dataIndex + ',')
        // }
        item.order = undefined
      })
      item.order = val
      this.$set(this.columns, index, item)

      sorted = val === '-' ? '-' + item.dataIndex : val === '' ? item.dataIndex : ''
      // if (sorted) {
      //   sorted = sorted.substr(0, sorted.length - 1)
      // }

      this.$emit('order', sorted)
    }
  }
}
</script>

<style lang="scss">
.ipub-table {
  position: relative;
  &__content {
    overflow-x: scroll;
    // position: relative;
    // overflow-y: hidden;
  }
  &__scroll {
    position: relative;
  }
  &__thead {
    // position: absolute;
    // left: 0;
    // right: 0;
    // top: 0;
    &__columns__item {
      font-weight: 700;
      &__sort {
        opacity: 0;
        transition: 0.3s all;
      }
      &:hover {
        .ipub-table__thead__columns__item__sort {
          opacity: 1;
        }
      }
    }
  }
  &__thead,
  &__tbody__tr {
    line-height: 20px;
    width: 100%;
    &__columns {
      width: 100%;
      display: flex;
      &__item {
        width: 100%;
        // display: inline-block;
        padding: 10px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        line-height: 20px;
        height: 100%;
      }
      &--fixed-left,
      &--fixed-right {
        position: absolute;
      }
      &--fixed-left {
        left: 0;
        &.noborder {
          border-right: 4px solid $body_color;
        }
      }
      &--fixed-right {
        right: 0;
        &.noborder {
          border-right: 4px solid $body_color;
        }
      }
    }
  }
  &__tbody {
    // padding-top: 40px;
    &__tr {
      margin-bottom: 6px;
      box-sizing: border-box;
      &__columns {
        &__item {
          height: 100%;
          background: $content_color;
        }
      }
      &.border {
        margin-bottom: 4px;
        overflow: hidden;
        box-sizing: border-box;
        border: 2px solid $border_color;
        border-radius: 4px;
      }
    }
  }
  &__checkbox {
    display: inline-block;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border: 1px solid $main_color;
    margin: 15px;
    cursor: pointer;
    &__active {
      background: $main_color;
    }
    &__disabled {
      border-color: $line_color;
      background: $line_color;
    }
  }
  &__draggable {
    display: inline-block;
    width: 40px;
  }
  .ipub-draggable-icon {
    background: $content_color;
  }
  &--fixed {
    position: absolute;
    top: 0;
    &.border {
      background: transparent;
      .ipub-table--fixed__thead {
        background: $content_color;
      }
    }
    &__left {
      left: 0;
      &.noborder {
        border-right: 4px solid $body_color;
      }
      &.border {
        border-right: 6px solid transparent;
      }
    }
    &__right {
      right: 0;
      &.noborder {
        border-left: 4px solid $body_color;
      }
      &.border {
        border-left: 6px solid transparent;
      }
    }
    &__thead {
      height: 40px;
      box-sizing: border-box;
      background: $body_color;
    }
    &__tbody {
      line-height: 20px;
      padding: 10px 0;
      margin-bottom: 6px;
      box-sizing: border-box;
      background: $content_color;
      .ipub-table__checkbox {
        margin: -10px 4px 0 4px;
      }
    }
  }
  &-status-show {
    display: inline-block;
    height: 12px;
    width: 12px;
    line-height: 40px;
    border-radius: 50%;
    background: $key_color;
    &--active {
      background: $success_color;
    }
    &--disable {
      background: $line_color;
    }
  }
  .table-actions {
    font-size: 18px;
    display: flex;
    // line-height: 40px;
    .ipub-icon {
      padding: 0 12px;
      border-right: 1px solid $border_color;
      cursor: pointer;
      &:last-child {
        border-right: none;
      }
    }
  }
  &__pagination {
    text-align: right;
  }
  &-slot-img {
    height: 100px;
    width: 100%;
    object-fit: contain;
  }
  &-slot-avatar {
    height: 50px;
    width: 50px;
    object-fit: cover;
    border-radius: 50%;
    &-icon {
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      width: 50px;
      font-size: 50px;
      color: $line_color;
      background: $font_color;
      border-radius: 50%;
    }
  }
}
</style>
