<template>
  <div>
    <div class="pa-3">
      <v-text-field
        v-model="name"
        label="名称查找"
        placeholder="请输入名称"
        dense
        hide-details
        outlined
        clearable
        append-icon="mdi-magnify"
        @input="handleSearch"
        @click:append="handleSearch"
        @keydown.enter.native="handleSearch"
      ></v-text-field>
      <div class="pt-3 pl-3 d-flex justify-end">
        共 {{ Object.keys(filteredItems).length }} 个数据
        <span v-if="Object.keys(filteredItems).length === 0 && Object.keys(origin).length > 0" class="ml-2 error--text">
          (数据已加载但未显示，请检查控制台)
        </span>
        <v-btn color="primary" class="ml-2 mb-3" small @click="handleViewSource">
          <v-icon left>mdi-table-eye</v-icon>
          查看源文件
        </v-btn>
      </div>
    </div>
    <div>
      <v-expansion-panels>
        <v-expansion-panel
          v-for="(item, key) in filteredItems"
          :key="key"
        >
          <v-expansion-panel-header>
            <div class="d-flex justify-space-between align-center">
              <div>
                <v-chip color="error" small v-if="item.exist">已存在</v-chip>
                {{ key }}
              </div>
              <div>
                <v-btn
                  :disabled="select === key"
                  text
                  color="primary"
                  small
                  @click.stop="handleSelect(item, key)">使用该资源</v-btn>
              </div>
            </div>
          </v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-simple-table
              fixed-header
              height="400px"
            >
              <template v-slot:default>
                <thead>
                  <tr>
                    <th class="text-left">
                      元数据中文名
                    </th>
                    <th class="text-left">
                      元数据英文名
                    </th>
                    <th class="text-left">
                      元数据类型
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="val in item.meta" :key="key + val.map.name_zh">
                    <td>{{ val.map.name_zh }}</td>
                    <td>{{ val.map.name_en }}</td>
                    <td>{{ val.map.data_type }}</td>
                  </tr>
                </tbody>
              </template>
            </v-simple-table>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ParseData',
  props: {
    items: {
      type: Object,
      default: () => ({})
    },
    origin: {
      type: Object,
      default: () => ({})
    },
    select: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      name: null,
      filteredItems: {}
    }
  },
  watch: {
    origin: {
      immediate: true,
      deep: true,
      handler (val) {
        if (val && Object.keys(val).length) {
          if (!this.name) {
            // 使用深拷贝确保响应式更新
            this.filteredItems = JSON.parse(JSON.stringify(val))
          } else {
            // 如果有搜索条件，重新执行搜索
            this.$nextTick(() => {
              this.handleSearch()
            })
          }
        } else {
          this.filteredItems = {}
        }
      }
    }
  },
  methods: {
    handleSearch () {
      if (!this.name) {
        // 使用深拷贝确保响应式更新
        this.filteredItems = this.origin && Object.keys(this.origin).length
          ? JSON.parse(JSON.stringify(this.origin))
          : {}
        return
      }
      if (!this.origin || !Object.keys(this.origin).length) {
        this.filteredItems = {}
        return
      }
      this.filteredItems = Object.keys(this.origin)
        .filter(e => e.includes(this.name))
        .reduce((res, key) => {
          res[key] = this.origin[key]
          return res
        }, {})
    },
    handleSelect (item, key) {
      this.$emit('select', item, key)
    },
    handleViewSource () {
      this.$emit('viewSource')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
