<template>
  <div class="flex1 flex-col">
    <div>
      <b class="panel-header">
        <a-icon type="deployment-unit" />&nbsp;实体列表
      </b>
    </div>
    <div class="flex1 flex-col" style="margin-top: 40px;">
      <div style="height: 40px;">
        <!--<a-form-item>-->
        <!--<a-input placeholder="请输入实体名称" v-model="searchValue" style="width: 300px;"/>-->
        <!--<button class="ant-btn ant-btn-primary">查询</button>-->
        <!--</a-form-item>-->
        <button
          class="ant-btn ant-btn-primary "
          style="float: right"
          @click="handleRemoveClick"
        >
          批量删除
        </button>
        <button
          class="ant-btn ant-btn-primary "
          style="float: right;margin-right: 10px;"
          @click="handleAddEntity"
          v-if="entityClassId !== 'uknow'"
        >
          <a-icon type="plus" />
          新增实体
        </button>
      </div>
      <a-row :gutter="16" style="min-height: 500px;">
        <a-col
          v-for="item in filterEntity"
          :pagination="pagination"
          :span="8"
          :key="item.entId"
          @click.stop="goDeail(item.entId)"
        >
          <a-card hoverable>
            <a-card-meta :title="item.entName" description>
              <a-avatar slot="avatar" src />
            </a-card-meta>
            <template class="ant-card-actions" slot="actions">
              <div class="ent-link1">查看详情</div>
              <!-- <div class="ent-link1" @click="goSta(item.entId)">图形化</div> -->
              <div class="ent-link2" @click.stop="handleDelEntity(item.entId)">
                删除
              </div>
            </template>
          </a-card>
        </a-col>
      </a-row>
      <a-row style="margin-top: 30px;">
        <a-col>
          <a-pagination
            v-model="pagination.current"
            :total="pagination.total"
            :pageSize="pagination.pageSize"
            @change="onChangePagination"
          />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { entSearch } from "@/api/graph/search"
import { getEntityListByEntityClassId, delEntityById } from "@/api/graph/entity"

export default {
  name: "entityList",
  props: ["seaValue"],
  data() {
    return {
      entityClassId: this.$route.params.classId,
      entClsName: this.$route.params.entClsName,
      entitylist: [],
      editable: true,
      searchValue: "",
      pagination: {
        pageSize: 9,
        total: 100,
        current: this.$route.query.page ? parseInt(this.$route.query.page) : 1,
      },
      pagelist: [],
    };
  },
  mounted() {
    if (this.entClsName && this.entityClassId == "uknow") {
      // 有实体类名，是搜索传过来的,搜索全部实体
      this.searchEnt(
        this.entClsName,
        "",
        this.pagination.current,
        this.pagination.pageSize
      );
    } else if (this.entClsName && this.entityClassId) {
      let name = this.entClsName || this.seaValue;
      this.searchEnt(
        name,
        this.entityClassId,
        this.pagination.current,
        this.pagination.pageSize
      );
    } else {
      if (this.entityClassId == "uknow") {
        // 返回按钮
        this.searchEnt(
          this.seaValue,
          "",
          this.pagination.current,
          this.pagination.pageSize
        );
      }
      // 点击实体类树 获取实体列表
      this.searchEnt(
        "",
        this.entityClassId,
        this.pagination.current,
        this.pagination.pageSize
      );
    }
  },
  computed: {
    // 过滤搜索
    filterEntity() {
      const key = this.searchValue;
      const searchList = this.entitylist;
      if (key === "") {
        return this.pagelist;
      } else {
        return searchList.filter(function(item) {
          return item.entName.toLowerCase().indexOf(key.toLowerCase()) != -1;
        });
      }
    },
  },
  methods: {
    goDeail(id) {
      // this.$router.push({name: 'entityListnew', params: {entClsId: this.entityClassId, entId: id}})
      // this.$router.push({name: 'e_base_v2', params: {classId: this.entityClassId, entityId: id}})
      this.$router.push({
        name: "e_base_v2",
        params: { classId: this.entityClassId, entityId: id },
        query: { page: this.pagination.current },
      });
    },
    // 搜索实体
    searchEnt(searchStr, entClsIDs, current, pageSize) {
      entSearch(searchStr, entClsIDs, current, pageSize)
        .then((resp) => {
          this.pagelist = resp.rows;
          this.pagination.total = resp.count;
          // this.onChange(this.pagination.current)
        });
    },
    handleRemoveClick(e) {
      this.$open(
        "entityDeleteMulModal",
        {
          paramsId: this.entityClassId, // 实体类id
          pagelist: this.pagelist,
        },
        function(data) {
          if (data) {
            if (this.entityClassId != "uknow") {
              this.searchEnt(
                this.entClsName,
                this.entityClassId,
                this.pagination.current,
                this.pagination.pageSize
              );
            } else {
              this.searchEnt(
                this.entClsName,
                "",
                this.pagination.current,
                this.pagination.pageSize
              );
            }
            this.$message.success("删除成功");
          }
        }
      );
    },
    /**
     * 刷新实体列表
     * @param id 实体类id
     */
    refreshEntityList(id, type) {
      const vm = this;
      getEntityListByEntityClassId(id).then((data) => {
        vm.entitylist = data;
        // var maxPage = parseInt(vm.entitylist && (vm.entitylist.length - 1) / vm.pagination.pageSize) + 1
        // var page = vm.pagination.current
        // if (type === 'add') {
        //   page = maxPage
        // } else if (type === 'del') {
        //   if (page > maxPage) {
        //     page = maxPage
        //   }
        // }
        // vm.pagination.current = page
        // vm.onChange(page)

        // 根据实体类id获取实体列表
      });
    },
    /**
     * 删除实体
     * @param id
     */
    handleDelEntity(id) {
      // const vm = this;
      // this.$confirm({
      //   title: "你确定要删除吗?",
      //   onOk() {
      //     delEntityById(id).then((res) => {
      //       if (vm.entityClassId != "uknow") {
      //         vm.searchEnt(
      //           vm.entClsName,
      //           vm.entityClassId,
      //           vm.pagination.current,
      //           vm.pagination.pageSize
      //         );
      //       } else {
      //         vm.searchEnt(
      //           vm.entClsName,
      //           "",
      //           vm.pagination.current,
      //           vm.pagination.pageSize
      //         );
      //       }
      //       vm.$trigger("entity:nodeDestroyed", id);
      //       vm.$message.success("实体删除成功");
      //     });
      //   },
      //   onCancel() {
      //     console.log("取消删除");
      //   },
      // });
      this.$modal.confirm('你确定要删除吗？').then(function() {
        return delEntityById(id);
      }).then((resp) => {
            if (this.entityClassId != "uknow") {
              this.searchEnt(
                this.entClsName,
                this.entityClassId,
                this.pagination.current,
                this.pagination.pageSize
              );
            } else {
              this.searchEnt(
                this.entClsName,
                "",
                this.pagination.current,
                this.pagination.pageSize
              );
            }
            this.$trigger("entity:nodeDestroyed", id);
            this.$message.success("实体删除成功");
      }).catch(() => {});
    },
    /**
     * 添加实体
     */
    handleAddEntity() {
      const vm = this;
      this.$open(
        "addEntityModal",
        {
          title: "新增实体",
          isLink: false, // 添加路由后改变路由
          paramsId: this.entityClassId, // 实体类id
        },
        function(data) {
          if (this.entityClassId != "uknow") {
            this.searchEnt(
              this.entClsName,
              this.entityClassId,
              this.pagination.current,
              this.pagination.pageSize
            );
          } else {
            this.searchEnt(
              this.entClsName,
              "",
              this.pagination.current,
              this.pagination.pageSize
            );
          }
          // this.searchEnt('', this.entityClassId, this.pagination.current, this.pagination.pageSize)
        }
      );
    },
    onChangePagination(current) {
      this.searchEnt("", this.entityClassId, current, this.pagination.pageSize);
    },
    // 分页
    onChange(current) {
      let size = this.pagination.pageSize;
      let prev = current - 1;
      this.pagination.total = this.entitylist ? this.entitylist.length : 0;
      this.pagelist = [];
      for (let i in this.entitylist) {
        if (i >= prev * size && i < current * size) {
          this.pagelist.push(this.entitylist[i]);
        }
      }
    },
  },
};
</script>

<style scoped>
.panel-header {
  display: block;
}

.ant-card {
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}

.ant-card:hover {
  border: 1px solid #0aa679;
}

.ant-card:hover .ant-card-body {
  color: #0aa679;
}

.ant-btn-add {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -21px;
  height: 32px;
}

.ent-link1,
.ent-link2 {
  width: 100%;
  text-align: center;
}

.ent-link1 {
  color: #0aa679;
}

.ent-link2 {
  color: #999;
}

.ent-link1:hover {
  color: #27b386;
}

.ent-link2:hover {
  color: #0aa679;
}

.ant-card-body {
  background: #eee;
}

.ant-card-actions > li > span {
  display: block;
  width: 100%;
  height: 100%;
}

.ant-avatar {
  width: 40px;
  height: 40px;
  /* background: url(../../../../public/default.png) no-repeat; */
  background-size: 40px 40px;
}
</style>
