<script>
export default {
  name: "SuperDescriptions",
  props: {
    value: {
      type: [Object],
      require: true,
    },
    dict: {
      type: [Object],
      require: true,
    },
    columns: {
      type: [Array],
      require: true,
    },
  },
  components: {
    ElDictTag: () => import("@/components/DictTag/index.vue"),
    ElFilePreview: () => import("@/components/file-preview/index.vue"),
    ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
  },
  data() {
    return {};
  },
  computed: {
    innerValue: {
      get() {
        return this.value;
      },
      set() {},
    },
  },
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<style scoped></style>
<template>
  <el-descriptions
    v-bind="$attrs"
    v-on="$listeners"
    border
    style="margin: 10px"
  >
    <el-descriptions-item
      v-if="innerValue[item.key]"
      v-for="{ item, attr } in columns"
      :key="item.key"
      :label="item.title"
      :labelStyle="{ width: '150px' }"
      :contentStyle="{ width: 'auto' }"
    >
      <component
        v-if="attr.is === 'el-dict-tag'"
        v-bind="attr"
        v-model="innerValue[item.key]"
        :size="$attrs.size"
        :options="dict.type[attr.dictName]"
      ></component>
      <component
        v-else-if="attr.is === 'el-file-preview'"
        v-bind="attr"
        v-model="innerValue[item.key]"
      ></component>
      <component
        v-else-if="attr.is === 'el-computed-input-v2'"
        v-bind="attr"
        v-model="innerValue[item.key]"
      ></component>
      <component is="span" v-else>{{ innerValue[item.key] }}</component>
    </el-descriptions-item>
  </el-descriptions>
</template>
