<template>
  <div class="com_cell">
    <div class="com_cell_up" @click="goUrl(cellData.id)">
      <div class="com_cell_up_img_init">
        <img :src="cellData.cover" class="com_cell_up_img" />
      </div>
      <div class="com_cell_up_right">
        <div class="up_title">
          <div class="up_tit_name_in">
            <span class="up_tit_name" :title="cellData.name">
              {{ cellData.name }}
              <span v-if="cellData.version && cellData.version != ''">
                ( {{ cellData.version }} )</span
              >
            </span>
          </div>
          <span
            v-if="cellData.data_service_type1 == 6"
            class="tags map_service"
          >
            mapService
          </span>
          <span v-if="cellData.openness == 1" class="tags shared">共享</span>
          <span v-else-if="cellData.openness == 2" class="tags restricted">
            受限
          </span>
          <span v-else class="tags sensitive">敏感</span>
        </div>
        <div class="up_rate">
          <el-rate
            v-model="cellData.score"
            disabled
            show-score
            text-color="#ea7d19"
            :colors="['#fac266', '#fac266', '#fac266']"
            score-template="{value}"
            disabled-void-color="#d9dce5"
          ></el-rate>
          <p class="get_num">
            获取次数：
            <span class="com_cell_right_time">
              {{ cellData.apply_num }}
            </span>
            <span class="ci"> 次</span>
          </p>
        </div>
      </div>
      <div class="get_detail">
        <img src="@/assets/imgs/shop_ic_enter.png" />
      </div>
    </div>
    <div class="com_cell_down">
      <p class="com_detail">
        {{ cellData.descript }}
      </p>
      <el-row :gutter="16">
        <el-col
          :span="14"
          class="com_other1"
          v-if="cellData.data_service_type1 != 36"
          :title="`服务类型：${cellData.data_service_type1_name}  ${cellData.data_service_type2_name}  ${cellData.data_service_type3_name}`"
        >
          <span class="name_title">服务类型：</span>
          {{ cellData.data_service_type1_name }}
          &nbsp;&nbsp;{{ cellData.data_service_type2_name }} &nbsp;&nbsp;{{
            cellData.data_service_type3_name
          }}
        </el-col>
        <el-col
          :span="10"
          class="com_other1"
          :title="`${cellData.data_service_type1 != 36 ? '服务领域：' : '产品领域：'}${cellData.sectors_name}`"
        >
          <span class="name_title">{{ cellData.data_service_type1 != 36 ? '服务领域：' : '产品领域：' }}</span>
          {{ cellData.sectors_name }}
        </el-col>
        <el-col
          :span="14"
          class="com_other"
          :title="`更新时间：${helper.dateStringTransform(
            cellData.update_date
          )}`"
        >
          <span class="name_title">更新时间：</span>
          {{ helper.dateStringTransform(cellData.update_date) }}
        </el-col>
        <el-col
          :span="24"
          v-if="urlFilter == '36'"
          class="com_other1"
          :title="`${getTags(cellData.tags)}`"
        >
          <span
            class="card_tag"
            v-for="(item, tag_index) in cellData.tags"
            :key="`tg_${tag_index}`"
            >{{ item }}</span
          >
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import helper from "@/services/helper.js";
// if you meet date which like 2020-06-05T00:00:00+08:00, use helper.dateStringTransform()
export default {
  components: {},
  props: {
    url: { type: String, default: "" },
    cellData: { type: Object, default: {} },
    urlFilter: { type: String, default: "" },
  },
  data: () => ({ helper: helper }),
  computed: {
    
  },
  watch: {},
  methods: {
    goUrl(parame) {
      if (this.url != "") {
        this.$router.push(this.url + "/" + parame);
      }
    },
    getTags(arr) {
      if (arr && arr.length != 0) {
        let str = arr.join(" / ");
        return str;
      } else {
        return "";
      }
    },
  },
  mounted() {},
};
</script>

<style scoped>
.com_cell {
  width: 496px;
  /* height: 208px; */
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.04);
  border-radius: 8px 8px 8px 8px;
  border: solid 1px #e3e4ef;
  margin-bottom: 24px;
}
.com_cell_up {
  height: 88px;
  background-color: #f9fafc;
  border-radius: 8px 8px 0px 0px;
  padding: 16px;
  display: flex;
  position: relative;
  cursor: pointer;
}
.com_cell_up_img_init {
  width: 56px;
  height: 56px;
  margin-right: 16px;
  flex: 0 0 auto;
}
.com_cell_up_img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.com_cell_up_right {
  flex: 1 1 auto;
}
.up_title {
  font-size: 16px;
  margin-top: 4px;
  display: flex;
  align-items: center;
}
.up_tit_name_in {
  max-width: calc(100% - 150px);
  display: inline-block;
}
.up_tit_name {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.up_tit_name:hover {
  /* text-decoration: underline; */
  color: #515fe7;
}
.up_rate {
  margin-top: 12px;
  display: flex;
}
.get_num {
  margin-left: 40px;
  font-size: 14px;
  color: #58617a;
}
.com_cell_right_time {
  color: #ea7d19;
}
.ci {
  color: #242c43;
}
.get_detail {
  position: absolute;
  top: 26px;
  right: 16px;
}
.tags {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  border-radius: 4px;
  position: relative;
  top: 0px;
}
.map_service {
  background-color: #626de9;
  border: solid 1px #626de9;
  color: #fff;
}
.shared {
  background-color: #e7fdfc;
  border: solid 1px #8bd6d0;
  color: #25bdb1;
}
.restricted {
  background-color: #fffee8;
  border: solid 1px #e4c884;
  color: #ef9433;
}
.sensitive {
  background-color: #ffefef;
  border: solid 1px #d7a4a9;
  color: #e15260;
}
.com_cell_down {
  padding: 12px 16px 6px 16px;
}
.com_detail {
  color: #8890a7;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 42px;
  margin-bottom: 5px;
}
.com_other {
  color: #58617a;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.com_other1 {
  color: #58617a;
  margin-bottom: 9px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.name_title {
  color: #8890a7;
}
.card_tags {
  display: inline-block;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.card_tag {
  display: inline-block;
  color: #515fe7;
  margin-right: 16px;
  border: solid 1px #b4c0f5;
  background-color: #eeeffd;
	border-radius: 4px;
  padding: 2px 6px;
}
</style>
<style>
.com_cell .el-rate__text {
  margin-left: 4px;
  position: relative;
  top: 1px;
}
</style>