<template>
  <div class="app-container">
    <el-container>
      <el-aside width="20%">
        <div class="slot-tree">
          <!-- 异步加载树   -->
          <h2 class="tree-title" @click="refreshTree">组织目录</h2>
          <el-tree
            ref="treeRef"
            node-key="id"
            :props="resPorp"
            :data="orgtreeNodes"
            accordion
            :highlight-current="true"
            @node-click="handleNodeClick"
          />
        </div>
      </el-aside>

      <el-main>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div class="filter-container">
              <el-input
                placeholder="职位名称"
                style="width: 200px;"
                class="filter-item"
                clearable
                v-model="listQuery.searchKey"
                @keyup.enter.native="handleFilter"
              />
              <el-button
                v-waves
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
                >搜索</el-button
              >
              <el-button
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="handleCreate"
                >新建</el-button
              >
            </div>
          </div>
          <div>
            <el-table
              v-loading="listLoading"
              :key="tableKey"
              :data="list"
              size="mini"
              stripe
              border
              fit
              highlight-current-row
              style="width: 100%;"
            >
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="120"
              />
              <el-table-column
                label="职位名称"
                min-width="100"
                align="center"
                prop="name"
              />

              <el-table-column
                label="职位分类"
                align="center"
                width="180"
                prop="category"
              >
                <template slot-scope="scope">
                  {{ getValueByKey(scope.row.category, positionCategory) }}
                </template>
              </el-table-column>
              <el-table-column
                label="排序"
                align="center"
                width="150"
                prop="sortCode"
              />
              <el-table-column
                label="创建时间"
                align="center"
                width="150"
                prop="createTime"
              />
              <el-table-column
                label="更新时间"
                align="center"
                width="150"
                prop="updateTime"
              />

              <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="200"
              >
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-edit"
                    circle
                    title="编辑"
                    @click="handleUpdate(scope.row)"
                  />

                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    title="删除"
                    @click="handleDelete(scope.row)"
                  />
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <swPage
              v-if="total > 0"
              key="2"
              :listQuery="listQuery"
              :total="total"
              pos="btmRight"
              @retPage="retPage"
            />
          </div>
        </el-card>
      </el-main>
    </el-container>
     <!-- 新增或编辑对话框-->
     <addPositionEditDialog
      :addPositionData="addPositionData"
      @refreshTable="refreshData"
    />
  </div>
</template>

<script>
import waves from "@/directive/waves";
import swPage from "@/views/common/swPage";
import { dynamicTree, fetchList, deletePosition } from "@/api/auth/position";
import { positionCategory } from "@/constants/index";
import { getValueByKey } from "@/utils/index";
import addPositionEditDialog from "./components/addPositionEditDialog";

export default {
  inject: ["reload"], //刷新
  name: "positionIndex",
  directives: {
    waves
  },
  components: {
    swPage,
    addPositionEditDialog
  },
  data() {
    return {
      positionCategory,
      tableKey: 0,
      orgtreeNodes: [], //组织树节点
      currentNode: null,
      currNodeData: null, //当前属性的数据
      resPorp: {
        //树结构
        label: "name",
        isLeaf: "leaf"
      },
      list: [],
      total: null,
      listLoading: false,
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        searchKey: null,
        orgId: null
      },
      addPositionData: {
        //添加 或者 编辑 dialog 数据
        status: "create", //[create ,update]
        visible: false,
        orgData: null //选中的组织
      }
    };
  },
  created() {
    this.syncLoadResLabel();
    this.getList();
  },
  methods: {
    getValueByKey,
    refreshData() {
      this.addPositionData.status = "create";
      this.addPositionData.visible = false;
      this.addPositionData.orgData = null; //选中的组织
      this.handleFilter();
    },
    refreshTree() {
      this.syncLoadResLabel();
      this.listQuery.currentPage = 1;
      this.listQuery.orgId = null;
      this.getList();
    },
    syncLoadResLabel() {
      //同步目录
      dynamicTree().then(response => {
        this.orgtreeNodes = response.data;
      });
    },
    handleNodeClick(data, node) {
      //点击node触发
      if (this.currentNode && this.currentNode.name === data.name) {
        node.checked = !node.checked;
      } else {
        node.checked = true;
      }
      if (node.checked) {
        // 选中
        this.currentNode = data;
        this.listQuery.orgId = data.id;
      } else {
        // 取消选中
        this.$refs.treeRef.setCurrentKey(null);
        this.currentNode = null;
        this.listQuery.orgId = null;
      }
      this.listQuery.currentPage = 1;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery)
        .then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    retPage() {
      //分页
      this.getList();
    },
    handleFilter() {
      this.listQuery.currentPage = 1;
      this.getList();
    },
    handleCreate() {
      //查询组织 - 角色
      this.addPositionData.status = "create";
      this.addPositionData.visible = true;
      this.addPositionData.orgData = null;
    },
    handleUpdate(row) {
      //触发更新Dialog和创建的dialog共用一个dialog
      this.addPositionData.status = "update";
      this.addPositionData.visible = true;
      this.addPositionData.orgData = row;
    },

    handleDelete(row) {
      //删除
      this.$confirm("确定删除此职位?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deletePosition([{ id: row.id }]).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 3000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1); //数值删除
        });
      });
    },
  }
};
</script>

<style scoped>
.el-aside {
  max-width: 200px;
}
.box-card {
  margin-left: 10px;
}
.tree-title {
  color: #ae8877;
  font-size: 14px;
  cursor: pointer;
}
.el-tree-node__content:hover .append {
  display: inline !important;
}
.append {
  display: none;
}
</style>
