<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>会员权益包管理</span>
        <el-button style="float: right" type="primary" @click="handleAdd">
          + 新增权益包
        </el-button>
      </div>

      <!-- 搜索 -->
      <el-form :inline="true" :model="queryParams" class="mb-20">
        <el-form-item label="名称">
          <el-input v-model="queryParams.name" placeholder="权益包名称" clearable style="width:180px" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="全部" clearable style="width:120px">
            <el-option label="上架" :value="1" />
            <el-option label="下架" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table v-loading="loading" :data="list" border>
        <el-table-column prop="id" label="ID" width="70" />
        <el-table-column prop="name" label="名称" min-width="150" />
        <el-table-column prop="pointsCost" label="积分" width="80" />
        <el-table-column prop="balanceCost" label="余额(元)" width="90">
          <template slot-scope="scope">¥{{ scope.row.balanceCost }}</template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" width="80">
          <template slot-scope="scope">
            {{ scope.row.stock === -1 ? '不限' : scope.row.stock }}
          </template>
        </el-table-column>
        <el-table-column prop="needShip" label="需配送" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.needShip ? 'success' : 'info'" size="mini">
              {{ scope.row.needShip ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="70" />
        <el-table-column label="操作" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" style="color:#F56C6C" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        @pagination="getList"
      />
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="640px">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="权益包名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="权益包描述" />
        </el-form-item>
        <el-form-item label="封面图片">
          <el-input v-model="form.coverImage" placeholder="图片URL" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所需积分" prop="pointsCost">
              <el-input-number v-model="form.pointsCost" :min="0" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所需余额(元)">
              <el-input-number v-model="form.balanceCost" :min="0" :precision="2" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="库存(-1不限)">
              <el-input-number v-model="form.stock" :min="-1" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="每人限兑(-1不限)">
              <el-input-number v-model="form.exchangeLimit" :min="-1" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="需要配送">
              <el-switch v-model="form.needShip" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效天数">
              <el-input-number v-model="form.validDays" :min="0" placeholder="空=永久" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="标签">
              <el-input v-model="form.tag" placeholder="如:热门/新品" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序权重">
              <el-input-number v-model="form.sort" :min="0" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="0">下架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getBenefitPackagePage,
  addBenefitPackage,
  updateBenefitPackage,
  deleteBenefitPackage,
} from '@/api/shop/shopMemberBenefit';

export default {
  name: 'ShopMemberBenefitPackage',
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      queryParams: { page: 1, limit: 20, name: '', status: '' },
      dialogVisible: false,
      dialogTitle: '新增权益包',
      form: this.defaultForm(),
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        pointsCost: [{ required: true, message: '请输入积分', trigger: 'blur' }],
      },
    };
  },
  created() { this.getList(); },
  methods: {
    defaultForm() {
      return {
        id: null,
        name: '',
        description: '',
        coverImage: '',
        pointsCost: 0,
        balanceCost: 0,
        stock: -1,
        exchangeLimit: 1,
        needShip: 1,
        validDays: null,
        tag: '',
        sort: 0,
        status: 1,
      };
    },
    async getList() {
      this.loading = true;
      try {
        const res = await getBenefitPackagePage(this.queryParams);
        this.list = res.data.list || [];
        this.total = res.data.total || 0;
      } finally { this.loading = false; }
    },
    handleQuery() { this.queryParams.page = 1; this.getList(); },
    resetQuery() { this.queryParams = { page: 1, limit: 20, name: '', status: '' }; this.getList(); },
    handleAdd() {
      this.form = this.defaultForm();
      this.dialogTitle = '新增权益包';
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.form = { ...row };
      this.dialogTitle = '编辑权益包';
      this.dialogVisible = true;
    },
    async handleStatusChange(row) {
      await updateBenefitPackage({ id: row.id, status: row.status });
    },
    async handleDelete(row) {
      await this.$confirm(`确认删除「${row.name}」?`, '提示', { type: 'warning' });
      await deleteBenefitPackage(row.id);
      this.$message.success('删除成功');
      this.getList();
    },
    async handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        if (this.form.id) {
          await updateBenefitPackage(this.form);
          this.$message.success('修改成功');
        } else {
          await addBenefitPackage(this.form);
          this.$message.success('添加成功');
        }
        this.dialogVisible = false;
        this.getList();
      });
    },
  },
};
</script>

<style scoped>
.mb-20 { margin-bottom: 20px; }
</style>
