<template>
  <div class="pa-3">
    <m-card title="基本信息">
      <div class="pa-3">
        <div class="mb-3 d-flex" v-for="item in info" :key="item.label">
          <template v-if="item.format === 'array'">
            <div class="label">{{ item.label }}: </div>
            <div style="flex: 1" class="d-flex flex-wrap">
              <div v-for="_t in item.value" :key="_t.label">
                  <div v-if="_t.label" class="mb-1">{{ _t.label }}</div>
                  <v-chip v-for="i in _t.value" :key="i" color="primary" class="mr-3 mb-3">{{ i }}</v-chip>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="label">{{ item.label }}: </div>
            <div>{{ item.value }}</div>
          </template>
        </div>
      </div>
    </m-card>
  </div>
</template>

<script>
import MCard from '@/components/MCard'
import { api } from '@/api/dataGovernance'
export default {
  name: 'm-info',
  components: {
    MCard
  },
  props: {
    // type: {
    //   type: String,
    //   default: 'structure'
    // },
    toApi: {
      type: Function,
      default: api.getResourceDetails
    },
    format: Function
  },
  data () {
    return {
      info: {}
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      try {
        const { data } = await this.toApi({ id: +this.$route.params.id })
        this.info = this.format(data)
      } catch (error) {
        this.$snackbar.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.label {
  text-align: right;
  padding-right: 20px;
  width: 200px;
  flex-grow: 0;
  flex-shrink: 0;
}
</style>
