<template>
  <vxe-table
    class="vxe_table_view"
    :border="border"
    header-row-class-name="headerrowclassname"
    :height="vxeHeight"
    ref="vxeTable"
    :edit-config="editConfig"
    :show-footer="showFooter"
    :show-overflow="showOverflow"
    :tooltip-config="tooltipConfig"
    resizable
    v-bind="$attrs"
    v-on="$listeners"
    @cell-dblclick="cellDblclick"
    @checkbox-change="selectChangeEvent"
    @checkbox-all="selectAllEvent"
  >
    <template v-for="(item, index) in vxeColumns">
      <!-- 输入框类型 -->
      <vxe-column
        v-if="item.editType && (item.visible || item.visible === undefined)"
        :key="item.field + index"
        :type="item.type"
        :field="item.field"
        :title="item.title"
        :title-help="item.titleHelp"
        :slots="item.slots"
        :fixed="item.fixed"
        :width="item.width"
        :min-width="item.minWidth"
        :resizable="item.resizable"
        :visible="item.visible"
        :align="item.align"
        :header-align="item.headerAlign"
        :footer-align="item.footerAlign"
        :show-overflow="item.showOverflow"
        :show-header-overflow="item.showHeaderOverflow"
        :show-footer-overflow="item.showFooterOverflow"
        :class-name="item.className"
        :header-class-name="item.headerClassName"
        :footer-class-name="item.footerClassName"
        :formatter="item.formatter"
        :sortable="item.sortable"
        :sort-by="item.sortBy"
        :sort-type="item.sortType"
        :filters="item.filters"
        :filter-multiple="item.filterMultiple"
        :filter-method="item.filterMethod"
        :filter-reset-method="item.filterresetMethod"
        :filter-recover-method="item.filterRecoverMethod"
        :filter-render="item.filterRender"
        :export-method="item.exportMethod"
        :footer-export-method="item.footerExportMethod"
        :title-prefix="item.titlePrefix"
        :cell-type="item.cellType"
        :edit-render="item.editRender || {}"
        :content-render="item.contentRender"
        :tree-node="item.treeNode"
        :params="item.params"
        :col-id="item.colId"
      >
        <template v-slot:edit="{ row, rowIndex }">
          <!-- 日期 -->
          <el-date-picker
            v-if="item.editType == 'date'"
            @mousewheel.native.prevent
            v-model="row[item.field]"
            :type="item.dateType || 'date'"
            :placeholder="item.placeholder || '选择日期时间'"
            :disabled="
              (typeof item.isDisabled === 'function' &&
                item.isDisabled(row, rowIndex)) ||
              item.disabled
            "
            :readonly="item.readonly"
            :format="item.format"
            :value-format="
              item.valueFormat === undefined ? 'timestamp' : item.valueFormat
            "
            :clearable="item.clearable === undefined ? true : item.clearable"
            :size="inputSize"
            :start-placeholder="
              item.dateHolder && item.dateHolder.start
                ? item.dateHolder.start
                : '开始日期'
            "
            :end-placeholder="
              item.dateHolder && item.dateHolder.end
                ? item.dateHolder.end
                : '结束日期'
            "
            @change="vxeChangeData(row, rowIndex, item)"
          >
          </el-date-picker>
          <!-- 时间 -->
          <el-time-picker
            v-if="item.editType == 'time'"
            v-model="row[item.field]"
            :disabled="
              (typeof item.isDisabled === 'function' &&
                item.isDisabled(row, rowIndex)) ||
              item.disabled
            "
            :readonly="item.readonly"
            :value-format="
              item.valueFormat === undefined ? 'timestamp' : item.valueFormat
            "
            :placeholder="item.placeholder || '选择时间'"
            :size="inputSize"
            :start-placeholder="
              item.dateHolder && item.dateHolder.start
                ? item.dateHolder.start
                : '开始时间'
            "
            :end-placeholder="
              item.dateHolder && item.dateHolder.end
                ? item.dateHolder.end
                : '结束时间'
            "
            :clearable="item.clearable === undefined ? true : item.clearable"
            @change="vxeChangeData(row, rowIndex, item)"
          >
          </el-time-picker>
          <!-- 输入框 -->
          <el-input
            v-if="item.editType == 'input'"
            @mousewheel.native.prevent
            @change="vxeChangeData(row, rowIndex, item)"
            v-model="row[item.field]"
            :type="item.inputType ? item.inputType : 'text'"
            :placeholder="item.placeholder || '请输入...'"
            v-d-input-point2="item.inputPoint2"
            :disabled="
              (typeof item.isDisabled === 'function' &&
                item.isDisabled(row, rowIndex)) ||
              item.disabled
            "
            :size="inputSize"
            :clearable="item.clearable === undefined ? true : item.clearable"
          >
            <template :slot="item.slotName" v-if="item.slotData">{{
              item.slotData
            }}</template>
            <el-button
              v-if="item.showInputButton"
              @click="mixInputButtonEvent(row, rowIndex, item)"
              slot="append"
              :icon="item.appendIcon"
              :disabled="item.buttonDisabled"
              >{{ item.appendText }}</el-button
            ></el-input
          >
          <!-- 数字输入框 -->
          <el-input
            v-if="item.editType == 'numberInput'"
            @mousewheel.native.prevent
            @change="vxeChangeData(row, rowIndex, item)"
            v-d-input-point2="item.inputPoint2"
            @input="
              typeof item.input === 'function'
                ? value => item.input(value, item.field, row)
                : item.input
            "
            v-model.number="row[item.field]"
            :type="item.inputType || 'number'"
            :placeholder="item.placeholder || '请输入...'"
            :disabled="
              (typeof item.isDisabled === 'function' &&
                item.isDisabled(row, rowIndex)) ||
              item.disabled
            "
            :size="inputSize"
            :clearable="item.clearable === undefined ? true : item.clearable"
          >
            <template :slot="item.slotName" v-if="item.slotData">{{
              item.slotData
            }}</template>
          </el-input>
          <!-- 下拉选择框 -->
          <el-select
            v-if="item.editType == 'select'"
            v-model="row[item.field]"
            :placeholder="item.placeholder || '请选择'"
            :size="inputSize"
            :disabled="
              (typeof item.isDisabled === 'function' &&
                item.isDisabled(row, rowIndex)) ||
              item.disabled
            "
            :clearable="item.clearable === undefined ? true : item.clearable"
            filterable
            @change="vxeChangeData(row, rowIndex, item)"
          >
            <el-option
              v-for="(item, index) in item.options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-column>
      <!-- 添加列 -->
      <!-- el-icon-plus -->
      <vxe-column
        v-else-if="item.addBtn && (item.visible || item.visible === undefined)"
        :key="item.field + index"
        :type="item.type"
        :field="item.field"
        :title="item.title"
        :title-help="item.titleHelp"
        :slots="item.slots"
        :fixed="item.fixed"
        :width="item.width"
        :min-width="item.minWidth"
        :resizable="item.resizable"
        :visible="item.visible"
        :align="item.align"
        :header-align="item.headerAlign"
        :footer-align="item.footerAlign"
        :show-overflow="item.showOverflow"
        :show-header-overflow="item.showHeaderOverflow"
        :show-footer-overflow="item.showFooterOverflow"
        :class-name="item.className"
        :header-class-name="item.headerClassName"
        :footer-class-name="item.footerClassName"
        :formatter="item.formatter"
        :sortable="item.sortable"
        :sort-by="item.sortBy"
        :sort-type="item.sortType"
        :filters="item.filters"
        :filter-multiple="item.filterMultiple"
        :filter-method="item.filterMethod"
        :filter-reset-method="item.filterresetMethod"
        :filter-recover-method="item.filterRecoverMethod"
        :filter-render="item.filterRender"
        :export-method="item.exportMethod"
        :footer-export-method="item.footerExportMethod"
        :title-prefix="item.titlePrefix"
        :cell-type="item.cellType"
        :edit-render="item.editRender"
        :content-render="item.contentRender"
        :tree-node="item.treeNode"
        :params="item.params"
        :col-id="item.colId"
      >
        <template v-slot="{ row, rowIndex }">
          <span
            class="el-icon-plus show_hand"
            @click="addRowEvent(row, rowIndex)"
          ></span>
        </template>
      </vxe-column>
      <!-- 图片显示列 -->
      <vxe-column
        v-else-if="item.showImg && (item.visible || item.visible === undefined)"
        :key="item.field + index"
        :type="item.type"
        :field="item.field"
        :title="item.title"
        :title-help="item.titleHelp"
        :slots="item.slots"
        :fixed="item.fixed"
        :width="item.width"
        :min-width="item.minWidth"
        :resizable="item.resizable"
        :visible="item.visible"
        :align="item.align"
        :header-align="item.headerAlign"
        :footer-align="item.footerAlign"
        :show-overflow="item.showOverflow"
        :show-header-overflow="item.showHeaderOverflow"
        :show-footer-overflow="item.showFooterOverflow"
        :class-name="item.className"
        :header-class-name="item.headerClassName"
        :footer-class-name="item.footerClassName"
        :formatter="item.formatter"
        :sortable="item.sortable"
        :sort-by="item.sortBy"
        :sort-type="item.sortType"
        :filters="item.filters"
        :filter-multiple="item.filterMultiple"
        :filter-method="item.filterMethod"
        :filter-reset-method="item.filterresetMethod"
        :filter-recover-method="item.filterRecoverMethod"
        :filter-render="item.filterRender"
        :export-method="item.exportMethod"
        :footer-export-method="item.footerExportMethod"
        :title-prefix="item.titlePrefix"
        :cell-type="item.cellType"
        :edit-render="item.editRender"
        :content-render="item.contentRender"
        :tree-node="item.treeNode"
        :params="item.params"
        :col-id="item.colId"
      >
        <template v-slot="{ row, rowIndex }">
          <table-img-view
            :imgUrl="row[item.field]"
            :defaultImg="item.defaultImg"
            :popoverImgStyle="item.popoverImgStyle"
            :tableImgStyle="item.tableImgStyle"
          ></table-img-view>
        </template>
      </vxe-column>
      <!-- 操作列 -->
      <vxe-column
        v-else-if="
          item.toolbarData &&
          item.toolbarData.length &&
          ((typeof item.visible === 'function' && item.visible(row)) ||
            item.visible ||
            item.visible === undefined)
        "
        :key="item.field + index"
        :type="item.type"
        :field="item.field || '操作'"
        :title="item.title"
        :title-help="item.titleHelp"
        :slots="item.slots"
        :fixed="item.fixed"
        :width="item.width"
        :min-width="item.minWidth"
        :resizable="item.resizable"
        :visible="item.visible"
        :align="item.align"
        :header-align="item.headerAlign"
        :footer-align="item.footerAlign"
        :show-overflow="item.showOverflow"
        :show-header-overflow="item.showHeaderOverflow"
        :show-footer-overflow="item.showFooterOverflow"
        :class-name="item.className"
        :header-class-name="item.headerClassName"
        :footer-class-name="item.footerClassName"
        :formatter="item.formatter"
        :sortable="item.sortable"
        :sort-by="item.sortBy"
        :sort-type="item.sortType"
        :filters="item.filters"
        :filter-multiple="item.filterMultiple"
        :filter-method="item.filterMethod"
        :filter-reset-method="item.filterresetMethod"
        :filter-recover-method="item.filterRecoverMethod"
        :filter-render="item.filterRender"
        :export-method="item.exportMethod"
        :footer-export-method="item.footerExportMethod"
        :title-prefix="item.titlePrefix"
        :cell-type="item.cellType"
        :edit-render="item.editRender"
        :content-render="item.contentRender"
        :tree-node="item.treeNode"
        :params="item.params"
        :col-id="item.colId"
      >
        <!--           v-show="
              (typeof items.isShow === 'function' &&
                items.isShow(row, items, rowIndex)) ||
              !items.isShow
            " -->
        <template v-slot="{ row, rowIndex }">
          <el-link
            class="column_toolbar_link"
            v-for="(items, index) in item.toolbarData.filter(p =>
              judgePrem(p, row)
            ).length > 3
              ? item.toolbarData.filter(p => judgePrem(p, row)).slice(0, 2)
              : item.toolbarData.filter(p => judgePrem(p, row))"
            v-if="judgePrem(items, row)"
            :key="index"
            :underline="false"
            :href="items.href"
            :icon="items.icon"
            :type="items.type"
            @click="toolbarClick(row, items, rowIndex)"
            :disabled="
              (typeof items.isDisabled === 'function' &&
                items.isDisabled(row, items, rowIndex)) ||
              (items.disabled !== undefined ? items.disabled : item.disabled)
            "
            :style="items.style"
            >{{ items.text }}</el-link
          >
          <!-- 超出三个折叠 -->
          <!-- 显示更多操作按钮 -->
          <table-more-operate-view
            v-if="item.toolbarData.filter(p => judgePrem(p, row)).length > 3"
            :rowIndex="rowIndex"
            :TableMoreOperateData="
              item.toolbarData.filter(p => judgePrem(p, row))
            "
            :TableRowData="row"
            :moreText="item.moreText"
            @toolbar-click="toolbarClick"
          />
        </template>
      </vxe-column>
      <!--状态列  -->
      <vxe-column
        v-else-if="
          item.stateTagData && (item.visible || item.visible === undefined)
        "
        :key="item.field + index"
        :type="item.type"
        :field="item.field"
        :title="item.title"
        :title-help="item.titleHelp"
        :slots="item.slots"
        :fixed="item.fixed"
        :width="item.width"
        :min-width="item.minWidth"
        :resizable="item.resizable"
        :visible="item.visible"
        :align="item.align"
        :header-align="item.headerAlign"
        :footer-align="item.footerAlign"
        :show-overflow="item.showOverflow"
        :show-header-overflow="item.showHeaderOverflow"
        :show-footer-overflow="item.showFooterOverflow"
        :class-name="item.className"
        :header-class-name="item.headerClassName"
        :footer-class-name="item.footerClassName"
        :formatter="item.formatter"
        :sortable="item.sortable"
        :sort-by="item.sortBy"
        :sort-type="item.sortType"
        :filters="item.filters"
        :filter-multiple="item.filterMultiple"
        :filter-method="item.filterMethod"
        :filter-reset-method="item.filterresetMethod"
        :filter-recover-method="item.filterRecoverMethod"
        :filter-render="item.filterRender"
        :export-method="item.exportMethod"
        :footer-export-method="item.footerExportMethod"
        :title-prefix="item.titlePrefix"
        :cell-type="item.cellType"
        :edit-render="item.editRender"
        :content-render="item.contentRender"
        :tree-node="item.treeNode"
        :params="item.params"
        :col-id="item.colId"
      >
        <!-- 状态列 -->
        <template v-slot="{ row }">
          <span class="table_tag">
            <span
              class="custom_column_cricle"
              :style="{ background: columnBackground(item, row) }"
            ></span>
            {{
              row[item.stateTagData.showName] ||
              row[item.stateTagData.judgeName] ||
              ''
            }}
          </span>
        </template>
      </vxe-column>
      <!-- 自定义slot的自定义列 -->
      <vxe-column
        v-else-if="
          item.customSlot && (item.visible || item.visible === undefined)
        "
        :key="item.field + index"
        :type="item.type"
        :field="item.field"
        :title="item.title"
        :title-help="item.titleHelp"
        :slots="item.slots"
        :fixed="item.fixed"
        :width="item.width"
        :min-width="item.minWidth"
        :resizable="item.resizable"
        :visible="item.visible"
        :align="item.align"
        :header-align="item.headerAlign"
        :footer-align="item.footerAlign"
        :show-overflow="item.showOverflow"
        :show-header-overflow="item.showHeaderOverflow"
        :show-footer-overflow="item.showFooterOverflow"
        :class-name="item.className"
        :header-class-name="item.headerClassName"
        :footer-class-name="item.footerClassName"
        :formatter="item.formatter"
        :sortable="item.sortable"
        :sort-by="item.sortBy"
        :sort-type="item.sortType"
        :filters="item.filters"
        :filter-multiple="item.filterMultiple"
        :filter-method="item.filterMethod"
        :filter-reset-method="item.filterresetMethod"
        :filter-recover-method="item.filterRecoverMethod"
        :filter-render="item.filterRender"
        :export-method="item.exportMethod"
        :footer-export-method="item.footerExportMethod"
        :title-prefix="item.titlePrefix"
        :cell-type="item.cellType"
        :edit-render="item.editRender"
        :content-render="item.contentRender"
        :tree-node="item.treeNode"
        :params="item.params"
        :col-id="item.colId"
      >
        <template v-slot:default="slotProps">
          <slot
            v-bind:customSlotData="slotProps.row"
            :name="item.customSlot"
          ></slot>
        </template>
      </vxe-column>
      <!-- 普通显示列 -->
      <vxe-column
        v-else-if="item.visible || item.visible === undefined"
        :key="item.field + index"
        :type="item.type"
        :field="item.field"
        :title="item.title"
        :title-help="item.titleHelp"
        :slots="item.slots"
        :fixed="item.fixed"
        :width="item.width"
        :min-width="item.minWidth"
        :resizable="item.resizable"
        :visible="item.visible"
        :align="item.align"
        :header-align="item.headerAlign"
        :footer-align="item.footerAlign"
        :show-overflow="item.showOverflow"
        :show-header-overflow="item.showHeaderOverflow"
        :show-footer-overflow="item.showFooterOverflow"
        :class-name="item.className"
        :header-class-name="item.headerClassName"
        :footer-class-name="item.footerClassName"
        :formatter="item.formatter"
        :sortable="item.sortable"
        :sort-by="item.sortBy"
        :sort-type="item.sortType"
        :filters="item.filters"
        :filter-multiple="item.filterMultiple"
        :filter-method="item.filterMethod"
        :filter-reset-method="item.filterresetMethod"
        :filter-recover-method="item.filterRecoverMethod"
        :filter-render="item.filterRender"
        :export-method="item.exportMethod"
        :footer-export-method="item.footerExportMethod"
        :title-prefix="item.titlePrefix"
        :cell-type="item.cellType"
        :edit-render="item.editRender"
        :content-render="item.contentRender"
        :tree-node="item.treeNode"
        :params="item.params"
        :col-id="item.colId"
      >
        <!-- <template
          v-if="tem.slots && Object.keys(item.slots).length"
          v-for="(sItem, sIndex) in Object.keys(item.slots).map(p => ({
            name: item.slots[p]
          }))"
        >
          <slot :name="sItem.name"></slot>
        </template> -->
      </vxe-column>
    </template>
    <slot name="columns"></slot>
    <!-- 数据为空时显示 -->
    <template #empty>
      <table-empty-view />
    </template>
  </vxe-table>
</template>
<script>
import tools from '../utils/tools.js'
import tableEmptyView from './baseView/tableEmpty'
import tableMoreOperateView from './baseView/tableMoreOperate'
import handleOptionsMixin from '../mixins/handleOptions.js'
import tableImgView from './baseView/tableImg'
export default {
  name: 'vxe-table-view',
  components: {
    tableEmptyView,
    tableMoreOperateView,
    tableImgView
  },
  mixins: [handleOptionsMixin],
  props: {
    // 表格高度
    vxeHeight: {
      type: [String, Number],
      default: '330px'
    },
    // 是否显示边框
    border: {
      type: Boolean,
      default: false
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    showOverflow: {
      type: Boolean,
      default: true
    },
    // columns列
    vxeColumns: {
      type: [Array],
      default: () => []
    },
    editConfig: {
      type: Object,
      default: () => ({ trigger: 'click', mode: 'row', icon: 'el-icon-edit' })
    },
    tooltipConfig: {
      type: Object
    },
    inputSize: {
      type: String,
      default: 'small'
    }
  },
  created() {
    this.vxeTableHandleOptions()
    // 处理传入了formatterName的情况
    this.vxeColumns.forEach(p => {
      if (p.formatterName) {
        p = Object.assign(p, {
          formatter: ({ cellValue, row, column }) =>
            p.formatterParams
              ? this.columnsFormatter(
                  cellValue,
                  row,
                  column,
                  p.formatterName,
                  p.formatterParams
                )
              : this.columnsFormatter(cellValue, row, column, p.formatterName)
        })
      }
    })
  },
  computed: {
    permissionsData() {
      return this.$store.state.permissions
    }
  },
  methods: {
    // 添加列方法
    addRowEvent(row, index) {
      this.$emit('add-row-event', row, index)
    },
    judgePrem(item, row) {
      if (item.hasOwnProperty('premissionKey')) {
        return this.permissionsData[item.premissionKey]
      } else {
        if (item.visible && typeof item.visible === 'function') {
          return item.visible(row)
        } else {
          return item.visible === undefined ? true : item.visible
        }
      }
    },
    columnsFormatter(cellValue, row, column, funcName, formatterParams) {
      if (cellValue !== null || ellValue !== undefined) {
        return formatterParams
          ? tools[funcName](cellValue, ...formatterParams)
          : tools[funcName](cellValue)
      }
    },
    columnBackground(column, row) {
      let str =
        column.stateTagData.judgeValue[row[column.stateTagData.judgeName]]
      if (str) {
        return str.type === 'danger'
          ? '#f5222d'
          : str.type === 'success'
          ? '#52c41a'
          : str.type === 'info'
          ? '#bfbfbf'
          : str.type === 'warning'
          ? '#ffaa00'
          : str.color
          ? str.color
          : '#888888'
      } else {
        return '#888888'
      }
    },
    vxeTableHandleOptions() {
      // 该方法是从handleOptionsMixin引入的 用于处理下拉框数据
      this.handleOptions(this.vxeColumns)
    },
    vxeChangeData(row, index, column) {
      this.$emit('vxe-change-data', row, index, column)
    },
    // vxeChangeSelect(row, index, column) {
    //   this.$emit('vxe-change-select', row, index, column)
    // },
    // vxeDeleteEvent(index, column) {
    //   this.$emit('vxe-delete-event', index, column)
    // },
    toolbarClick(row, toolBarItem, index) {
      this.$emit('vxe-tool-bar-event', row, toolBarItem, index)
    },
    mixInputButtonEvent(row, index, column) {
      this.$emit('mix-input-button-event', row, index, column)
    },
    cellDblclick({ row, rowIndex }) {
      console.log(row, rowIndex)
      this.$emit('vxtable-dblclick', row, rowIndex)
    },
    // 多选事件
    selectChangeEvent({ checked, row, rowIndex }) {
      const records = this.$refs.vxeTable.getCheckboxRecords()
      this.$emit('vxetable-selection-change', records)
    },
    selectAllEvent({ checked }) {
      const records = this.$refs.vxeTable.getCheckboxRecords()
      this.$emit('vxetable-selection-change', records)
    }
  }
}
</script>
<style lang="less">
.headerrowclassname {
  border: none !important;
}

// .vxe-table--tooltip-wrapper {
//   z-index: 9999 !important;
// }

// .vxe-table--render-default .vxe-table--border-line {
//   border: none;
// }
// .vxe-table .vxe-table--header-wrapper {
//   color: rgba(0, 0, 0, 0.85);
// }
// .vxe-table thead,
// tr,
// th {
//   border: none;
// }

// .is--checked.vxe-checkbox,
// .is--checked.vxe-checkbox .vxe-checkbox--icon,
// .is--checked.vxe-custom--option,
// .is--checked.vxe-custom--option .vxe-checkbox--icon,
// .is--checked.vxe-export--panel-column-option,
// .is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,
// .is--checked.vxe-table--filter-option,
// .is--checked.vxe-table--filter-option .vxe-checkbox--icon,
// .is--indeterminate.vxe-checkbox,
// .is--indeterminate.vxe-checkbox .vxe-checkbox--icon,
// .is--indeterminate.vxe-custom--option,
// .is--indeterminate.vxe-custom--option .vxe-checkbox--icon,
// .is--indeterminate.vxe-export--panel-column-option,
// .is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,
// .is--indeterminate.vxe-table--filter-option,
// .is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,
// .vxe-table--render-default .is--checked.vxe-cell--checkbox,
// .vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
// .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
// .vxe-table--render-default
//   .is--indeterminate.vxe-cell--checkbox
//   .vxe-checkbox--icon {
//   color: #fc6510 !important;
// }
// .vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
// .vxe-custom--option:not(.is--disabled):hover .vxe-checkbox--icon,
// .vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,
// .vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,
// .vxe-table--render-default
//   .vxe-cell--checkbox:not(.is--disabled):hover
//   .vxe-checkbox--icon {
//   color: #fc6510 !important;
// }
// .vxe-header--column {
//   position: relative;
// }
// .vxe-header--column::after {
//   display: block;
//   content: '';
//   width: 102%;
//   height: 1px;
//   background: #ffb388;
//   position: absolute;
//   bottom: 0;
//   left: 0;
//   z-index: 5;
// }
// .vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
// .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
// .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
//   padding: 9px 0;
// }
// // 排序图标颜色
// .vxe-table .vxe-sort--asc-btn.sort--active,
// .vxe-table .vxe-sort--desc-btn.sort--active {
//   color: #fc6510;
// }
</style>
<style lang="less" scoped>
.vxe_table_view {
  // /deep/ .el-link.el-link--primary.is-disabled,
  // .el-link.el-link--danger.is-disabled {
  //   // color: rgba(0, 0, 0, 0.45);
  //   color: #bfbfbf;
  // }
  // .el-link.el-link--default {
  //   color: #18a1fb;
  // }
  // .el-link.el-link--default.is-disabled {
  //   // color: rgba(0, 0, 0, 0.45);
  //   color: #bfbfbf;
  // }
  // /deep/ th:not(:last-child) {
  //   border-right: 1px solid #ffd3b9;
  // }
  // /deep/ th {
  //   background: #fef2e9;
  // }
  // /deep/ th > .vxe-cell {
  //   overflow: hidden !important;
  //   text-overflow: ellipsis !important;
  //   white-space: nowrap !important;
  // }

  // /deep/ .el-input__inner {
  //   user-select: text !important;
  // }
  // /deep/ .vxe-cell--label {
  //   user-select: text !important;
  // }
  // /deep/ .vxe-header--column .vxe-resizable.is--line:before {
  //   background-color: transparent;
  // }
  // fixed
  // /deep/ .vxe-table--fixed-left-wrapper,
  // /deep/ .vxe-table--fixed-right-wrapper {
  //   height: auto !important;
  //   bottom: 10px !important; //具体值是多少根据你横向滚动条的高度进行设置
  // }
  // /deep/ .fixed-right--wrapper {
  //   //height: auto !important;
  //   bottom: 10px !important;
  // }
}

.table_tag {
  display: inline-block;
  position: relative;
  padding: 0 0 0 10px;
  .custom_column_cricle {
    position: absolute;
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    left: -2px;
    top: 9px;
    z-index: 10px;
  }
}
.column_toolbar_link {
  margin-right: 10px;
}
.column_toolbar_link:last-child {
  margin-right: 0;
}
</style>
