<template>
  <div class="table-zone">
    <p class="object-title mb5">백그라운드</p>
    <ul>
      <li class="mb5">
        <div class="tabnav2">
          <ul class="flex justify-start align-center">
            <li
              v-for="(nav, idx) in tabNav"
              @click="showTab(nav)"
              :key="idx"
              class="cursor mr10"
            >
              <p :class="{ activeTab2: activeTab === nav }">{{ nav }}</p>
            </li>
          </ul>
        </div>
        <div class="tab-content2">
          <div v-show="activeTab === '색상'">
            <input
              type="color"
              colorformat="rgba"
              class="color-picker"
              v-model="background.background_color"
            />
          </div>
          <div v-show="activeTab === '이미지'">
            <input
              type="text"
              name=""
              id=""
              class="full-input ㅡㅠ5"
              placeholder="https://"
              v-model="background.imageUrl"
            />
            <div class="input-container">
              <label class="check-label">
                <input
                  type="checkbox"
                  name="check"
                  checked=""
                  class="custom-checkbox"
                />
                <span>HTML</span>
              </label>
            </div>
          </div>
        </div>
      </li>
      <li class="mb5">
        <div class="flex align-center">
          <div class="slider-container flex65 pd0">
            <input
              type="range"
              min="0"
              max="100"
              step="1"
              v-model="background.opacity"
              class="slider"
              id="opacitySlider"
            />
          </div>
          <div class="flex35 pr0">
            <input
              type="text"
              :value="`${background.opacity}%`"
              @input="updateOpacity($event.target.value)"
              class="full-input text-ct"
            />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>


<script>
export default {
  props: {
    background_style: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      background: this.background_style,
      tabNav: ["색상", "이미지"],
      backgroundSelectedColor: "#333333",
      backgroundColorList: [],
      activeTab: null,
      opacity: "100",
    };
  },
  methods: {
    showTab: function (tabName) {
      this.background.image_at = tabName === "이미지";
      this.activeTab = tabName;
    },
    updateOpacity: function (value) {
      this.background.opacity = value.replace("%", "");
    },
  },
  watch: {
    background_style: function (v) {
      this.background = v;
      if (this.background.image_at == true) {
        this.activeTab = "이미지";
      } else {
        this.activeTab = "색상";
      }
    },
  },
  mounted() {
    if (this.background.image_at == true) {
      this.activeTab = "이미지";
    } else {
      this.activeTab = "색상";
    }
  },
};
</script>
