<template>
  <el-dialog
    class="spechar-dialog"
    :visible.sync="modalIsShow"
    title="特殊字符"
    top="10vh"
    width="700px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <el-tabs tab-position="left">
      <el-tab-pane v-for="item in speChars" :key="item.name" :label="item.name">
        <ul class="sepchar-list">
          <li
            v-for="(char, index) in item.chars"
            :key="index"
            :class="{ 'is-active': selectChar === char }"
            @click.stop="toSelect(char)"
          >
            <span>{{ char }}</span>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer">
      <el-button type="primary" @click="submit">确认</el-button>
      <el-button type="danger" plain @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import speChars from "./speChars.json";

export default {
  name: "SpecharDialog",
  data() {
    return {
      modalIsShow: false,
      selectChar: "",
      tabPosition: "",
      speChars,
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    toSelect(char) {
      this.selectChar = char;
    },
    submit() {
      this.$emit("confirm", this.selectChar);
      this.cancel();
    },
  },
};
</script>

<style lang="scss">
.sepchar-list {
  font-size: 0;
  li {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    width: 32px;
    height: 32px;
    padding: 5px;
    line-height: 20px;
    border: 1px solid #f0f2f6;
    margin: 5px;
    text-align: center;
    cursor: pointer;

    > span {
      display: inline-block;
      transition: transform 0.1s linear;
    }

    &:hover {
      color: #705eff;
      border-color: #705eff;
      span {
        transform: scale(1.3, 1.3);
      }
    }

    &.is-active {
      border-color: #705eff;
      color: #705eff;
    }
  }
}
</style>
