<template>
  <div class="centerAuto">
    <div class="centerName">
      <div class="title">模块详情</div>
      <div class="operation">
        <el-button class="button" @click="back">返回</el-button>
      </div>
      <div class="centerTitle clearfix">
        <div class="centerTitlename imgTitle">
          <div :class="tableData.pluginCode"></div>
        </div>
        <div class="centerTitlename centeRight">
          <div class="top">
            <span class="name1 name">{{ tableData.pluginName }}</span>
            <span class="versions name">v1.0.0</span>
            <span
              class="state1"
            >● {{ tableData.pluginStatus |state(tableData.pluginStatus) }}
              | 到期日期： {{ tableData.pluginExpiredDate | endDate(tableData.pluginExpiredDate) }}</span>
          </div>
          <div class="bottom">{{ tableData.pluginDesc }}</div>
        </div>
      </div>
      <div class="title radio">功能一览</div>
      <div class="radio">
        <el-table :data="tableData.activatedServices" style="width: 100%">
          <el-table-column prop="roleId" label="序号" width="50" align="center">
            <template slot-scope="scope">{{ scope.$index+1 }}</template>
          </el-table-column>
          <el-table-column align="center" label="功能">
            <template slot-scope="scope">{{ scope.row.serviceName|empty(scope.row.serviceName) }}</template>
          </el-table-column>
          <el-table-column align="center" prop="serviceDesc" label="功能描述">
            <template slot-scope="scope">{{ scope.row.serviceDesc|empty(scope.row.serviceDesc) }}</template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import {
  pluginDetail
} from '../../api/bayed/bayed';

export default {
  name: 'baydeDetail',
  data() {
    return {
      imgTitle: 'cg',
      pluginId: '',
      state: '已开通',
      endDate: '2019-01-01',
      tableData: {
        activatedServices: []
      }
    };
  },
  created() {
    this.pluginId = localStorage.getItem('enterprise-front-pluginId');
    this.getPluginsDetail();
  },
  filters: {
    empty(value) {
      let empt = '';
      if (!value) {
        empt = '--';
      } else {
        empt = value;
      }
      return empt;
    },
    state(data) {
      let state = '';
      if (data === 'ACTIVATED') {
        state = '已激活';
      } else if (data === 'DISABLED') {
        state = '已禁用';
      } else if (data === 'EXPIRED') {
        state = '已过期';
      } else {
        state = ' ';
      }
      return state;
    },
    endDate(data) {
      const date = String(data).split(' ');
      return date[0];
    }
  },
  methods: {
    getPluginsDetail() {
      pluginDetail({
        pluginId: this.pluginId
      }).then((response) => {
        this.tableData = response;
      });
    },
    back() {
      this.$router.back();
    }
  }
};

</script>
<style>
.title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
.title::before {
  content: "▍";
  color: #1d6ced;
}
.operation {
  padding: 10px;
  margin-top: 20px;
  width: 100%;
  height: 50px;
  background-color: #f6f6f6;
}
.button {
  position: absolute;
  right: 30px;
  padding: 8px 20px;
  margin: 0;
}
.centerTitle {
  margin-top: 20px;
}
.centerTitlename {
  display: inline-block;
  height: 80px;
}
.imgTitle {
  padding: 20px;
  width: 80px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}
.top {
  height: 40px;
}
.bottom {
  line-height: 20px;
  height: 40px;
  color: #999999;
  overflow: hidden;
}
.centeRight {
  width: 1060px;
  position: absolute;
  margin-left: 20px;
}
.name {
  display: inline-block;
}
.name1 {
  font-size: 16px;
  font-weight: bold;
}
.versions {
  margin-left: 10px;
  color: #999999;
  font-size: 12px;
}
.state1 {
  float: right !important;
  color: #22ac38 !important;
}
.radio {
  margin-top: 20px;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
</style>
