<!-- 行颜色选择组件 -->
<template>
  <el-popover
    v-model="visible"
    placement="right"
    trigger="click"
    popper-class="editable-table-color-popover"
  >
    <div class="color-list">
      <div
        v-for="color in colorList"
        :key="color.id"
        class="color-list__item"
        :style="{ backgroundColor: color.sampleColor }"
        @click="() => {
          visible = false
          handleColorChange(color.id, scope)
        }"
      >
        <span :style="{color: color.textColor}">{{ color.name }}</span>
      </div>
    </div>

    <div slot="reference">
      <div
        v-if="isDefaultColor(scope.row.colorId)"
        class="editable-table__color-icon"
      />
      <div
        v-else
        class="editable-table__selected-color"
        :style="{ backgroundColor: getColorById(scope.row.colorId, 'sample') }"
      />
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { IColorList, IEmits, ITableDataItem } from '../types';
import { useRowBgColor } from '../bizHooks';

const props = defineProps<{
  colorList: IColorList,
  scope: any
}>();

const emit = defineEmits<{
  (e: 'row-bg-change', param: { colorId: number; row: ITableDataItem; rowIndex: number }): void
}>();

const {
  getColorById,
  isDefaultColor,
  handleColorChange,
} = useRowBgColor({
  colorList: props.colorList,
  emit: emit as IEmits,
});

const visible = ref(false);

</script>