<script lang="ts" setup>
import PaneModel from '@/components/splitpanes/PaneModel.vue'
import { ElTree } from 'element-plus'
import type { BasicForm, ICRUD } from '@/types/form'
import SelIcon from '@/components/SelIcon.vue'

interface Tree {
  id: number
  label: string
  children?: Tree[]
  icon?: string
}
const config = {
  size: 20,
  lMinSize: 20
}
const configSmall = {
  size: 50
}
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const defaultProps = {
  children: 'children',
  label: 'label'
}
const data: Tree[] = [
  {
    id: 1,
    label: '系统管理',
    icon: 'Edit',
    children: [
      {
        id: 3,
        label: '用户管理',
        icon: 'Edit'
      },
      {
        id: 4,
        label: '角色管理',
        icon: 'Edit'
      }
    ]
  },
  {
    id: 2,
    label: '组织机构',
    icon: 'Edit',
    children: [
      {
        id: 5,
        label: '机构管理',
        icon: 'Edit'
      }
    ]
  }
]
const dialogVisible = ref(false)

watch(filterText, val => {
  treeRef.value?.filter(val)
})
const filterNode = (value: string, data: any) => {
  if (!value) return true
  return data.label.includes(value)
}
const menuId = ref('')
const handleNodeClick = (val: any) => {
  menuId.value = val.id
}
const changeType = (val: number) => {
  console.log(val)
}
const formConfig = reactive<BasicForm>({
  span: 24,
  props: {
    labelPosition: 'right'
  },
  formItems: [
    {
      label: '显示姓名',
      value: '',
      name: 'name',
      type: 'input',
      rules: [{ required: true, message: '请输入显示姓名', trigger: 'blur' }]
    },
    {
      label: '多语言编码',
      value: '',
      name: 'loginName',
      type: 'input'
    },
    {
      label: '上级菜单',
      value: '',
      name: 'company',
      type: 'select'
    },
    {
      label: '类型',
      value: 1,
      name: 'type',
      type: 'select',
      options: [
        { label: '目录', value: 1 },
        { label: '菜单', value: 2 },
        { label: '按钮', value: 3 },
        { label: '路由', value: 4 }
      ],
      events: {
        change: changeType
      }
    },
    {
      label: '链接地址',
      value: '',
      name: 'loginName',
      type: 'input',
      placeholder: '请填写路由路径或者超链接'
    },
    {
      label: '链接类型',
      value: '',
      name: 'company',
      type: 'select',
      options: [
        { label: 'link', value: 1 },
        { label: 'iframe', value: 2 }
      ],
      placeholder: '路由请留空，http链接选择iframe，新窗口打开选择link'
    },
    {
      label: '菜单图标',
      value: '',
      name: 'remark',
      type: 'input',
      slots: [
        {
          name: 'append',
          alias: 'append1'
        }
      ]
    },
    {
      label: '可见',
      value: '',
      name: 'vis',
      type: 'radio-group',
      options: [
        {
          label: '1',
          value: '显示'
        },
        {
          label: '0',
          value: '隐藏'
        }
      ]
    },
    {
      label: '固定在标签栏',
      value: '',
      name: 'vis',
      type: 'radio-group',
      options: [
        {
          label: '1',
          value: '是'
        },
        {
          label: '0',
          value: '否'
        }
      ]
    },
    {
      label: '隐藏面包屑',
      value: '',
      name: 'vis',
      type: 'radio-group',
      options: [
        {
          label: '1',
          value: '是'
        },
        {
          label: '0',
          value: '否'
        }
      ]
    },
    {
      label: '授权标识',
      value: '',
      name: 'loginName',
      type: 'input',
      placeholder: '多个用逗号隔开'
    },
    {
      label: '备注',
      value: '',
      name: 'loginName',
      type: 'input',
      props: {
        autosize: {
          minRows: 2,
          maxRows: 6
        },
        type: 'textarea'
      }
    }
  ]
})
const create = (data: any) => {
  console.log(data)
}
const update = (data: any) => {
  console.log(data)
}
const formData = reactive<any>({})

const selIcon = () => {
  dialogVisible.value = true
}
const setIcon = (val: string) => {
  console.log(val)
  dialogVisible.value = false
  formData.remark = val
}
const CRUD: ICRUD = {
  create(data) {
    return new Promise(resolve => console.log(data))
  },
  update(data) {
    return new Promise(resolve => console.log(data))
  },
  getList() {
    return new Promise(resolve => {
      resolve({
        list: [],
        total: 2
      })
    })
  },
  delete(data) {
    return new Promise(resolve => console.log(data))
  },
  deleteBatch(data) {
    return new Promise(resolve => console.log(data))
  }
}
const logtFormConfig = reactive<BasicForm>({
  span: 24,
  formItems: [
    {
      label: '数据规则名称',
      value: '',
      name: 'loginName',
      type: 'input'
    },
    {
      label: '规则mapper方法',
      value: '',
      name: 'loginName',
      type: 'input'
    }
  ]
})
const curRow = ref<any>(null)
const handleRowClick = ({ row }: { row: any }) => {
  console.log(row)
  curRow.value = row
}
const rowClassName = ({ row }: { row: any }) => {
  if (row.id === curRow.value.id) {
    return 'active'
  }
}
</script>

<template>
  <PaneModel :config="config">
    <template #left>
      <el-card class="left">
        <el-container>
          <el-header>
            <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
          </el-header>
          <el-main>
            <el-tree
              ref="treeRef"
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              show-checkbox
              @node-click="handleNodeClick"
            >
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <el-icon :size="18">
                    <component :is="data.icon" />
                  </el-icon>
                  <span>{{ node.label }}</span>
                </span>
              </template>
            </el-tree>
          </el-main>
          <el-footer>
            <el-button icon="plus" type="primary" size="small"></el-button>
            <el-button icon="delete" type="danger" size="small"></el-button>
            <el-button icon="refresh" size="small"></el-button>
          </el-footer>
        </el-container>
      </el-card>
    </template>
    <template #right>
      <el-empty v-if="menuId == ''" description="请选择左侧菜单后操作" />
      <PaneModel v-else :config="configSmall" class="form-scoll">
        <template #left>
          <el-card class="right">
            <template #header>
              <span>office管理</span>
            </template>
            <pro-form
              class="form-wrap"
              :formConfig="formConfig"
              :formData="formData"
              ref="proFormRef"
              :update="update"
              :create="create"
            >
              <template #append> testt </template>
              <template #append1>
                <el-button @click="selIcon">
                  <el-icon class="el-icon--right"><MoreFilled /></el-icon>
                </el-button>
              </template>
            </pro-form>
            <div class="text-center">
              <el-button type="primary">保存</el-button>
            </div>
          </el-card>
        </template>
        <template #right>
          <pro-table
            :crud="CRUD"
            :toolbarConfig="{ custom: true }"
            :formConfig="logtFormConfig"
            :row-class-name="rowClassName"
            @cell-click="handleRowClick"
          >
            <template #header>
              <span class="card-header">数据权限规则</span>
            </template>
            <vxe-column field="description" title="数据规则名称"></vxe-column>
            <vxe-column field="type" title="规则mapper方法"></vxe-column>
          </pro-table>
        </template>
      </PaneModel>
    </template>
  </PaneModel>
  <SelIcon v-if="dialogVisible" :dialogVisible="dialogVisible" @closeIcon="setIcon" />
</template>

<style lang="scss" scoped>
:deep(.splitpanes__splitter) {
  background: transparent !important;
}
.el-container {
  height: 100%;
}
.card-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--el-card-border-color);
  box-sizing: border-box;
  margin-top: -2px;
  margin-bottom: 16px;
}
.right {
  height: 100%;
  :deep(.el-card__body) {
    height: 100%;
  }
  .form-wrap {
    padding-right: 20px;
  }
}
.el-empty {
  height: 100%;
  background-color: #fff;
}
.form-scoll {
  :deep(.el-card__body) {
    overflow: auto;
  }
}
:deep(.splitpanes__pane) {
  background-color: #fff;
}
.left {
  height: 100%;
  :deep(.el-tree-node__content) {
    height: 36px;
  }
  .custom-tree-node {
    display: flex;
    align-items: center;
    span {
      margin-left: 5px;
    }
  }
  .el-header {
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 53px;
  }
  :deep(.el-card__body) {
    padding: 0;
    height: 100%;
  }
  .el-main {
    overflow: auto;
    flex: 1;
    flex-basis: 100%;
  }
  .el-footer {
    border-top: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
  }
}
</style>
