<template>
    <a-card :title="title" class="entCls">
        <a href="javascript:;" @click="openEntityDetail(info)" slot="extra">详情</a>
        <ul class="chart-tooltip">
            <li v-if="info.entClsName" class="infos">
                <p>实体类名称：
                    <a v-if="GOTO_ENTCLS" href="javascript:;"
                                         @click="openEntityClsDetail(info.entClsID,info.entID)"
                                         slot="extra">{{info.entClsName}}</a>
                    <span v-else>{{info.entClsName}}</span>
                </p>
            </li>
            <li v-if="info.entMemo" class="infos">
                <p>实体描述：<span>{{info.entMemo}}</span></p>
            </li>
            <template v-for="attrs in attrList">
                <li :key='attrs' v-if="attrs.entAttrValueVO&&attrs.entAttrValueVO.attrValue" class="attrs-list">
                    <p>
						<span v-if="attrs.entAttrValueVO&&attrs.entAttrValueVO.attrValue">{{attrs.attrClsName}}：{{attrs.entAttrValueVO
                          ? attrs.entAttrValueVO.attrValue
                          : ''}} </span>
                        <span v-if="attrs.attrUnit"> {{attrs.attrUnit}}</span>
                    </p>
                </li>
            </template>
        </ul>
    </a-card>
</template>

<script>
  import { getEntityInfoByEntityId, getEntityAttrsByEntityId } from '@/api/graph/statisticalMap'
  var isBF = false
  export default {
    name: 'entityDetails',
    props: ['id', 'throwClickDetail'],
    data() {
      return {
        GOTO_ENTCLS: true,

        isBF,
        title: null,
        info: {},
        attrList: []
      }
    },
    created() {
      const vm = this
      getEntityInfoByEntityId(vm.id).then((response) => {
        vm.$set(vm, 'info', response)
        vm.$set(vm, 'title', response.entName)
        if (response.entClsAllowAttrType.indexOf('ELEM') > -1) {
          getEntityAttrsByEntityId(vm.id, 'ELEM').then((_response) => {
            vm.attrList = _response
          })
        }
      })
    },
    mounted() {
      if (this.$const.authorityControl) {
        this.GOTO_ENTCLS = !!this.authMap["GOTO_ENTCLS"];
      }
    },
    methods: {
      openEntityClsDetail(entClsId) {
        const baseUrl = this.$getBaseUrl()
        window.open(`${baseUrl}/mng/class/${entClsId}`)
      },
      openEntityDetail(ent) { // 跳转实体详情
        // 通过传图参数决定是否将 “详情”事件弹出
        if (this.throwClickDetail) {
          this.$emit('clickDetail', this.info)
          return
        }
        let eitityStr = ''
        if (this.isBF) {
          eitityStr = 'entity_v2'
        } else {
          eitityStr = 'entity'
        }
        const baseUrl = this.$getBaseUrl()
        // window.open(baseUrl + '/mng/class/' + entClsID + '/' + eitityStr + '/' + entID + '/')
        // window.open(baseUrl + '/mng/class/' + entClsID + '/entity_v2/' + entID + '/')
        window.open(`${baseUrl}/model/${ent.entClsID}/entity_model/${ent.entID}?page=1&clsName=${ent.entClsName}&isModel=${ent.isModel}`)
      }
    }
  }
</script>

<style>
    .entCls .ant-card-extra {
        /*border-bottom: 1px solid #e8e8e8;*/
        /*margin-top: -2px !important;*/
    }

    .entCls .ant-card-extra {
        padding: 10px 0;
    }
</style>
