<template>
  <div class="app-container">
    <Custom-table
      :tableConfigData="tableConfigData"
      @handle-show="handleShow"
		>
    <template v-slot:drawer>
      <el-form-item
        v-for="(item, index) in tableConfigData.tableTitle"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
        <custom-form-item
          v-model:modValue="tableConfigData.drawerformData[item.prop]"
          :type="item.type"
          :inputType="item.inputValue"
          :options="tableData"
          :selectProp="item.selectProp"
        >
          <template v-slot:radios>
            <el-radio :label="0">一级菜单</el-radio>
            <el-radio :label="1">子菜单</el-radio>
          </template>
        </custom-form-item>
      </el-form-item>
    </template>
		</Custom-table>
  </div>
</template>

<script lang="ts">
import { ref, Ref, reactive } from 'vue'
import { Scope } from '@/table/type'
import CustomFormItem from '@/table/components/edit.vue'
import { menuConfigData } from './tableConfigData/menuManage'
export default {
  name: 'MenuManage',
  components: {
    'custom-form-item': CustomFormItem
  },
  setup() {
    // 列表数据
    const tableConfigData = reactive(menuConfigData)
    const tableData: Ref<any[]> = ref([])
    const handleShow = ref((params: { key: string, tableData: object[], scope?: Scope }) => {
      tableData.value = params.tableData
      const key = params.key
      switch (key) {
        case '新增':
          tableConfigData.drawerformData = {
            id: '',
            type: 0,
            title: '',
            component: '',
            path: '',
            sortNo: 0,
            apiKey: '',
            parentId: '',
            icon: '',
            is_show: true
          }
          break
        case '编辑': {
          if (!params.scope) return false
          const row = params.scope.row
          tableConfigData.drawerformData = {
            id: row.id,
            type: row.type,
            title: row.title,
            component: row.component,
            path: row.path,
            sortNo: row.sortNo,
            apiKey: row.apiKey,
            parentId: row.parentId,
            icon: row.icon,
            is_show: row.is_show
          }
          break
        }
      }
    })
    return {
      tableConfigData,
      handleShow,
      tableData
    }
  }
}
</script>

<style lang="scss">

</style>
