<!--  -->
<template>
  <el-card class="box-card" @click.native="view(item)">
    <div class="titleBox">
      <div class="title omit">{{ item.kgName}}</div>
      <div class="userName">
        用户名: {{item.kgUserName  }}
      </div>
      <!-- <div>
          <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="particulars">详情</el-dropdown-item>
              <el-dropdown-item command="edit">编辑</el-dropdown-item>
              <el-dropdown-item command="del">命中测试</el-dropdown-item>
              <el-dropdown-item command="del">删除</el-dropdown-item>

            </el-dropdown-menu>
          </el-dropdown>
        </div> -->
    </div>

    <div class="content omit_2">{{ item.kgDescribe }}</div>

    <el-divider style="margin: 14px 0"></el-divider>
    <div class="omit url">
      <!-- <a :href="item.kgUrl" target="_blank">
        <el-tag size="mini">
          链接地址
        </el-tag> </a> -->
      <el-tag size="mini" @click.stop="openurl(item.kgBowerUrl)">
        浏览地址
      </el-tag>
    </div>
    <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="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 style="margin-bottom:10px">
        <el-button plain :size="defaultFormItemSize" @click.stop="testLink(item)">测试连接</el-button>
        <el-button :size="defaultFormItemSize" plain @click.stop="edit(item)">编辑</el-button>
        <el-button :size="defaultFormItemSize" plain @click.stop="del(item)">删除</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import { KnowledgeGraph } from '@/api/gptController.js'
import editOrAdd from '../dialog/editOrAdd'
import viewknowledgeGraph from '../dialog/viewknowledgeGraph'
export default {
  data() {
    return {}
  },
  props: ['item', 'isPreset', 'refresh'],
  components: {},

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

  mounted() {},

  methods: {
    del(item) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = { kgId: item.kgId }
        KnowledgeGraph.delete(this, params)
          .then((res) => {
            this.$message.success('删除成功')
            this.refresh()
          })
          .catch((e) => {
            console.log(e)
          })
      })
    },
    edit(item) {
      this.$dialog
        .show(
          '修改知识图谱',
          editOrAdd,
          {
            area: ['50%', '70%']
          },
          { isEdit: true, item: item }
        )
        .then((res) => {
          this.refresh()
        })
        .catch((e) => {
          this.refresh()
        })
    },
    view(item) {
      this.$dialog
        .show(
          item.kgName,
          viewknowledgeGraph,
          {
            area: ['50%', '50%']
          },
          { item: item }
        )
        .then((res) => {
          this.refresh()
        })
        .catch((e) => {})
    },
    openurl(url) {
      window.open(url, '_blank')
    },
    testLink(item) {
      let params = { kgId: item.kgId }
      KnowledgeGraph.connectionTest(this, params)
        .then((res) => {
          this.$message.success('连接成功')
        })
        .catch((e) => {
          console.log(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;
}

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;
}

.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;
}
.url {
  color: #0092ff;
  margin-top: 20px;
}
.url :nth-child(2) {
  margin-left: 10px;
}
.userName {
  flex-shrink: 0;
}
</style>
