<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">
      <div v-if="!items.length" class="d-flex justify-center align-center grey--text pt-3">暂无数据</div>
      <v-expansion-panels v-model="showPanels">
        <v-expansion-panel
          v-for="(item, index) in items"
          :key="item.id"
          readonly
          @click="handleOpen(index, item)"
        >
          <v-expansion-panel-header>
            {{ item.name_zh }}
          </v-expansion-panel-header>

          <v-expansion-panel-content>
            <v-divider></v-divider>
            <v-list>
              <v-list-item
                v-for="node in item.metaNode"
                :key="node.id + '-' + item.id"
              >
                <v-list-item-content>
                  <v-list-item-title>
                    <div class="d-flex justify-space-between align-center">
                      <div class="text-truncate flex-shrink-1">{{ node.name_zh }}</div>
                      <v-btn
                        text
                        color="primary"
                        small
                        @click="handleUse(node, item)"
                      >
                        点击使用
                      </v-btn>
                    </div>
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
      <div class="d-flex justify-center align-center pa-3">
        <v-btn v-if="total > items.length" color="primary" @click="handlePage" text :loading="loading">加载更多</v-btn>
        <div class="grey--text text-subtitle-2" v-else>没有更多了</div>
      </div>
    </div>
  </div>
</template>

<script>
import { api } from '@/api/dataGovernance'
export default {
  name: 'data-list',
  data () {
    return {
      showPanels: false,
      choose: null,
      loading: false,
      queryData: {
        name_zh: null
      },
      items: [],
      orders: [],
      pageInfo: {
        size: 20,
        current: 1
      },
      total: 0
    }
  },
  created () {
    this.init()
  },
  computed: {
    pageNum () {
      return Math.ceil(this.total / this.pageInfo.size)
    }
  },
  methods: {
    async init () {
      this.loading = true
      try {
        const { data } = await api.getModelList({
          ...this.pageInfo,
          ...this.queryData
        })
        // const items = data.records.map(e => {
        //   const list = JSON.parse(e.id_list)
        //   e.id_list = list.reduce((r, v) => {
        //     r.push(...v.metaData.map(m => {
        //       return {
        //         ...m,
        //         resourceId: v.resource_id,
        //         resourceName: v.resource_name,
        //         modelId: e.id,
        //         modelName: e.name
        //       }
        //     }))
        //     return r
        //   }, [])
        //   return e
        // })
        this.items.push(...data.records.map(e => {
          return {
            loading: false,
            name_zh: e.name_zh,
            id: e.id,
            metaNode: []
          }
        }))
        this.total = data.total
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleUse (node, belong) {
      this.$emit('use', node, belong)
    },
    handleSearch () {
      this.items = []
      this.pageInfo.current = 1
      this.init()
    },
    handleClear () {
      this.items = []
      this.pageInfo.current = 1
      this.queryData.name_zh = null
      this.init()
    },
    handleChange (index) {
      setTimeout(() => {
        this.choose = null
      })
    },
    handlePage () {
      this.pageInfo.current++
      this.init()
    },
    async getMetadata (item) {
      const query = { id: item.id }
      try {
        const { data } = await api.getModelDetails(query)
        item.metaNode = data.data_model.resource_selected.reduce((res, v) => {
          res.push(...v.meta_ids)
          return res
        }, [])
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async handleOpen (index, item) {
      if (this.showPanels === index) {
        this.showPanels = null
        return
      }
      if (item.metaNode.length) {
        this.showPanels = index
        return
      }
      item.loading = true
      try {
        await this.getMetadata(item)
        this.showPanels = index
      } finally {
        item.loading = false
      }
    }
  }
}
</script>

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