<template>
  <div class="organization_list">
    <apass-list
      @list-action="listAction"
      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>8</span>
      </p>
      <organization-list
        slot="list"
        :data="listData"
        details-url="/authority/organization/detail/"
        @delete-action="deleteAction"
      ></organization-list>
    </apass-list>

    <apass-dialog ref="dialog" title="提示">
      <p slot="content" style="text-align: left;">确认删除该组织吗？</p>
      <template slot="action">
        <el-button type="defalut" size="mini" @click="dialogHide">
          取消
        </el-button>
        <el-button type="primary" size="mini" @click="dialogSubmit">
          确定
        </el-button>
      </template>
    </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: 300,
    listData: [
      {
        id: 1000001,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "贵阳市公安局",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000002,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "语音识别",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000003,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000004,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000005,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000006,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000007,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 100000,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000009,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000010,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
    ],
    roleData: [
      {
        name: "超级管理员",
        description: "拥有所有权限",
      },
      {
        name: "组织管理员",
        description: "拥有对应组织的权限",
      },
      {
        name: "普通用户",
        description: "普通权限用户",
      },
      {
        name: "普通用户-开发者",
        description: "基于普通用户多一些开发的选项",
      },
    ],
    showDialog: false,
  }),
  methods: {
    listAction(value) {
      console.log(value);
    },
    deleteAction(item) {
      this.dialogShow();
    },
    dialogShow() {
      this.$refs.dialog.show();
    },
    dialogHide() {
      this.$refs.dialog.hide();
    },
    dialogSubmit() {
      console.log("dialog submit");
      this.dialogHide();
    },
  },
};
</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>
