<template>
  <div class="organization_container">
    <div class="sevice_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>组织管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main_container">
      <div class="organization_header">
        <el-button type="primary" @click="addOrganization">
          新建组织
        </el-button>
        <p class="organization_info">
          <img :src="require('@/assets/imgs/title_ic_zuzhi.png')" />
          <span>当前组织总数：</span>
          <span>8</span>
        </p>
        <el-input
          v-model="searchFilter"
          prefix-icon="el-icon-search"
          placeholder="请输入组织名称"
          style="width:180px;"
          @input="searchAction"
          class="ces_toolbar_inp"
        ></el-input>
      </div>
      <organization-list
        :data="organizationList"
        details-url="/authority/organization/"
        @delete-action="deleteAction"
      ></organization-list>
      <div class="flex_grow"></div>
      <comments-pagination
        :total="100"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      ></comments-pagination>
    </div>
    <dialog-action
      ref="myConfirm"
      :confirm-options="confirmOptions"
    ></dialog-action>
  </div>
</template>

<script>
import organizationList from "@/components/organization-list/organization-list";
import commentsPagination from "@/components/comments-pagination";
import dialogAction from "@/components/dialog-action";

export default {
  components: {
    organizationList,
    dialogAction,
    commentsPagination,
  },
  data: () => ({
    searchFilter: "",
    organizationList: [
      {
        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",
      },
    ],
    pageSizes: [10, 50, 100],
    pageSize: 10,
    currentPage: 1,
    confirmOptions: {
      title: "",
      message: "",
      btnCancelText: "",
      btnSubmitText: "",
      item: null,
    },
  }),
  methods: {
    addOrganization() {
      console.log("add organization");
    },
    searchAction() {
      console.log(this.searchFilter);
    },
    deleteAction(item) {
      if (this.cardType === 0) {
        this.confirmOptions.title = "删除提示";
        this.confirmOptions.message =
          "您需要先进行应用商店下架申请，应用处于下架状态时才能进行删除操作。";
        this.confirmOptions.btnCancelText = "";
        this.confirmOptions.btnSubmitText = "";
        this.confirmOptions.confirmSubmit = () => {
          console.log("deleteItem - " + item.name);
          this.$refs.myConfirm.hideModel();
        };
      } else if (this.cardType === 1) {
        this.confirmOptions.title = "是否删除部署的应用";
        this.confirmOptions.message =
          "该操作会导致正在调用该应用的用户被迫终止对应用的调用，删除前需向正在调用该应用的用户发送通知，自通知发送之日起，2日后应用将被删除。";
        this.confirmOptions.btnCancelText = "";
        this.confirmOptions.btnSubmitText = "发送通知";
        this.confirmOptions.confirmSubmit = () => {
          console.log("deleteItem - " + item.name);
          this.$refs.myConfirm.hideModel();
        };
      }

      this.$refs.myConfirm.showModel();
    },
    changePageSize(value) {
      this.pageSize = value;
      this.currentPage = 1;
    },
    changeCurrentPage(value) {
      this.currentPage = value;
    },
  },
};
</script>

<style scoped>
.organization_container {
  height: 100%;
  padding: 0 20px;
  overflow: auto;
}
.main_container {
  min-height: calc(100% - 84px);
  padding: 15px 20px;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  margin-bottom: 42px;
}
.organization_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.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;
}
.flex_grow {
  flex-grow: 1;
}
</style>

<style>
.organization_container .el-button--primary {
  background-color: #515fe7;
  border-color: #515fe7;
  color: #e6ebfe;
}
</style>
