<template>
  <div v-loading="loading">
    <div class="base-dialog-body" style="height:380px;overflow-y: auto;">
      <div 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="$t('trials:hotkeys:message:input')"
              style="width:170px"
            />
          </template>
        </div>

      </div>
    </div>
    <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">

      <el-button size="small" type="primary" @click="handleReset"> {{ $t('common:button:reset') }}</el-button>
      <el-button size="small" type="primary" @click="handleSave"> {{ $t('common:button:save') }}</el-button>

    </div>
  </div>
</template>
<script>
import { getDoctorShortcutKey, setShortcutKey, restoreDefaultShortcutKey } from '@/api/user'
import HotkeyInput from './HotKeyInput'
export default {
  name: 'HotKeys',
  components: { 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(isReset = false) {
      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 })
        })
        if (isReset) {
          this.$emit('reset', this.hotKeyList)
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSave() {
      var params = {
        imageToolType: this.readingTool,
        shortcutKeyList: []
      }
      var shortcutKeyList = []
      var isExistEmptyText = false
      var emptyLabel = null
      for (let i = 0; i < this.hotKeyList.length; i++) {
        const item = this.hotKeyList[i]
        if (!item.keys.text) {
          isExistEmptyText = true
          emptyLabel = item.label
          break
        } else {
          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 }
          )
        }
      }
      if (isExistEmptyText) {
        let msg = this.$t('trials:reading:warnning:msg57')
        msg = msg.replace('xxx', this.$fd('ShortcutKey', emptyLabel))
        this.$confirm(msg, '', {
          showCancelButton: false,
          type: 'warning'
        }).then(() => {

        }).catch(() => {

        })
      } else {
        this.loading = true
        // 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 => {
          this.$emit('reset', this.hotKeyList)
          // this.$emit('close')
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }
    },
    handleReset() {
      // '是否确认重置？'
      this.$confirm(this.$t('trials:hotkeys:message:confirmReset'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.loading = true
          restoreDefaultShortcutKey({ imageToolType: this.readingTool }).then(res => {
            this.$message.success(this.$t('trials:hotkeys:message:resetSuccessfully')) // '重置成功！'
            this.getHotkeys(true)
          }).catch(() => { this.loading = false })
        })
        .catch(action => {})
    },
    handleHotkeyVerify(hotkey) {
      for (const item of this.hotKeyList) {
        if (item.keys.text === hotkey.text && item.id !== hotkey.id) {
          const msg = this.$t('trials:hotkeys:message:tip1').replace('xxx', this.$fd('ShortcutKey', item.label))
          this.$notify({
            title: this.$t('trials:hotkeys:message:tip'),
            message: msg,
            type: 'warning'
          })
          return false
        }
      }
      return true
    }
  }
}
</script>

<style lang="scss">
.hot-keys-container {
  width: 100%;
  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>
