<script lang="ts" setup>
import { defineOptions, ref } from 'vue'

defineOptions({ name: 'ShortcutModal' })

const show = ref(false)

const cardStyle = {
  'width': '800px',
  '--n-padding-bottom': '10px',
  '--n-padding-left': '10px',
}

function showModal() {
  show.value = true
}

function closeModal() {
  show.value = false
}

defineExpose({
  showModal,
})
</script>

<template>
  <div>
    <n-modal v-model:show="show" transform-origin="center">
      <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
        <div class="wrapper">
          <div class="wrapper-header">
            <span class="wrapper-left">全局快捷键</span>
            <div class="wrapper-right">
              <div>
                按<span class="wrapper-mark">?</span>查看快捷键的信息
              </div>
              <div class="wrapper-close" @pointerdown="closeModal">
                <div class="wrapper-icon" />
              </div>
            </div>
          </div>
          <n-divider />
          <div class="wrapper-global">
            <table style="margin-left: 65px;">
              <tr>
                <td><div class="key" data-key="g h" /></td>
                <td>进入主页页签</td>
              </tr>
              <tr>
                <td><div class="key" data-key="g r" /></td>
                <td>进入请求页签</td>
              </tr>
              <tr>
                <td><div class="key" data-key="alt" /><span>+</span><div class="key" data-key="r" /></td>
                <td>转到请求</td>
              </tr>
              <tr>
                <td><div class="key" data-key="n r" /></td>
                <td>创建新的请求</td>
              </tr>
              <tr>
                <td><div class="key" data-key="/" /></td>
                <td>搜索</td>
              </tr>
              <tr>
                <td><div class="key" data-key="esc" /></td>
                <td>从字段中取消光标聚集</td>
              </tr>
            </table>
            <table style="height: 30%;margin-left: 180px;">
              <tr>
                <td><div class="key" data-key="[" /></td>
                <td>进入主页页签</td>
              </tr>
              <tr>
                <td><div class="key" data-key="s" /></td>
                <td>进入请求页签</td>
              </tr>
              <tr>
                <td><div class="key" data-key="v" /></td>
                <td>转到请求</td>
              </tr>
            </table>
          </div>
          <n-divider />
          <div class="wrapper-request">
            <table style="margin-left: 110px;">
              <tr>
                <td><div class="key" data-key="e" /></td>
                <td>编辑请求</td>
              </tr>
              <tr>
                <td><div class="key" data-key="a" /></td>
                <td>指派</td>
              </tr>
              <tr>
                <td><div class="key" data-key="i" /></td>
                <td>提取</td>
              </tr>
              <tr>
                <td><div class="key" data-key="r" /></td>
                <td>回复所有</td>
              </tr>
              <tr>
                <td><div class="key" data-key="f" /></td>
                <td>转发请求</td>
              </tr>
              <tr>
                <td><div class="key" data-key="l" /></td>
                <td>链接请求</td>
              </tr>
              <tr>
                <td><div class="key" data-key="c" /></td>
                <td>关闭</td>
              </tr>
              <tr>
                <td><div class="key" data-key="n t" /></td>
                <td>添加新的任务</td>
              </tr>
              <tr>
                <td><div class="key" data-key="n w" /></td>
                <td>新添工作日志</td>
              </tr>
            </table>
            <table style="margin-left: 155px;">
              <tr>
                <td><div class="key" data-key="n n" /></td>
                <td>新添备注</td>
              </tr>
              <tr>
                <td><div class="key" data-key="n l" /></td>
                <td>进入备注列表</td>
              </tr>
              <tr>
                <td><div class="key" data-key="o r" /></td>
                <td>打开请求明细的页签</td>
              </tr>
              <tr>
                <td><div class="key" data-key="o t" /></td>
                <td>打开任务页签</td>
              </tr>
              <tr>
                <td><div class="key" data-key="o s" /></td>
                <td>打开解决方法页签</td>
              </tr>
              <tr>
                <td><div class="key" data-key="o a" /></td>
                <td>打开审批页签</td>
              </tr>
              <tr>
                <td><div class="key" data-key="&larr;" /><span>/</span><div class="key" data-key="&rarr;" /></td>
                <td>前一请求/下一请求</td>
              </tr>
              <tr>
                <td><div class="key" data-key="shift" /><span>+</span><div class="key" data-key="p" /></td>
                <td>打印预览</td>
              </tr>
            </table>
          </div>
        </div>
        <template #footer>
          <div class="wrapper-footer">
            <n-button type="info" @click="closeModal">
              确认
            </n-button>
            <n-button secondary style="margin-left:15px" @click="closeModal">
              取消
            </n-button>
          </div>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<style lang="less" scoped>
.wrapper {
  &-header {
    display: flex;
    justify-content: space-between;

    &-left {
      font-weight: bold;
      font-size: 16px;
    }

    &-right {
      display: inline-flex;
    }

    &-close {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }

    &-mark {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid red;
      color: red;
      border-radius: 50%;
    }

    &-icon {
      background: #FFF;
      display: inline-block;
      width: 18px;
      height: 1px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);

      &:after {
        content: '';
        display: block;
        width: 18px;
        height: 1px;
        background: #FFF;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
      }
    }

  }

  &-request,&-global{
    display: flex;

    table{
      tr td:first-child{
        text-align: right;
        padding-right: 10px;
      }
      tr span{
        padding: 0 10px;
      }
    }
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
  }

  .key {
    border-radius: 8px;
    display: inline-block;
    box-sizing: content-box;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 2px 6px;
    border: 1px solid #d6d6d6;
    border-left: 3px solid #d6d6d6;
    border-bottom: 3px solid #d6d6d6;
    background-color: #fdfdfd;
  }

  .key[data-key]::after {
    position: relative;
    z-index: 1;
    content: attr(data-key);
  }
}
</style>
