<template>
  <v-menu v-model="show" :close-on-content-click="false">
    <template v-slot:activator="on">
      <span v-on="on" @click="handleOpen" style="cursor: pointer;">
        {{ text }}
        <v-icon color="primary" small class="ml-2">mdi-square-edit-outline</v-icon>
      </span>
    </template>
    <div class="white pa-3">
      <div class="py-3">
        <slot name="title"></slot>
      </div>
      <div class="mb-3">
        <v-text-field
          v-model="search"
          label="选择主数据"
          placeholder="输入检索..."
          dense
          hide-details
          clearable
          outlined
          @keyup.enter="handleSearch"
        >
          <template #append>
            <v-btn small icon color="primary" @click="handleSearch">
              <v-icon>mdi-magnify</v-icon>
            </v-btn>
          </template>
        </v-text-field>
      </div>
      <div style="max-height: 60vh; overflow: auto;">
        <v-list dense>
          <template v-for="(val, index) in items">
            <v-list-item :key="val[itemValue]">
              <template v-slot:default>
                <v-list-item-content>
                  <v-list-item-title>{{val[itemLabel]}}</v-list-item-title>
                </v-list-item-content>
                <v-list-item-action>
                  <v-btn text color="primary" small @click="handleUse(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">
          <v-btn
            :disabled="total <= items.length"
            text
            color="primary"
            @click="more"
          >
            <template v-if="total <= items.length">没有更多了</template>
            <template v-else>查看更多</template>
          </v-btn>
        </div>
      </div>
    </div>
  </v-menu>
</template>

<script>
export default {
  name: 'edit-table',
  props: {
    text: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 20
    },
    init: {
      type: Function,
      default: () => {}
    },
    itemLabel: {
      type: String,
      default: 'label'
    },
    itemValue: {
      type: String,
      default: 'value'
    }
  },
  data () {
    return {
      show: false,
      pageInfo: {
        size: this.size,
        current: 1
      },
      total: 0,
      loading: false,
      items: [],
      value: null,
      search: null,
      open: undefined
    }
  },
  methods: {
    async run () {
      try {
        const { items, total } = await this.init({ ...this.pageInfo, name: this.search })
        this.items.push(...items)
        this.total = total
      } catch (error) {
        this.$snackbar.error(error)
        if (this.pageInfo.current > 1) {
          this.pageInfo.current--
        }
      }
    },
    more () {
      this.pageInfo.current++
      this.run()
    },
    handleSearch () {
      this.pageInfo.current = 1
      this.items = []
      this.run()
    },
    async handleOpen () {
      this.items = []
      await this.run()
      this.show = true
    },
    handleUse (val) {
      this.show = false
      this.$emit('use', val)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
