<script>
import { Checkbox } from 'ant-design-vue'
import SdSelect from '@/common/components/sd-select.vue'
import components from './_import-components/sd-log-filter-import'

export default {
  name: 'SdLogFilter',
  components,
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    type: {
      type: String,
      default: 'select',
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  mounted() {
    const { 'get-filter-container': getFilterContainer } = this.$attrs
    const parentNode = getFilterContainer?.()
    if (parentNode) {
      // 先清空子节点
      const children = parentNode.childNodes
      if (children.length > 0) {
        for (let i = children.length - 1; i > -1; i--) {
          parentNode.removeChild(children[i])
        }
      }
      // 追加
      parentNode.appendChild(this.$el)
    }
  },
  methods: {},
  render() {
    let component = null
    switch (this.type) {
      case 'select':
        component = (
          <div class={this.$style.sdSelect}>
            <SdSelect
              dropdownClassName={this.$style.dropdown}
              value={this.value}
              {...{ attrs: this.$attrs, on: this.$listeners }}
            />
          </div>
        )
        break
      case 'checkbox':
        component = (
          <Checkbox.Group value={this.value} {...{ attrs: this.$attrs, on: this.$listeners }} />
        )
        break
      default:
        break
    }
    return component
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$select-width: 150px;
.sd-select {
  position: relative;
  min-width: $select-width;
  :global(.ant-select) {
    min-width: $select-width;
  }
  .dropdown {
    right: 0;
    // 覆盖组件 style 属性中的样式
    /* stylelint-disable-next-line  */
    left: auto !important;
  }
}
</style>
