<!--
 * @Author: Devin
 * @Date: 2022-11-14 19:12:19
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:50:16
 * @Description: 公共table
-->
<template>
  <el-table
    ref="commonTableRef"
    width="100%"
    :height="height"
    class="__common-table"
    empty-text="暂无数据"
    :data="tableData"
    :header-cell-style="headerCellStyle"
    :highlight-current-row="highlight"
    :cell-style="cellStyle"
    v-bind="tableAttrs"
    :scrollbar-always-on="false"
    @current-change="handleCurrentRowChange"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      v-if="isCheck"
      type="selection"
      width="55"
    ></el-table-column>
    <template v-for="header in tableHeader" :key="header?.name">
      <!-- 自自定义按钮 -->
      <el-table-column
        v-if="header['type'] === 'selection'"
        type="selection"
        width="55"
      ></el-table-column>

      <!-- 按钮 -->
      <el-table-column
        v-else-if="header?.['type'] === 'custom'"
        :prop="header?.['name']"
        :label="header?.['label']"
        :width="header?.['width']"
        :min-width="header['minWidth']"
        :sortable="header?.['sortable'] || false"
        :fixed="header?.['fixed'] || false"
        :align="header?.['position'] || 'left'"
      >
        <template #default="scope">
          <template v-for="btn in scope.row.actions" :key="btn.name">
            <el-dropdown v-if="btn?.children" class="aiot-table-drop">
              <el-button
                :disabled="btn.disabled"
                text
                :type="btn?.type || 'primary'"
              >
                {{ btn.label }}
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="drop in btn.children"
                    :key="drop.name"
                    :disabled="drop.disabled"
                    @click.stop="drop.onClick(scope.row)"
                  >
                    {{ drop.label }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button
              v-else
              text
              :disabled="btn.disabled"
              :type="btn?.type || 'primary'"
              @click="btn.onClick(scope.row)"
            >
              {{ btn.label }}
            </el-button>
          </template>
        </template>
      </el-table-column>

      <!-- 其他 -->
      <el-table-column
        v-else-if="header?.['type']"
        :prop="header?.['name']"
        :label="header?.['label']"
        :width="header?.['width']"
        :min-width="header?.['minWidth']"
        :sortable="header?.['sortable'] || false"
        :fixed="header?.['fixed'] || false"
        :align="header?.['position'] || 'left'"
      >
        <template #default="scope">
          <!-- 自定义按钮  -->
          <table-column
            :header="header"
            :row="scope.row"
            :is-disable="isDisable"
            @change-event="changeEvent"
            @blur-event="blurEvent"
          ></table-column>
          <!-- 按钮 -->
          <slot :name="header['name']" :row="scope.row"></slot>
        </template>
      </el-table-column>

      <!-- 普通样式 -->
      <el-table-column
        v-else
        :prop="header?.['name']"
        show-overflow-tooltip
        :label="header?.['label']"
        :width="header?.['width']"
        :min-width="header?.['minWidth']"
        :sortable="header?.['sortable'] || false"
        :align="header?.['position'] || 'left'"
        :fixed="header?.['fixed'] || false"
      >
        <template #default="scope">
          {{
            scope.row[header?.['name']] || scope.row[header?.['name']] === 0
              ? scope.row[header?.['name']]
              : '-'
          }}
        </template>
      </el-table-column>
    </template>
    <template #empty>
      <el-empty
        v-if="isEmpty"
        :image="getIcon('empty')"
        description="暂无数据"
      ></el-empty>
    </template>
  </el-table>
</template>

<script lang="ts" setup>
import { ElTable } from 'element-plus';
import { ref } from 'vue';
import TableColumn from './TableColumn.vue';

const headerCellStyle = <any>{
  padding: '0 2px',
  height: '39px',
  'font-weight': '600',
  'font-size': '12px',
  'line-height': '39px',
  color: '#7B93A7',
  'background-color': '#F9F9F9'
};
const cellStyle = ref({
  padding: '0 2px',
  height: '40px',
  'line-height': '40px',
  'font-size': '12px',
  color: '#2D3E53'
});
defineProps({
  tableHeader: {
    type: Array<any>,
    default: () => []
  },
  tableData: {
    type: Array<any>,
    default: () => []
  },
  tableAttrs: {
    type: Object,
    default: () => {}
  },
  isCheck: {
    type: Boolean,
    default: () => false
  },
  isDisable: {
    type: Boolean,
    default: true
  },
  tableBtns: {
    type: Array<any>,
    default: () => []
  },
  isEmpty: {
    type: Boolean,
    default: () => true
  },
  highlight: {
    type: Boolean,
    default: () => false
  },
  height: {
    type: String,
    default: () => '100%'
  }
});
function getIcon(name: any) {
  return new URL(`../assets/images/${name}.svg`, import.meta.url).href;
}
const emits = defineEmits([
  'changeEvent',
  'blurEvent',
  'handleCurrentRowChange',
  'svgEvent',
  'handleSelectionChange'
]);

const changeEvent = (form: object) => {
  emits('changeEvent', form);
};

// 触发blur事件
const blurEvent = (form: object) => {
  emits('blurEvent', form);
};
const commonTableRef = ref<InstanceType<typeof ElTable>>();
// 选中当前行
function handleCurrentRowChange(row: object) {
  // console.log(row)
  emits('handleCurrentRowChange', row);
}

function handleSelectionChange(row: object) {
  emits('handleSelectionChange', row);
}

function setCurrent(rows: any) {
  if (rows) {
    rows.forEach((row: object) => {
      // @ts-expect-error
      commonTableRef.value!.toggleRowSelection(row);
    });
  }
}

function setSingleCurrent(row: object) {
  if (row) {
    setTimeout(() => {
      commonTableRef.value!.setCurrentRow(row);
    }, 10);
  }
}
// 反选

defineExpose({
  commonTableRef,
  setCurrent,
  setSingleCurrent
});
</script>

<script lang="ts">
export default {
  name: 'CommonTable'
};
</script>

<style lang="scss">
.__common-table {
}
.el-popper {
  max-width: 600px !important;
}
.el-button.is-text:not(.is-disabled):focus,
.el-button.is-text:not(.is-disabled):hover,
.el-button.is-text:not(.is-disabled):active {
  /* background-color: var(--el-fill-color-light); */
  background: none !important;
}

:deep(.current-row) {
  position: relative;
  background: rgba(25, 130, 255, 0.04);
  &:after {
    content: '';
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    background: #2d98ff;
    z-index: 1000;
  }
}
.el-button.is-text {
  padding: 0;
}
</style>

<style lang="scss">
:deep(.el-table__inner-wrapper) {
  font-size: 14px;
  .el-table__header-wrapper {
    font-size: 14px;
    thead tr {
      font-size: 14px;
    }
  }
}
.el-table {
  width: 100%;
}
</style>