<template>
  <div>
    <m-filter :option="option" @search="handleSearch" class="d-flex">
      <template v-if="switchover" #footer>
        <div style="flex: 1" class="d-flex justify-end align-center mr-3">
          <v-icon>mdi-list-box-outline</v-icon>
          <v-switch
            class="mx-3"
            v-model="switchValue"
            @change="handleSwitch"
          ></v-switch>
          <v-icon>mdi-graph</v-icon>
        </div>
      </template>
    </m-filter>
    <!-- <div v-if="switchValue && switchover" class="d-flex justify-end align-center pr-2 show">
      <v-icon>mdi-list-box-outline</v-icon>
      <v-switch
        class="mx-3"
        v-model="switchValue"
        @change="handleSwitch"
      ></v-switch>
      <v-icon>mdi-graph</v-icon>
    </div> -->
  </div>
</template>

<script>
import MFilter from '@/components/Filter'
import {
  metadata
} from '@/utils/dataGovernance'

import { api } from '@/api/dataGovernance'
const options = [
  { type: 'textField', value: null, label: '名称', key: 'name_zh' },
  { type: 'textField', value: null, label: '英文名称', key: 'name_en' },
  {
    type: 'autocomplete',
    value: null,
    label: '分类',
    key: 'category',
    items: metadata
  },
  {
    type: 'autocomplete',
    value: [],
    multiple: true,
    label: '标签',
    returnObject: true,
    searchInput: null,
    itemText: 'name_zh',
    itemValue: 'id',
    key: 'tag',
    items: []
  },
  { type: 'textField', value: null, label: '模型层级', key: 'level' }
]
export default {
  name: 'data-governance-filter',
  components: {
    MFilter
  },
  props: {
    switchover: {
      type: Boolean,
      default: false
    },
    filter: {
      type: Array,
      default: () => ['name_zh', 'name_en', 'category', 'tag']
    },
    value: {
      type: Boolean,
      default: false
    },
    categoryValue: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      switchValue: this.value,
      option: {
        list: options.filter(e => this.filter.includes(e.key))
      },
      tag: {
        total: 0,
        pageInfo: {
          size: 999,
          current: 1
        },
        name: ''
      }
    }
  },
  created () {
    if (this.filter.includes('tag')) {
      this.init()
    }
    this.option.list.find(e => e.key === 'category').value = this.categoryValue
  },
  methods: {
    // 获取标签列表
    async init () {
      this.loading = true
      try {
        const { data } = await api.getLabelList({
          ...this.tag.pageInfo,
          category_filter: 'DataOps',
          name_zh: this.tag.name
        })
        // this.option.list.find(e => e.key === 'tag').items = data.records
        options.find(e => e.key === 'tag').items = data.records
        this.option.list = JSON.parse(JSON.stringify(options)).filter(e => this.filter.includes(e.key))
        this.tag.total = data.total
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch (val) {
      const { level, ...obj } = val
      if (Object.prototype.hasOwnProperty.call(val, 'level')) {
        const _level = parseInt(level, 10) > 0 ? +level : null
        if (!_level) {
          this.option.list.find(e => e.key === 'level').value = null
        }
        this.$emit('search', {
          ...obj,
          level: _level ? +_level : null
        })
        return
      }
      this.$emit('search', obj)
    },
    handleSwitch () {
      // if (this.switchValue) {
      //   this.option.list.forEach(e => {
      //     e.value = null
      //   })
      // }
      if (this.switchValue) {
        this.option.list = this.option.list.filter(e => e.key === 'tag').map(e => {
          e.value = null
          return e
        })
      } else {
        this.option.list = JSON.parse(JSON.stringify(options)).filter(e => this.filter.includes(e.key))
      }
      this.$emit('input', this.switchValue)
      this.$emit('search', { tag: null })
    }
  }
}
</script>

<style lang="scss" scoped>
.show {
  position: absolute;
  right: 12px;
  top: 20px;
  z-index: 9;
}
</style>
