<script lang="ts" setup>
import { reactive, toRefs, watch } from 'vue';
const props = defineProps({
  color: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
  customClass: {
    required: false,
    type: String,
    default: '',
  },
  title: {
    required: false,
    type: String,
    default: '',
  },
});
const { color, customClass, title } = toRefs(props);
const color1 = reactive({
  backgroundColor: color.value.color1,
});
const color2 = reactive({
  backgroundColor: color.value.color2,
});
const color3 = reactive({
  backgroundColor: color.value.color3,
});
watch(
  () => props,
  newVal => {
    color1.backgroundColor = newVal.color.color1;
    color2.backgroundColor = newVal.color.color2;
    color3.backgroundColor = newVal.color.color3;
  },
  { deep: true },
);
</script>

<template>
  <div class="color-container" :class="customClass ? customClass : ''">
    <div class="color1" :style="color1">
      <div class="label text">{{ title }}</div>
      <div class="text">{{ color.color1 }}</div>
    </div>
    <div class="color2" :style="color2"></div>
    <div class="color3" :style="color3"></div>
  </div>
</template>

<style lang="scss" scoped>
.color-container {
  display: flex;
  flex-wrap: wrap;
  width: 80px;
  height: 80px;
  border-radius: 2px;
  overflow: hidden;
  .color1 {
    width: 100%;
    height: 64px;
    padding: 8px;
    display: flex;
    flex-direction: column;
  }
  .color2 {
    width: 40px;
    height: 16px;
  }
  .color3 {
    width: 40px;
    height: 16px;
  }
  .label {
    margin-bottom: 4px;
  }
  .text {
    font-size: 12px;
    color: #ffffff;
  }
}
</style>
