<template>
  <div class="centerAuto">
    <div class="centerName">
      <div class="title">已购买的服务</div>
      <div v-for="(item,val) in dataMsg"
           :key="val"
           class="content clearfix"
           @click="goDetail(item.pluginId)">
        <div :class="item.pluginCode"
             class="contentLeft" />
        <div class="contentLeft msgTitle">
          <div class="title1">{{ item.pluginName }}</div>
          <div class="title1 title2">{{ item.pluginDesc }}</div>
        </div>
        <div class="contentRight">
          <span class="state">{{ item.pluginStatus | state(item.pluginStatus) }}</span>
          <span class="iconLeft">
            <svg-icon icon-class="right" />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  plugins
} from '../../api/bayed/bayed';

export default {
  name: 'bayde',
  data () {
    return {
      dataMsg: [],
      // imgTitle: 'cg',
      state: '已激活'
    };
  },
  created () {
    this.getPlugins();
  },
  filters: {
    state (data) {
      let state = '';
      if (data === 'ACTIVATED') {
        state = '已激活';
      } else if (data === 'DISABLED') {
        state = '已禁用';
      } else if (data === 'EXPIRED') {
        state = '已过期';
      } else {
        state = ' ';
      }
      return state;
    }
  },
  methods: {
    getPlugins () {
      plugins({
        status: ''
      }).then((response) => {
        this.dataMsg = response;
      });
    },
    goDetail (data) {
      localStorage.setItem('enterprise-front-pluginId', data);
      this.$router.push({
        name: 'bayedDetail',
      });
    }
  }
};

</script>
<style>
.dv1 {
  height: 100px;
  border: 1px solid red;
  margin-bottom: 20px;
}
.title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
.title::before {
  content: "▍";
  color: #1d6ced;
}
.content {
  padding: 20px;
  border: 1px solid #cccccc;
  margin-top: 20px;
  width: 100%;
  border-radius: 5px;
}
.contentLeft {
  float: left;
}
.contentRight {
  height: 40px;
  line-height: 40px;
  float: right;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.msgTitle {
  margin-left: 10px;
  height: 40px;
  display: inline-block;
}
.title1 {
  font-size: 14px;
  height: 20px;
  line-height: 20px;
}
.title2 {
  color: #999999;
}
.state {
  padding: 2px 5px;
  background-color: #22ac38;
  font-size: 14px;
  color: #ffffff;
  float: none;
}
.iconLeft {
  margin-left: 40px;
  font-size: 30px;
  height: 30px;
  line-height: 30px;
  vertical-align: -4px;
  color: #999999;
  cursor: pointer;
}
.export {
  background: url("../../static/images/bayed/export.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.repairManager {
  background: url("../../static/images/bayed/repairManager.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.ismManager {
  background: url("../../static/images/bayed/ismManager.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.monitorManager {
  background: url("../../static/images/bayed/monitorManager.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.servicer {
  background: url("../../static/images/bayed/servicer.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.cloudDisk {
  background: url("../../static/images/bayed/cloudDisk.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.knowledgebaseInfo {
  background: url("../../static/images/bayed/knowledge.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.oil {
  background: url("../../static/images/bayed/oil.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.material {
  background: url("../../static/images/bayed/material.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.sparepart {
  background: url("../../static/images/bayed/sparepart.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.vesselVisitManager {
  background: url("../../static/images/bayed/vessel.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.statistics {
  background: url("../../static/images/bayed/statistics.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.finance {
  background: url("../../static/images/bayed/cw.png");
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.purchase {
  background: url("../../static/images/bayed/cg.png");
  width: 36px;
  height: 36px;
  background-color: #cccccc;
  border-radius: 4px;
}
.vesselVisitManager {
  background: url("../../static/images/bayed/ship.png");
  width: 36px;
  height: 36px;
  background-color: #cccccc;
  border-radius: 4px;
}
.certificate {
  background: url("../../static/images/bayed/zs.png");
  width: 36px;
  height: 36px;
  background-color: #cccccc;
  border-radius: 4px;
}
.map {
  background: url("../../static/images/bayed/map.png");
  width: 36px;
  height: 36px;
  background-color: #cccccc;
  border-radius: 4px;
}
.notice {
  background: url("../../static/images/bayed/notice.png");
  width: 36px;
  height: 36px;
  background-color: #cccccc;
  border-radius: 4px;
}
.news {
  background: url("../../static/images/bayed/news.png");
  width: 36px;
  height: 36px;
  background-color: #cccccc;
  border-radius: 4px;
}
.crew {
  background: url("../../static/images/bayed/cy.png");
  width: 36px;
  height: 36px;
  background-color: #cccccc;
  border-radius: 4px;
}
.configuration {
  background: url("../../static/images/bayed/system.png");
  width: 36px;
  height: 36px;
  background-color: #cccccc;
  border-radius: 4px;
}
.noonreport {
  background: url("../../static/images/bayed/wb.png");
  width: 36px;
  height: 36px;
  background-color: #cccccc;
  border-radius: 4px;
}
.maintain {
  background: url("../../static/images/bayed/maintain.png");
  width: 36px;
  height: 36px;
  background-color: #cccccc;
  border-radius: 4px;
}
.navigation {
  background: url("../../static/images/bayed/navigation.png");
  width: 36px;
  height: 36px;
  background-color: #cccccc;
  border-radius: 4px;
}
.statistics {
  background: url("../../static/images/bayed/statistical.png");
  width: 36px;
  height: 36px;
  background-color: #cccccc;
  border-radius: 4px;
}
</style>
