<script setup lang="ts">
import { Plus, Refresh } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { http } from '../api/http';

const plans = ref<any[]>([]);
const dialog = ref(false);
const form = reactive({
  code: '',
  name: '',
  priceMonthly: 0,
  monthlyCredits: 0,
  maxMembers: 1,
  maxProjects: 1,
  maxConcurrentTasks: 1,
  features: '',
  isActive: 1,
});

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

async function save(row: any) {
  await http.patch(`/plans/${row.id}`, row);
  ElMessage.success('资源包已保存');
  await load();
}

async function createPlan() {
  await http.post('/plans', form);
  ElMessage.success('资源包已创建');
  dialog.value = false;
  await load();
}

onMounted(load);
</script>

<template>
  <div>
    <div class="page-head">
      <div><h1>资源包配置</h1><p>套餐、增量包与试用包的额度、价格和上架策略</p></div>
      <div class="page-actions">
        <el-button :icon="Refresh" @click="load">刷新</el-button>
        <el-button type="primary" :icon="Plus" @click="dialog = true">新建资源包</el-button>
      </div>
    </div>
    <div class="workflow-strip">
      <span><b>1</b>配置基础权益</span>
      <span><b>2</b>设置积分与上限</span>
      <span><b>3</b>保存价格策略</span>
      <span><b>4</b>前端上架售卖</span>
    </div>
    <div class="toolbar plan-filter">
      <el-input placeholder="搜索资源包名称或编码" clearable />
      <el-select placeholder="资源包类型" clearable>
        <el-option label="标准套餐" value="standard" />
        <el-option label="增量包" value="addon" />
        <el-option label="试用包" value="trial" />
      </el-select>
      <el-select placeholder="上架状态" clearable>
        <el-option label="上架" value="enabled" />
        <el-option label="下架" value="disabled" />
      </el-select>
      <el-button type="primary">查询</el-button>
      <el-button>重置</el-button>
    </div>
    <div class="panel plan-matrix">
      <div class="plan-matrix-title">
        <b>资源包权益矩阵</b>
        <span>横向对比不同版本的价格、积分、成员和任务能力</span>
      </div>
      <div v-for="row in plans" :key="row.id" class="plan-column">
        <header class="plan-column-head">
          <span>{{ row.code }}</span>
          <b v-if="row.code === 'PRO'">常用</b>
          <b v-else-if="row.code === 'ENTERPRISE'">定制</b>
          <el-input v-model="row.name" />
        </header>
        <div class="plan-price">
          <strong>{{ row.priceMonthly || 0 }}</strong>
          <span>元 / 月</span>
        </div>
        <label class="plan-field"><span>月费</span><el-input-number v-model="row.priceMonthly" :min="0" controls-position="right" /></label>
        <label class="plan-field"><span>月积分</span><el-input-number v-model="row.monthlyCredits" :min="0" controls-position="right" /></label>
        <label class="plan-field"><span>成员上限</span><el-input-number v-model="row.maxMembers" :min="0" controls-position="right" /></label>
        <label class="plan-field"><span>项目上限</span><el-input-number v-model="row.maxProjects" :min="0" controls-position="right" /></label>
        <label class="plan-field"><span>并发任务</span><el-input-number v-model="row.maxConcurrentTasks" :min="0" controls-position="right" /></label>
        <el-button type="primary" class="plan-save" @click="save(row)">保存套餐</el-button>
      </div>
    </div>

    <el-dialog v-model="dialog" title="新建资源包" width="560px">
      <el-form label-position="top">
        <div class="form-grid">
          <el-form-item label="编码"><el-input v-model="form.code" placeholder="ADDON_1000" /></el-form-item>
          <el-form-item label="名称"><el-input v-model="form.name" placeholder="积分加油包" /></el-form-item>
          <el-form-item label="价格"><el-input-number v-model="form.priceMonthly" :min="0" /></el-form-item>
          <el-form-item label="月积分"><el-input-number v-model="form.monthlyCredits" :min="0" /></el-form-item>
          <el-form-item label="成员上限"><el-input-number v-model="form.maxMembers" :min="0" /></el-form-item>
          <el-form-item label="项目上限"><el-input-number v-model="form.maxProjects" :min="0" /></el-form-item>
          <el-form-item label="并发任务"><el-input-number v-model="form.maxConcurrentTasks" :min="0" /></el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.isActive">
              <el-option label="上架" :value="1" />
              <el-option label="下架" :value="0" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="权益说明"><el-input v-model="form.features" type="textarea" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="createPlan">创建资源包</el-button>
      </template>
    </el-dialog>
  </div>
</template>
