<template>
  <div class="app_card">
    <a class="remove_btn" @click.prevent="deleteAction">
      <i class="el-icon-close"></i>
    </a>
    <div class="app_card-icon">
      <el-avatar shape="square" :size="56" fit="cover" src="data.logo" />
    </div>
    <div class="app_card-info">
      <p
        class="app_card-name text_clip"
        v-text="cardType == 0 ? data.app_name : data.deploy_name"
        @click="intoDetail"
      ></p>
      <p
        class="app_card-version text_clip"
        v-text="cardType == 0 ? data.version : data.app_version"
      ></p>
    </div>
    <div class="app_card-action" v-if="cardType == 0">
      <el-button type="primary" plain @click="deploymentAction">
        一键部署
      </el-button>
    </div>
    <p class="app_card-text" v-if="cardType == 1">
      <span>
        <i class="el-icon-time"></i>
        <span>上线时间：</span>
      </span>
      <span
        class="text_clip"
        v-text="data.created && data.created.substring(0, 10)"
      ></span>
    </p>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {},
    },
    cardType: {
      type: [String, Number],
      default: 0,
    },
    detailsUrl: {
      type: String,
      default: 0,
    },
  },
  methods: {
    deploymentAction() {
      this.$emit("deployment-action", this.data);
    },
    deleteAction() {
      this.$emit("delete-action", this.data);
    },
    intoDetail() {
      this.$router.push(
        `${this.detailsUrl}${
          this.cardType == 0 ? this.data.app_id : this.data.deploy_id
        }`
      );
    },
  },
};
</script>

<style scoped>
.app_card {
  background-image: url(../../assets/imgs/bg_block.png);
  background-size: 100% 100%;
  padding: 33px 25px 34px;
  box-sizing: border-box;
  margin: 0 18px 38px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}
.app_card:hover {
  background-image: url(../../assets/imgs/bg_block_hov.png);
}
.app_card > .remove_btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  color: #8890a7;
  cursor: pointer;
}
.app_card > .app_card-icon {
  margin-right: 18px;
}
.app_card > .app_card-info {
  width: calc(100% - 56px - 20px);
}
.app_card-info > .app_card-name {
  font-size: 18px;
  line-height: 32px;
  color: #0d1847;
  cursor: pointer;
}
.app_card-info > .app_card-version {
  font-size: 14px;
  line-height: 25px;
  color: #8890a7;
  margin-top: 5px;
}
.app_card > .app_card-action {
  width: 100%;
  text-align: center;
  margin: 34px 0 5px;
}
.app_card-action > .el-button {
  width: 100%;
}
.app_card-text {
  width: 100%;
  font-size: 14px;
  color: #8890a7;
  line-height: 25px;
  margin-top: 19px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.app_card-text > span:nth-child(1) {
  flex-shrink: 0;
}
</style>

<style>
.app_card-action > .el-button--primary.is-plain {
  background-color: #d0d5e7;
  border-color: #a5afd6;
  color: #0f2683;
}
</style>
