<template>
  <div class="shortcut-list">
    <el-row>
      <el-col :span="layoutCol" v-for="shortcut in shortcuts" v-bind:key="shortcut.ID">
        <div class="shortcut-item" @click="redirectUrl(shortcut.URL)">
          <i class="shortcut-item-icon" v-bind:class="shortcut.icon"></i>
          <div class="label">{{ shortcut.name }}</div>
        </div>
      </el-col>
      <div class="btn-wrap">
        <el-button @click="showMenuListDialog" size="small"><i class="el-icon-plus"></i>管理快捷功能</el-button>
        <span>最多可以选择8个快捷链接</span>
      </div>
      <el-dialog title="菜单列表" :visible.sync="showMenuList" append-to-body width="70%" custom-class="shorcutdialog" :center="true">
        <div class="menu-list" v-loading="dataLoading">
          <tree-grid ref="menuList" :columns="columns" :tree-structure="true" :strict="true" :data-source="menus" @selection-change="onSelectionChange">
          </tree-grid>
        </div>
        <div slot="footer">
          <el-button @click="showMenuList = false">取 消</el-button>
          <el-button type="primary" @click="selectMenu">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import TreeGrid from '@src/components/TreeGrid.vue'
export default {
  components: {
    'tree-grid': TreeGrid
  },

  props: {
    // 临时存储
    transient: {
      type: Boolean,
      default: false
    },

    layoutCol: Number
  },

  data() {
    return {
      shortcuts: [],
      showMenuList: false,
      dataLoading: false,
      columns: [
        {
          text: '菜单名称',
          render: function(row) {
            return '<i class="' + row.icon + '">&nbsp;' + row.name + '</i>'
          }
        },
        {
          text: '是否启用',
          render: function(row) {
            if (row.status === 'Y') {
              return '<i class="fa fa-check icon-success"></i>'
            } else {
              return '<i class="fa fa-times icon-danger"></i>'
            }
          }
        },
        {
          text: 'ID',
          dataIndex: 'ID'
        },
        {
          text: 'URL',
          dataIndex: 'URL'
        },
        {
          text: '来源插件',
          dataIndex: 'pluginName'
        }
      ],
      menus: [],
      selectedRows: []
    }
  },

  computed: {
    selectedMenuIDs() {
      let selectedMenuIDs = []
      this.shortcuts.forEach(item => selectedMenuIDs.push(item.ID))
      return selectedMenuIDs.join(',')
    }
  },

  created: async function() {
    this.getShortcutList()

    // 监听更新事件
    let self = this
    window.updateShortcutEvent = document.createEvent('Event')
    window.updateShortcutEvent.initEvent('updateshortcutevent', true, true)
    document.addEventListener('updateshortcutevent', function() {
      self.getShortcutList()
    })
  },

  methods: {
    async getShortcutList() {
      let shortcutRes = await axios
        .get('/ui/users/shortcuts')
      this.shortcuts = shortcutRes.data.data
    },

    redirectUrl(url) {
      if (url) {
        // 点击不跳转页面
        // window.location.hash = url
        // localStorage.lastRoutePath = url
      }
    },

    selectMenu() {
      if (this.selectedRows.length > 8) {
        util.showErrorMessageBox('最多选择8个快捷链接！')
        return
      }
      this.shortcuts = _.filter(this.selectedRows, function(o) { return o.URL })
      if (this.transient) {
        this.$emit('callback', this.selectedMenuIDs)
      } else {
        this.updateShortcut()
      }
      this.showMenuList = false
    },

    onSelectionChange(selection) {
      this.selectedRows = selection
    },

    async showMenuListDialog() {
      this.showMenuList = true
      this.dataLoading = true
      let selectedMenuIDs = []
      this.shortcuts.forEach(item => selectedMenuIDs.push(item.ID))
      let menuRes = await axios
        .get('/ui/menus/enabledmenulist', {
          params: { selectedMenuIDs: this.selectedMenuIDs }
        })
      this.menus = menuRes.data.data
      this.$nextTick(function() {
        this.dataLoading = false
      })
    },

    async updateShortcut() {
      let res = await axios.put('/ui/userpreference/shortcut', {
        shortcut: this.selectedMenuIDs
      })
      if (res.data.status === 1) {
        util.showSuccess(res.data.message)
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    }
  }
}
</script>

<style scoped>
.shortcut-item {
  width: 100%;
  text-align: center;
  /* cursor: pointer; */
}
.shortcut-item-icon {
  display: inline-block;
}
.shortcut-item > .label {
  color: #999;
  display: block;
}
.btn-wrap {
  display: inline-block;
  margin-top: 5px;
}
.menu-list{
  min-height:40vh;
}
</style>
<style>
  @media (min-width: 1025px) {
  .shorcutdialog .el-dialog__body {
    overflow: auto;
    max-height: calc(70vh - 120px);
  }
}
</style>
