<template>
    <div class="flex-col flex1">
        <div style="display: flex;margin-top:10px;">
            <a-button block type="primary" @click="handleAddEntity" v-if="editable"
                      class="entity-class-z">
                <a-icon type="plus"/>
                新增实体
            </a-button>
            <a-dropdown style="margin-left: 5px" v-if="editable">
                <a-menu slot="overlay" @click="handleRemoveClick">
                    <a-menu-item key="1">批量删除</a-menu-item>
                </a-menu>
                <a-button>
                    <a-icon type="setting" theme="filled"/>
                </a-button>
            </a-dropdown>
        </div>
        <a-input-search placeholder="搜索实体" v-model="searchValue"/>

        <a-list
                itemLayout="horizontal"
                :dataSource="entityData"
                class="flex1 auto-overflow entity-class-tree">
            <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta @click="handleChangeEntityRouter(item.entID)">
                    <p slot="title"
                       :class="(activeId===item.entID)||(!editable&&isActive===item.entID) ? 'selected' : '' ">
                        <a>{{item.entName}}</a>
                        <span style="float: right;margin-right:20px;" v-if="editable"
                              @click.stop="handleDelEntity(item.entID)"><a-icon
                                type="minus-circle"/></span>
                    </p>
                </a-list-item-meta>
            </a-list-item>
        </a-list>
        <a-row style="margin-top: 20px;">
            <a-col>
                <a-pagination
                        v-model="pagination.current"
                        :total="pagination.total"
                        :pageSize="pagination.pageSize"
                        @change="onChangePagination"
                />
            </a-col>
        </a-row>
    </div>
</template>

<script>
  import { entSearch } from "@/api/graph/search"
  import { delEntityByIds } from "@/api/graph/entity"
  export default {
    name: 'entity-list-body',
    // editable:是否显示操作按钮 entityClassId :实体类id
    // props: ['editable', 'entityClassId'],
    props: {
      editable: {
        type: Boolean,
        default: true
      },
      entityClassId: {
        type: String,
        default: ''
      },
      activeId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        isActive: false,
        result: null,
        entityData: [], //  实体列表
        searchValue: '',  // 要搜索的实体
        pagination: {
          pageSize: 10,
          total: 100,
          current: 1
        },
      }
    },
    watch: {
      entityClassId(id) {
        this.refreshEntityList(id)
      },
      searchValue(){
        this.pagination.current = 1
        this.pagination.pageSize = 10
        this.refreshEntityList(this.entityClassId)
      }
    },
    created() {
      // isActive是本页面用的，this.activeId是初始化时候传进来的
      // this.isActive = this.activeId
      // 初始化实体列表
      if (this.entityClassId) {
        this.refreshEntityList(this.entityClassId)
      }
    },
    computed: {
      // 过滤搜索
      filterEntity() {
        const key = this.searchValue
        const searchList = this.entityData
        if (key === '') {
          return this.entityData
        } else {
          return searchList.filter(function (item) {
            return item.entName.toLowerCase().indexOf(key.toLowerCase()) != -1
          })
        }
      }
    },
    methods: {
      onChangePagination(page, pageSize) {
        this.pagination.pageSize = pageSize
        this.pagination.current = page
        this.refreshEntityList(this.entityClassId)
      },
      handleRemoveClick(e) {
        if (e.key === '1') {
          // 显示批量删除实体弹窗
          this.$open('entityDeleteMulModal', {
            paramsId: this.entityClassId  // 实体类id
          }, function (data) {
            if (data) {
              this.refreshEntityList(this.entityClassId)
            }

          })
        }
      },
      /**
       * 刷新实体列表
       * @param id 实体类id
       */
      refreshEntityList(id) {
        entSearch(this.searchValue, id, this.pagination.current, this.pagination.pageSize).then((data) => {
          this.entityData = data.entList
          this.pagination.total = data.count
          this.pagination.pageSize = data.pageSize
          const result = data.entList.some(item => {
            if (item['entID'] === this.activeId) {
              return true
            } else {
              return false
            }
          })
          if (result) {
          } else {
            this.$router.push({name: 'class_entity', params: {classId: this.entityClassId}})
          }
        })
      },
      /**
       * 删除实体
       * @param id
       */
      handleDelEntity(id) {
        const vm = this
        this.$confirm({
          title: '你确定要删除吗?',
          onOk() {
            delEntityByIds(id).then(() => {
              vm.refreshEntityList(vm.entityClassId)
              vm.$trigger('entity:nodeDestroyed', id)
              vm.$message.success('删除成功')
            })
          },
          onCancel() {
            console.log('取消删除')
          }
        })
      },
      /**
       * 添加实体
       */
      handleAddEntity() {
        this.$open('addEntityModal', {
          title: '新增实体',
          isLink: true,
          paramsId: this.entityClassId  // 实体类id
        }, function () {
          this.refreshEntityList(this.entityClassId)
        })
      },
      handleChangeEntityRouter(id) {
        this.isActive = id
        this.$emit('emitEntityId', id)
      }
    }
  }
</script>

<style scoped>
    .ant-list.entity-class-tree {
        margin: 5px -10px;
        padding: 0 10px;
    }
</style>
