<template>
  <div class="color-select">
    <div
      class="color"
      v-for="(item, index) in colorList"
      :key="item"
      :class="colorClass(index)"
      :style="colorStyle(item)"
      @click.stop="onClick(item)"
    ></div>
  </div>
</template>

<script lang="ts">
export default {
  name: "RfColorSelect",
};
</script>

<script lang="ts" setup>
import { computed } from "vue";
type Props = {
  modelValue?: string;
  colorList?: string[];
  themeColor?: string;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: "",
  colorList: null,
  themeColor: "var(--wl-primary-color)",
});

const emit = defineEmits<{
  (e: "update:modelValue", val: string);
}>();

const colorStyle = computed(() => {
  return function (item) {
    let whiteBorder = {};
    let whiteList = ["white", "#ffffff", "rgb(255, 255, 255)"];
    if (whiteList.includes(item)) {
      whiteBorder = {
        borderColor: props.modelValue === item ? props.themeColor : "#EEEEEE",
        borderWidth: props.modelValue === item ? "" : "2px",
      };
    }
    return {
      backgroundColor: item,
      borderColor: props.modelValue === item ? props.themeColor : "transparent",
      ...whiteBorder,
    };
  };
});

const colorClass = computed(() => {
  return function (index) {
    return index === 0
      ? "space-right"
      : index === props.colorList.length - 1
        ? "space-left"
        : "space";
  };
});

const onClick = (val) => emit("update:modelValue", val);
</script>

<style lang="scss">
.render-form[data-weiling-mobile-ui-bc-render-form] {
  .color-select {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .color {
      width: j(32);
      height: j(32);
      border: 2px solid transparent;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .space {
      margin: 0 j(12);

      &-right {
        margin-right: j(12);
      }

      &-left {
        margin-left: j(12);
      }
    }
  }
}
</style>
