<template>
    <a-card :title="title" class="entCls">
        <a href="javascript:;" @click="openEntClsDetail(info.entClsID)" slot="extra">详情</a>
        <ul class="chart-tooltip">
            <li v-if="info.entClsName" class="infos">
                <p>实体类名称：<span>{{info.entClsName}}</span></p>
            </li>
            <li v-if="info.entClsMemo" class="infos">
                <p>实体类描述：<span>{{info.entClsMemo}}</span></p>
            </li>
            <template v-for="attrs in attrList">
                <li :key="attrs" v-if="attrs.attrClsName" class="attrs-list">
                    <p>
                        <span v-if="attrs.attrClsName">{{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 { getEntityClass } from '@/api/graph/entityClass'

  export default {
    props: ['id'],
    data () {
      return {
        title: null,
        info: {},
        attrList: []
      }
    },
    created () {
      const vm = this
      getEntityClass(vm.id).then((response) => {
        vm.$set(vm, 'info', response)
        vm.$set(vm, 'title', response.entClsName)
        if (response.entClsAllowAttrType.indexOf('ELEM') > -1) {
          api.statisticalMap.getAttrClsListByEntClsId('ELEM', vm.id).then((_response) => {
            vm.attrList = _response
          })
        }
      })
    },
    methods: {
      openEntClsDetail (id) { // 跳转实体类详情
        const baseUrl = this.$getBaseUrl()
        window.open(baseUrl+'/mng/class/' + id + '/')
      }
    }
  }

</script>

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