<template>
  <div>
    <!--   class="table-zone" -->
    <p class="object-title mb5">{{ title }}폰트 설정</p>
    <ul>
      <li class="mb10">
        <div class="flex">
          <div class="flex60 pd0">
            <select class="full-select" v-model="fontStyle.font">
              <option
                v-for="(item, indx) in fontList"
                :key="indx"
                :value="item.cmmnCode"
              >
                {{ item.codeNm }}
              </option>
            </select>
          </div>
          <div class="flex40">
            <div class="font-size flex justify-start align-center no-gutter">
              <div class="down flex20">
                <button @click="down">-</button>
              </div>
              <div class="flex55">
                <input
                  type="text"
                  class="size-input full-input"
                  v-model="fontStyle.font_size"
                />
              </div>
              <div class="up flex20">
                <button @click="up">+</button>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="mb10">
        <div class="flex align-center">
          <input
            type="checkbox"
            :id="comId + 'bold'"
            class="style-input"
            v-model="fontStyle.bold_at"
          />
          <label :for="comId + 'bold'" class="style-label">
            <svg-icon type="mdi" :path="iconstyle.mdiFormatBold"></svg-icon>
          </label>
          <input
            type="checkbox"
            :id="comId + 'mdiFormatItalic'"
            class="style-input"
            v-model="fontStyle.italic_at"
          />
          <label :for="comId + 'mdiFormatItalic'" class="style-label">
            <svg-icon type="mdi" :path="iconstyle.mdiFormatItalic"></svg-icon>
          </label>
          <input
            type="checkbox"
            :id="comId + 'mdiFormatUnderline'"
            class="style-input"
            v-model="fontStyle.underline_at"
          />
          <label :for="comId + 'mdiFormatUnderline'" class="style-label">
            <svg-icon
              type="mdi"
              :path="iconstyle.mdiFormatUnderline"
            ></svg-icon>
          </label>
          <input
            type="checkbox"
            :id="comId + 'mdiFormatStrikethroughVariant'"
            class="style-input"
            v-model="fontStyle.line_through_at"
          />
          <label
            :for="comId + 'mdiFormatStrikethroughVariant'"
            class="style-label"
          >
            <svg-icon
              type="mdi"
              :path="iconstyle.mdiFormatStrikethroughVariant"
            ></svg-icon>
          </label>
        </div>
      </li>
      <li class="mb10">
        <div class="flex align-center">
          <div
            v-for="(HorSort, idx) in fontHorSort"
            :key="idx"
            class="check-group ml5"
          >
            <input
              type="radio"
              :name="comId + 'horizontalAlign'"
              :id="comId + HorSort.value"
              :value="HorSort.value"
              class="style-input"
              v-model="fontStyle.text_align"
            />
            <label :for="comId + HorSort.value" class="style-label">
              <svg-icon type="mdi" :path="HorSort.iconPath"></svg-icon>
            </label>
          </div>
        </div>
      </li>
      <li class="mb10">
        <div class="flex align-center">
          <div
            v-for="(verSort, idx) in fontVerSort"
            :key="idx"
            class="check-group ml5"
          >
            <input
              type="radio"
              :name="comId + 'verticalAlign'"
              :id="comId + verSort.value"
              :value="verSort.value"
              class="style-input"
              v-model="fontStyle.vertical_align"
            />
            <label :for="comId + verSort.value" class="style-label">
              <svg-icon type="mdi" :path="verSort.iconPath"></svg-icon>
            </label>
          </div>
        </div>
      </li>
      <li class="mb10">
        <input
          type="color"
          class="color-picker flex align-center"
          v-model="fontSelectedColor"
        />
      </li>
    </ul>
  </div>
</template>

<script>
import SvgIcon from "@jamescoyle/vue-icon";
import {
  mdiFormatBold,
  mdiFormatItalic,
  mdiFormatUnderline,
  mdiFormatStrikethroughVariant,
  mdiFormatAlignLeft,
  mdiFormatAlignCenter,
  mdiFormatAlignRight,
  mdiFormatAlignTop,
  mdiFormatAlignMiddle,
  mdiFormatAlignBottom,
} from "@mdi/js";

export default {
  props: {
    fontStyle: {
      type: Object,
      default: null,
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 컴포넌트 고유 아이디
      comId:
        "comId_" +
        Math.random().toString(36).substring(2, 15) +
        Math.random().toString(36).substring(2, 15),
      iconstyle: {
        mdiFormatBold: mdiFormatBold,
        mdiFormatItalic: mdiFormatItalic,
        mdiFormatUnderline: mdiFormatUnderline,
        mdiFormatStrikethroughVariant: mdiFormatStrikethroughVariant,
      },
      fontHorSort: [
        { iconPath: mdiFormatAlignLeft, active: false, value: "left" },
        { iconPath: mdiFormatAlignCenter, active: false, value: "center" },
        { iconPath: mdiFormatAlignRight, active: false, value: "right" },
      ],
      fontVerSort: [
        { iconPath: mdiFormatAlignTop, active: false, value: "top" },
        { iconPath: mdiFormatAlignMiddle, active: false, value: "middle" },
        { iconPath: mdiFormatAlignBottom, active: false, value: "bottom" },
      ],
      fontSize: 16,
      fontSelectedColor: "#333333",
      fontIsColorChanged: false,
      fontColorList: [],
      fontList: [],
    };
  },
  methods: {
    up: function () {
      this.fontStyle.font_size += 1;
    },
    down: function () {
      this.fontStyle.font_size -= 1;
    },
    initCode: async function () {
      this.fontList = await this.$getCommonCode("BASE_FONT");
    },
  },
  components: {
    SvgIcon: SvgIcon,
  },
  mounted() {
    this.initCode();
  },
};
</script>