<template>
  <div class="vip-body">
    <el-row :span="24">
      <el-col :span="24">
        <el-row>
          <el-col :span="16">
            <h2 style="text-align: center">VIP组设定</h2>
            <el-form v-model="timedPointsReward" label-width="140px" append-to-body>
              <el-row>
                <el-col :span="12">
                  <el-form-item>
                    <template #label>
                      <el-text>
                        <span>是否开启</span>
                        <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="这个功能用于控制VIP在线奖励的开关"
                            placement="top">
                          <el-icon>
                            <QuestionFilled/>
                          </el-icon>
                        </el-tooltip>
                      </el-text>

                    </template>
                    <el-switch v-model="timedPointsReward.Enabled"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item>
                    <template #label>
                      <el-text>
                        <span>是否叠加</span>
                        <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="这个应该是叠加领取下级的vip奖励"
                            placement="top">
                          <el-icon>
                            <QuestionFilled/>
                          </el-icon>
                        </el-tooltip>
                      </el-text>
                    </template>
                    <el-switch v-model="timedPointsReward.StackRewards"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="VIP金币奖励间隔">
                    <el-input v-model="timedPointsReward.Interval">
                      <template #append>分钟</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
      <el-row>
        <el-col :span="1.5" style="margin: 10px ">
          <el-button plain type="primary" @click="OpenDialog('save',new Group())">添加</el-button>
          <el-button plain type="primary" @click="replay()">刷新</el-button>
        </el-col>
        <el-col :span="1.5"></el-col>
        <el-col :span="1.5"></el-col>
      </el-row>
      <el-table :data="groups" border>
        <el-table-column label="VIP组名称" prop="name"></el-table-column>
        <el-table-column label="VIP金币奖励" prop="amount"></el-table-column>
        <el-table-column width="120" label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="OpenDialog('update',scope.row)">修改</el-button>
            <el-button link type="danger" @click="deleteSkuById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog :title="'添加VIP组'" v-model="open" width="500px" append-to-body>
      <el-form v-model="groupForm">
        <el-form-item label="VIP组名称">
          <el-input v-model="groupForm.name"></el-input>
        </el-form-item>
        <el-form-item label="VIP金币奖励">
          <el-input-number v-model="groupForm.amount"></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm()">确 定</el-button>
          <el-button @click="open=false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">

import {QuestionFilled} from "@element-plus/icons-vue";
import {GetTimedPointsReward, Group, TimedPointsReward, TimedPointsRewardAmount} from "../../api/ConfigFile.ts";
import {ref} from "vue";


let timedPointsReward = ref<TimedPointsReward>(new TimedPointsReward())
let groups = ref<Group[]>(new Array<Group[]>())

let groupForm = ref<Group>(new Group())

let open = ref(false)
let status = ref("save")//save,update


function OpenDialog(status: string, group: Group) {
  open.value = true
  this.status = status
  groupForm.value = group
}

function submitForm() {
  if (status.value == "save") {
    timedPointsReward.value.Groups.set(groupForm.value.name, new TimedPointsRewardAmount(groupForm.value.amount))
  }
}

function replay() {
  groups.value = []
  GetTimedPointsReward().then((data) => {
    if (data.code == 200) {
      timedPointsReward.value = data.data
    }
    groups.value = []
    for (let groupsKey in data.data.Groups) {
      groups.value.push(new Group(groupsKey, data.data.Groups[groupsKey].Amount))
    }
  })
}

replay()
</script>
<style scoped>
.vip-body {
  padding: 10px;
  border: #dddddd 1px solid;
}
</style>