<template>
  <div class="pt-3 d-flex flex-column" style="height: 100%">
    <div class="px-3">
      <v-text-field
        v-model="queryData.name_zh"
        label="数据指标名称查找"
        placeholder="请输入数据指标名称"
        dense
        hide-details
        outlined
        clearable
        append-icon="mdi-magnify"
        @click:append="handleSearch"
        @keydown.enter.native="handleSearch"
        @click:clear="handleClear"
      ></v-text-field>
    </div>

    <div class="contentBox pa-3" v-loading="loading">
      <div v-if="!items.length" class="d-flex justify-center align-center grey--text pt-3">暂无数据</div>
      <v-list subheader dense >
        <v-list-item
          v-for="item in items"
          :key="item.id"
        >
          <v-list-item-content>
            <v-list-item-title>{{ item.name_zh }}</v-list-item-title>
          </v-list-item-content>

          <v-list-item-icon>
            <v-btn
              text
              color="primary"
              small
              @click="handleUse(item)"
            >
              点击使用
            </v-btn>
          </v-list-item-icon>
        </v-list-item>
      </v-list>
      <div class="d-flex justify-center align-center" v-if="total > items.length">
        <v-btn color="primary" @click="handlePage" text>加载更多</v-btn>
      </div>
    </div>
  </div>
</template>

<script>
import { api } from '@/api/dataGovernance'
export default {
  name: 'indicator-list',
  data () {
    return {
      choose: null,
      loading: false,
      queryData: {
        name_zh: null
      },
      items: [],
      orders: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      try {
        const { data } = await api.dataIndicatorList({
          ...this.pageInfo,
          ...this.queryData
        })
        this.items.push(...data.records)
        this.total = data.total
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    // pageHandleChange (index) {
    //   this.pageInfo.current = index
    //   this.init()
    // },
    // handleChange (index) {
    //   this.pageInfo.current = this.pageInfo.current + (index * 2 - 1)
    //   this.init()
    //   setTimeout(() => {
    //     this.choose = null
    //   })
    // },
    handleUse (item) {
      this.$emit('use', item)
    },
    handleSearch () {
      this.items = []
      this.pageInfo.current = 1
      this.init()
    },
    handleClear () {
      this.items = []
      this.pageInfo.current = 1
      this.queryData.name_zh = null
      this.init()
    },
    handlePage () {
      this.pageInfo.current++
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.contentBox {
  height: 0;
  flex: 1;
  overflow: auto;
}
</style>
