<template>
  <div class="organization_list">
    <apass-list
      @list-action="initDatas"
      search-placeholder="请输入关键字"
      :list-total="listTotal"
    >
      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item to="/authority">权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>组织管理</el-breadcrumb-item>
      </el-breadcrumb>
      <template slot="header-left">
        <el-button
          type="primary"
          @click="$router.push('/authority/organization/add')"
        >
          新建组织
        </el-button>
      </template>
      <p class="organization_info" slot="header-center">
        <img :src="require('@/assets/imgs/title_ic_zuzhi.png')" />
        <span>当前组织总数：</span>
        <span v-text="listTotal"></span>
      </p>
      <organization-list
        slot="list"
        :data="listData"
        details-url="/authority/organization/detail/"
        @delete-action="deleteAction"
      ></organization-list>
    </apass-list>

    <apass-dialog
      ref="dialog"
      msg="确认删除该组织吗？"
      :submit="dialogSubmit"
    ></apass-dialog>
  </div>
</template>

<script>
import apassList from "@/components/apass-list";
import organizationList from "@/components/organization-list/organization-list";
import apassDialog from "@/components/apass-dialog";

export default {
  components: { apassList, organizationList, apassDialog },
  data: () => ({
    listTotal: 0,
    listData: [],
    deleteItem: null,
    tempFilter: null,
  }),
  methods: {
    initDatas(filters) {
      this.tempFilter = filters;

      this.$http
        .get("/apaas/backmgt/department/list", {
          params: {
            search: filters.keyword,
            page: filters.page,
            limit: filters.size,
          },
        })
        .then(({ data }) => {
          // console.log(data);
          this.listTotal = data.total;
          this.listData = data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    deleteAction(item) {
      this.deleteItem = item;
      this.$refs.dialog.show();
    },
    dialogSubmit() {
      this.$http
        .delete("/apaas/backmgt/department", {
          params: {
            department_id: this.deleteItem.department_id,
          },
        })
        .then(({ data }) => {
          // console.log(data);
          this.$message({
            message: `已删除${this.deleteItem.department_name}.`,
            type: "success",
          });
          this.deleteItem = null;
          this.initDatas(this.tempFilter);
        })
        .catch((error) => {
          this.$message({
            message: `删除${this.deleteItem.department_name}失败`,
            type: "warning",
          });
        });
    },
  },
};
</script>

<style scoped>
.organization_list {
  height: 100%;
}
.organization_info {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.organization_info > img {
  margin-right: 10px;
}
.organization_info > span {
  font-size: 18px;
  color: #58617a;
}
.organization_info > span:nth-of-type(2) {
  color: #1a2236;
}
</style>
