<template>
  <div class="configuration">
    <dee-fold-pane
      :min-percent="minPercent"
      :default-percent="defaultPercent"
      split="vertical"
      class="detail-pane"
    >
      <template slot="paneL">
        <left-page :type-name="typeName" :config-details="configDetails" @search="search" @switchTabs="switchTabs" />
      </template>
      <template slot="paneR">
        <right-page ref="rightPage" :type-name="typeName" :config-details="configDetails" :tab="currentTab" :table-data="tableData" />
      </template>
    </dee-fold-pane>
  </div>
</template>

<script>
import leftPage from './leftPage'
import rightPage from './rightPage'
// import { post } from '@/utils/http'
import { getLayouts } from '@/api/cmt'
export default {
// import引入的组件需要注入到对象中才能使用
  components: { leftPage, rightPage },

  props: {},

  data() {
    // 这里存放数据
    return {
      currentTab: '1',
      searchUrl: '/DxAbstractChangeIssue/find/recursion',
      tableData: [],
      configDetails: {
        DxChangeRequest: {
          form: {
            configDetails: {}
          },
          table: {
            configDetails: {}
          }
        },
        DxChangeNotice: {
          form: {
            configDetails: {}
          },
          table: {
            configDetails: {}
          }
        },
        DxAbstractChangeIssue: {
          form: {
            configDetails: {}
          },
          table: {
            configDetails: {}
          }
        }
      },
      layout: {
        DxChangeRequest: {
          form: 'defaultQuery',
          table: 'defaultResult'
        },
        DxChangeNotice: {
          form: 'defaultQuery',
          table: 'defaultResult'
        },
        DxAbstractChangeIssue: {
          form: 'defaultQuery',
          table: 'defaultResult'
        }
      },
      typeList: {
        '1': 'DxAbstractChangeIssue',
        '2': 'DxChangeRequest',
        '3': 'DxChangeNotice'
      },
      typeName: 'DxAbstractChangeIssue',
      minPercent: 10,
      defaultPercent: 22
    }
  },
  // 监听属性 类似于data概念
  computed: {
    dxService() {
      return this.$getService(this.typeName)
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成(可以访问当前this实例)
  created() {

  },
  // 生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {
    this.getLayout(this.layout)
  },
  activated() {
  },
  // 方法集合
  methods: {
    // 获取左侧搜索的配置文件以及右侧表格的配置文件
    getLayout(layout) {
      for (const keyObj in layout) {
        for (const key in layout[keyObj]) {
          getLayouts(keyObj, layout[keyObj][key]).then(res => {
            const perkData = res.items.filter(r => {
              return r.typeKey === keyObj
            }).slice(-1)[0]
            this.configDetails[keyObj][key] = perkData ? JSON.parse(perkData.configDetails) : {}
          })
        }
      }
    },
    switchTabs(tab) {
      this.typeName = this.typeList[tab.tabs]
      this.currentTab = tab.tabs
      this.searchUrl = tab.url
      this.tableData = []
    },
    search(form) {
      const searchItems = this.dxService.newSearchItems()
      for (const key in form) {
        searchItems.$addItem(form[key].fieldName, form[key].value, form[key].operator)
      }
      this.$refs.rightPage.$refs.mainTable.reloadData({ customSearchItems: searchItems }, true)
    }
  }
}
</script>
<style lang='scss'>
  .configuration {
    height: 100%;
  }
</style>