<template>
  <div class="app-table flex-col flex-1 overflow-h">
    <el-table
      ref="appTable"
      v-loading="tableLoading"
      :data="tableData"
      :height="height"
      border
      size="medium"
      tooltip-effect="dark"
      v-bind="$attrs"
      v-on="$listeners"
      @selection-change="handleSelectionChange"
    >
      <template v-if="checkbox">
        <el-table-column type="selection" width="55" align="center" :selectable="allowSelect" />
      </template>

      <template v-if="index">
        <el-table-column align="center" label="序号" type="index" width="55" />
      </template>

      <template v-for="(item, index) in column">
        <el-table-column
          :key="index"
          :align="item.align"
          :column-key="item.columnKey"
          :filter-method="item.filterHandler"
          :filter-multiple="item.filterMultiple"
          :filtered-value="item.filteredValue"
          :filters="item.filters"
          :fixed="item.fixed"
          :label="item.label"
          :min-width="item.minWidth"
          :prop="item.prop"
          :sortable="item.sortable ? true : false"
          :type="item.type"
          :width="item.width"
          show-overflow-tooltip
        >
          <!-- <div class="123" v-if="item.type == ''"> -->
          <template v-if="item.hasOwnProperty('colunmTemplate')" :slot="item.colunmTemplate" slot-scope="scope">
            <slot v-if="item.theadSlot" :index="index" :name="item.theadSlot" :row="scope.row" />
          </template>

          <template slot-scope="scope">
            <!-- 插槽 -->
            <div v-if="item.dataType == 'slot'">
              <slot v-if="item.slot" :index="scope.$index" :name="item.slot" :row="scope.row" />
            </div>

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

            <!-- tag -->
            <div v-else-if="item.dataType == 'tag'">
              <el-tag
                v-if="typeof dataTypeFn(scope.row[item.prop], item.formatData) == 'string'"
                :title="scope.row[item.prop] | formatters(item.formatData)"
                :type="formatType(scope.row[item.prop], item.formatType)"
              >
                {{ scope.row[item.prop] | formatters(item.formatData) }}
              </el-tag>

              <el-tag
                v-for="(tag, index) in dataTypeFn(scope.row[item.prop], item.formatData)"
                v-else-if="typeof dataTypeFn(scope.row[item.prop], item.formatData) == 'object'"
                :key="index"
                :title="scope.row[item.prop] | formatters(item.formatData)"
                :type="formatType(tag, item.formatType)"
              >
                {{ item.tagGroup ? (tag[item.tagGroup.label] ? tag[item.tagGroup.label] : tag) : tag }}
              </el-tag>

              <el-tag v-else :title="scope.row[item.prop] | formatters(item.formatData)" :type="formatType(scope.row[item.prop], item.formatType)">
                {{ scope.row[item.prop] | formatters(item.formatData) }}
              </el-tag>
            </div>

            <!-- 按钮 -->
            <div v-else-if="item.dataType == 'option' && item.operation.length">
              <!--              <el-dropdown size="mini" split-button @click="handleCommand(item.operation[0], scope.row)" @command="(v) => handleCommand(v, scope.row)">-->
              <!--                <div>-->
              <!--                  <i :class="[item.operation[0].icon]" />-->
              <!--                  {{ item.operation[0].name }}-->
              <!--                </div>-->
              <!--                <el-dropdown-menu slot="dropdown">-->
              <!--                  <template v-for="(o, index) in item.operation">-->
              <!--                    <el-dropdown-item-->
              <!--                      v-show="o.showHide ? o.showHide(scope.row) : true && index >= 1"-->
              <!--                      :key="index"-->
              <!--                      :command="o"-->
              <!--                      :disabled="o.disabled ? o.disabled(scope.row) : false"-->
              <!--                      :style="{ color: o.color }"-->
              <!--                    >-->
              <!--                      <i :class="[o.icon]" />-->
              <!--                      {{ o.name }}-->
              <!--                    </el-dropdown-item>-->
              <!--                  </template>-->
              <!--                </el-dropdown-menu>-->
              <!--              </el-dropdown>-->
              <!--firstOperation-->
              <template v-for="(o, i) in handleActions(item.operation, scope.row)">
                <el-button
                  v-if="i <= 1"
                  :key="i"
                  :disabled="o.disabled ? o.disabled(scope.row) : false"
                  :icon="o.icon | iconFn(scope.row)"
                  :size="o.size"
                  :style="{ color: o.color }"
                  :type="o.type || 'text' | typeFn(scope.row)"
                  @click="o.clickFun(scope.row)"
                  @mousedown="(e) => e.preventDefault()"
                >
                  {{ o.name }}
                </el-button>
              </template>
              <el-dropdown
                v-if="handleActions(item.operation, scope.row).length > 2"
                size="small"
                trigger="click"
                @click="handleCommand(item.operation[0], scope.row)"
                @command="(v) => handleCommand(v, scope.row)"
              >
                <span class="act-btn text-color-light"> 更多<i class="el-icon-arrow-down fs-12 ml-3" /> </span>
                <el-dropdown-menu slot="dropdown">
                  <template v-for="(o, ind) in handleActions(item.operation, scope.row)">
                    <el-dropdown-item v-if="ind > 1" :key="ind" :command="o" :disabled="o.disabled ? o.disabled(scope.row) : false" :style="{ color: o.color }">
                      <i :class="[o.icon]" />
                      {{ o.name }}
                    </el-dropdown-item>
                  </template>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

            <!--  -->

            <!-- 默认纯展示数据 -->
            <template v-else>
              <div v-if="!item.formatData" class="text-ellipsis">{{ scope.row[item.prop] }}</div>
              <div v-else class="text-ellipsis">{{ scope.row[item.prop] | formatters(item.formatData) }}</div>
            </template>
          </template>

          <!-- </div>   -->
        </el-table-column>
      </template>
    </el-table>
    <!--    -->
    <el-pagination
      v-if="showPagination"
      ref="paginationPanel"
      :current-page="paginationConfig.page"
      :page-size="paginationConfig.pageSize"
      :page-sizes="[20, 30]"
      :total="total"
      align="right"
      background
      class="app-pagination mt-11"
      layout="total, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  filters: {
    iconFn(val, row) {
      if (typeof val === 'function') {
        return val(row);
      } else return val;
    },
    typeFn(val, row) {
      if (typeof val === 'function') {
        return val(row);
      } else return val;
    },
    describeConts(val, describeCont) {
      if (typeof describeCont === 'function') {
        return describeCont(val);
      } else return val;
    },
    formatters(val, format) {
      if (typeof format === 'function') {
        return format(val);
      } else return val;
    },
  },
  props: {
    checkbox: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Boolean,
      default: true,
    },
    height: {
      type: [Number, String],
      default: '100%',
    },
    tableLoading: {
      type: Boolean,
      default: false,
    },

    headerCellStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    column: {
      type: Array,
      default() {
        return [];
      },
    },
    rowClassName: {
      type: Function,
      default: () => {},
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    total: {
      type: Number,
      default: 0,
    },
    pagination: {
      type: Object,
      default: () => ({
        pageSize: 20,
        page: 1,
      }),
    },
    showPagination: {
      type: Boolean,
      default: true,
    },
    selectable: {
      type: Function,
      default: () => {
        return true;
      },
    },
  },
  data() {
    return {
      paginationConfig: {},
      firstOperation: [],
      otherOperation: [],
    };
  },
  // computed: {
  //   showPagination() {
  //     if (!this.pagination) return false;
  //     const { pageSize } = this.pagination;
  //     const visible = this.total / pageSize > 1;
  //     return !!visible;
  //   },
  // },
  watch: {
    pagination: {
      immediate: true,
      handler(config) {
        this.paginationConfig = config || this.pagination;
      },
    },
  },
  methods: {
    handleActions(actions, row) {
      return actions.filter((o) => {
        return o.showHide ? o.showHide(row) : true;
      });
    },
    handleCommand(item, row) {
      if (typeof item?.clickFun !== 'function') return;
      item.clickFun(row);
    },

    formatType(val, format) {
      if (typeof format === 'function') {
        return format(val);
      } else return '';
    },
    dataTypeFn(val, format) {
      if (typeof format === 'function') {
        return format(val);
      } else return val;
    },
    handleSelectionChange(data, evt) {
      const arr = data.map((item) => ({ ...item }));
      this.$emit('select-change', arr, evt);
    },
    handleSizeChange(val) {
      const params = {
        page: 1,
        pageSize: val,
      };
      this.$emit('pagination-change', params);
    },
    handleCurrentChange(val) {
      const params = {
        page: val,
        pageSize: this.pagination.pageSize,
      };
      this.$emit('pagination-change', params);
      // this.queryParam.pageBean.page = val
      // this.getDateList()
    },
    allowSelect(row, index) {
      return this.selectable(row, index);
    },
  },
};
</script>

<style lang="scss" scoped>
.act-btn {
  cursor: pointer;

  &:hover {
    opacity: 0.6;
  }
}

.el-button + .el-button {
  margin-left: 0;
}

span {
  white-space: pre-wrap;
}

/* .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  } */

/* .app-container /deep/  .el-table, .el-table__expanded-cell {
  background-color: transparent;
}
.app-container /deep/ .el-table tr {
  background-color: transparent!important;
}
.app-container /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
  background-color: transparent;
} */
</style>
