<template>
  <div class="padding-top-bottom">
    <div class="pane-wrap">
      <div class="panel-fieldset">
        <h4 class="panel-legend">基础平台</h4>
        <el-row :gutter="20">
          <el-col :span="8"><span>快捷链接选择：</span></el-col>
          <el-col :span="16">
            <shortcut transient :layout-col="6" @callback="getShortcuts"></shortcut>
          </el-col>
        </el-row>
      </div>
      <user-preferences-extend :preferences="preferences"></user-preferences-extend>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import Shortcut from './Shortcut.vue'
import UserPreferencesExtend from './UserPreferencesExtend.vue'

export default {
  components: {
    'shortcut': Shortcut,
    'user-preferences-extend': UserPreferencesExtend
  },

  data() {
    return {
      preferences: {}
    }
  },

  created: function() {
    this.loadPreferences()
  },

  methods: {
    async savePreferences() {
      let data = await axios.put('/ui/users/preferences', this.preferences).then(res => res.data)
      if (data.status === 1) {
        util.showSuccess(data.message)
        this.cachePreferences()
        this.$emit('close-dialog')
        // 触发更新
        if (window.updateMainShortcutEvent) {
          document.dispatchEvent(window.updateMainShortcutEvent)
        }
      } else {
        util.showErrorMessageBox(data.message)
      }
    },

    cachePreferences() {
      localStorage.setItem('userPreferences', JSON.stringify(this.preferences))
    },

    async loadPreferences() {
      let preferenceRes = await axios.get('/ui/users/preferences')
      this.preferences = preferenceRes.data.data
    },

    getShortcuts(arr) {
      this.preferences.shortcut = arr
    }
  }
}

</script>
