<template>
  <div style="display:flex">
    <div class="menus-container">
      <div class="toolbar">
        <div class="inner-toolbar">
          <div class="toolbar-btns">
            <el-button size="mini" v-if="checkPermission(['branch:add'])" type="primary"
              @click="handleAddBranch">新增</el-button>
          </div>
        </div>
      </div>
      <div style="overflow:auto;height:540px;background:#fff;">
        <el-tree :data="deptList" node-key="identifier" :expand-on-click-node="false" default-expand-all>
          <span class="custom-tree-node" slot-scope="{node, data}" @click="handleEditBranch(data)">
            <span>{{ data.name }}</span>
          </span>
        </el-tree>
      </div>
      <el-dialog title="添加部门" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-form :model="deptForm" ref="deptForm" label-width="130px">
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="deptForm.name" :maxlength="6"></el-input>
          </el-form-item>
          <el-form-item label="部门编码" prop="sn">
            <el-input v-model="deptForm.sn" :maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="上级部门" prop="auth_regular">
            <el-cascader v-model="deptForm.parent_id" :options="deptList" :props="{
              label: 'name',
              value: 'id',
              emitPath: false,
              checkStrictly: true
            }" clearable></el-cascader>
          </el-form-item>
          <el-form-item label="所在地区" prop="auth_regular">
            <en-region-picker :api="MixinRegionApi" :default="defaultRegions"
              @changed="(object) => { deptForm.region = object.last_id }" />
          </el-form-item>
          <el-form-item label="部门类型" prop="auth_regular">
            <el-select v-model="deptForm.type" placeholder="请选择部门类型" size="small">
              <el-option v-for="item in deptType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="显示顺序" prop="sort">
            <el-input v-model="deptForm.sort" :maxlength="2"></el-input>
          </el-form-item>
          <el-form-item label="部门说明" prop="remark">
            <el-input v-model="deptForm.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 4 }"
              placeholder="请输入部门说明"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitBranchForm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="basicsetting-container">
      <el-form class="form" :model="deptForm" ref="deptForm" label-width="120px" v-if="dialogEditVisible">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="deptForm.name" :maxlength="6"></el-input>
        </el-form-item>
        <el-form-item label="部门编码" prop="sn">
          <el-input v-model="deptForm.sn" :maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="上级部门" prop="parent_id">
          <el-cascader v-model="deptForm.parent_id" :options="deptList" :props="{
            label: 'name',
            value: 'id',
            emitPath: false,
            checkStrictly: true
          }" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="所在地区" prop="region">
          <en-region-picker :api="MixinRegionApi" :default="defaultRegions"
            @changed="(object) => { deptForm.region = object.last_id }" />
        </el-form-item>
        <el-form-item label="部门类型" prop="type">
          <el-select v-model="deptForm.type" placeholder="请选择部门类型" size="small">
            <el-option v-for="item in deptType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="显示顺序" prop="sort">
          <el-input v-model="deptForm.sort" :maxlength="2"></el-input>
        </el-form-item>
        <el-form-item label="部门说明" prop="remark">
          <el-input v-model="deptForm.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 4 }"
            placeholder="请输入部门说明"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitBranchForm" v-if="checkPermission(['branch:edit'])">保 存</el-button>
          <el-button type="danger" @click="handleDeleteBranch" v-if="checkPermission(['branch:del'])">删 除</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as API_Setting from '@/api/setting'
import { Foundation } from '~/ui-utils'
export default {
  name: 'branch',
  data() {
    return {
      defaultRegions: null,
      deptList: [],
      deptType: [],
      branchForm: {},
      // 列表loading状态
      loading: false,
      // 列表参数
      params: {
        page_no: 1,
        page_size: 10
      },
      // 列表数据
      tableData: '',
      // 部门表单
      deptForm: {
        sort: 1
      },
      // 部门表单 dialog
      dialogVisible: false,
      dialogEditVisible: false
    }
  },
  mounted() {
    this.GET_DeptList()
    this.GET_DictDataInfo()
  },
  methods: {
    GET_DictDataInfo() {
      API_Setting.getDictDataInfo('erp_dept_type').then(response => {
        this.deptType = response
      })
    },
    /** 获取菜单 */
    GET_DeptList() {
      API_Setting.getDeptList().then(response => {
        this.deptList = Foundation.buildTree(response, '0')
      })
    },
    /** 添加部门 */
    handleAddBranch() {
      this.deptForm = {
        sort: 1,
        type: this.deptType.find(function(sc) { return sc.default_flag === true }) ? this.deptType.find(function(sc) { return sc.default_flag === true }).value : ''
      }
      this.defaultRegions = []
      this.dialogEditVisible = false
      this.dialogVisible = true
    },

    /** 编辑部门 */
    handleEditBranch(row) {
      this.deptForm = this.MixinClone(row)
      this.defaultRegions = row.region_ids
      this.dialogEditVisible = true
    },

    /** 删除部门 */
    handleDeleteBranch() {
      this.$confirm('确定要删除这个部门吗？', '提示', { type: 'warning' }).then(() => {
        const { id } = this.deptForm
        API_Setting.deleteDept({ id: id }).then(() => {
          this.$message.success('删除成功！')
          this.dialogEditVisible = false
          this.GET_DeptList()
        })
      }).catch(() => { })
    },
    /** dialog打开后重置form表单校验结果 */
    handleDialogOpen() {
      setTimeout(() => { this.$refs['deptForm'].clearValidate() })
    },

    /** 提交部门表单 */
    submitBranchForm() {
      const { id, region } = this.deptForm
      const params = this.MixinClone(this.deptForm)
      if (!region) {
        this.$message.error('请选择所在地区！')
        return false
      }
      if (id) {
        API_Setting.editDept(params).then(response => {
          this.dialogVisible = false
          this.$message.success('修改成功！')
          this.GET_DeptList()
        })
      } else {
        API_Setting.addDept(params).then(() => {
          this.dialogVisible = false
          this.$message.success('添加成功！')
          this.GET_DeptList()
        })
      }
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.toolbar {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 44px;
  border-bottom: 1px solid #e6ebf5;
  background-color: #fff;
}

.inner-toolbar {
  padding: 0 20px;

  .categary {
    padding-right: 10px;
    font-size: 14px;
  }
}

.face-image {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

/deep/ .el-dialog__body {
  padding: 10px 20px;
}

.basicsetting-container {
  background-color: #fff;
  flex: 2;
  margin: 10px 0 0 10px;

  .form {
    padding-top: 20px;
    width: 500px;
  }
}

.menus-container {
  flex: 1;
  margin: 10px 0 0 10px;

  /deep/ .el-tree {
    width: 500px;
  }

  /deep/ .el-icon-minus {
    color: #F56C6C;
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
