<template >
  <el-container>
    <el-aside width="300px">
      <el-card :body-style="{ padding: '0px' }">
        <div slot="header">
          <span>组织机构树</span>
        </div>
        <!-- card body -->
        <el-tree
          :data="data"
          :props="defaultProps"
          :default-expand-all="true"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-card>
    </el-aside>
    <el-main height style="padding:0px;height:700px;">
      <!-- Main content -->
      <el-card :body-style="{ padding: '0px' }">
        <div slot="header">
          <span>部门配置</span>
          <el-button
            type="primary"
            icon="el-icon-search"
            style="float:right;"
            :disabled="!ruleForm.parentId"
            @click="addOrUpdateHandle()"
          >新增</el-button>
        </div>
        <!-- card body -->
        <el-table :data="dataList" :stripe="true" v-loading="dataListLoading" style="width: 100%;" :header-cell-style="{background:'#D5D9E0',color:'#fff'}">
          <el-table-column
            prop="parentName"
            header-align="center"
            align="center"
            label="上级部门名称"
            v-if="false"
          ></el-table-column>
          <el-table-column prop="name" header-align="center" align="center" label="部门名称"></el-table-column>
          <el-table-column prop="code" header-align="center" align="center" label="部门编码"></el-table-column>
          <el-table-column prop="remark" header-align="center" align="center" label="部门描述"></el-table-column>
          <el-table-column prop header-align="center" align="center" label="操作">
            <template slot-scope="scope">
              <button v-if="isAuth('sys:org:update')" @click="addOrUpdateHandle(scope.row)">修改</button>
              <button v-if="isAuth('sys:org:delete')" @click="deleteHandle(scope.row)">删除</button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-card>
      <el-dialog
        :title="!ruleForm.id ? '新增机构': '修改机构'"
        width="40%"
        :append-to-body="true"
        :visible.sync="visible"
        :modal-append-to-body="false"
        @close="closeForm()"
      >
        <el-form
          :model="ruleForm"
          :inline="false"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          @submit.native.prevent
        >
          <el-card shadow="never">
            <div>
              <el-form-item label="上级部门名称:" prop="parentName">
                <el-input v-model="ruleForm.parentName" placeholder="请输入内容" clearable disabled></el-input>
              </el-form-item>
              <el-form-item label="本级部门编码:" prop="code">
                <el-input v-model="ruleForm.code" placeholder="请输入本级部门编码" clearable></el-input>
              </el-form-item>
              <el-form-item label="本级部门名称:" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入本级部门名称" clearable></el-input>
              </el-form-item>
              <el-form-item label="部 门 描 述:" prop="remark">
                <el-input
                  v-model="ruleForm.remark"
                  type="textarea"
                  :rows="5"
                  resize="none"
                  placeholder="请输入部门描述"
                ></el-input>
              </el-form-item>
              <div slot="footer" style=" text-align: center;">
                <el-button @click="addsave">保存</el-button>
                <el-button @click="closeForm">取 消</el-button>
              </div>
            </div>
          </el-card>
        </el-form>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      word: '', //查询
      dataList: [], //列表
      dataListLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      addOrUpdateVisible: false,
      ruleForm: {},
      visible: false,
      orgInfo: {},
      orgId: '',
      rules: {}, //添加规则
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        id: 'id'
      }
    }
  },
  created() {
    this.getList()
    this.orgInfo = this.data[0]
  },
  methods: {
    getList() {
      this.$http({
        url: this.$http.adornUrl('/sysOrg/orgAllList'),
        method: 'GET'
      }).then(data => {
        if (data) {
          this.data = data.list
        }
      })
    },
    handleNodeClick(data) {
      this.ruleForm.parentId = data.id
      this.ruleForm.parentName = data.name
      this.orgId = data.id
      this.orgInfo = data
      this.getDataList()
    },
    changeCur(currentRow) {
      this.orgInfo = currentRow
    },
    getDataList() {
      this.$http({
        url: this.$http.adornUrl('/sysOrg/orgList'),
        method: 'post',
        params: {
          page: this.pageIndex,
          limit: this.pageSize,
          id: this.orgId
        }
      }).then(data => {
        if (data) {
          this.dataList = data.page.records
          this.totalPage = data.page.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    }, // 删除
    deleteHandle(row) {
      this.orgInfo = row
      this.orgInfo.deleted = 1
      this.$confirm(`确认删除该部门?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/sysOrg/update'),
            method: 'post',
            data: this.orgInfo
          }).then(res => {
            if (res && res.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                  this.getList()
                }
              })
            } else {
              this.$message.error(res.msg)
            }
          })
        })
        .catch(err => {
          this.$message.error(err)
        })
    },
    //添加或修改事件
    addOrUpdateHandle(row, flagType) {
      this.visible = true

      if (row) {
        this.ruleForm = row
      } else {
        this.ruleForm = {}
        this.ruleForm.parentId = this.orgInfo.id
        this.ruleForm.parentName = this.orgInfo.name
      }
    },
    // 提交
    addsave() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/sysOrg/${!this.ruleForm.id ? 'save' : 'update'}`
            ),
            method: 'post',
            data: this.ruleForm
          }).then(data => {
            console.log(data)
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.getDataList()
                  this.getList()
                  this.$nextTick()
                }
              })
            } else {
              this.$message.error(data)
            }
          })
        }
      })
    },
    closeForm() {
      this.visible = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      // this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    }
  }
}
</script>
<style lang='scss' scoped>
.infopage {
  background-color: #b9c9e3;
  margin: 24px;
  padding: 24px;
  height: 750px;
  .pageLeft {
    height: 600px;
    border-right: 1px solid #909399;
    .form {
      border-bottom: 1px solid #909399;
      width: 100%;
    }
  }
}
</style>
