<template>
  <div class="workflow-page">
    <!-- 顶部按钮区域 -->
    <div class="button-group">
      <el-button
        type="primary"
        @click="openForm('create')"
        v-hasPermi="['iscs:map:create']"
      >
        <el-icon>
          <Plus />
        </el-icon>
        添加
      </el-button>
      <el-button
        type="danger"
        :disabled="multiple"
        @click="handleDelete"
        v-hasPermi="['iscs:map:delete']"
      >
        <el-icon>
          <Delete />
        </el-icon>
        批量删除
      </el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table-container">
      <el-table
        ref="tableRef"
        :data="tableData"
        @selection-change="handleSelectionChange"
        border
        stripe
        row-key="id"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="编号" align="center" prop="id" />
        <el-table-column label="组件" align="center" prop="componentName" />
        <el-table-column label="行" align="center" prop="componentRow" />
        <el-table-column label="列" align="center" prop="componentColumn" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="openForm('update', scope.row.id)"
              v-hasPermi="['iscs:map:update']"
            >
              编辑
            </el-button>
            <el-button
              link
              type="danger"
              @click="handleDelete(scope.row.id)"
              v-hasPermi="['iscs:map:delete']"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <!-- 表单弹窗：添加/修改 -->
    <tableViewForm ref="formRef" :page-id="pageId" @success="getList"/>
    </div>

</template>

<script setup lang="ts">
import * as rolePageApi from '@/api/system/rolePage/index'
import {Delete, Plus} from "@element-plus/icons-vue";
import {ref} from "vue";
import tableViewForm from "./tableViewForm.vue";


const route = useRoute()
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const formRef = ref()
const multiple = ref(true) // 非多个禁用
const ids = ref() // 选中的数据
// 响应式数据
const tableData = ref([])
const props = defineProps({
  pageId: {
    type: [String, Number],
    default: null
  }
})

onMounted(()=>{
  getList()
})

// 获取数据
const getList=async()=>{
  const data=await rolePageApi.selectRolePageById(props.pageId||route.query.id);
  tableData.value=data.pageUiComponentDOList
  console.log(data,tableData.value,'getPageUiComponentPage')
}

// 表格数据选择，选中
const handleSelectionChange=(selection:any[])=>{
  ids.value=selection.map((item)=>item.id)
  multiple.value=!selection.length
}
// 新增/修改
const openForm = (type: string, id?: number) => {
  formRef.value?.open(type, id)
}

const handleDelete=async(id?:number)=>{
  try{
    await message.delConfirm()
    // 类型守卫处理
    const realId = id instanceof PointerEvent
      ? ids.value
      : id || ids.value;
    await rolePageApi.deletePageUiComponentList(realId)
    message.success(t('common.delSuccess'))
    await getList()
  }catch(error){
    console.error('删除失败:', error)
    message.error(t('common.delFailed'))
  }
}
</script>

<style scoped lang="scss">
.button-group{
  margin-bottom: 10px;
}
</style>
