<!-- 实体-实体类 -->
<template>
  <div class="flex1 flex-col ant-card-dis">
    <a-spin :spinning="spinning">
      <div class="container-header">
        <a-row>
          <a-breadcrumb class="miao-shu">
            <a-breadcrumb-item>
              <span>来源： <span v-if="!breadcrumbList || breadcrumbList.length === 0">/</span> </span>
            </a-breadcrumb-item>
            <a-breadcrumb-item
              v-for="item in breadcrumbList"
              :key="item.entClsID"
            >
              {{ item.entClsName }}
            </a-breadcrumb-item>
          </a-breadcrumb>
        </a-row>
        <a-row :gutter="10">
          <a-col :span="2" class="shiti-img">
            <div v-if="entityClassTreeNode.entClsIcon">
              <img :src="entityClassTreeNode.entClsIcon" alt="">
            </div>
            <div v-else><img src="../../../assets/kong-01.png" alt=""></div>
          </a-col>
          <a-col :span="22">
            <h2 style="margin-top: 0em">
              <b>{{ entityClassTreeNode.entClsName }}</b>
            </h2>
            <span class="miao-shu">
              {{
                entityClassTreeNode.entClsMemo
                  ? entityClassTreeNode.entClsMemo
                  : "无相关描述"
              }}</span>
          </a-col>
        </a-row>
      </div>
      <div class="flex1 flex-col">
        <a-divider />
        <div style="margin-bottom:20px">
          <button
            v-if="entityClassId !== 'uknow' && ADD_ENT_MODE_BTN"
            style="margin-right: 5px;"
            class="ant-btn ant-btn-primary"
            @click="handleAddEntity(true)"
          >
            <a-icon type="plus" />
            新增模板
          </button>
          <button
            v-if="entityClassId !== 'uknow'"
            class="ant-btn ant-btn-primary"
            style="margin-right: 5px;"
            @click="handleAddEntity"
          >
            <a-icon type="plus" />
            新增{{ TEXT.ENT }}
          </button>
          <button
            v-if="entityClassId !== 'uknow' && GOTO_ENTCLS"
            class="ant-btn ant-btn-default"
            @click="goEntCls"
          >
            <a-icon type="profile" />
            {{ TEXT.ENT_CLS }}信息
          </button>
        </div>
        <a-tabs type="card" default-active-key="entity" @change="tabChange">
          <a-tab-pane v-if="ENT_MODE_LIST" key="model">
            <span slot="tab"> <a-icon type="home" /> 模板 </span>
          </a-tab-pane>
          <a-tab-pane key="entity">
            <span slot="tab"> <a-icon type="home" /> {{ TEXT.ENT }} </span>
          </a-tab-pane>
        </a-tabs>
        <a-row>
          <a-select v-model="searchType" style="width: 120px">
            <a-select-option value="name">
              名称
            </a-select-option>
            <a-select-option value="id">
              大ID
            </a-select-option>
          </a-select>
          <a-input
            v-model="searchEntStr"
            style="width: 300px;margin-left: 5px"
            @keyup.enter="searchEntByName"
          />
          <a-button
            type="primary"
            style="margin-left: 5px"
            @click="searchEntByName"
          >搜索
          </a-button>
        </a-row>
        <a-row :gutter="16" style="min-height: 500px;">
          <a-col
            v-for="(item, $index) in entList"
            :key="item.entID"
            class="ant-card-body-flex no-arrow ent-content-card"
            :pagination="pagination"
            :span="8"
            @click.stop="goDetail(item.entID, item)"
          >
            <a-popover
              :title="`图谱预览：${item.entName}`"
              :placement="'right'"
              :destroy-tooltip-on-hide="true"
              :get-popup-container="getPopupContainer"
              @visibleChange="drawChart($event, item.entID, isModel)"
            >
              <template
                slot="content"
                style="min-width: 400px; min-height: 150px"
              >
                <chart-comp
                  :ref="`chart_${item.entID}`"
                  style="background: #f1f1f1;"
                  :min-wid="400"
                  :min-hie="200"
                  :is-show-context-menu="false"
                  :is-show-chart="true"
                  :is-road="false"
                />
              </template>
              <a-card hoverable>
                <a-card-meta>
                  <template slot="title">
                    <span :style="{ color: !item.entName ? '#f5222d' : '' }">
                      {{ item.entName ? item.entName : "无名称" }}
                    </span>
                  </template>
                  <!-- <template slot="description">
                                      <span>
                                        {{ item.entMemo }}
                                      </span>
                                    </template> -->
                  <a-avatar
                    slot="avatar"
                    :src="item.entIcon ? item.entIcon : '../../../assets/kong-01.png'"
                  />
                </a-card-meta>
                <div class="card-flex1">
                  {{ $moment(item.lastTime).format("YYYY-MM-DD") }}
                </div>
                <template slot="actions" class="ant-card-actions">
                  <div class="ent-link1">查看/编辑</div>
                  <!-- <div class="ent-link1" @click="goSta(item.entID)">图形化</div> -->
                  <div class="ent-link1" @click.stop="createByTemplate(item)">
                    参照创建
                  </div>
                  <div
                    v-if="!isModel"
                    class="ent-link1"
                    @click.stop="showQRCode(item)"
                  >
                    <a-popover
                      v-if="$const.version === 'bf'"
                      v-model="item.QRCodeCard"
                      :title="`二维码：${item.entName}`"
                      placement="top"
                      :destroy-tooltip-on-hide="true"
                      trigger="click"
                      :get-popup-container="getPopupContainer"
                      @visibleChange="showHideQRCode(item, $event)"
                    >
                      <template
                        slot="content"
                        style="min-width: 200px; min-height: 200px"
                      >
                        <div :id="'qrcode' + item.entID" />
                      </template>
                      二维码
                    </a-popover>
                  </div>
                  <div
                    class="ent-link2"
                    @click.stop="handleDelEntity(item.entID)"
                  >
                    删除
                  </div>
                </template>
              </a-card>
            </a-popover>
          </a-col>
        </a-row>
        <a-row style="margin-top: 30px;">
          <a-col>
            <a-pagination
              v-model="pagination.current"
              :total="pagination.total"
              :page-size="pagination.pageSize"
              @change="onChangePagination"
            />
          </a-col>
        </a-row>
      </div>
    </a-spin>
  </div>
</template>

<script>
import chartComp from '@/components/common/chart'

const api = require('@/api/index')
const TEXT = window.USER_ROLE_LANGUAGE[window.USER_ROLE]
export default {
  name: 'EntityTemplateList',
  components: {
    chartComp
  },
  data() {
    return {
      // 功能权限控制
      GOTO_ENTCLS: true,
      ADD_ENT_MODE_BTN: true,
      ENT_MODE_LIST: true,

      TEXT,
      QRCodeCard: false,
      entityClassId: this.$route.params.classId === 'uknow' ? '' : this.$route.params.classId,
      entClsName: this.$route.query.entClsName,
      editable: true,
      searchType: 'name',
      searchValue: '',
      searchEntStr: '',
      pagination: {
        pageSize: 9,
        total: 100,
        current: this.$route.query.page ? parseInt(this.$route.query.page) : 1
      },
      entList: [],
      isModel: false,
      breadcrumbList: [],
      entityClassTreeNode: {
        // 选中的实体类节点信息
        entClsName: '',
        entClsID: '',
        entClsIcon: ''
      },
      spinning: false
    }
  },
  created() {
    this.init()
  },
  mounted() {
    if (this.$const.authorityControl) {
      this.GOTO_ENTCLS = !!this.authMap['GOTO_ENTCLS']
      this.ADD_ENT_MODE_BTN = !!this.authMap['ADD_ENT_MODE_BTN']
      this.ENT_MODE_LIST = !!this.authMap['ENT_MODE_LIST']
    }

    const classId = this.entityClassId === 'uknow' ? '' : this.entityClassId
    this.clsName = this.$route.query.clsName || this.$route.query.searchValue
    this.searchValue = this.$route.query.searchValue || ''
    this.spinning = true
    this.searchEnt(
      this.searchValue,
      classId,
      this.pagination.current,
      this.pagination.pageSize,
      this.isModel
    )
  },
  methods: {
    //
    getPopupContainer(trigger) {
      return trigger.parentElement
    },
    showQRCode(ent) {
      if (!ent.qrcode) {
        ent.QRCodeCard = true
        const qrcode = new QRCode(document.getElementById('qrcode' + ent.entID), {
          width: 200,
          height: 200
        })
        const code = `实体类名称：${ent.entClsName}||实体名称：${ent.entName}||实体ID：${ent.entID}`
        ent.qrcode = qrcode
        qrcode.makeCode(code)
      }
    },
    showHideQRCode(ent, value) {
      if (!value) {
        ent.qrcode = undefined
      }
    },
    drawChart(isShow, entId, isModel) {
      if (isShow) {
        api.entity.getRelationEnt(entId, 2, '', 'BOTH', isModel).then((res) => {
          this.$refs[`chart_${entId}`][0].drawChart(
            entId,
            res.entListVO,
            res.relListVO
          )
        })
      }
    },
    goEntCls() {
      this.$router.push(`/mng/class/${this.entityClassId}`)
    },
    init() {
      const classId = this.$route.params.classId
      const _vm = this
      if (classId !== 'uknow') {
        api.entityClass.getEntityClass(classId).then((data) => {
          _vm.entityClassTreeNode.entClsName = data.entClsName
          _vm.entityClassTreeNode.entClsID = data.entClsID
          _vm.entityClassTreeNode.entClsMemo = data.entClsMemo
          _vm.entityClassTreeNode.entClsIcon = data.entClsIcon
          _vm.breadcrumbList = data.parents
        })
      }
    },
    goDetail(entId, ent) {
      this.$router.push({
        name: 'model_edit',
        params: { classId: ent.entClsID, entityId: entId },
        query: {
          page: this.pagination.current,
          clsName: ent.entClsName,
          isModel: this.isModel,
          searchValue: this.searchValue ? this.searchValue : undefined
        }
      })
    },
    searchEntByName() {
      this.$trigger('entityClass:clearSearch')
      this.pagination.current = 1
      this.spinning = true
      this.searchEnt(
        this.searchEntStr,
        this.entityClassId,
        this.pagination.current,
        this.pagination.pageSize,
        this.isModel,
        this.searchType
      )
    },
    // 搜索实体
    searchEnt(searchStr, entClsIDs, current, pageSize, isModel, searchType) {
      api.search
        .entSearch(searchStr, entClsIDs, current, pageSize, isModel, true, searchType)
        .then((data) => {
          this.entList = data.entList
          this.pagination.total = data.count
          this.spinning = false
        })
    },
    handleRemoveClick(e) {
      this.$open(
        'entityDeleteMulModal',
        {
          paramsId: this.entityClassId, // 实体类id
          pagelist: this.entList
        },
        function(data) {
          if (data) {
            const classId =
                this.entityClassId === 'uknow' ? '' : this.entityClassId
            this.spinning = true
            this.searchEnt(
              this.searchEnt,
              classId,
              this.pagination.current,
              this.pagination.pageSize,
              this.isModel
            )
            this.$message.success('删除成功')
          }
        }
      )
    },
    /**
       * 删除实体
       * @param id
       */
    handleDelEntity(id) {
      const vm = this
      this.$confirm({
        title: '你确定要删除吗?',
        onOk() {
          api.entity.delEntityById(id, vm.isModel).then((res) => {
            const classId =
                vm.entityClassId === 'uknow' ? '' : vm.entityClassId
            vm.spinning = true
            vm.searchEnt(
              vm.entClsName,
              classId,
              vm.pagination.current,
              vm.pagination.pageSize,
              vm.isModel
            )
            vm.$trigger('entity:nodeDestroyed', id)
            vm.$message.success(TEXT.ENT + '删除成功')
          })
        },
        onCancel() {
          console.log('取消删除')
        }
      })
    },
    /**
       * 添加实体
       */
    handleAddEntity(bool) {
      this.$open(
        'addEntityModal',
        {
          title: bool === true ? '新增模板' : '新增' + TEXT.ENT,
          paramsId: this.entityClassId, // 实体类id
          isModel: bool === true,
          className: this.clsName
        },
        function(data) {
          if (data) {
            this.isModel = bool === true
            this.goDetail(data, {
              entClsName: this.clsName,
              entClsID: this.entityClassId
            })
          }
        }
      )
    },
    // 参照创建按钮
    handleAddModelEntity() {
      this.$open(
        'addTemplateEntityModal',
        {
          title: this.isModel ? '新增模板' : '新增' + TEXT.ENT,
          paramsId: this.entityClassId, // 实体类id
          isModel: this.isModel,
          className: this.clsName
        },
        function(data) {
          if (data) {
            this.goDetail(data, {
              entClsName: this.clsName,
              entClsID: this.entityClassId
            })
          }
        }
      )
    },
    onChangePagination(current) {
      const searchValue = this.searchValue || this.searchEntStr
      this.spinning = true
      this.searchEnt(
        searchValue,
        this.entityClassId,
        current,
        this.pagination.pageSize,
        this.isModel
      )
    },
    // tab标签切换的回调
    tabChange(key) {
      this.isModel = key === 'model'
      const classId = this.entityClassId === 'uknow' ? '' : this.entityClassId
      this.spinning = true
      this.searchEnt(
        this.entClsName,
        classId,
        this.pagination.current,
        this.pagination.pageSize,
        this.isModel
      )
    },
    // 模板参照创建
    createByTemplate(item) {
      this.$open(
        'addTemplateEntityModal',
        {
          title: '创建模板',
          paramsId: this.entityClassId, // 实体类id
          isModel: this.isModel,
          entityId: item.entID,
          entityName: item.entName,
          className: this.clsName,
          startIsModel: false
        },
        function(data) {
          if (data) {
            this.spinning = true
            this.searchEnt(
              '',
              this.entityClassId,
              this.pagination.current,
              this.pagination.pageSize,
              this.isModel
            )
          }
        }
      )
    }
  }
}
</script>
<style lang="less">
    .ant-card-body-flex .ant-card-bordered .ant-card-body {
        display: flex !important;
        box-shadow: none;
    }

    .ant-card-dis .ant-card-meta-detail {
        width: 190px;
    }

    .ant-card-body-flex .ant-card-meta-title,
    .ant-card-meta-description {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

<style scoped>
    .ant-avatar {
        border-radius: 4px;
    }

    .panel-header {
        display: block;
    }

    .ant-card {
        margin-top: 20px;
        border: 1px solid #ddd;
        border-radius: 6px;
        cursor: pointer;
    }

    .ant-card:hover {
        border: 1px solid #0aa679;
    }

    .ant-card:hover .ant-card-body {
        color: #0aa679;
    }

    .ant-btn-add {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -21px;
        height: 32px;
    }

    .ent-link1,
    .ent-link2 {
        width: 100%;
        text-align: center;
    }

    .ent-link1 {
        color: #0aa679;
    }

    .ent-link2 {
        color: #999;
    }

    .ent-link1:hover {
        color: #27b386;
    }

    .ent-link2:hover {
        color: #0aa679;
    }

    .ant-card-body {
        background: #eee;
    }

    .ant-card-actions > li > span {
        display: block;
        width: 100%;
        height: 100%;
    }

    .ant-avatar {
        width: 40px;
        height: 40px;
        background: url(../../../assets/kong-01.png) no-repeat;
        background-size: 40px 40px;
    }

    .card-flex1 {
        flex: 1;
        text-align: right;
    }

</style>
