<template>
    <a-card :title="title">
        <!--<a href="javascript:;" @click="openEntityDetail(info.entClsID,info.entID)" slot="extra">详情</a>-->
        <ul v-if="entCls">
            <template v-for="(attr,k) in attrList" >
                <li class="attrs-list">
                    <p>
                        属性：<span> {{attr.attrClsName}}</span>
                    </p>
                </li>
            </template>
        </ul>
        <ul v-else>
            <li v-if="info.startEnt" class="infos">
                <p>起点：<span>{{info.startEnt ? info.startEnt.entName : ''}}</span></p>
            </li>
            <li v-if="info.endEnt" class="infos">
                <p>终点：<span>{{info.endEnt ? info.endEnt.entName : ''}}</span></p>
            </li>
            <template v-for="attrs in attrList">
                <li :key="attrs" v-if="attrs.attrValueVO&&attrs.attrValueVO.attrValue" class="attrs-list">
                    <p>
                        <span v-if="attrs.attrValueVO&&attrs.attrValueVO.attrValue">{{attrs.attrClsName}}：{{attrs.attrValueVO
                          ? attrs.attrValueVO.attrValue
                          : ''}} </span>
                        <span v-if="attrs.attrUnit"> {{attrs.attrUnit}}</span>
                    </p>
                </li>
            </template>
        </ul>
    </a-card>
</template>

<script>
  import { getRelationAttr } from '@/api/graph/relationEditor'
  import { getRelationInfoByRelationId, getRelationAttrsByRelationId } from '@/api/graph/statisticalMap'

  export default {
    name: 'linkDetails',
    props: ['id','entCls'],
    data () {
      return {
        title: null,
        info: {},
        attrList: []
      }
    },
    created () {
      const vm = this
      if(vm.entCls){ // 实体类可视化点击关系
        vm.title = vm.entCls
        getRelationAttr(vm.id).then(data => {
          vm.attrList = data
        })
      }else{ // 实体可视化点击关系
        Promise.all([
          getRelationInfoByRelationId(vm.id),
          getRelationAttrsByRelationId(vm.id)]).then((response) => {
          vm.title = response[0].relName
          vm.info = response[0]
          vm.attrList = response[1]
        })
      }

    },
    methods : {
      openEntityDetail(entClsID,entID) {
        // window.open('/#/mng/class/' + entClsID + '/entity/' + entID + '/relation')
      }
    }
  }
</script>

<style></style>
