<template>
  <v-text-field
    v-model="setColor"
    :label="label"
    hide-details
    class="ma-0 pa-0"
    outlined
    dense
  >
    <!--              add this back-->
    <!--              v-mask="mask"-->
    <template v-slot:append>
      <v-menu
        v-model="menu"
        :top="false"
        nudge-bottom="105"
        nudge-left="16"
        :close-on-content-click="false"
      >
        <template v-slot:activator="{ on }">
          <div :style="swatchStyle" v-on="on" />
        </template>
        <v-card>
          <v-card-text class="pa-0">
            <v-color-picker
              v-model="setColor"
              hide-mode-switch
              width="250"
              mode="hexa"
              flat
            />
          </v-card-text>
        </v-card>
      </v-menu>
    </template>
  </v-text-field>
</template>
<script>
export default {
  name: "color-selector",
  props: {
    color: String,
    label: String,
  },
  data: () => ({
    // color: "#1976D2FF",
    mask: "!#XXXXXXXX",
    menu: false,
  }),
  computed: {
    setColor: {
      get() {
        return this.color;
      },
      set(val) {
        this.$emit("color", val);
      },
    },
    swatchStyle() {
      const { menu, color } = this;
      return {
        backgroundColor: color,
        cursor: "pointer",
        height: "30px",
        width: "30px",
        margin: "-3px",
        borderRadius: menu ? "50%" : "4px",
        border: "solid lightGrey 1px",
        transition: "border-radius 200ms ease-in-out",
      };
    },
  },
};
</script>
