<template>
  <m-card title="基本信息" class="mb-3">
    <v-row>
      <v-col class="d-flex" cols="12">
        <ul style="color: #403b3b;font-weight:700;text-align:right;">
          <li>中文名称 ：</li>
          <li>英文名称 ： </li>
          <li>数据类型 ： </li>
          <li>创建时间 ： </li>
          <li>数据标签 ： </li>
          <!-- <li>数据说明 ： </li> -->
          <!-- <li>元数据别名 ： </li> -->
        </ul>
        <ul>
          <li>{{ info.name_zh }}</li>
          <li>{{ info.name_en }}</li>
          <li>{{ info.data_type }}</li>
          <li>{{ info.create_time }}</li>
          <li>
            <v-chip v-for="k in info.tag" :key="k.id" small class="mr-1" color="primary">{{ k.name_zh }}</v-chip>
          </li>
          <!-- <li>{{ info.system == 0 ? '系统级' : '用户级' }}</li> -->
          <!-- <li>
            <v-chip v-for="k in info.metaDataCombinationTags" :key="k.metaDataCombinationTagsId" small class="mr-1" color="success">{{ k.title }}</v-chip>
          </li> -->
          <!-- <li>{{ info.remark ? info.remark : '-' }}</li> -->
          <!-- <li>{{ info.alias && info.alias.length > 0 ? info.alias.join(',') : '-' }}</li> -->
        </ul>
      </v-col>
    </v-row>
  </m-card>
</template>

<script>
// 元数据-基本信息
import MCard from '@/components/MCard'
import { api } from '@/api/dataGovernance'
export default {
  name: 'metaDataInfo',
  components: { MCard },
  data () {
    return {
      info: {}
    }
  },
  created () {
    this.getMetaDataDetailInfo()
  },
  methods: {
    async getMetaDataDetailInfo () {
      try {
        const { data } = await api.getMetadataDetails({ id: +this.$route.params.id })
        if (!data.length) {
          return
        }
        this.info = data[0]
      } catch (error) {
        this.$snackbar.error(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
ul{
  list-style: none;
}
ul li{
  margin: 10px 0;
}
.ladder{
    color:white;
    font-weight: bold;
    width:140px;
    height: 30px;
    line-height: 30px;
    background-color: #7495ca;
    position: relative;
    text-align: center;
  }
.ladder::after {
  content: '';
  height: 0px;
  width: 0px;
  position: absolute;
  right: -30px;
  top: -30px;
  border-top: 30px solid rgba(0, 0, 0, 0);
  border-left: 30px solid rgba(0, 0, 0, 0);
  border-right: 30px solid rgba(0, 0, 0, 0);
  border-bottom: 30px solid #7495ca;
}
</style>
