<template>
  <div class="mb-5">
    <form-list ref="formRef" :items="dataFieldItems" class="mt-2 px-1"></form-list>
    <!-- 过滤与排序 -->
    <otherSetting ref="filterRef" @filterChange="filterChange" class="px-3 mb-5"></otherSetting>
  </div>
</template>

<script>
// import { getDrillingData } from './utils/getFieldData'
import otherSetting from './otherSetting.vue'
import FormList from '@/components/Form/list.vue'
import { getCombinationPage } from '@/api/dataFactory'
import { debounce } from 'lodash'
export default {
  name: 'data-field',
  components: {
    FormList,
    // tableImport,
    otherSetting
  },
  props: {
    fieldProps: {
      type: Object,
      default: () => {}
    }
  },
  computed: {},
  data () {
    return {
      fieldInfo: {},
      dataFieldItems: {
        options: [
          {
            type: 'autocomplete',
            key: 'metaDataCombinationEngName',
            value: null,
            label: '请选择数据域 *',
            placeholder: '输入名称查询',
            outlined: true,
            dense: true,
            clearable: true,
            // rules: [v => !!v || '请选择数据域'],
            searchInput: null,
            itemValue: 'metaDataCombinationId',
            itemText: 'name',
            items: [],
            change: this.handleFieldChange,
            slotName: 'lookDomainData'
          }
        ]
      }
    }
  },
  created () {
    if (Object.keys(this.fieldProps).length) this.fieldInfo = this.fieldProps
    this.getCombinationPage(this.fieldInfo?.fieldIdZhName, this.fieldInfo?.fieldId)
  },
  mounted () {
    // 防抖监听
    const debouncedCallback = debounce(newValue => {
      if (newValue !== this.fieldInfo?.fieldIdZhName) this.getCombinationPage(newValue)
    }, 500)
    this.$watch(() => this.dataFieldItems.options.find(e => e.key === 'metaDataCombinationEngName').searchInput, debouncedCallback)
  },
  watch: {},
  methods: {
    // 数据域Change
    handleFieldChange (value, item, type = null) {
      if (!value) {
        this.fieldInfo = {}
        this.getCombinationPage()
        return
      }
      if (!this.$refs.formRef.validate()) return
      if (type !== '回显') {
        this.fieldInfo.filterObj = this.$refs.filterRef.clearFilterObj()
      }
      const fieldITem = item.items?.find(f => f.metaDataCombinationId === value) || null
      const obj = {
        fieldId: value, // 数据域id
        fieldEngName: fieldITem?.engName, // 数据域英文名称metaDataCombinationEngName
        fieldIdZhName: fieldITem?.name // 数据域中文名称
      }
      this.fieldInfo = { ...this.fieldInfo, ...obj }
      this.$emit('change', 'field_change', this.fieldInfo, type === '回显')
    },
    // 过滤与排序Change
    filterChange () {
      if (!this.$refs.formRef.validate()) return
      this.fieldInfo.filterObj = this.$refs.filterRef.getFilterObj()
      // console.log('this.fieldInfo.filterObj', this.fieldInfo.filterObj)
      this.$emit('change', 'filter_change', this.fieldInfo)
    },
    // 数据域接口
    async getCombinationPage (name = null, fieldId = null) {
      const tagsIdArr = name ? [] : ['1778007291950292993']
      try {
        const { data } = await getCombinationPage({ name, size: 50, metaDataCombinationTagsIds: tagsIdArr })
        const eng = this.dataFieldItems.options.find(e => e.key === 'metaDataCombinationEngName')
        eng.items = data.records
        // if (!eng.items || !eng.items.length) this.$snackbar.error('无可用数据域')
        if (fieldId) this.review(eng) // 数据域回显
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    review (eng) {
      eng.value = this.fieldInfo.fieldId
      this.$nextTick(() => {
        // 1.先回显数据过滤
        if (Object.keys(this.fieldInfo?.filterObj).length) this.$refs.filterRef.setFilterObj(this.fieldInfo.filterObj)
        // 2.再获取数据域的数据
        this.handleFieldChange(eng.value, { items: eng.items }, '回显')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
