<template>
  <ed-descriptions v-loading="initLoading" v-bind="moduleProp" :columns="descColumns" :data="formData" >
    <!-- 展示列插槽 -->
    <template v-for="name in slotNames" v-slot:[name]="scope">
      <slot :name="name" v-bind="scope"></slot>
    </template>
  </ed-descriptions>
</template>

<script lang="jsx">
import EasyDataMixins from "../../packages/mixins/EasyDataMixins";
import {TempType} from "../../api/easyData";

/**
 * EasyDataView组件
 * - 示例
 *
 * ```vue
 *  <EasyDataView ref="BasicDescribe" :columns="descColumns" :controlConfig="controlConfig" :formData="formData">
 *  </EasyDataView>
 * ```
 *
 * 详细用法参考下方链接
 *
 * [EasyDataView组件使用示例](./web-comp/ExampleEasyDataViewCode.md)
 *
 * 混入属性参考
 *
 * [EasyDataMixins](./EasyDataMixins.md)
 */
export default {
  name: "EasyDataView",
  props: {
    /**
     * 属性配置
     * @default {}
     */
    controlConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  mixins: [EasyDataMixins],
  data() {
    return {
      // loading
      initLoading: false,
      // 描述信息
      descColumns: [],
      // 插槽名
      slotNames:[]
    }
  },
  watch: {
    controlConfig: {
      handler(newVal, oldVal) {
        if (newVal && Object.keys(newVal).length > 0) {
          const {controlInfos, controlProps, dataSource} = newVal
          this.controlInfos = controlInfos
          this.controlProps = controlProps
          this.dataSource = dataSource

          this.$nextTick(() => {
            this.descColumns = this.getColumns(controlInfos, controlProps)
            this.getSlotNames(this.descColumns)
          })
        }
      },
      deep: true,
      immediate: true
    },
    // 有数据源名称且未传入controlConfig时，自动发起请求
    dataSourceName: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal && newVal !== oldVal && (Object.keys(this.controlConfig).length === 0)) {
          this.initControls().then(({controlInfos, controlProps}) => {
            this.descColumns = this.getColumns(controlInfos, controlProps)
            this.getSlotNames(this.descColumns)
          })
        }
      }
    }
  },
  methods:{
    // 插槽项
    getSlotNames(columns){
      columns.map(column =>{
        this.slotNames.push(column.prop.includes('.') ? column.prop.split('.').pop() : column.prop)
      })
    },
    getType(){
      return TempType.view
    },
    getFormData(){
      return new Promise((resolve, reject)=>{
        resolve(true)
      })
    }
  }
}
</script>
