<template>
  <div class="com_cell">
    <div class="com_cell_img_box">
      <img :src="cellData.cover" class="com_cell_img" />
    </div>
    <div class="com_cell_message">
      <div class="com_cell_msg_title">
        {{ cellData.name }}
        <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="message_block">
        <div class="com_cell_item">
          <div class="com_cell_data_detail">
            <span class="detail_span">{{ cellData.descript }}</span>
          </div>
        </div>
        <div class="com_cell_item">
          <span class="com_cell_item_title">服务类型：</span>
          <span
            class="com_cell_data"
          >{{ cellData.data_service_type1_name }}&nbsp;&nbsp;{{ cellData.data_service_type2_name }}&nbsp;&nbsp;{{ cellData.data_service_type3_name }}</span>
          <span class="com_cell_item_title left_blank">数据领域：</span>
          <span class="com_cell_data">{{ cellData.sectors_name }}</span>
        </div>
        <div class="com_cell_item">
          <span class="com_cell_item_title">更新时间：</span>
          <span class="com_cell_data">{{ helper.dateStringTransform(cellData.update_date) }}</span>
        </div>
      </div>
    </div>
    <div class="com_cell_right">
      <el-rate
        v-model="cellData.score"
        disabled
        show-score
        text-color="#58617a"
        score-template="{value}"
        :colors="['#fac266', '#fac266', '#fac266']"
        disabled-void-color="#d9dce5"
      ></el-rate>
      <div class="com_cell_right_text">
        <span class="com_cell_right_time_tit">本月获取次数：</span>
        <span class="com_cell_right_time">{{ cellData.apply_num }}次</span>
      </div>
      <el-button class="com_cell_right_btn" @click="goUrl(cellData.id)">查看详情</el-button>
    </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: {} },
  },
  data: () => ({ helper: helper }),
  computed: {},
  watch: {},
  methods: {
    goUrl(parame) {
      if (this.url != "") {
        this.$router.push(this.url + "/" + parame);
      }
    },
  },
  mounted() {},
};
</script>

<style scoped>
.com_cell {
  display: flex;
  justify-content: space-between;
  padding: 20px 10px;
  border-bottom: 2px #f4f7fc solid;
}
.com_cell_img_box {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  border: 4px #f4f7fc solid;
}
.com_cell_img {
  width: 100%;
  height: 100%;
}
.com_cell_message {
  padding-left: 20px;
  width: calc(100% - 500px);
}
.com_cell_msg_title {
  color: #0d1847;
  font-size: 18px;
  line-height: 30px;
  font-weight: 700;
  margin-bottom: 10px;
}
.com_cell_item {
  font-size: 14px;
  line-height: 28px;
  margin-top: 1px;
  color: #8890a7;
  display: flex;
  align-self: start;
}
.com_cell_item_title {
  /* width: 80px; */
}
.com_cell_data {
  display: inline-block;
  color: #242c43;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.com_cell_data_detail {
  color: #242c43;
  height: 78px;
  font-size: 16px;
}
.detail_span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.com_cell_right {
  width: 300px;
  padding: 25px 0 0 50px;
}
.com_cell_right_text {
  font-size: 16px;
  margin-top: 25px;
}
.com_cell_right_time_tit {
  color: #8890a7;
}
.com_cell_right_time {
  color: #242c43;
}
.com_cell_right_btn {
  background-color: #0f2683;
  color: #f8f9fd;
  width: 220px;
  height: 40px;
  border-radius: 20px;
  margin-top: 25px;
}
.tags {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  border-radius: 4px;
  position: relative;
  top: -1px;
}
.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;
}
.message_block {
  width: 80%;
  padding: 10px 20px;
  background-color: #f8f9fd;
  border-radius: 10px;
}
.left_blank {
  margin-left: 20px;
}
</style>
<style>
.com_cell_right .el-rate__text {
  display: inline-block;
  margin-left: 10px;
  font-size: 32px;
  font-weight: 700;
}
.com_cell_right .el-rate__icon {
  font-size: 28px;
}
</style>
