<script setup>
import { asyncFilteredRoutes } from '~/router/index'

const emit = defineEmits(['close'])

const customNodeClass = (data, node) => {
  if (data.isPenultimate)
    return 'is-penultimate'

  return null
}

const defaultProps = {
  children: 'children',
  label: 'label',
  class: customNodeClass,
}
const checkedKeys = ref([])

const allRoutes = computed(() => {
  const routes = [...asyncFilteredRoutes]
  return routes.sort((a, b) => a.meta.sort - b.meta.sort)
})

const routeData = ref([])
initPermission()
function initPermission() {
  routeData.value = []
  allRoutes.value.map((val) => {
    if (val.meta.hidden) {
      if (Array.isArray(val.children)) {
        val.children.map((value) => {
          const obj = handleItem(value)
          obj.isPenultimate = true
          routeData.value.push(obj)
        })
      }
    }
    else {
      const obj = handleItem(val)
      if (!val.children)
        obj.isPenultimate = true

      routeData.value.push(obj)
    }
  })

  checkedKeys.value = ['yhzx_jsxx']
}

// 权限
function handleItem(item) {
  const returnObj = {
    // id: item.id,
    label: item.meta.title,
    name: item.name,
  }

  if (Array.isArray(item.children)) {
    const arr = []
    init(item.children, arr)
    returnObj.children = arr
  }
  else {
    returnObj.children = [
      {
        name: `${item.name}add`,
        label: '添加',
      },
      {
        name: `${item.name}edit`,
        label: '编辑',
      },
    ]
  }

  return returnObj
}

function init(arg, arr) {
  arg.map((val) => {
    if (val.meta.hidden == undefined || val.meta.hidden == false) {
      const obj = handleItem(val)
      if (!val.children)
        obj.isPenultimate = true

      arr.push(obj)
    }
    else if (val.children) {
      init(val.children, arr)
    }
  })
}

const ruleFormRef = ref(null)
const ruleForm = reactive({
  bmmc: '',
  rs: '',
  fzr: '',
})

const handleCheckChange = (
  data,
  checked,
  indeterminate,
) => {
  console.log(data, checked, indeterminate)
}

const handleCancel = (type) => {
  emit('close', type)
}

const handleSubmit = () => {
  handleCancel(1)
}
</script>

<template>
  <div class="addAndEdit px-50px">
    <el-form ref="ruleFormRef" class="mb-10" :model="ruleForm" :rules="rules" label-width="60px">
      <el-form-item label="部门">
        办公室
      </el-form-item>
      <el-form-item label="权限">
        <el-tree :data="routeData" node-key="name" :props="defaultProps" show-checkbox default-expand-all :default-checked-keys="checkedKeys" :expand-on-click-node="false" highlight-current @check-change="handleCheckChange" />
      </el-form-item>
    </el-form>

    <div class="flex_center space-x-12">
      <el-button size="large" @click="handleCancel(2)">
        取消
      </el-button>
      <el-button size="large" type="primary" @click="handleSubmit">
        确定
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-form) {
  .el-tree-node.is-expanded.is-penultimate > .el-tree-node__children {
    display: flex;
    flex-direction: row;
  }
  // .is-penultimate > .el-tree-node__children > div {
  //   width: 50%;
  // }
}
</style>
