<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增等级</el-button>
    </div>

    <el-table v-loading="loading" :data="tableData" height="100%"
      style="width: 100%; margin-top: 20px; flex: 1; min-height: 0;">
      <!-- <el-table-column prop="id" label="ID" width="80" align="center" /> -->
      <el-table-column prop="level" label="等级值" width="100" align="center" />
      <el-table-column prop="level_name" label="等级名称" align="center" />
      <el-table-column prop="img" label="等级图片" align="center">
        <template slot-scope="scope">
          <el-image v-if="scope.row.img" :src="scope.row.img" style="width: 50px; height: 50px; border-radius: 4px;"
            :preview-src-list="[scope.row.img]">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="recharge" label="累计充值金额" align="center">
        <template slot-scope="scope">
          {{ scope.row.recharge }} 元
        </template>
      </el-table-column>
      <el-table-column prop="updated_at" label="更新时间" align="center" />
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
      :page-sizes="[10, 20, 50, 100]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total"
      style="margin-top: 20px; text-align: right;">
    </el-pagination>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="550px" @close="resetForm">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="等级值" prop="level">
          <el-input-number v-model="form.level" :min="0" :step="1" placeholder="请输入等级值"
            style="width: 100%;"></el-input-number>
        </el-form-item>
        <el-form-item label="等级名称" prop="level_name">
          <el-input v-model="form.level_name" placeholder="请输入等级名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="累计充值金额" prop="recharge">
          <el-input-number v-model="form.recharge" :min="0" :precision="2" :step="100" placeholder="请输入累计充值金额"
            style="width: 100%;"></el-input-number>
        </el-form-item>
        <el-form-item label="等级图片" prop="img">
          <upload-one-image :key="uploadKey" v-model="form.img" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { levelList, levelUpdate, levelDelete } from '@/api/data'
import UploadOneImage from '@/components/UploadOneImage'

export default {
  name: 'LevelConfig',
  components: {
    UploadOneImage
  },
  data() {
    return {
      loading: false,
      tableData: [],
      // 分页参数
      page: 1,
      limit: 10,
      total: 0,

      uploadKey: 0,

      dialogVisible: false,
      dialogTitle: '',
      form: {
        id: undefined,
        level: 0,
        level_name: '',
        img: '',
        recharge: 0
      },
      rules: {
        level: [
          { required: true, message: '等级值不能为空', trigger: 'blur' }
        ],
        level_name: [
          { required: true, message: '等级名称不能为空', trigger: 'blur' }
        ],
        recharge: [
          { required: true, message: '累计充值金额不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    getList() {
      this.loading = true
      // 传入分页参数
      const params = {
        page: this.page,
        limit: this.limit
      }
      levelList(params).then(res => {
        // 根据实际接口返回的数据结构调整
        this.tableData = res.data.data || []
        this.total = res.data.total || 0
      }).finally(() => {
        this.loading = false
      })
    },
    // 处理每页条数改变
    handleSizeChange(val) {
      this.limit = val
      this.page = 1
      this.getList()
    },
    // 处理当前页改变
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    // 点击新增
    handleAdd() {
      this.dialogTitle = '新增等级'
      this.form = {
        id: undefined,
        level: 0,
        level_name: '',
        img: '',
        recharge: 0
      }
      this.uploadKey++
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 点击编辑
    handleEdit(row) {
      this.dialogTitle = '编辑等级'
      this.form = Object.assign({}, row)
      this.uploadKey++
      this.dialogVisible = true
    },
    // 提交表单
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          levelUpdate(this.form).then(res => {
            this.$message.success('保存成功')
            this.dialogVisible = false
            this.getList()
          })
        }
      })
    },
    // 删除数据
    handleDelete(row) {
      this.$confirm('此操作将永久删除该等级配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        levelDelete({ id: row.id }).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => { })
    },
    // 重置表单验证状态
    resetForm() {
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
      this.uploadKey++
    }
  }
}
</script>

<style scoped>
.app-container {
  margin: 20px;
  width: calc(100% - 40px);
  padding: 10px;
  border-radius: 8px;
  box-sizing: border-box;
  background-color: #ffffff;
  /* 页面背景做成白色 */
  display: flex;
  /* 使用 flex 布局 */
  flex-direction: column;
  height: calc(100vh - 90px);
  /* 撑开总高度。若外层未限制高度，可根据实际需求将此处改为 100vh 等 */
  box-sizing: border-box;
}

.filter-container {
  padding-bottom: 10px;
}
</style>