<template>
  <v-menu v-model="showMenu" offset-y nudge-bottom="10" allow-overflow :close-on-content-click="false" min-width="500" right @input="onInput">
    <template v-slot:activator="{ on, attrs }">
      <v-btn
        class="ml-3"
        color="primary"
        small
        v-on="on"
        v-bind="attrs"
      >
        新增元数据
      </v-btn>
    </template>

    <div class="pa-3 white">
      <v-text-field
        v-model="searchKey"
        label="元数据"
        placeholder="输入检索..."
        dense
        hide-details
        clearable
        outlined
        @keyup.enter="onSearch"
      >
        <template #append>
          <v-btn small icon color="primary" @click="onSearch">
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
        </template>
      </v-text-field>
      <div class="mt-3" style="max-height: 60vh; min-height: 200px; overflow: auto;">
        <v-list dense>
          <template v-for="(val, index) in items">
            <v-list-item :key="val.name_zh">
              <template v-slot:default>
                <v-list-item-content>
                  <v-list-item-title>{{val.name_zh}} [{{ val.data_type }}]</v-list-item-title>
                </v-list-item-content>
                <v-list-item-action>
                  <v-btn text color="primary" small @click="onUse(val)">点击使用</v-btn>
                </v-list-item-action>
              </template>
            </v-list-item>
            <v-divider
              v-if="index < items.length - 1"
              :key="index"
            ></v-divider>
          </template>
        </v-list>
        <div class="d-flex align-center justify-center flex-column">
          <v-progress-circular
            v-if="loading"
            indeterminate
            color="primary"
          ></v-progress-circular>
          <v-btn
            v-else
            :disabled="total <= items.length"
            text
            color="primary"
            @click="onMore"
          >
            <template v-if="total <= items.length">没有更多了</template>
            <template v-else>查看更多</template>
          </v-btn>
          <div class="d-flex align-center text-body-2">
            没有想要的元数据？
            <v-btn
              text
              color="primary"
              @click="show = true"
            >新增一个元数据</v-btn>
          </div>
        </div>
      </div>
    </div>
    <edit-dialog :visible.sync="show" title="新增元数据" @submit="onSubmit">
      <MetadataEdit v-if="show" v-loading="submitLoading" ref="form" class="mt-5" :item-data="{ name: searchKey }"></MetadataEdit>
    </edit-dialog>
  </v-menu>
</template>

<script>
import MetadataEdit from '../../metadata/components/edit'
import EditDialog from '@/components/Dialog'
import { api } from '@/api/dataGovernance'
export default {
  name: 'editMetadataAdd',
  components: {
    MetadataEdit,
    EditDialog
  },
  data () {
    return {
      showMenu: false,
      submitLoading: false,
      show: false,
      pageInfo: {
        size: this.size,
        current: 1
      },
      total: 0,
      loading: false,
      items: [],
      searchKey: null
    }
  },
  methods: {
    async init () {
      this.loading = true
      try {
        const { data } = await api.getMetaDataList({ ...this.pageInfo, name_zh: this.searchKey })
        this.total = data.total
        this.items.push(...data.records)
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    onInput (bool) {
      if (!bool) {
        return
      }
      this.searchKey = null
      this.onSearch()
    },
    onMore () {
      this.pageInfo.current++
      this.init()
    },
    onSearch () {
      this.pageInfo.current = 1
      this.items = []
      this.total = 0
      this.init()
    },
    onUse (val) {
      this.$emit('use', val)
    },
    async onSubmit () {
      const obj = this.$refs.form.getValue()
      if (!obj) {
        return
      }
      try {
        this.submitLoading = true
        const { data } = await api.metadataAdd(obj)
        this.$snackbar.success('操作成功')
        this.showMenu = false
        this.show = false
        this.$emit('use', {
          data_type: data.data_type,
          name_en: data.name_en?.[0] ?? null,
          id: data.id,
          name_zh: data.name_zh
        })
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.submitLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
