<!--
表单详情组件
@Author: linqian
@Date: 2021-05-28 09:51
-->
<template>
  <div>
    <el-form v-if="visible" :model="detailInfo" :label-width="labelWidth" label-suffix="：">
      <el-row>
        <el-col :span="item.span || 12" v-for="(item, index) in config" :key="index">
          <el-form-item :label="item.label">
            <template v-if="item.code">
              <div class="u-detail__text" v-translate="{ code: item.code }">
                {{ detailInfo[item.prop] }}
              </div>
            </template>
            <template v-else-if="item.enum">
              <div class="u-detail__text" v-translate="{ enum: item.enum }">
                {{ detailInfo[item.prop] }}
              </div>
            </template>
            <template v-else-if="item.dateFormat">
              <div class="u-detail__text">
                {{ detailInfo[item.prop] | dateFormatter(item.dateFormat) }}
              </div>
            </template>
            <template v-else-if="item.custom">
              <div class="u-detail__text">
                <slot :name="item.prop" :value="detailInfo[item.prop]"></slot>
              </div>
            </template>
            <template v-else>
              <div class="u-detail__text">
                {{ detailInfo[item.prop] }}
              </div>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <dg-button v-footer @click="handleClose">关闭</dg-button>
  </div>
</template>

<script>
export default {
  props: {
    detailInfo: {
      type: Object,
      default: () => {}
    },
    config: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: String,
      default: '100px'
    }
  },
  components: {},
  data() {
    return {
      visible: false
    };
  },
  computed: {},
  methods: {
    handleClose() {
      this.$emit('close');
    }
  },
  created() {
    this.visible = Object.keys(this.detailInfo).length > 0
  },
  mounted() {}
};
</script>

<style lang='scss'>
</style>