<template>
  <el-dialog
    class="help-dialog"
    :visible.sync="dialogVisible"
    title="帮助"
    top="0"
    width="640px"
    :close-on-click-modal="false"
    append-to-body
  >
    <div>
      启用快捷键：<el-switch v-model="shortcutEnable">启用快捷键</el-switch>
    </div>
    <el-table size="medium" :data="SHORTCUT_KEYS">
      <el-table-column prop="name" label="命令"></el-table-column>
      <el-table-column prop="keys" label="快捷键">
        <template slot-scope="scope">
          <shortcut-key-spin
            v-for="sk in scope.row.keys"
            :key="sk"
            :data="sk"
          ></shortcut-key-spin>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import { SHORTCUT_KEYS } from "../../../enumerate";
import ShortcutKeySpin from "../../../components/common/ShortcutKeySpin";

export default {
  name: "help-dialog",
  components: { ShortcutKeySpin },
  data() {
    return {
      dialogVisible: false,
      shortcutEnable: false,
      SHORTCUT_KEYS,
    };
  },
  watch: {
    shortcutEnable(val) {
      this.$emit("on-enable", val);
    },
  },
  methods: {
    cancel() {
      this.dialogVisible = false;
    },
    open() {
      this.dialogVisible = true;
    },
  },
};
</script>