<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        placeholder="请输入【名称、标识】查询"
        v-model="listQuery.keywords"
        class="filter-item"
        style="width: 300px;"
        v-has="'sysOrgGroup:list'"
        @keyup.enter.native="handleFilter"
      />

      <el-button
        v-waves
        v-has="'sysOrgGroup:list'"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >搜索</el-button
      >
      <el-button
        v-waves
        v-has="'sysOrgGroup:save'"
        style="margin-left: 10px;"
        class="filter-item"
        type="primary"
        icon="el-icon-circle-plus-outline"
        @click="handleCreate"
        >新建</el-button
      >
    </div>

    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="orgGroupList"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="id" align="center" width="65">
        <template slot-scope="scope">
          <span>{{ scope.row.orgGroupId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="名称" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.orgGroupCode }}</span>
        </template>
      </el-table-column>

      <el-table-column label="标识">
        <template slot-scope="scope">
          <span>{{ scope.row.orgGroupName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <span>{{
            scope.row.createTime | parseTime("{y}-{m}-{d} {h}:{i}")
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="更新时间">
        <template slot-scope="scope">
          <span>{{
            scope.row.lastTime | parseTime("{y}-{m}-{d} {h}:{i}")
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            v-has="'sysOrgGroup:update'"
            @click="handleUpdate(scope.row)"
            >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            v-has="'sysOrgGroup:delete'"
            @click="handleDelete(scope.row)"
            >删除
          </el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-s-data"
            @click="handleOrgRes(scope.row)"
            >授权</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <swPage
      v-if="total > 0"
      key="2"
      :listQuery="listQuery"
      :total="total"
      pos="btmRight"
      @retPage="retPage"
    />

    <!-- 添加 or 编辑 -->
    <addOrEditDialog
      v-if="addOrEditDialogData.visible"
      :addOrEditData="addOrEditDialogData"
      @refresh="refreshList"
    />

    <!-- 授权 -->
    <authDialog
      v-if="authDialogData.visible"
      :authData="authDialogData"
      @refresh="refreshList"
    />
  </div>
</template>

<script>
import waves from "@/directive/waves"; // 水波纹指令
import swPage from "@/views/common/swPage";
import authDialog from "./components/orgGroup/authDialog";
import addOrEditDialog from "./components/orgGroup/addOrEditDialog";

import { queryOrgGroupList, deleteOrgGroup } from "@/api/auth/orgGroup";

export default {
  name: "orgGroupIndex",
  components: {
    swPage,
    authDialog,
    addOrEditDialog
  },
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      orgGroupList: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        keywords: null
      },
      authDialogData: {
        visible: false,
        currOrgGroupId: null,
        currOrgGroupName: null
      },
      addOrEditDialogData: {
        orgGroupId: null,
        status: "create",
        visible: false
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      // -> /sysOrgGroup/list
      queryOrgGroupList(this.listQuery).then(response => {
        this.orgGroupList = response.data.list;
        this.total = response.data.total;
        setTimeout(() => {
          this.listLoading = false;
        }, 0.5 * 1000);
      });
    },
    handleFilter() {
      //查询
      this.listQuery.page = 1;
      this.getList();
    },
    retPage() {
      //分页
      this.getList();
    },
    refreshList() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleCreate() {
      //触发添加dialog
      this.addOrEditDialogData.orgGroupId = null;
      this.addOrEditDialogData.status = "create";
      this.addOrEditDialogData.visible = true;
    },
    handleUpdate(row) {
      //触发更新Dialog和创建的dialog共用一个dialog
      //组织组ID
      this.addOrEditDialogData.orgGroupId = row.orgGroupId;
      this.addOrEditDialogData.status = "update";
      this.addOrEditDialogData.visible = true;
    },
    handleDelete(row) {
      //删除
      this.$confirm("是否删除该记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteOrgGroup(row.orgGroupId).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 3000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1);
        });
      });
    },
    handleOrgRes(row) {
      //触发授权dialog
      this.authDialogData.visible = true;
      this.authDialogData.currOrgGroupId = row.orgGroupId;
      this.authDialogData.currOrgGroupName = row.orgGroupName;
    }
  }
};
</script>

<style scoped></style>
