<template>
  <div class="table-box">
    <el-table
      ref="tableData"
      v-loading="loading"
      size="default"
      :row-key="rowKey"
      :style="{ width: '100%', fontSize: fontSize + 'px' }"
      :show-header="showHeader"
      :data="tableData"
      :height="tableHeight"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :span-method="arraySpanMethod"
      :border="border"
      :highlight-current-row="highlightCurrentRow"
      v-bind="tableInfo"
      :stripe="isStripe"
      :tree-props="{
        children: treePropsChildren,
        hasChildren: treePropshasChildren,
      }"
      v-on="events"
      @selection-change="handleSelectionChange"
      @select-all="handleSelectionAllChange"
    >
      <slot name="expand" />
      <!-- 多选 -->
      <el-table-column
        v-if="needSelect"
        type="selection"
        width="30"
        :reserve-selection="isReserve"
      />
      <!-- 序号 -->
      <el-table-column
        v-if="hasIndex"
        label="序号"
        width="50"
        type="index"
      />

      <template v-for="(item, index) in tableColumn">
        <el-table-column
          :key="'%' + index"
          :show-overflow-tooltip="!item.notTooltip"
          v-bind="item"
          v-on="events"
        >
          <!-- 头部 -->
          <template
            slot="header"
            slot-scope="scope"
          >
            <i
              v-if="item.tableTopColumnIcon"
              :class="item.tableTopColumnIcon"
              @click="handleTableTopColumnIconClick(item,index)"
            />
            {{ item.label }}
            <img
              v-if="item.showFilter"
              src="../../assets/filter.png"
              style="width: 13px; height: 10px; margin-left:5px"
            >
            <span v-if="item.tableTopColumnCheck">
              <el-checkbox
                v-model="item.tableTopColumnCheckValue"
                :v-bind="item.tableTopColumnCheckValue"
                :indeterminate="false"
                @change="(val)=>
                  handleTableTopColumncheckChange(item,index,val)"
              />
            </span>
          </template>

          <template slot-scope="scope">
            <!-- render 函数式 -->
            <template v-if="item.render">
              <ex-slot
                :render="item.render"
                :index="scope.$index"
                :row="scope.row"
                :column="item"
                :class="item.prop"
                :default-value="item.defaultValue"
              />
            </template>

            <!-- progress 进度条 -->
            <template v-else-if="item.progress">
              <el-progress :percentage="parseFloat(scope.row[item.prop])" />
            </template>

            <!-- formatter 自定义 -->
            <template v-else-if="item.formatter">
              <span v-html="item.formatter(scope.row, item)" />
            </template>

            <!-- checkbox -->
            <template v-else-if="item.tableTopColumnCheck">
              <el-checkbox
                v-model="scope.row[item.prop]"
                @change="(val)=>
                  handleTableTopColumnRowcheckChange(scope,index,val)"
              />
            </template>

            <!-- 正常列 -->
            <template v-else>
              <span>
                {{ scope.row[item.prop] }}
              </span>
            </template>
          </template>

        </el-table-column>
      </template>
      <!-- 操作 -->
      <el-table-column
        v-if="hasOperation"
        label="操作"
        :min-width="operationWidth"
        :fixed="operationFixed ? 'right' : false"
        align="center"
      >
        <template
          v-if="btnButton.length"
          slot-scope="{ row, column, $index }"
        >
          <el-button
            v-for="(value, i) in btnButton"
            :key="'$' + i"
            :style="{ fontSize: fontSize + 'px' }"
            size="small"
            :type="value.type || 'text'"
            :icon="value.icon"
            :class="value.class || 'el-text-color'"
            @click="value.callback(row, column, $index)"
          >{{ value.text }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'DesktopTable',
  props: {
    // key（唯一key值，和reserve-selection搭配使用）
    rowKey: {
      type: [Object, Function],
      default: () => ({}),
    },
    // 单元格的 style 的回调方法
    cellStyle: {
      type: [Object, Function],
      default: () => ({}),
    },
    headerCellStyle: {
      type: [Object, Function],
      default: () => ({}),
    },
    pagerCount: {
      type: Number,
      default: 7,
    },
    // 是否显示表头
    showHeader: {
      type: Boolean,
      default: true,
    },
    // 是否要高亮当前行
    highlightCurrentRow: {
      type: Boolean,
      default: true,
    },
    // 合并行或列
    arraySpanMethod: {
      type: Function,
      default: () => {},
    },
    // 是否单页隐藏，默认为true
    isSinglePageHide: {
      type: Boolean,
      default: true,
    },
    tableInfo: {
      type: Object,
      default: () => {},
    },
    // 获取数据时是否需要加载loading
    loading: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    // 表格展示数据
    tableColumn: {
      type: Array,
      default: () => [],
    },
    // 是否需要边框
    border: {
      type: Boolean,
      default: false,
    },
    // 操作列宽度
    operationWidth: {
      type: String,
      default: '60px',
    },
    // 固定操作栏
    operationFixed: {
      type: [Boolean, String],
      default: false,
    },
    // 表格方法
    events: {
      type: Object,
      default: () => {},
    },
    // 是否为斑马纹 table
    isStripe: {
      type: Boolean,
      default: true,
    },
    // 树结构(树结构必须有rowKey)
    treePropsChildren: {
      type: String,
      default: 'children',
    },
    // 树结构(树结构必须有rowKey)
    treePropshasChildren: {
      type: String,
      default: 'hasChildren',
    },
    // 点击图标计算的值
    operatedString: {
      type: String,
      default: '',
    },
    // 是否需要操作列
    hasOperation: {
      type: Boolean,
      default: true,
    },
    // 操作 自定义按钮
    btnButton: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      fontSize: sessionStorage.getItem('fontSize') || '',
    };
  },
  computed: {
    computedCurrentPage: {
      get() {
        return this.currentPage;
      },
      set(val) {
        this.$emit('update:currentPage', val);
      },
    },
    computedPageSize: {
      get() {
        return this.pageSize;
      },
      set(val) {
        this.$emit('update:pageSize', val);
      },
    },
    tableHeight() {
      return this.tableInfo?.tableHeight ? this.tableInfo?.tableHeight : !this.isNeedPagination ? '100%' : 'calc(100% - 47px)';
    },
  },
  watch: {
  },
  mounted() {
    if (this.isSetCurrentRow) {
      setTimeout(() => {
        this.$refs.tableData.setCurrentRow(this.tableData[0]);
      }, 500);
    }
  },
  methods: {
    getTableRef() {
      return this.$refs.tableData;
    },
    sizeChange(val) {
      this.$emit('sizeChange', val);
    },
    handleTableTopColumnIconClick(item, index) {
      this.$emit('handleTableTopColumnIconClick', item, index);
    },
  },
};
</script>
<style lang="scss" scoped>
.table-box {
  margin-top: 12px;
  background-color: #fff;
//   border: 1px solid rgba($color: #ffffff, $alpha: 0.13);
}

.need-btn-line {
  padding: 8px;
}

::v-deep .el-table td {
  padding: 0;
  height: 40px;
}

// // table选中行高亮
// ::v-deep .el-table__body tr.current-row {
//   .flex_div {
//     background: rgba(21, 91, 212, 0.3) !important;
//   }
//   td {
//     background: rgba(21, 91, 212, 0.3) !important;
//   }
//   td {
//     background: rgba(21, 91, 212, 0.2) !important;
//   }
// }
.operated {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  width: 50%;
}
::v-deep.el-table--border th,
::v-deep.el-table--border td {
  border: 1px solid  rgba($color: #ffffff, $alpha: 0.13) !important;
}
::v-deep.el-table--border{
    border:none;
}
::v-deep .el-table{
  background-color: var(--desktop-bg-color-1) !important;
}
</style>
