<template>
  <div class="com_card">
    <div class="com_card_top">
      <img
        :src="cellData.cover"
        class="com_card_img"
      />
      <div class="com_card_name_v">
        <div class="com_card_msg_name">{{ cellData.app_name }}</div>
        <div class="com_card_msg_version">V{{ cellData.version }}</div>
      </div>
    </div>
    <div class="com_card_msg">
      <div class="com_card_msg_tit">
        <img :src="require('@/assets/imgs/icon_shijian.png')" />&nbsp;上线时间
      </div>
      <div class="com_card_msg_num">{{ helper.dateStringTransform(cellData.create_date) }}</div>
    </div>
    <div class="com_card_msg">
      <div class="com_card_msg_tit">
        <img :src="require('@/assets/imgs/icon_huoqu1.png')" />&nbsp;部署次数
      </div>
      <div class="com_card_msg_num1">{{ cellData.deploy_times }}</div>
    </div>
    <div class="com_card_btn">
      <el-button size="medium" class="btn_1" @click="addShop(cellData.app_id)">加入购物车</el-button>
      <el-button size="medium" class="btn_2" @click="goUrl(cellData.app_id)">查看详情</el-button>
    </div>
  </div>
</template>

<script>
import helper from "@/services/helper.js";
export default {
  components: {},
  props: {
    url: { type: String, default: "" },
    cellData: { type: Object, default: {} }
  },
  data: () => ({
    helper: helper
  }),
  computed: {},
  watch: {},
  methods: {
    goUrl(parame) {
      if (this.url != "") {
        this.$router.push(this.url + "/" + parame);
      }
    },
    addShop(id) {}
  },
  mounted() {}
};
</script>

<style scoped>
.com_card {
  width: 290px;
  height: 266px;
  padding: 20px;
  border-radius: 16px;
  background-color: #fff;
  border: solid 2px transparent;
  -webkit-box-shadow: 0px 3px 10px 0px rgba(3, 10, 37, 0.15);
  box-shadow: 0px 3px 10px 0px rgba(3, 10, 37, 0.15);
}
.com_card:hover {
  border: solid 2px #b4c0f5;
}
.com_card_top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 28px;
}
.com_card_name_v {
  width: calc(100% - 80px);
}
.com_card_img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}
.com_card_msg {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.com_card_msg_name {
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
  margin-bottom: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.com_card_msg_version {
  font-size: 14px;
  color: #8890a7;
}
.com_card_msg_tit {
  color: #8890a7;
  font-size: 16px;
}
.com_card_msg_num {
  color: #8890a7;
  font-size: 16px;
}
.com_card_msg_num1 {
  color: #242c43;
  font-size: 16px;
}
.com_card_btn {
  margin-top: 35px;
  display: flex;
  justify-content: space-around;
}
.btn_1 {
  background-color: #d0d5e7;
  border: solid 2px #a5afd6;
  color: #0f2683;
}
.btn_1:hover {
  background-color: #d5daec;
  border: solid 2px #a5afd6;
  color: #0f2683;
}
.btn_2 {
  background-color: #0f2683;
  color: #f8f9fd;
}
.btn_2:hover {
  background-color: #1d3694;
  color: #f8f9fd;
}
</style>