<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { http } from '../api/http';

const plans = ref<any[]>([]);

async function load() {
  plans.value = await http.get('/plans');
}

async function save(row: any) {
  await http.patch(`/plans/${row.id}`, row);
  await load();
}

onMounted(load);
</script>

<template>
  <div>
    <div class="page-head"><div><h1>套餐管理</h1><p>月度积分、成员与任务上限</p></div></div>
    <div class="panel">
      <el-table :data="plans">
        <el-table-column prop="code" label="编码" width="130" />
        <el-table-column label="名称"><template #default="{ row }"><el-input v-model="row.name" /></template></el-table-column>
        <el-table-column label="价格"><template #default="{ row }"><el-input-number v-model="row.priceMonthly" :min="0" /></template></el-table-column>
        <el-table-column label="月积分"><template #default="{ row }"><el-input-number v-model="row.monthlyCredits" :min="0" /></template></el-table-column>
        <el-table-column label="成员"><template #default="{ row }"><el-input-number v-model="row.maxMembers" :min="0" /></template></el-table-column>
        <el-table-column label="项目"><template #default="{ row }"><el-input-number v-model="row.maxProjects" :min="0" /></template></el-table-column>
        <el-table-column label="并发"><template #default="{ row }"><el-input-number v-model="row.maxConcurrentTasks" :min="0" /></template></el-table-column>
        <el-table-column label="操作" width="100"><template #default="{ row }"><el-button type="primary" text @click="save(row)">保存</el-button></template></el-table-column>
      </el-table>
    </div>
  </div>
</template>
