<template>
  <el-table class="table" :data="newData" row-key="name" style="width: 100%" :cell-style="{
    ...cellStyle,
    ...props.cellStyle
  }" :header-cell-style="{
    ...headerCellStyle,
    ...props.headerCellStyle
  }">
    <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
      show-overflow-tooltip :width="item.width || ''">
      <template #default="scope">
        <el-tooltip placement="top" effect="light" v-if="item.type === 'percentDom' && props.showTooltip">
          <div class="percent-box">
            <div class="inner" :style="{ width: scope.row[item.prop] + '%' }"></div>
          </div>
          <template #content>
            {{ scope.row['name'] }}<br>
            TGI: {{ scope.row['tgi'] }}<br>
            本特征卸载用户占比: {{ scope.row['percent'] }}%
          </template>
        </el-tooltip>
        <div class="percent-box" v-if="item.type === 'percentDom' && !props.showTooltip">
            <div class="inner" :style="{ width: scope.row[item.prop] + '%' }"></div>
          </div>
        <div v-if="item.type !== 'percentDom'" class="ellipsis-box">{{ scope.row[item.prop] + (item.prop == 'percent' ? '%' : '') }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';

const cellStyle = ref({
  textAlign: 'center',
  fontSize: '14px',
  height: '50px',
  background: 'transparent !important'
})

const headerCellStyle = ref({
  textAlign: 'center',
  border: 'none',
  background: 'rgba(244, 245, 250, 1)',
  height: '32px',
  color: 'rgba(100, 100, 100, 1)',
  fontSize: '14px',
})

const props = defineProps({
  data: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  columns: {
    type: Array as PropType<{
      label?: string;
      prop?: string;
      type?: string;
      width?: string;
    }[]>,
    default: () => []
  },
  cellStyle: {
    type: Object,
    default: () => { }
  },
  headerCellStyle: {
    type: Object,
    default: () => { }
  },
  showTooltip: {
    type: Boolean,
    default: false
  }
})

const state = reactive<BasicTableProps>({
  pagination: {
    current: 1,
    size: 10,
    total: 0
  }
})
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
const newData = ref(props.data);
watch(() => props.data, (newVal) => {
  newData.value = newVal;
}, { immediate: true, deep: true });
</script>
<style scoped lang="scss">
.percent-box {
  width: 100%;
  height: 12px;
  background: rgba(244, 244, 244, 1);
  border-radius: 4px;

  .inner {
    height: 100%;
    background: rgba(109, 173, 249, 1);
  }
}

.ellipsis-box {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>