<template>
  <div class="com_card">
    <div class="com_card_top">
      <img :src="cellData.logo" 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) {
      let query = {
        service_id: 0, // 0表示不是服务
        app_id: parseFloat(id),
        spec_id: 1,
        duration: 1,
        duration_method: 1,
        is_subscribe: 0, // 是否订阅
      };
      this.$api.serviceShop
        .addShoppingCart(query)
        .then(({ data }) => {
          if (data.success == 1) {
            this.$message({
              message: data.errMsg,
              type: "success",
            });
            this.$store.commit("setMenuCartState");
          } else {
            this.$message({
              message: data.errMsg,
              type: "warning",
            });
          }
        })
        .catch((error) => {
          this.$message({
            message: `添加购物车失败`,
            type: "warning",
          });
        });
    },
  },
  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;
  border: 3px solid #f6f7fb;
}
.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: 14px;
  position: relative;
  top: 2px;
}
.com_card_msg_num1 {
  color: #242c43;
  font-size: 16px;
  font-weight: bold;
}
.com_card_btn {
  margin-top: 35px;
  display: flex;
  justify-content: space-between;
}
.btn_1 {
  width: 110px;
  padding: 10px;
  background-color: #d0d5e7;
  border: solid 2px #a5afd6;
  color: #0f2683;
}
.btn_1:hover {
  background-color: #d5daec;
  border: solid 2px #a5afd6;
  color: #0f2683;
}
.btn_2 {
  width: 110px;
  padding: 10px;
  background-color: #0f2683;
  color: #f8f9fd;
}
.btn_2:hover {
  background-color: #1d3694;
  color: #f8f9fd;
}
</style>
