<script setup lang="ts">
import hud from '@/utils/hud'
import num from '@/utils/num'
import { Minus, Plus } from '@element-plus/icons-vue'

defineOptions({ name: 'SetReward' })
// 完成奖励
const reward = ref('')
// 未完成的惩罚
const punish = ref('')

// 额外奖励
type ExtraReward = {
  startRank: any
  amount: any
  endRank: any
}
const extraRewards = ref([] as ExtraReward[])

// 添加额外奖励
function addExtraReward() {
  extraRewards.value.push({
    startRank: '',
    amount: '',
    endRank: '',
  })
}

// 减少额外奖励
function subExtraReward(idx: any) {
  extraRewards.value.splice(Number(idx), 1)
}

defineExpose({
  submit() {
    if (!num.isPositiveInt(reward.value)) {
      hud.error('请输入正确的【完成奖励】（正整数）')
      return
    }
    if (punish.value && !num.isPositiveInt(punish.value)) {
      hud.error('请输入正确的【未完成扣除】（正整数或不填）')
      return
    }
    let taskExtraRewardList = [] as any
    if (extraRewards.value.length) {
      for (const item of extraRewards.value) {
        if (!num.isPositiveInt(item.startRank)) {
          hud.error('请输入正确的【开始名次】')
          return
        }
        if (!num.isPositiveInt(item.endRank)) {
          hud.error('请输入正确的【结束名次】')
          return
        }
        const start = Number(item.startRank)
        const end = Number(item.endRank)
        if (start > end) {
          hud.error('【开始名次】不能大于【结束名次】')
          return
        }
        if (!num.isPositiveInt(item.amount)) {
          hud.error('请输入正确的【额外奖励】（正整数）')
          return
        }
        taskExtraRewardList.push(toRaw(item))
      }
    }
    taskExtraRewardList = taskExtraRewardList.length ? taskExtraRewardList : undefined
    return {
      reward: reward.value,
      punish: punish.value || undefined,
      taskExtraRewardList,
    }
  },
})
</script>

<template>
  <div class="mj-data-row">
    <div class="mj-data-item required">
      <span class="mj-data-item-title">完成奖励</span>
      <el-input
        v-model="reward"
        class="amount mj-data-item-input"
        type="number"
        placeholder="乐贝"
      />
    </div>
    <div class="mj-data-item">
      <span class="mj-data-item-title undone">未完成扣除</span>
      <el-input
        v-model="punish"
        class="amount mj-data-item-input"
        type="number"
        placeholder="乐贝"
      />
    </div>
  </div>
  <div class="mj-data-row award-row">
    <div
      :class="{
        'mj-data-item': true,
        'items-start': extraRewards?.length > 2,
      }"
    >
      <span class="mj-data-item-title">额外奖励</span>
      <div class="extra-rewards">
        <div v-for="(item, i) in extraRewards" :key="i" class="extra-reward">
          <span>第</span
          ><el-input
            v-model="item.startRank"
            class="rank mj-data-item-input"
            type="number"
            placeholder="几"
          />
          <span> ~ 第</span>
          <el-input
            v-model="item.endRank"
            class="rank mj-data-item-input"
            type="number"
            placeholder="几"
          />
          <span>名，奖励</span>
          <el-input
            v-model="item.amount"
            class="amount mj-data-item-input"
            type="number"
            placeholder="乐贝"
          />
          <el-button :icon="Minus" type="danger" circle @click="subExtraReward(i)" />
        </div>
        <el-button :icon="Plus" type="primary" circle @click="addExtraReward" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use '../index.scss' as *;
.item {
  align-items: center;

  &.items-start {
    align-items: flex-start;
  }
}

.extra-rewards {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  max-height: 28vh;
  overflow: scroll;
  .extra-reward {
    display: flex;
    align-items: center;
    margin-right: 4vh;
    .amount {
      margin-left: 1vh;
    }
    button {
      margin-left: 1vh;
    }
  }
}

.title.undone {
  width: 18vh;
}

.rank {
  width: 100px;
  margin: 0 1rem;
}
</style>
