<template>
  <div class="ai-info-item" :style="contentStyle">
    <label class="ai-info-item__left" :style="contentLabelStyle">
      <template v-if="$slots.label">
        <slot name="label"/>
      </template>
      <template v-else>{{ label }}</template>
    </label>
    <div class="ai-info-item__right">
      <slot v-if="$scopedSlots.default"/>
      <template v-else-if="!!openType">
        <ai-open-data :type="openType" :openid="value"/>
      </template>
      <template v-else>{{ value || value === 0 ? value : '-' }}</template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AiInfoItem',

  inject: ['AiWrapper'],

  props: {
    label: {
      type: String
    },

    value: {
      type: [String, Number]
    },

    'label-width': {
      type: String
    },

    isLine: {
      type: Boolean,
      default: false
    },
    openType: {default: ""}
  },

  computed: {
    contentStyle() {
      let width = this.AiWrapper.autoWidth

      if (this.isLine) {
        width = '100%'
      }

      return {
        width
      }
    },

    contentLabelStyle() {
      return {
        width: this.labelWidth || this.AiWrapper.autoLableWidth
      }
    },
  },

  methods: {}
}
</script>

<style lang="scss" scoped>
.ai-info-item {
  display: flex;
  line-height: 1.4;
  margin-bottom: 16px;

  label {
    flex-shrink: 0;
    width: 96px;
    margin-right: 40px;
    text-align: right;
    color: #888;
    font-size: 14px;
  }

  .ai-info-item__right {
    flex: 1;
    color: #222;
    font-size: 14px;
    word-break: break-all;
  }
}
</style>
