<template>
  <a-card class="organization-wrap" :bordered="false">
    <!-- 新建 -->
    <div class="table-operator"><a-button id="organization-add" type="primary" icon="plus" @click="addOrg()" v-hasPermission="'B_basicSettings_organization_add'">添加最高级</a-button></div>
    <!-- 表格列表 -->
    <s-table
      class="s-table"
      ref="table"
      size="default"
      rowKey="id"
      :showPagination="false"
      :columns="columns"
      :data="loadData"
      bordered>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <a-button
          v-if="record.parentIdPaths.split(',').length < 5"
          type="link"
          size="small"
          icon="plus"
          class="btn-add-s"
          id="organization-addSubItem"
          @click="addOrg(text)"
          v-hasPermission="'B_basicSettings_organization_add_child'">添加子级</a-button>
        <a-button
          type="link"
          size="small"
          icon="edit"
          class="btn-edit-s"
          id="organization-edit"
          @click="editOrg(text)"
          v-hasPermission="'B_basicSettings_organization_edit'">编辑</a-button>
        <a-button
          type="link"
          size="small"
          icon="delete"
          class="btn-del-s"
          id="organization-del"
          @click="delOrg(text)"
          v-hasPermission="'B_basicSettings_organization_del'">删除</a-button>
      </template>
    </s-table>
    <!-- 添加子级 -->
    <a-modal
      class="organization-modal"
      :title="title"
      :visible="visible"
      :footer="null"
      :closable="true"
      @cancel="onCancel"
      width="600px">
      <!-- 表单 -->
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="网点名称" prop="name">
          <a-input v-model.trim="form.name" id="organization-itemName" :maxLength="30" placeholder="请输入组织机构名称,30个字以内" />
        </a-form-model-item>
        <a-form-model-item class="btn-cont">
          <a-button type="primary" id="organization-save" @click="onSubmit">保存</a-button>
          <a-button class="cancel" id="organization-cancel" @click="onCancel">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import { STable, VSelect } from '@/components'
import { findOrgTree, saveAtorg, delAtorg } from '@/api/atorg.js'
export default {
  components: { STable, VSelect },
  data () {
    return {
      columns: [
        { title: '组织机构名称', dataIndex: 'name', width: '100', align: 'left' },
        { title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: '265', align: 'center' }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return findOrgTree().then(res => {
          //  递归去除空children
          this.recursionFun(res.data)
          return res.data
        })
      },
      title: '新增', //  对话框标题
      visible: false, //  对话框是否可见
      form: { //  新增编辑  组织机构
        name: ''
      },
      rules: { //  表单校验规则
        name: [{ required: true, message: '请输入组织机构名称', trigger: 'blur' }]
      },
      nowId: '', //  当前操作的数据id
      nowPid: '' //  当前操作的数据上级id
    }
  },
  methods: {
    //  添加子级
    addOrg (item) {
      this.nowId = ''
      this.form.name = ''
      if (item) { //  子级
        this.nowPid = item.id
      } else { //  最高级
        this.nowPid = ''
      }
      this.title = '新增'
      this.visible = true
    },
    //  编辑
    editOrg (item) {
      this.nowId = item.id
      this.nowPid = item.pid
      this.title = '编辑'
      this.form.name = item.name
      this.visible = true
    },
    //  保存
    onSubmit () {
      const _this = this
      _this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const formData = JSON.parse(JSON.stringify(_this.form))
          formData.id = _this.nowId
          formData.pid = _this.nowPid
          saveAtorg(formData).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$refs.table.refresh(true)
              _this.visible = false
            }
          })
        } else {
          return false
        }
      })
    },
    //  关闭对话框
    onCancel () {
      this.$refs.ruleForm.resetFields()
      this.visible = false
    },
    //  删除
    delOrg (item) {
      const _this = this
      _this.nowId = item.id
      _this.$confirm({
        title: '提示',
        content: '删除后原数据不可恢复，是否删除？',
        onOk () {
          delAtorg({ id: _this.nowId }).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$refs.table.refresh()
            }
          })
        }
      })
    },
    //  递归函数
    recursionFun (data) {
      if (data) {
        data.map(item => {
          if (item.children && item.children.length == 0) {
            delete item.children
          } else {
            this.recursionFun(item.children)
          }
        })
      }
    }
  }
}
</script>

<style lang="less">
  .organization-wrap{
    // 表格
    .s-table{
      .btn-edit-s{
        color: #1891ff;
        margin: 0 5px;
      }
      .btn-del-s{
        color: #ff4d4f;
      }
      .btn-edit-s.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .btn-edit-s.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
        color: #1891ff;
        border-color: #1891ff;
      }
      .btn-del-s.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .btn-del-s.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
        color: #ff4d4f;
        border-color: #ff4d4f;
      }
    }
  }
  // 弹框
  .organization-modal{
    .btn-cont{
      text-align: center;
      .cancel {
      	margin-left: 50px;
      }
    }
  }
</style>
