<!--  -->
<template>
  <div class="cardBox">
    <el-card class="box-card" v-for="item in dataList" :key="item.templateId" @click.native="particulars(item)" style="cursor: pointer;">
 
      <div class="titleBox">
        <div>
          <div class="title omit">{{item.modelName}}</div>
        <div class="title-2">大语言模型</div>
        </div>
        <div>
          <!-- <el-dropdown @command.stop="handleCommand($event,item)">
            <span class="el-dropdown-link">
              <i class="el-icon-more el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item command="particulars">详情</el-dropdown-item>
              <el-dropdown-item command="sft">sft</el-dropdown-item>
              <el-dropdown-item command="assess">评估</el-dropdown-item>
              <el-dropdown-item command="deploy">部署</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </div>
      </div>
      <el-divider></el-divider>
      <div class="content ">{{ item.modelDescribe }}</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', 'refresh'],
  components: {},

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

  mounted () { },

  methods: {

    handleCommand (command, item) {
      if (command === 'particulars') {
        this.$emit('particulars', item)
      } else if (command === 'sft') {
        this.$emit('sft', item)
      } else if (command === 'assess') {
        this.$emit('assess', item)
      } else if (command === 'deploy') {
        this.$emit('deploy', item)
      }
    },
    particulars (item) {
      this.$emit('particulars', item)
    }
  }

}

</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 14px 0;
}
.title {
  font-size: 16px;
  color: $--color-text-primary;
}
.title-2 {
  font-size: 12px;
  color: $--color-text-primary;
  margin-top: 5px;
}
.content {
  margin-bottom: 10px;
  color: $--color-text-secondary;
  word-wrap: break-word;
  overflow: auto;
  max-height: calc(100% - 67px );
}

/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;
}
/deep/ .el-icon-star-on {
  font-size: 14px !important;
overflow: hidden;
position: relative;
top: 4px;
left: 3px;
}
/deep/ .el-icon-star-on:before{
  zoom: 1.3;
}
/deep/ .el-icon-star-off{
  font-size: 14px !important;
}
</style>
