<template lang="">
  <div class="font-group">
    <el-select v-model="fontFamilyDefaultValue" placeholder="字体" class="font-family-select" :disabled="disabledFont" @change="execCommandFontFamily">
      <el-option v-for="item in fontFamilys" :label="item.name" :value="item.value" :key="item.id" :style="{'font-family':item.value}">
      </el-option>
    </el-select>
    <el-select v-model="fontSizeDefaultValue" placeholder="字号" class="font-size-select" :disabled="disabledFontSize" @change="execCommandFontSize">
      <el-option v-for="item in fontSizes" :label="item.label" :value="item.value" :key="item.id" :style="{'font-size':item.value+'px','height':2*item.value+'px', 'line-height':2*item.value+'px','padding':0}">
      </el-option>
    </el-select>
    <span class="font-bold menu-btn tab-icons" @click="execCommandFontStyle('bold')" :class="{'selected':boldSelected}" :disabled="disabledBold"></span>
    <span class="font-italic menu-btn tab-icons" @click="execCommandFontStyle('italic')" :class="{'selected':italicSelected}" :disabled="disabledItalic"></span>
  </div>
</template>

<script>
import {
  mapGetters
} from "vuex";
export default {
  data() {
    return {
      fontFamilys: [{
          id: 1,
          value: "宋体,SimSun",
          name: "宋体"
        },
        {
          id: 2,
          value: "微软雅黑,Microsoft YaHei",
          name: "微软雅黑"
        },
        {
          id: 3,
          value: "楷体,楷体_GB2312,SimKai",
          name: "楷体"
        },
        {
          id: 4,
          value: "黑体, SimHei",
          name: "黑体"
        },
        {
          id: 5,
          value: "隶书, SimLi",
          name: "隶书"
        },
        {
          id: 6,
          value: "andale mono",
          name: "Andale Mono"
        },
        {
          id: 7,
          value: "arial,helvetica,sans-serif",
          name: "Arial"
        },
        {
          id: 8,
          value: "arial black,avant garde",
          name: "arialBlack"
        },
        {
          id: 9,
          value: "comic sans ms",
          name: "comic Sans Ms"
        },
        {
          id: 10,
          value: "impact,chicago",
          name: "Impact"
        },
        {
          id: 11,
          value: "times new roman",
          name: "times New Roman"
        },
        {
          id: 12,
          value: "sans-serif",
          name: "Sans-Serif"
        }
      ],

      fontSizes: [{
          id: 1,
          value: 10,
          label: 10
        },
        {
          id: 2,
          value: 12,
          label: 12
        },
        {
          id: 3,
          value: 16,
          label: 16
        },
        {
          id: 4,
          value: 18,
          label: 18
        },
        {
          id: 5,
          value: 24,
          label: 24
        },
        {
          id: 6,
          value: 32,
          label: 32
        },
        {
          id: 7,
          value: 48,
          label: 48
        }
      ],
      fontFamilyDefaultValue: "字体",
      fontSizeDefaultValue: "字号"
    };
  },

  computed: {
    ...mapGetters({
      minder: "getMinder"
    }),
    currentTheme() {
      return this.minder.getThemeItems();
    },

    // 直接定义model的计算型属性会时select异常，
    disabledFont() {
      var currentFontFamily =
        this.minder.queryCommandValue &&
        this.minder.queryCommandValue("fontfamily");
      this.fontFamilyDefaultValue = currentFontFamily || "字体";
      return (
        this.minder.queryCommandState &&
        this.minder.queryCommandState("fontfamily") === -1
      );
    },
    disabledFontSize() {
      this.fontSizeDefaultValue =
        (this.minder.queryCommandValue &&
          this.minder.queryCommandValue("fontsize")) ||
        "字号";
      return (
        this.minder.queryCommandState &&
        this.minder.queryCommandState("fontsize") === -1
      );
    },
    disabledBold() {
      return (
        this.minder.queryCommandState &&
        this.minder.queryCommandState("bold") === -1
      );
    },
    disabledItalic() {
      return (
        this.minder.queryCommandState &&
        this.minder.queryCommandState("italic") === -1
      );
    },
    boldSelected() {
      return (
        this.minder.queryCommandState &&
        this.minder.queryCommandState("bold") == 1
      );
    },
    italicSelected() {
      return (
        this.minder.queryCommandState &&
        this.minder.queryCommandState("italic") == 1
      );
    }
  },
  methods: {
    execCommandFontFamily(value) {
      if (value == "字体") {
        return;
      }
      this.minder.execCommand("fontfamily", value);
    },
    execCommandFontSize(value) {
      if (typeof value !== "number") {
        return;
      }
      this.minder.execCommand("fontsize", value);
    },
    execCommandFontStyle(style) {
      var minder = this.minder;
      switch (style) {
        case "bold":
          minder.queryCommandState("bold") === -1 || minder.execCommand("bold");
          break;
        case "italic":
          minder.queryCommandState("italic") === -1 ||
            minder.execCommand("italic");
          break;
      }
    }
  }
};
</script>
