<!--  -->
<template>
  <div class="cardBox">
    <el-card class="box-card" v-for="item in dataList" :key="item.templateId" @click.native="view(item)">
      <div class="titleBox">
        <div class="title omit">{{item.templateName}}</div>
        <div @click.stop="()=>{}">
          <el-button size="mini" v-if="isPreset">复制</el-button>
          <el-dropdown v-else @command="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="edit">编辑</el-dropdown-item>
              <el-dropdown-item command="del">删除</el-dropdown-item>
              <el-dropdown-item command="copy">复制</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" :icon="item.isCollect==0?'el-icon-star-off':'el-icon-star-on'" @click.stop="collect(item)" :style="{color:item.isCollect==0?'#333':'#ff9326'}">{{ item.isCollect==0?'收藏':'已收藏' }}</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>
    <template   v-if="dataList.length===0">
          <div class="table-empty unified-font">
            <img src="@/assets/img/empty.png">
            <span>暂无数据</span>
          </div>
      </template>
    <div class="box-card-2" v-for="item in 3" :key="item"></div>
  </div>
</template>

<script>
import {TemplateController} from '@/api/gptController.js';
import createTemplate from '../dialog/createTemplate';
import viewTemplate from '../dialog/view';
export default {
  data () {
    return {
    };
  },
  props: ['dataList', 'isPreset', 'refresh'],
  components: {},

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

  mounted () { },

  methods: {
    collect (item) {
      let params = {templateId: item.templateId }
      if (item.isCollect) {
        TemplateController.deleteCollect(this, params).then(res => {
          this.$message.success('取消收藏');
          this.refresh()
        }).catch(e => {
          console.log(e);
        });
      } else {
        TemplateController.addCollect(this, params).then(res => {
          this.$message.success('收藏成功');
          this.refresh()
        }).catch(e => {
          console.log(e);
        });
      }
    },
    edit (item) {
      this.$dialog.show('修改模版', createTemplate, {
        area: ['100%', '100%']
      }, { isEdit: true, item: item }).then(res => {
        this.refresh();
      }).catch(e => { });
    },
    del (item) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {templateId: item.templateId}
        TemplateController.delete(this, params).then(res => {
          this.$message.success('删除成功');
          this.refresh()
        }).catch(e => {
          console.log(e);
        });
      }
      );
    },
    copy (item) {
      this.$copyText(item.templateContent + '\n' + item.negativeTemplateContent).then(() => {
        this.$message.success('复制成功！')
      })
    },
    handleCommand (command, item) {
      if (command === 'edit') {
        this.edit(item)
      } else if (command === 'del') {
        this.del(item)
      } else if (command === 'copy') {
        this.copy(item)
      }
    },
    view (item) {
      this.$dialog.show(item.templateName, viewTemplate, {
        area: ['50%', '50%']
      }, { item: item }).then(res => {
        this.refresh();
      }).catch(e => { });
    }

  }
}

</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%);
  cursor: pointer;
}
.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 {
  width: 100%;
  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;
}
.table-empty{
  width: 100%;
}
</style>
