<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: any = 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>
