<template>
  <div class="syswin-table" style="position: relative;" :style="{ height }">
    <!--筛选下拉-->
    <drag-set v-if="showDragSet" :listConf='columnList' @save="dragChange" />
    <el-table border stripe class="cusTable" :row-key="rowKey" :show-summary="showSummary" size="medium"
      :row-class-name="headerClass"
      :summary-method="customSum ? getSummaries : getSummariesNum" ref="cusTable" height='100%' :indent="indent"
      :lazy="lazy" :load="load" :tree-props="treeProps" v-bind="attrs" :default-expand-all="defaultExpandAll"
      :expand-row-keys="expandRowKeys" :cell-class-name="cellClassName" @sort-change="handleSortChange" @selection-change="handleSelectionChange"
      @select-all="handleSelectAll" @row-click="handleRowClick" @select="handleSelect" @expand-change="handleExpandChange"
      @header-dragend="handleHeaderDragend" :span-method="spanMethod">
      <slot name="start"></slot>
      <el-table-column v-for="(item, index) in columnData" :key="item.prop + index" :prop="item.prop" :label="item.label"
        :width="item.width || 'auto'" :min-width="item.minWidth" :fixed="item.fixed" :align="item.align"
        :sortable="item.sortable" :resizable="item.resizable"
        :header-align="item.headerAlign" v-element-table-tooltip="item.tooltip">
        <template #header>
          <template v-if="!item.slotHeader">
            <span v-if="!item.filterType">{{ item.label }}</span>
            <span v-else>
              {{ item.label }}
              <!-- 多选 -->
              <el-popover v-if="item.filterType === 'multiple'" placement="bottom" :ref="`${item.prop}`"
                v-model="item.visible" trigger="click" width="160">
                <div style="max-height:300px;overflow: auto;">
                  <el-checkbox-group v-model="item.value">
                    <div class="filterItem" v-for="(x, index) in item.filters || []" :key="index" :title="x.label">
                      <el-checkbox :label="x.value">{{ x.label }}</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
                <div style="text-align: center;margin-top:10px">
                  <el-button type="primary" size="mini" @click="item.visible = false; handleSearch(item)">确定</el-button>
                  <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
                </div>
                <i class="iconfont icon-filter-fill filter-icon" slot="reference"
                  :class="{ 'selected-color': item.value && item.value.length }" @click.stop=""></i>
              </el-popover>
              <!-- 日期选择 -->
              <el-popover v-else-if="item.filterType === 'daterange'" placement="bottom" :ref="`${item.prop}`"
                v-model="item.visible" trigger="click" width="360">
                <el-date-picker v-model="item.value" type="daterange" size="small" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
                <div style="text-align: center;margin-top:10px">
                  <el-button type="primary" size="mini" @click="item.visible = false; handleSearch(item)">确定</el-button>
                  <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
                </div>
                <i class="iconfont icon-filter-fill filter-icon" slot="reference"
                  :class="{ 'selected-color': item.value && item.value.length }" @click.stop=""></i>
              </el-popover>
              <!-- 月份选择 -->
              <el-popover v-else-if="item.filterType === 'monthrange'" placement="bottom" :ref="`${item.prop}`"
                v-model="item.visible" trigger="click" width="300">
                <el-date-picker v-model="item.value" type="monthrange" size="small" range-separator="至"
                  start-placeholder="开始月份" end-placeholder="结束月份">
                </el-date-picker>
                <div style="text-align: center;margin-top:10px">
                  <el-button type="primary" size="mini" @click="item.visible = false; handleSearch(item)">确定</el-button>
                  <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
                </div>
                <i class="iconfont icon-filter-fill filter-icon" slot="reference"
                  :class="{ 'selected-color': item.value && item.value.length }" @click.stop=""></i>
              </el-popover>
              <!-- 输入框 -->
              <el-popover v-else-if="item.filterType === 'text'" placement="bottom" :ref="`${item.prop}`"
                v-model="item.visible" trigger="click" width="160">
                <el-input v-model="item.value" clearable size="small"></el-input>
                <div style="text-align: center;margin-top:10px">
                  <el-button type="primary" size="mini" @click="item.visible = false; handleSearch(item)">确定</el-button>
                  <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
                </div>
                <i class="iconfont icon-filter-fill filter-icon" slot="reference" :class="{ 'selected-color': item.value }"
                  @click.stop=""></i>
              </el-popover>
              <!-- 单选 -->
              <el-popover v-else-if="item.filterType === 'single'" placement="bottom" :ref="`${item.prop}`"
                v-model="item.visible" trigger="click" width="160">
                <div style="max-height:300px;overflow: auto;">
                  <el-radio-group v-model="item.value">
                    <div class="filterItem" v-for="(x, index) in item.filters || []" :key="index" :title="x.label">
                      <el-radio :label="x.value">{{ x.label }}</el-radio>
                    </div>
                  </el-radio-group>
                </div>
                <div style="text-align: center;margin-top:10px">
                  <el-button type="primary" size="mini" @click="item.visible = false; handleSearch(item)">确定</el-button>
                  <el-button size="mini" @click="item.visible = false; reset(item)">重置</el-button>
                </div>
                <i class="iconfont icon-filter-fill filter-icon" slot="reference"
                  :class="{ 'selected-color': item.value || item.value === 0 }" @click.stop=""></i>
              </el-popover>
            </span>
          </template>
          <!-- 自定义表头 -->
          <slot v-else :name="item.slotHeader"></slot>
        </template>
        <template slot-scope="scope">
          <span v-if="!item.slotCell" :style="item.style" @click="handleColumnClick(scope.row, item)">
            {{ transContent(scope.row, item.prop) || '-' }}
          </span>
          <!--自定义表格内容-->
          <slot v-else :name="item.slotCell" :row="scope.row" :index="scope.$index"></slot>
        </template>
      </el-table-column>
      <!-- 自定义表尾列 -->
      <slot name="end"></slot>
      <div slot="empty" class="empty" style="margin-top:22px;">
        <noData></noData>
      </div>
    </el-table>
    <div class="sum" v-if="customSum">
      <slot name="customSum"></slot>
    </div>
    <el-dropdown class="sum" @command="changeSumType" v-if="showSummary && data.length && !customSum">
      <span class="el-dropdown-link">
        {{ totalText[sumType] }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-if="showPageSum" :command="0">分页合计</el-dropdown-item>
        <el-dropdown-item v-if="showChoiseSum" :command="1">选中合计</el-dropdown-item>
        <el-dropdown-item :command="2">全部合计</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
import Vue from 'vue';
import noData from './noData';
import dragSet from '../../drag-set';
import BigDataTable from './BigDataTable.js'
import elementTableTooltip, { darkTooltip } from 'vue-element-table-tooltip';
Vue.use(elementTableTooltip, {
  theme: 'dark',
})

/** localStorage 列偏好版本：与 props.columns 合并，避免缓存覆盖新增/改名/默认宽度 */
const COLUMN_STORAGE_VERSION = 2

function migrateLegacyColumnArray(savedArr, devColumns) {
  const devPropSet = new Set(devColumns.map((c) => c.prop).filter(Boolean))
  const order = savedArr.map((c) => c.prop).filter((p) => p && devPropSet.has(p))
  const show = {}
  for (const item of savedArr) {
    if (item.prop && devPropSet.has(item.prop) && item.isShow !== undefined) {
      show[item.prop] = item.isShow
    }
  }
  return {
    order,
    show,
    // 旧版把整列快照写入缓存，宽度无法区分「用户拖拽」与「当时的默认」，迁移时不带入宽度以便采用新版默认宽度
    resizedWidths: {},
  }
}

function parseColumnPrefs(raw, devColumns) {
  if (!raw) return null
  let parsed
  try {
    parsed = JSON.parse(raw)
  } catch {
    return null
  }
  if (Array.isArray(parsed)) {
    return migrateLegacyColumnArray(parsed, devColumns)
  }
  if (parsed && parsed.v === COLUMN_STORAGE_VERSION) {
    return {
      order: Array.isArray(parsed.order) ? parsed.order : [],
      show: parsed.show && typeof parsed.show === 'object' ? parsed.show : {},
      resizedWidths:
        parsed.resizedWidths && typeof parsed.resizedWidths === 'object'
          ? parsed.resizedWidths
          : {},
    }
  }
  return null
}

function mergeColumnsWithPrefs(devColumns, prefs) {
  if (!devColumns || !devColumns.length) return []
  if (!prefs) return devColumns.map((c) => ({ ...c }))
  const { order, show, resizedWidths } = prefs
  const mergedByProp = new Map()
  for (const devCol of devColumns) {
    const prop = devCol.prop
    mergedByProp.set(prop, {
      ...devCol,
      isShow: show[prop] !== undefined ? show[prop] : devCol.isShow,
      width:
        resizedWidths[prop] !== undefined && resizedWidths[prop] !== null
          ? resizedWidths[prop]
          : devCol.width,
    })
  }
  const ordered = []
  const seen = new Set()
  const devPropOrder = devColumns.map((c) => c.prop)
  for (const prop of order) {
    if (mergedByProp.has(prop)) {
      ordered.push(mergedByProp.get(prop))
      seen.add(prop)
    }
  }
  for (const prop of devPropOrder) {
    if (!seen.has(prop)) {
      ordered.push(mergedByProp.get(prop))
      seen.add(prop)
    }
  }
  return ordered
}

export default {
  name: 'SyTable',
  props: {
    // 列表数据
    data: {
      type: Array,
      required: true,
      default: () => []
    },
    // 列表列
    columns: {
      type: Array,
      default: () => []
    },
    // 列表高度
    height: {},
    handleClassName: {
      type: Function,
      default: () => { }
    },
    // 列表内容转换的方法
    transContent: {
      type: Function,
      required: true,
      default: () => { }
    },
    // 是否显示合计功能
    showSummary: {
      type: Boolean,
      default: () => false
    },
    // 是否显示选中合计： 默认不显示
    showChoiseSum: {
      type: Boolean,
      default: () => false
    },
    // 是否显示当前页合计： 默认显示
    showPageSum: {
      type: Boolean,
      default: () => true
    },
    // 自定义合计样式
    customSum: {
      type: Boolean,
      default: () => false
    },
    // 合计的处理方法
    getSummaries: {
      type: Function,
      default: () => { }
    },
    // 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。
    rowKey: {
      type: String,
      default: () => ''
    },
    // 展示树形数据时，树节点的缩进
    indent: {
      type: Number,
      default: () => 16
    },
    cellClassName: {
      type: Function,
      default: () => {}
    },
    // 是否懒加载子节点数据
    lazy: {
      type: Boolean,
      default: () => false
    },
    // 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息
    load: {
      type: Function,
      default: () => { }
    },
    // 渲染嵌套数据的配置选项
    treeProps: {
      type: Object,
      default: () => { return { hasChildren: 'hasChildren', children: 'children' }; }
    },
    // 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
    defaultExpandAll: {
      type: Boolean,
      default: () => false
    },
    // 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
    expandRowKeys: {
      type: Array,
      default: () => undefined
    },
    // 是否显示表格右上角设置功能，默认true
    showDragSet: {
      type: Boolean,
      default: () => true
    },
    // 合计信息
    sumInfo: {
      type: Object,
      default: () => { }
    },
    // 功能模块key唯一（同一应用内需全局唯一；若可能重复请配合 columnPrefsScope）
    nameKey: {
      type: String,
      default: () => ''
    },
    /**
     * 列偏好 localStorage 命名空间，用于区分不同页面/路由下误用了相同 nameKey 的表格。
     * 最终键名为 vsyswin_{columnPrefsScope}__{nameKey}；不传则仍为 vsyswin_{nameKey}
     */
    columnPrefsScope: {
      type: String,
      default: () => ''
    },
    // 合计功能保留小数位
    decimalNum: {
      type: Number,
      default: () => 2
    },
    spanMethod: {
      type: Function,
      default: () => { }
    },
    virtual: Boolean
  },
  directives: {
    'element-table-tooltip': darkTooltip,
  },
  data() {
    return {
      totalText: {
        0: '分页合计',
        1: '选中合计',
        2: '全部合计'
      },
      columnList: [], // 表格列数据
      /** 用户拖拽表头调整的列宽（prop -> width），写入缓存；默认宽度始终以 props.columns 为准 */
      columnPrefs: {
        resizedWidths: {},
      },
      sumType: 2, // 合计类型 0：分页合计；1选中合计；2全部合计
      selection: [], // 当前选中表格数据
      fillData: [],
    };
  },
  components: {
    noData,
    dragSet
  },
  computed: {
    // 表格列数据
    columnData() {
      return this.columnList.filter((item) => item.isShow);
    },
    table() {
      return this.$refs.cusTable;
    },
    attrs() {
      if (this.virtual) {
        return {
          data: this.fillData,
          'row-style': this.fillrow
        }
      } else {
        return {
          data: this.data,
        }
      }
    }
  },
  watch: {
    data: {
      handler(data) {
        if (this.virtual) {
          this.reload()
        }
      },
      immediate: true
    },
    columns: {
      handler() {
        this.syncColumnsFromProps()
      },
      deep: true,
    },
    nameKey() {
      this.syncColumnsFromProps()
    },
    columnPrefsScope() {
      this.syncColumnsFromProps()
    },
  },
  created() {
    this.getColumnsData(); // 获取表格列数据
  },
  mounted() {
    this.applyColumnFilterDefaults()
  },
  updated() {
    this.doLayout();
  },
  methods: {
    fillrow({
      row,
      rowIndex
    }) {
      if (rowIndex === 0) {
        return {
          height: this.topSpan + 'px'
        }
      }
      if (rowIndex === this.fillData.length - 1) {
        return {
          height: this.bottomSpan + 'px'
        }
      }
    },
    reload() {
      this.$nextTick(() => {
        console.log(this.$refs.cusTable, 353)
        if (!this.$refs.cusTable) return
        const ref = this.$refs.cusTable.$refs.bodyWrapper
        if (!this.tableControl) {
          this.initBigDataTable(ref)
        } else {
          this.tableControl.refresh()
        }
      })
    },
    // 初始化大数据表
    initBigDataTable(ref) {
      const options = {
        scrollerRef: ref,
        data: 'data', // length:50000
        fill_data: 'fillData',
        top_span: 'topSpan',
        bottom_span: 'bottomSpan',
        filldata_length: 33,
        table_item_height: 32
      }
      this.tableControl = new BigDataTable(this, options)
      console.log(this.fillData, 375)
    },
    getColumnStorageKey() {
      if (!this.nameKey) return ''
      const scope = (this.columnPrefsScope || '').trim()
      return scope
        ? `vsyswin_${scope}__${this.nameKey}`
        : `vsyswin_${this.nameKey}`
    },
    persistColumnPrefs() {
      if (!this.nameKey) return
      const props = new Set(this.columnList.map((c) => c.prop).filter(Boolean))
      const pruned = {}
      for (const key of Object.keys(this.columnPrefs.resizedWidths)) {
        if (props.has(key)) pruned[key] = this.columnPrefs.resizedWidths[key]
      }
      const payload = {
        v: COLUMN_STORAGE_VERSION,
        order: this.columnList.map((c) => c.prop),
        show: Object.fromEntries(
          this.columnList.map((c) => [c.prop, !!c.isShow]),
        ),
        resizedWidths: pruned,
      }
      localStorage.setItem(this.getColumnStorageKey(), JSON.stringify(payload))
    },
    syncColumnsFromProps() {
      this.getColumnsData()
      this.applyColumnFilterDefaults()
    },
    applyColumnFilterDefaults() {
      for (const item of this.columnList) {
        if (item.visible === undefined) this.$set(item, 'visible', false)
        if (['multiple', 'daterange', 'monthrange'].indexOf(item.filterType) > -1) {
          if (item.value === undefined) this.$set(item, 'value', [])
        } else if (['text', 'single'].indexOf(item.filterType) > -1) {
          if (item.value === undefined) this.$set(item, 'value', '')
        }
      }
    },
    // 获取表格列数据（props 为列定义权威来源，localStorage 只存顺序 / 显示 / 用户拖拽宽度）
    getColumnsData() {
      const devColumns = Array.isArray(this.columns)
        ? this.columns.map((c) => ({ ...c }))
        : []
      if (!this.nameKey) {
        this.columnList = devColumns
        this.columnPrefs.resizedWidths = {}
        return
      }
      const raw = localStorage.getItem(this.getColumnStorageKey())
      const prefs = parseColumnPrefs(raw, devColumns)
      if (!prefs) {
        this.columnList = devColumns
        this.columnPrefs.resizedWidths = {}
        return
      }
      this.columnPrefs.resizedWidths = { ...prefs.resizedWidths }
      this.columnList = mergeColumnsWithPrefs(devColumns, prefs)
    },
    // 列表头宽度拉伸
    handleHeaderDragend(newWidth, oldWidth, column, event) {
      if (this.nameKey) {
        const prop = column.property
        for (const item of this.columnList) {
          if (item.prop === prop) {
            this.$set(item, 'width', newWidth)
          }
        }
        if (prop !== undefined && prop !== null && prop !== '') {
          this.$set(this.columnPrefs.resizedWidths, prop, newWidth)
        }
        this.persistColumnPrefs()
      } else {
        this.$emit('header-dragend', newWidth, oldWidth, column, event);
      }
    },
    // 点击表格内容
    handleColumnClick(row, column) {
      this.$emit('cell-click', row, column);
    },
    // 列表排序 value, row, column
    handleSortChange(params) {
      this.$emit('sort-change', params);
    },
    // 表格勾选事件
    handleSelectionChange(selection) {
      this.selection = selection;
      this.$emit('selection-change', selection);
    },
    headerClass ({ row, rowIndex }) {
      return this.handleClassName(row, rowIndex);
    },
    // 当某个单元格被点击时会触发该事件
    handleRowClick (row, column, cell, event) {
      this.$emit('row-click', row, column, cell, event);
    },
    // 当用户手动勾选全选 Checkbox 时触发的事件
    handleSelectAll(selection) {
      this.$emit('select-all', selection);
    },
    // 当用户手动勾选数据行的 Checkbox 时触发的事件
    handleSelect(selection, row) {
      this.$emit('select', selection, row);
    },
    // 表格行展开事件
    handleExpandChange(row, value) {
      this.$emit('expand-change', row, value);
    },
    // 合计类型转换
    changeSumType(type) {
      this.sumType = type;
    },
    doLayout() {
      this.$refs.cusTable.doLayout();
    },
    // 列表控制列表点击确定
    dragChange(list) {
      if (this.nameKey) {
        this.columnList = list;
        this.persistColumnPrefs()
      } else {
        this.$emit('drag-change', list);
      }
    },
    // 表头过滤筛选
    handleSearch(column) {
      this.$emit('filter-change', column);
    },
    // 表头过滤条件重置
    reset(column) {
      if (['multiple', 'daterange', 'monthrange'].indexOf(column.filterType) > -1) {
        column.value = [];
      } else if (['text', 'single'].indexOf(column.filterType) > -1) {
        column.value = '';
      }
      this.$emit('filter-change', column);
    },
    // 清空用户的选择，用于多选表格
    clearSelection() {
      this.$refs.cusTable.clearSelection();
    },
    // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
    toggleRowSelection(row, selected) {
      this.$refs.cusTable.toggleRowSelection(row, selected);
    },
    // 用于多选表格，切换所有行的选中状态
    toggleAllSelection() {
      this.$refs.cusTable.toggleAllSelection();
    },
    // 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
    toggleRowExpansion(row, expanded) {
      this.$refs.cusTable.toggleRowExpansion(row, expanded);
    },
    // 用于清空排序条件，数据会恢复成未排序的状态
    clearSort() {
      this.$refs.cusTable.clearSort();
    },
    // 自定义合计方法
    getSummariesNum({ columns, data }) {
      this.$nextTick(() => {
        this.doLayout();
      });
      const sums = [];
      columns.forEach((column, index) => {
        let values = data.map(item => Number(item[column.property]));
        if (this.sumType === 1) { // 当为选中合计时
          values = this.selection.map(item => Number(item[column.property]));
        }
        // 判断当前列是否需要进行合计
        if (this.sumInfo[column.property] || this.sumInfo[column.property] === 0) {
          if (this.sumType === 2) { // 当为全部合计时；使用传入的合计值
            sums[index] = this.sumInfo[column.property];
          } else {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          }
          if (this.decimalNum < 0) {
            // sums[index] = sums[index];
          } else {
            sums[index] = (+sums[index]).toFixed(this.decimalNum);
          }
        } else {
          sums[index] = '';
        }
      });
      return sums;
    }
  },
};
</script>
<style lang="scss" scoped>
.sum {
  position: absolute;
  margin-left: 10px;
  // width: 82px;
  font-size: 12px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background: #F5F7FA;
  left: 1px;
  bottom: 1px;
  z-index: 4;
}

.filterItem {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #fff;
  padding: 0 10px;
  box-sizing: border-box;
}

.filter-icon {
  margin-top: 1px;
  float: right;
  font-size: 9px !important;
  cursor: pointer;
  color: rgba(0, 0, 0, .5);
}

.selected-color {
  color: #027AFF;
}

.el-button--primary {
  background-color: #027AFF;
  border-color: #027AFF;
}

// .el-button:hover {
//     background: #027aff !important;
//     color: #fff !important;
//     border: 1px solid #027aff !important;
// }
</style>
<style lang="scss">
.overflow-content {
  max-width: 200px !important;
  min-width: auto !important;
  line-height: 20px !important;
  max-height: 200px !important;
  min-height: auto !important;
  overflow-y: auto !important;
  background-color: #303133 !important;
  -ms-overflow-style: none; /* 对于 Internet Explorer 和 Edge 隐藏滚动条 */
  scrollbar-width: none; /* 对于 Firefox 隐藏滚动条 */
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #027AFF;
  border-color: #027AFF;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: #027AFF;
  background: #027AFF;
}

// .el-input__inner {
//     height: 32px !important;
//     line-height: 32px !important;
//     border-radius: 2px !important;
//     box-sizing: border-box !important;
//     border-color: #D9D9D9 !important;
// }

.el-input__inner:hover {
  border-color: #D0D3D6 !important;
}

.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: #4A8DF0 !important;
}

.el-button--primary.is-plain {
  height: 20px !important;
  line-height: 18px !important;
  padding: 0 9px !important;
  background: none !important;
  border: 1px solid #4A8DF0 !important;
  color: #4A8DF0 !important;
  font-size: 12px;
}

.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  background: #4184E7 !important;
  color: #fff !important;
}

.el-button--primary.is-plain:active {
  background: #3070CF !important;
  color: #fff !important;
}

.syswin-table {
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .el-table__empty-block {
    position: absolute !important;
    height: calc(100% - 60px) !important;
  }
  .el-table {
    // border-radius: 0 0 8px 8px  !important;
    color: #282828;
  }
  .el-table table {
    width: 100% !important;
  }

  .el-table__empty-block {
    width: 100% !important;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
    background: #fff;
  }
  .el-table th {
    font-weight: bold;
    color: #282828;
    background: linear-gradient(180deg, #EEF4FB 0%, #FFFFFF 100%) !important;
    padding: 9px 0 !important;
  }

  .el-table td,
  .el-table th.is-leaf {
    // border-right: 1px solid #D8D8D8;
    border-right: none;
  }
  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
    border-bottom:1px solid #f1f1f1;
  }
  .el-table--border, .el-table--group {
    border: none !important;
  }
  .el-table--border::after, .el-table--group::after, .el-table::before{
    width: 0;
  }
  .el-table th:first-child {
    padding: 0 !important;
    box-sizing: border-box;
  }

  .el-table th .cell {
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 10px !important;
    box-sizing: border-box;
    min-width: 50px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  .el-table__footer .cell {
    padding: 0 10px !important;
    box-sizing: border-box;
    min-width: 50px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .el-table th:first-child .cell {
    padding: 0 20px !important;
    box-sizing: border-box;
  }

  .el-table td {
    padding: 10px 0 !important;
  }

  .el-table tbody td {
    border-right: none;
  }
  .el-table tbody td:last-child {
    border-right: none !important;
  }
  .el-table tbody .hover-row>td {
    background: #DCE8F9 !important;
  }

  .el-table td:first-child {
    padding: 0 !important;
    box-sizing: border-box;
  }

  .el-table td:first-child .cell {
    padding: 14px 20px !important;
    box-sizing: border-box;
  }

  .el-table th>.cell {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #282828 !important;
  }

  .el-table .sort-caret.ascending {
    border-bottom-color: rgba(0, 0, 0, .5) !important;
  }

  .el-table .sort-caret.descending {
    border-top-color: rgba(0, 0, 0, .5) !important;
  }

  .el-table .ascending .sort-caret.ascending {
    border-bottom-color: #027AFF !important;
  }

  .el-table .descending .sort-caret.descending {
    border-top-color: #027AFF !important;
  }

  .el-table__fixed-right::before,
  .el-table__fixed::before {
    height: 0;
  }
  .el-input__inner{
    border: 1px solid #f1f1f1;
    color: #282828;
  }
  .el-table__footer-wrapper tbody td.el-table__cell, .el-table__header-wrapper tbody td.el-table__cell {
    // background: #f1f1f1;
    color: #282828;
  }
  .el-table__footer-wrapper td.el-table__cell {
    border-top: none;
  }
}

.syswin-table .el-table th > .cell,
.el-table th > .cell {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #282828 !important;
  border-right: 1px solid #e5e5e5;
}
</style>
