<template>
  <div>
    <el-col
      v-for="(item, index) in iconList"
      :key="index"
      :lg="3"
      :md="3"
      :sm="6"
      :xl="3"
      :xs="12"
    >
      <el-card
        v-if="item.click && item.click === 'changeTheme'"
        class="icon-panel"
        shadow="hover"
        @click.native="changeTheme"
      >
        <vab-icon :icon="item.icon" :style="{ color: item.color }" />
        <p>{{ item.title }}</p>
      </el-card>
      <el-card
        v-else-if="item.click && item.click === 'randomTheme'"
        class="icon-panel"
        shadow="hover"
        @click.native="randomTheme"
      >
        <el-badge value="点我">
          <vab-icon :icon="item.icon" :style="{ color: item.color }" />
        </el-badge>
        <p>{{ item.title }}</p>
      </el-card>
      <el-card
        v-else-if="item.click && item.click === 'handleMore'"
        class="icon-panel"
        shadow="hover"
        @click.native="handleMore"
      >
        <vab-icon :icon="item.icon" :style="{ color: item.color }" />
        <p>{{ item.title }}</p>
      </el-card>
      <vab-link v-else :to="item.link">
        <el-card class="icon-panel" shadow="hover">
          <vab-icon :icon="item.icon" :style="{ color: item.color }" />
          <p>{{ item.title }}</p>
        </el-card>
      </vab-link>
    </el-col>
  </div>
</template>

<script>
  import VabLink from "@/vab/components/VabLink";

  export default {
    components: {
      VabLink,
    },
    data() {
      return {
        // 卡片图标
        iconList:  [
          {
            icon: 'user-3-line',
            title: '用户管理',
            link: '/user/index',
            color: '#95de64',
          },
          {
            icon: 'settings-4-line',
            title: '系统设置',
            link: '/settings/config/site',
            color: '#69c0ff',
          },
          {
            icon: 'product-hunt-line',
            title: '商品',
            link: '/product/base',
            color: '#ffd666',
          },
          {
            icon: 'list-unordered',
            title: '订单管理',
            link: '/order/productOrder',
            color: '#1890FF',
          },
          {
            icon: 'message-line',
            title: '消息配置',
            link: '/message/template',
            color: '#ffc069',
          },
          {
            icon: 'table-line',
            title: '文章管理',
            link: '/base',
            color: '#5cdbd3',
          },
          {
            icon: 'code-box-line',
            title: '首页装修',
            link: '/diy/app',
            color: '#b37feb',
          },
          {
            icon: 'file-paper-line',
            title: '优惠券',
            link: '/activity/voucher',
            color: '#ff85c0',
          },
        ],
      }
    },
    methods: {
      changeTheme() {
        this.$baseEventBus.$emit('theme')
      },
      handleMore() {
        this.$baseAlert('敬请期待！')
      },
      randomTheme() {
        this.$baseEventBus.$emit('random-theme')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .icon-panel {
    height: 120px;
    text-align: center;
    cursor: pointer;

    &:hover {
      i {
        transform: scale(1.15);
      }
    }

    i {
      display: block;
      width: 50px;
      height: 50px;
      margin: auto;
      font-size: 40px;
      transition: all ease-in-out 0.3s;
    }

    p {
      margin-top: 10px;
    }
  }
</style>
