<!--  -->
<template>
  <div class="cardBox">
    <el-card class="box-card" v-for="item in dataList" :key="item.templateId">
      <div class="titleBox">
        <div class="title omit">{{item.templateName}}</div>
        <div>
          <el-button size="mini" v-if="isPreset">复制</el-button>
          <el-dropdown v-else>
            <span class="el-dropdown-link">
              <i class="el-icon-more el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>编辑</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
              <el-dropdown-item>赋值</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="tagBox">
        <el-tag class="tag" type="info" size="mini" v-for="item2 in getTemplateLabel(item)" :key="item2">{{ item2 }}</el-tag>
      </div>
      <div class="content omit_2">{{ item.templateContent }}</div>

      <el-divider style="margin: 14px 0"></el-divider>
      <div class="buttonBox">
        <div>
          <el-tooltip :content="'收藏量'+item.viewCount" placement="top">
            <el-button type="text" style="color: #333" icon="el-icon-star-off" @click="collect">{{  item.viewCount}}</el-button>
          </el-tooltip>
          <el-tooltip :content="'浏览量'+item.viewCount" placement="top">
            <el-button type="text" style="color: #333" icon="el-icon-view">{{  item.viewCount}}</el-button>
          </el-tooltip>
        </div>
      </div>
    </el-card>
    <div class="box-card-2" v-for="item in 3" :key="item"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  props: ['dataList', 'isPreset'],
  components: {},

  computed: {
    getTemplateLabel () {
      return (item) => {
        return JSON.parse(item.templateLabel)
      }
    }
  },

  mounted () { },

  methods: {}
}

</script>
<style lang="scss" scoped>
@import "@/assets/style/element-variables.scss";
.box-card {
  width: calc(100% / 4 - 20px);
  height: 180px;
  flex-shrink: 0;
  margin-bottom: 20px;
  min-width: 300px;
  background: linear-gradient(to bottom, #e7efff 10%, #fff 50%);
}
.box-card-2 {
  width: calc(100% / 4 - 20px);
  min-width: 300px;
  flex-shrink: 0;
  height: 0;
}
div /deep/.el-divider--horizontal {
  margin: 14px 0 0 0;
}
.title {
  font-size: 16px;
  color: $--color-text-primary;
}
.content {
  margin-bottom: 10px;
  color: $--color-text-secondary;
}

/deep/ .el-card__body {
  height: 100%;
  width: 100%;
  position: relative;
}
.buttonBox {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  right: 20px;
}
.tag:not(:last-child) {
  margin-right: 10px;
}
.titleBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cardBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  align-content: flex-start;
  justify-content: space-between;
}
.tagBox {
  margin-bottom: 10px;
}
</style>
