<template>
  <div class="dep-index">
    <el-tabs type="border-card">
      <el-form :inline="true" :model="searchParam" class="demo-form-inline head-form">
        <el-form-item>
          <el-button v-if="btnRule.userdep_add" @click="agencyInfo()" size="small" icon="el-icon-plus" type="primary">添加部门
          </el-button>
        </el-form-item>
      </el-form>
      <el-table stripe ref="table" :height="tableHeight" v-loading="tableLoading"
                :data="agencyList" size="medium" :tree-props="{children: 'childrenList', hasChildren: 'hasChild?false:true'}"
                border row-key="id">
        <el-table-column label="序号" type="index" width="80" align="center"/>
        <el-table-column show-overflow-tooltip prop="name" label="组织名称" align="left"/>
        <el-table-column show-overflow-tooltip prop="sort" label="排序码" align="center"/>
        <el-table-column
                         label="操作" width="180">
          <template slot-scope="scope">
            <el-tooltip v-if="btnRule.userdep_edit" class="item" effect="dark" content="编辑"
                        placement="bottom">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="agencyInfo(scope.row)"/>
            </el-tooltip>
            <el-tooltip v-if="btnRule.userdep_drop" class="item" effect="dark" content="删除"
                        placement="bottom">
              <el-button :loading="delBtnLoading" type="danger" size="mini" class="el-icon-delete"
                         @click="agencyDel(scope.row)"/>
            </el-tooltip>
            <el-button v-if=" btnRule.userdep_add" type="primary"
                       size="mini" icon="el-icon-plus"
                       @click="addChilds(scope.row)" class="add">添加子级
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tabs>

    <!-- 编辑表单 -->
    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false" center :visible.sync="addDialogVisible"
               :title="dialogTitle+'部门'">
      <editForm v-if="addDialogVisible" ref="editForm" :infoForm="infoForm" :filterAgencyList="filterAgencyList" style="width: 100%"
                @submit="submit" @closeWin="closeWin"></editForm>
    </el-dialog>

  </div>
</template>

<script>
  import deptApi from '@/api/permission/dept'
  import editForm from './edit'
  import {mapGetters} from "vuex";

  export default {
    name: "dep-index",
    data() {
      return {
        searchParam: {},
        tableLoading: true,
        // 显示编辑角色弹框
        addDialogVisible: false,
        agencyList: [],
        filterAgencyList:[],
        delBtnLoading: false,
        addBtnLoading: false,
        infoForm: {
          name: '',
          pid: 0,
          status: 1,
          sort: 1,
        },
        loading: false,
        tableHeight: document.body.clientHeight - 210,
        dialogTitle: '添加',
      }
    },
    components: {editForm},
    created() {
    },
    computed: {
      ...mapGetters(["btnRule"])
    },
    watch: {},
    mounted() {
      this.getLsList()
    },
    methods: {
      // 初始化表单
      initInfoForm() {
        this.infoForm = {
          name: '',
          pid: 0,
          sort: 1,
          note:''
        }
      },

      // 获取列表
      getLsList() {
        this.tableLoading = true
        deptApi.getList({}).then(res => {
          let data =JSON.parse(JSON.stringify(res.data))
          this.agencyList = data
          this.filterAgencyList=data
          this.tableLoading = false
          console.log(this.agencyList)
        }).catch(e => {
          this.agencyList = []
          this.filterAgencyList=[]
          this.tableLoading = false
        })
      },
      // 获取编辑数据
      agencyInfo(data) {
        // 初始化表单
        // 显示弹窗
        // 设置标题
        if (data == null) {
          this.initInfoForm()
          this.dialogTitle = "添加";
          this.infoForm.disable = false
        } else {
          this.infoForm=JSON.parse(JSON.stringify(data))
          this.dialogTitle = "编辑";
          this.infoForm.disable = true
        }
        this.addDialogVisible = true
      },
      // 添加子级
      addChilds(data) {
        this.initInfoForm()
        this.infoForm.pid = data.id
        this.dialogTitle = "添加子级"
        this.infoForm.disable = true
        this.$nextTick(function () {
          this.addDialogVisible = true
        })
      },
      // 删除记录
      agencyDel(data) {
        this.$confirm('您确定要删除部门吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delBtnLoading = true
          deptApi.del({id: data.id}).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
            this.delBtnLoading = false
            this.tableLoading = true
            this.getLsList()
          }).catch(e => {
            this.delBtnLoading = false
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 提交表单后逻辑处理
      submit(type) {
        if (type == 0) {
          // 添加
          this.getLsList()
        } else {
          // 编辑
          this.getLsList()
          this.addDialogVisible = false
        }
      },
      // 关闭窗体
      closeWin() {
        console.log("关闭")
        // 调用初始化表单方法
        this.initInfoForm()
        // 设置弹窗不可见
        this.addDialogVisible = false
      },

    }
  }
</script>

<style lang="less">
  .dep-index {
    width: 100%;

    .svg-icon {
      width: 20px;
      height: 20px;
      background-color: #eeeeee;
    }

    .font-dialog {
      .el-dialog__body {
        padding: 10px 10px;
      }
    }

    .page-current {
      text-align: center;
      padding: 15px 5px;
      padding-bottom: 0px;

      .sure-page-btn {
        display: inline-block;
        height: 28px;
        line-height: 0;
        width: 46px;
        padding: 0;
        vertical-align: top;
      }
    }

    .icon-box {
      display: flex;
      flex-wrap: wrap;

      .icon-item {
        border: 1px solid #eeeeee;
        width: 41px;
        height: 42px;
        margin-top: 10px;
        line-height: 42px;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
      }

      .icon-item:hover {
        border: 1px solid #409eff;
        cursor: pointer;
        color: #409eff;
      }
    }
  }
</style>
