<template>
  <div class="dec-color-picker">
    <div v-if="reset" class="re-back" @click="rebackColor">重置</div>
    <a-tooltip placement="bottom" :get-popup-container="getPopupContainer">
      <span class="color-box" :style="{ background: oldColor }"></span>
      <template slot="title">
        <color-picker @input="updateValue" :value="colors"></color-picker>
      </template>
    </a-tooltip>
  </div>
</template>
<script>
import { Chrome } from "vue-color";
export default {
  components: {
    "color-picker": Chrome,
  },
  props: {
    back: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "#194D33A8",
    },
    reset: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      default: "",
      colors: null,
      showpicker: false,
      oldColor: "",
    };
  },
  watch: {
    back(val, val2) {
      if (val && val != val2) {
        this.init();
      }
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.default = this.back || this.color || "#194D33A8";
      this.colors = {
        hex8: this.color,
      };
      this.oldColor = this.default;
    },
    getPopupContainer(trigger) {
      return trigger.parentElement;
    },
    rebackColor() {
      this.$emit("change", this.default);
      this.colors = {
        hex8: this.default,
      };
      this.oldColor = this.default;
    },
    updateValue(obj) {
      if (obj.hex8 !== this.oldColor) {
        this.oldColor = obj.hex8;
        this.$emit("change", obj.hex8);
      }
    },
  },
};
</script>
