<template>
  <div class="default-main" >
    <el-row :gutter="20">
      <el-col :span="4" :lg="4" :xl="4" :md="24" :xs="24" :sm="24">
        <el-card class="el-card is-hover-shadow" header="企业架构">
          <el-row>
            <el-col :span="24">
              <el-tree :data="treeUtils.treeObj.data" :props="treeUtils.defaultProps" @current-change="name"
                style="color:rgba(0,0,0,.65);" :default-expand-all="true" ref="tree" node-key="id" />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="20" :lg="20" :xl="20" :md="24" :xs="24" :sm="24">
        <el-card class="el-card is-hover-shadow" header="机构列表">
          <!-- style="height:calc(100vh - 107px);"-->
          <el-row>
            <el-col :span="24">
              <!-- 表格顶部菜单 -->
              <TableHeader :buttons="['refresh', 'add', 'edit', 'delete']" quick-search-placeholder="通过机构名称模糊搜索"
                @action="baTable.onTableHeaderAction" />

              <Table @action="baTable.onTableAction" />

            </el-col>

            <!-- 表单 -->
            <PopupForm ref="formRef" />

          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { provide, ref, reactive, toRefs, onMounted, watch } from 'vue'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import PopupForm from './popupForm.vue'
import { sysOrg } from '/@/api/controllerUrls'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'

import { ElForm } from 'element-plus'
import treeClass from '/@/utils/tree'

const tableRef = ref()

const tree = ref()

const baTable = new baTableClass(
    new baTableApi(sysOrg),
    {
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: '名称', prop: 'name', align: 'center', operator: false },
            { label: '唯一编码', prop: 'code', align: 'center', operator: false },
            { label: '排序', prop: 'sort', align: 'center', operator: false },
            { label: '备注', prop: 'remark', align: 'center', operator: false },
            {
                label: '操作',
                align: 'center',
                width: '100',
                render: 'buttons',
                buttons: defaultOptButtons(['edit', 'delete']),
                operator: false,
            },
        ],
        dblClickNotEditColumn: [undefined, 'status'],
    },
    {
        defaultItems: {
            parentName: '',
            pids: '',
        },
    },
    {
        // 提交前
        onSubmit: (params: { formEl: InstanceType<typeof ElForm> }) => {
            var items = cloneDeep(baTable.form.items!)

            // 表单验证通过后执行的api请求操作
            let submitCallback = () => {
                baTable.form.submitLoading = true
                baTable.api
                    .postData(baTable.form.operate!, items)
                    .then((res) => {
                        baTable.onTableHeaderAction('refresh', {})
                        baTable.form.submitLoading = false
                        baTable.form.operateIds?.shift()
                        if (baTable.form.operateIds?.length! > 0) {
                            baTable.toggleForm('edit', baTable.form.operateIds)
                        } else {
                            treeUtils.BindTrees()
                            baTable.toggleForm()
                        }
                        baTable.runAfter('onSubmit', { res })
                    })
                    .catch((err) => {
                        baTable.form.submitLoading = false
                    })
            }

            if (params.formEl) {
                baTable.form.ref = params.formEl
                params.formEl.validate((valid) => {
                    if (valid) {
                        submitCallback()
                    }
                })
            } else {
                submitCallback()
            }
            return false
        },
    }
)

const treeUtils = new treeClass(sysOrg + 'initialOrgTree', { children: 'children', label: 'label' })

provide('baTable', baTable)

onMounted(() => {
    treeUtils.BindTrees()
    let node = getNode()
    baTable.table.ref = tableRef.value
    baTable.form.defaultItems!.parentName = node ? node.label : '无顶级'
    baTable.form.defaultItems!.pid = 0
    baTable.form.defaultItems!.pids = '0'
    baTable.table.filter!.pid = 0
    baTable.mount()
    baTable.getIndex()
})

function name(treeItem: { pid: number; label: String; id: number }) {
    baTable.form.defaultItems!.parentName = treeItem.label
    baTable.form.defaultItems!.pid = treeItem.id
    baTable.form.defaultItems!.pids = treeUtils.FindTreePids(treeItem.pid)
    baTable.table.filter!.pid = treeItem.id
    baTable.onTableHeaderAction('refresh', { loading: true })
}

function getNode() {
    return tree.value.getNode(0)
}

watch(
    () => baTable.table.actionStruct,
    (newVal) => {
        if (newVal?.name == 'del') {
            newVal.data.map((item: number) => {
                tree.value.remove(item)
            })
        }

        if (newVal?.name == 'edit') {
            tree.value.getNode(newVal.data.id).label = newVal.data.label
        }
    },
    { deep: true }
)
</script>

<script lang="ts">
import { defineComponent } from 'vue'
import { cloneDeep, String } from 'lodash'
export default defineComponent({
    name: 'organizational/mechanism',
})
</script>


<style scoped>
</style>
