<template>
  <div class="pomentWrap">
    <el-row :gutter="5" type="flex" justify="space-around">
      <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="4">
        <div class="topBar">
          <el-tree
            :data="treeData"
            :props="treeProps"
            ref="Tree"
            node-key="id"
            :highlight-current="true"
            default-expand-all
            @node-click="nodeClick"
          >
            <template slot-scope="{node, data}">
              <span>
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="'#' + iconArrClass[data.level]" />
                </svg>
                {{node.label}}
              </span>
            </template>
          </el-tree>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="20" :lg="18" :xl="20">
        <el-row class="topBar">
          <el-col>
            <el-form :inline="true" :model="searchData">
              <el-form-item label>
                <el-input v-model="searchData.deptName" placeholder="请输入名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchFun()">
                  <i class="el-icon-search"></i> 搜索
                </el-button>
                <el-button type="primary" @click="resetFun()">
                  <i class="el-icon-refresh"></i> 重置
                </el-button>
              </el-form-item>
              <el-form-item class="fr">
                <el-button plain type="primary" @click="addFun()">
                  <i class="el-icon-plus"></i> 新增
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-table :data="tableData.pageData" stripe border style="width:100%;" v-loading="loading">
          <el-table-column width="50" type="index" label="序号"></el-table-column>
          <el-table-column prop="fullName" label="名称"></el-table-column>
          <el-table-column prop="shortName" label="简称"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column label="操作" width="190" align="center">
            <template slot-scope="scope">
              <el-button type="success" @click="editFun(scope.row)" size="small" plain><i class="el-icon-edit"></i> 编辑</el-button>
              <el-button type="danger" @click="delFun(scope.row)" size="small" plain><i class="el-icon-delete"></i> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total,sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="PAGE.page"
          :page-size="PAGE.size"
        ></el-pagination>
      </el-col>
    </el-row>
    <BranchMgEdit
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      :editForm="formData"
      :checkedObj="treecheckedObj"
      :dialoTitle="dialogTit"
      @dialogFun="closeDialog"
      @refreshTableData="getTableData('refresh')"
      :key="zjKey"
    ></BranchMgEdit>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import BranchMgEdit from "./BranchMgEdit.vue";
import METHOD from "@/utils/methods"
@Component({
  components: { BranchMgEdit }
})
export default class BranchMg extends Vue {
  @Provide() tableData: Object = { pageData: [], total: 0 };
  @Provide() PAGE: any = { page: 1, size: 10 };
  @Provide() searchData: any = { deptName: "" };
  @Provide() loading: Boolean = false;
  //编辑组件
  @Provide() dialogVisible: Boolean = false;
  @Provide() dialogTit: String = "新增";
  @Provide() formData: Object = {};
  @Provide() zjKey: any = 0;
  /*
  树 icon:icon-bumenguanli1 icon-bumenqun icon-bumen1 icon-bumen3
  */
 
  @Provide() iconArrClass:any = ['icon-bumenguanli1','icon-bumenqun','icon-bumen1','icon-bumen3','icon-bumen2'];
  @Provide() treeData: any = [
    {
      id: 0,
      fullName: "组织机构",
      level: 0,
      icon: "icon-yh",
      parentIds:'',
      childList: []
    }
  ];
  @Provide() treeProps: Object = {
    children: "childList",
    label: "fullName"
  };
  @Provide() treecheckedObj:any = {};

  // @Watch('getCurrentKey') fromChange(obj: any):any{
  //   console.log('改变')
  // }
  getTableData(word:any = null) {
    let that = this,
      param = Object.assign({}, that.PAGE, that.searchData);
    that.loading = true;
    (this as any).$axios
      .get(`/dept/getSysDeptList?deptId=${that.treecheckedObj.id}&deptName=${param.deptName}&page=${param.page}&size=${param.size}`)
      .then((res: any) => {
        that.loading = false;
        if( res.code == 0 ) that.tableData = res.data;
        if(word === 'refresh'){
          that.getTreeData()
        }
      });
  }
  getTreeData() {
    let that = this;
    (this as any).$axios
      .get(`/dept/getDeptInfoTree`)
      .then((res: any) => {
        if( res.code == 0 ) that.treeData[0].childList = res.data; 
      });
  }
  searchFun() {
    this.PAGE = { page: 1, size: 10 };
    this.getTableData();
  }
  resetFun() {
    this.PAGE = { page: 1, size: 10 };
    this.searchData.fullName = "";
    this.getTableData();
  }
  addFun() {
    this.dialogTit = "新增";
    this.zjKey++;
    this.dialogVisible = true;
  }
  editFun(row: any) {
    this.dialogTit = "编辑";
    this.formData = Object.assign({}, row);
    this.zjKey++;
    this.dialogVisible = true;
  }
  delFun(row: any) {
    let that = this;
    METHOD.deleteFun(that, `/dept/delDeptInfoById/${row.id}`, function() {
      that.getTableData('refresh');
    });
  }
  handleSizeChange(val: any) {
    this.PAGE.size = val;
    this.getTableData();
  }
  handleCurrentChange(val: any) {
    this.PAGE.page = val;
    this.getTableData();
  }
  closeDialog() {
    this.dialogVisible = false;
    this.formData = {};
  }
  nodeClick(data :any, node:any , target: any){
    let that = this;
    that.treecheckedObj = node.data;
    that.resetFun()
  }
  created() {
    let that = this;
    that.getTreeData();
    that.$nextTick(() => {
      (that as any).$refs.Tree.setCurrentKey(0)
      that.treecheckedObj =  (that as any).$refs.Tree.getCurrentNode(0)//设置选中节点
      that.getTableData();
    });
  }
}
</script>
<style lang="scss" scped>
@import '@/utils/public.scss';
</style>