<template>
  <div v-if="loading">
    <template v-for="(item, index) in formJson.groups">
      <a-descriptions :key="index" v-if="formJson.default[item.groupName]" :column="1" class="details_content">
        <template v-for="(col, index) in item.formJson">
          <a-descriptions-item :label="col.name" :key="index">
            <template v-if="col.type === 'rate'">
              <a-rate disabled :count="col.displayCount" v-model="formJson.default[item.groupName][col.model]" />
            </template>
            <template v-else>
              {{ formJson.default[item.groupName][col.model] }}
            </template>
          </a-descriptions-item>
        </template>
      </a-descriptions>
    </template>
  </div>
</template>

<script>
export default {
  name: 'XFormGroupDetails',
  props: {},
  data () {
    return {
      // 加载状态
      loading: false,
      // 标题
      title: '',
      // 表单组配置
      formJson: {},
    }
  },
  methods: {
    init (params) {
      /*  params入参格式
      * {
          title: '评价内容', --表单标题
          formJson: res, --琉璃配置中心表单组json
          showGroups: [ --对应每组的内容
            {
              title: record.ter_f_business_name, --某个表单的名字
              result: { key: value } --需要渲染的key-value
            }
          ]
        }
      * */
      const {
        title, formJson, showGroups
      } = params
      formJson.default = {}
      showGroups.forEach((res) => {
        formJson.default[res.title] = res.result
      })
      this.title = title
      this.formJson = formJson
      this.loading = true
    }
  }
}
</script>

<style lang="less" scoped>
.details_content {
  width: 60%;
  :deep(.ant-descriptions-item-label) {
    // display: block;
    font-weight: bold;
    margin-bottom: 4px;
  }
}
</style>
