<template>
  <BaseContainer>
    <template slot="main-container">
      <div v-loading="loading" class="hot-keys-container">
        <div v-for="(item, index) in hotKeyList" :key="`${item.tag}_${index}`" class="wrapper">
          <template>
            <div class="hot-keys-label">{{ $fd('ShortcutKey',item.label) }}</div>
            <HotkeyInput
              class="hotkey"
              :hotkey.sync="hotKeyList[index].keys"
              :verify="handleHotkeyVerify"
              :hotkey-id="hotKeyList[index].id"
              placeholder="请输入按键"
              style="width:170px"
            />
          </template>
        </div>

      </div>
      <div v-if="hotKeyList.length>0" style="text-align:right;width:680px;">
        <el-button size="small" @click="handleReset"> {{ $t('common:button:reset') }}</el-button>
        <el-button size="small" type="primary" @click="handleSave"> {{ $t('common:button:save') }}</el-button>
      </div>
    </template>
  </BaseContainer>
</template>
<script>
import { getDoctorShortcutKey, setShortcutKey, restoreDefaultShortcutKey } from '@/api/user'
import BaseContainer from '@/components/BaseContainer'
import HotkeyInput from './HotKeyInput.vue'
export default {
  name: 'HotKeysListApp',
  components: { BaseContainer, HotkeyInput },
  props: {
    readingTool: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      hotKeyList: [],
      loading: false
    }
  },
  watch: {
    hotKeyList: {
      handler: function(val) {
        // console.log(val)
      },
      immediate: true
    }
  },
  mounted() {
    this.getHotkeys()
  },
  methods: {
    getHotkeys() {
      this.loading = true
      this.hotKeyList = []
      getDoctorShortcutKey({ imageToolType: this.readingTool }).then(res => {
        res.Result.map(item => {
          this.hotKeyList.push({ id: item.Id, keys: { controlKey: { altKey: item.AltKey, ctrlKey: item.CtrlKey, shiftKey: item.ShiftKey, metaKey: item.MetaKey, key: item.Keyboardkey, code: item.Code }, text: item.Text }, label: item.ShortcutKeyEnum })
        })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSave() {
      this.loading = true
      var params = {
        imageToolType: this.readingTool,
        shortcutKeyList: []
      }
      var shortcutKeyList = []
      this.hotKeyList.map(item => {
        shortcutKeyList.push(
          {
            shortcutKeyEnum: item.label,
            keyboardkey: item.keys.controlKey.key,
            code: item.keys.controlKey.code,
            text: item.keys.text,
            altKey: item.keys.controlKey.altKey,
            ctrlKey: item.keys.controlKey.ctrlKey,
            shiftKey: item.keys.controlKey.shiftKey,
            metaKey: item.keys.controlKey.metaKey }
        )
      })
      params.shortcutKeyList = shortcutKeyList
      setShortcutKey(params).then(res => {
        console.log(res)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleReset() {
      this.$confirm('是否确认重置？', {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.loading = true
          restoreDefaultShortcutKey({ imageToolType: this.readingTool }).then(res => {
            this.$message.success('重置成功！')
            this.getHotkeys()
          }).catch(() => { this.loading = false })
        })
        .catch(action => {})
    },
    handleHotkeyVerify(hotkey) {
      for (const item of this.hotKeyList) {
        if (item.keys.text === hotkey.text && item.id !== hotkey.id) {
          this.$notify({
            title: '提示',
            message: `此快捷键已被“${this.$fd('ShortcutKey', item.label)}”绑定`,
            type: 'warning'
          })
          return false
        }
      }
      return true
    }
  }
}
</script>

<style lang="scss">
.hot-keys-container {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  .wrapper{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width: 49%;
    .hot-keys-label{
      padding: 5px;
      font-size: 13px;
      width:120px;
      text-align: right;
    }
  }
}
</style>
