<template>
  <div class="app-list">
    <template v-for="(item, index) in appList">
      <div class="m-b-20" :key="index+'cate'">
        <h3 class="page-title">{{item.applicationCategoryName || '--'}}</h3>
        <div>
          <div class="app-item" v-for="el in item.applications" :key="el.applicationId">
            <el-dropdown class="app-item-menu">
              <i class="iconfont icongengduo1 menu-icon"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="toAppBack(el)">进入</el-dropdown-item>
                <el-dropdown-item @click.native="toAppDetail(el)">应用详情</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <div :class="['app-logo', {'no-logo': !el.applicationLogo}]">
              <img v-if="!!el.applicationLogo" :src="el.applicationLogo" alt="">
            </div>
            <div class="app-info">
              <p class="app-name">{{ el.applicationName }}</p>
              <el-button class="to-buy" type="text" @click="toBuy">去订购&nbsp;<i class="iconfont iconjiantouxiangyou"></i></el-button>
            </div>
            <span class="out-time-tip">已过期</span>
          </div>
          <div class="to-app-center" @click="toAppCenter">
            前往服务市场&nbsp;<i class="iconfont iconjiantouxiangyou"></i>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import fetch from '@/api/app-controls';
const { getAppList } = fetch;
import fetchApi from '@/api/menu-auth.js';
const { getRoleMenu } = fetchApi;
import showMsg from '@/common/js/showmsg.js';
export default {
  name: 'AppList',
  data() {
    return {
      appList: []
    };
  },
  created() {
    this.getAppList();
    this.$emit('showTab', '/app-list');
  },
  methods: {
    getAppList() {
      getAppList().then(res => {
        this.appList = res.result || [];
      });
    },
    /**
     * @description: 进入后台
     * @param {Object} appData
     * @author: 无尘
     */
    toAppBack(appData) {
      const that = this;
      const para = {
        menuId: appData.applicationId,
        appType: 2
      };
      getRoleMenu(para)
        .then(res => {
          // 返回空数组
          if (!res.result || !res.result.length) {
            showMsg.showmsg('该应用您无权限操作，请联系超级管理员！', 'warning');
            return false;
          }
          that.$router.push(`/apps?applicationId=${appData.applicationId}`);
        })
        .catch(function(error) {

        });
    },
    toAppDetail(appData) {
      const { applicationId } = appData || {};
      this.$router.push(`/app-detail?appId=${applicationId}`);
    },
    toBuy() {
      alert('暂无跳转链接');
    },
    toAppCenter() {
      alert('暂无跳转链接');
    }
  }
};
</script>

<style lang="less" scoped>
.m-b-20 {
  margin-bottom: 20px;
}
.app-list {
  padding: 20px 30px;
  min-height: 100%;
  background-color: #fff;
  .page-title {
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 700;
    color: @gray01;
    line-height: 22px;
  }
  .app-item {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 10px;
    width: 185px;
    height: 67px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #E4E7ED;
    user-select: none;
    &:hover {
      box-shadow: 0px 2px 7px 0px rgba(122, 138, 203, 0.2);
      .app-item-menu {
        opacity: 1;
      }
    }
    .app-item-menu {
      position: absolute;
      top: 2px;
      right: 10px;
      z-index: 1;
      padding: 0 2px;
      opacity: 0;
      border-radius: 2px;
      &:hover {
        background: #F0F5FF;
        .menu-icon {
          color: @blue;
        }
      }
      .menu-icon {
        color: #909399;
        cursor: pointer;
      }
    }
    .out-time-tip {
      position: absolute;
      right: 0;
      bottom: 5px;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 49px;
      height: 17px;
      font-size: 12px;
      font-weight: 400;
      color: #F5222D;
      background: rgba(245, 34, 45, 0.09);
      border-radius: 100px 0px 0px 100px;
    }
    .app-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      margin-right: 10px;
      width: 46px;
      height: 46px;
      img {
        max-width: 100%;
        max-height: 100%;
      }
      &.no-logo {
        background: #E4E7ED;
      }
    }
    .app-info {
      width: calc(100% - 50px);
      .app-name {
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        color: @gray01;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .to-buy {
        font-size: 12px;
        line-height: 17px;
      }
    }
  }
  .to-app-center {
    display: flex;
    justify-content: center;
    align-items: center;
    // float: left;
    width: 172px;
    height: 67px;
    font-size: 14px;
    font-weight: 400;
    color: #C0C4CC;
    border-radius: 4px;
    border: 1px dashed #E4E7ED;
    user-select: none;
    cursor: pointer;
    &:hover {
      color: @blue;
      border-color: @blue;
    }
  }
}
</style>
