<template>
  <div class="row">
    <div class="content">
      <a-skeleton :loading="loading" :paragraph="{ rows: 4 }" />
      <div v-show="!loading">
        <template v-if="!loadError">
          <a-descriptions v-if="realData" :column="isMobile ? 1 : column" size="small" :title="title">
            <a-descriptions-item
              v-for="(value, key) in realData"
              :key="key"
              :label="key">
              {{ formatText(value) }}
            </a-descriptions-item>
          </a-descriptions>
        </template>
        <template v-else>
          <a-empty>
            <span slot="description"> 页面配置不存在，请联系系统管理员 </span>
          </a-empty>
        </template>
      </div>
    </div>
    <div class="extra" v-if="extraShow">
      <slot name="addonAfter"/>
    </div>
  </div>
</template>
<script>

import { mapState } from 'vuex'
import { getRealKeyData } from '@vue2-client/utils/formatter'
import { getConfigByName } from '@vue2-client/services/api/common'

export default {
  name: 'XDescriptions',
  components: {
  },
  props: {
    // 标题
    title: {
      type: String,
      required: true
    },
    // 内容
    content: {
      type: Object,
      required: true
    },
    // 模型名
    model: {
      type: String,
      required: false,
      default: ''
    },
    // 配置名称
    configName: {
      type: String,
      required: true
    },
    // 配置所属命名空间
    serviceName: {
      type: String,
      default: undefined
    },
    env: {
      type: String,
      default: 'prod'
    },
    // 每列显示数量
    column: {
      type: Number,
      default: 2
    },
    // 每列显示数量
    getRealData: {
      type: Boolean,
      default: false
    },
    // 是否展示插槽
    extraShow: {
      type: Boolean,
      default: true
    }
  },
  created () {
    this.initConfig()
  },
  data () {
    return {
      // 加载状态
      loading: false,
      loadError: false,
      realData: undefined
    }
  },
  computed: {
    ...mapState('setting', { isMobile: 'isMobile' })
  },
  methods: {
    initConfig () {
      this.loading = true
      this.loadError = false
      if (this.configName) {
        this.getConfig()
      } else {
        this.loading = false
        this.loadError = true
      }
    },
    getConfig () {
      getConfigByName(this.configName, this.serviceName, (res) => {
        const mapIndex = {}
        const result = {}
        if (res.formJson) {
          res.formJson.filter(item => {
            const model = item.model
            return model.indexOf(this.model) > 0
          })[0].groupItems.forEach(item => {
            mapIndex[item.model.substring(item.model.indexOf('_') + 1)] = item.name
          })
          for (const key of Object.keys(this.content)) {
            const name = mapIndex[key]
            if (name) {
              result[name] = this.content[key]
            } else {
              result[key] = this.content[key]
            }
          }
        } else if (res.column) {
          // [{label:'标签1',filed:'字段1'}]
          let content = {}
          if (this.getRealData) {
            content = getRealKeyData(this.content)
          } else {
            content = this.content
          }
          if (typeof content === 'string') {
            content = JSON.parse(content)
          }
          res.column.forEach(item => {
            result[item.label] = content[item.filed]
          })
        }
        this.realData = result
        this.loading = false
      }, this.env === 'dev')
    },
    // 文字格式化
    formatText (value) {
      return value ?? '--'
    }
  }
}
</script>
<style lang="less" scoped>
.row {
  display: flex;

  .content {
    -webkit-box-flex: 1;
    flex: auto;
    -ms-flex: auto;
  }

  .extra {
    flex: 0 1 auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    min-width: 242px;
    margin-left: 88px;
    text-align: right;
  }
}
</style>
