<template>
  <div>
    <Card :bordered="false" :padding="6" class="ivu-mb">
      <div slot="title">
        <Avatar icon="md-apps" size="small" v-color="'#1890ff'" v-bg-color="'#e6f7ff'" />
        <span class="ivu-pl-8">{{ $t('Front_Label_Shortcut') }}</span>
      </div>
      <div slot="extra">
        <Tooltip placement="top" :content="$t('Front_Label_Setting')">
          <Icon type="md-settings" style="cursor: pointer" @click="setting()" />
        </Tooltip>
      </div>
      <div class="ivu-text-center" style="height: 250px">
        <Grid :col="3" :border="false" padding="8px">
          <GridItem v-for="(item, index) in shortcuts" :key="item.id" class="ivu-mb">
            <i-link class="shortcut" :to="item.permission.url">
              <Icon :custom="item.permission.icon" :color="colors[index]" size="24" />
              <p class="ivu-pt-8">{{ layout.showNotice ? $t('Permission_' + item.permission.url.split('?')[0]) : item.permission.name }}</p>
            </i-link>
          </GridItem>
        </Grid>
      </div>
    </Card>
    <modal-table ref="shortcutSetting" view-code="ShortcutSetting" :static="true" :footer-enable="true" :draggable="true" :sticky="true" :embedded="true" @on-drag-drop="dragDrop">
      <template slot-scope="{ row, index }" slot="command">
        <Button size="small" :title="$t('Front_Btn_Up')" type="primary" ghost custom-icon="fa fa-chevron-up" @click="up(row, index)"></Button>
        <Button size="small" :title="$t('Front_Btn_Down')" type="primary" ghost custom-icon="fa fa-chevron-down" @click="down(row, index)"></Button>
        <Button size="small" :title="$t('Front_Btn_Remove')" type="primary" ghost custom-icon="fa fa-times" @click="remove(row, index)"></Button>
      </template>
      <template slot="footer">
        <Button type="primary" custom-icon="fa fa-save" @click="save">{{ $t('Front_Btn_Save') }}</Button>
      </template>
    </modal-table>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import shortcutApi from '../../api/shortcut';

  export default {
    name: 'home',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        shortcuts: [],
        colors: ['#69C0FF', '#95DE64', '#FFD666', '#FF9C6E', '#B37FEB', '#5CDBD3', '#DC143C', '#FF85C0', '#FFC069']
      };
    },
    async mounted() {
      const res = await shortcutApi.queryMy();
      this.shortcuts = res;
    },
    methods: {
      // 快捷按钮设置
      async setting() {
        let data = this.copy(this.shortcuts);

        this.$refs.shortcutSetting.loadData(data);
        this.$refs.shortcutSetting.open();
      },
      // 上移
      up(row, index) {
        let columns = this.$refs.shortcutSetting.data;
        if (index > 0) {
          columns.splice(index, 1);
          columns.splice(index - 1, 0, row);

          this.$refs.shortcutSetting.loadData(columns);
        }
      },
      // 下移
      down(row, index) {
        let columns = this.$refs.shortcutSetting.data;
        if (index < columns.length - 1) {
          columns.splice(index, 1);
          columns.splice(index + 1, 0, row);

          this.$refs.shortcutSetting.loadData(columns);
        }
      },
      // 拖动完成
      dragDrop({ index1, index2 }) {
        if (index1 != index2) {
          let columns = this.$refs.shortcutSetting.data;
          let row = columns[index1];

          columns.splice(index1, 1);
          columns.splice(index2, 0, row);
        }
      },
      // 移除
      remove(row, index) {
        let columns = this.$refs.shortcutSetting.data;
        columns.splice(index, 1);

        this.$refs.shortcutSetting.loadData(columns);
      },
      // 保存
      save() {
        this.confirm('Front_Msg_Sure_To_Save_Setting', async () => {
          let data = this.$refs.shortcutSetting.data;
          const res = await shortcutApi.save(data);

          this.success('Front_Msg_Success', () => {
            this.shortcuts = res;
            this.$refs.shortcutSetting.close();
          });
        });
      }
    }
  };
</script>

<style scoped>
  .shortcut p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
</style>
