<script setup lang="ts">
import Popover from './Popover.vue'
import { percentWidth } from '@/utils'
import hud from '@/utils/hud'
import { taskService } from '@/api/service/task'
const props = withDefaults(
  defineProps<{
    modelValue: boolean
    item: any
    isAchievement: boolean
    dynamic: any
    isWordListReward: boolean
  }>(),
  {
    dynamic: 1,
    isAchievement: false,
    isWordListReward: false,
    modelValue: false,
    item: () => {},
  },
)
const emits = defineEmits(['update:modelValue'])

const show = computed({
  get() {
    return props.modelValue
  },
  set(newVal) {
    emits('update:modelValue', newVal)
    showMiniDia.value = newVal
  },
})
const showMiniDia = ref(false)

const bookTitle = computed(() => {
  const config = props.item.config
  if (!config) return
  return config.bookName ? '限定教材' : '限定阶段'
})

const bookName = computed(() => taskService.getBookName(props.item))

const punish = computed(() => {
  const amount = props.item.punish
  if (!amount) return
  return `未在截止时间前完成，将扣除${hud.highlight(amount)}乐贝`
})

const extraRewardList = computed(() => taskService.getExtraRewardList(props.item))

// 章节数据
const chapters = computed(() => props.item.config?.chapters)

// 章节目标
const chapterTarget = computed(() => {
  let len = props.item.config?.chapters?.length
  if (!len) return
  const data = props.item.taskFreeLearnConfig
  len = data.chapterIds.split(',').length
  return `共${hud.highlight(len)}个章节，各完成${hud.highlight(data.amount)}次10问10答100%正确`
})

// 句子的阶数
const sentenceStage = computed(() => {
  return props.item.config?.levelName
})
</script>
<template>
  <div>
    <mj-dialog
      v-model="show"
      title="奖品"
      hide-footer
      class="show-rewards"
      :width="percentWidth(0.5)"
    >
      <div class="title">
        {{
          isWordListReward
            ? '完成任务可以领取以下奖品'
            : isAchievement
              ? '成就点数达标可以领取以下奖品'
              : '活跃度达标可以领取以下奖品'
        }}
      </div>
      <div class="reward-list">
        <Popover :rewardList="item.rewardList" />
      </div>
      <div v-if="bookName" class="config">
        <span class="config-title">{{ bookTitle }}</span>
        <span class="config-text">{{ bookName }}</span>
      </div>
      <div v-if="sentenceStage" class="config">
        <span class="config-title">阶段</span>
        <span class="config-text">{{ sentenceStage }}</span>
      </div>
      <div v-if="punish" class="config">
        <span class="config-title">惩罚</span>
        <span class="config-text" v-html="punish" />
      </div>
      <div v-if="extraRewardList" class="config">
        <span class="config-title">额外奖励</span>
        <span class="config-text extra-reward-text">
          <span v-for="item in extraRewardList" :key="item.id" class="extra-reward-item">
            <span
              >【第<span class="rank">{{ item.startRank }}</span
              ><span v-if="item.startRank !== item.endRank"
                >至<span class="rank">{{ item.endRank }}</span></span
              >名】</span
            >
            <span
              >额外奖励<span class="amount">{{ item.amount }}</span
              >乐贝</span
            >
          </span>
        </span>
      </div>
      <div v-if="chapters" class="config">
        <span class="config-title">任务</span>
        <span class="config-text" v-html="chapterTarget" />
      </div>
      <div v-if="chapters" class="config items-start">
        <span class="config-title">章节</span>
        <span class="config-text">
          <el-tree
            class="chapter-tree"
            :data="chapters"
            :props="{
              children: 'children',
              label: 'name',
            }"
          />
        </span>
      </div>
    </mj-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-overlay) {
  .show-rewards {
    .el-dialog__body {
      .content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: $font-text;
        font-weight: 400;
        line-height: 4vh;
        font-size: 2.67vh;
      }

      .config {
        width: 100%;
        margin-top: 2vh;
        display: flex;
        align-items: center;

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

        .extra-reward-text {
          display: flex;
          flex-direction: column;
          .extra-reward-item {
            .rank {
              color: $error-color;
            }
            .amount {
              color: $success-color;
            }
          }
        }

        .chapter-tree {
          display: flex;
          flex-direction: column;
          gap: 2vh;
          max-height: 25vh;
          padding: 1vh;
          flex: 1;
          border-radius: 1vh;
          overflow: auto;
          background: none;
          border: 1px solid rgba(0, 0, 0, 0.5);
          .el-tree-node__children {
            margin-top: 2vh;
            display: flex;
            flex-direction: column;
            gap: 2vh;
          }

          .el-tree-node__label {
            font-size: 2vh;
            color: #4b4b68;
          }
        }

        &-title {
          border-radius: $radius-5;
          color: #4b4b68;
          line-height: 6.17vh;
          height: 6.17vh;
          background: #d2f1ff;
          font-family: $font-special;
          margin-right: 20px;
          width: 180px;
          text-align: center;
        }

        &-text {
          flex: 1;
        }
      }

      .title {
        text-align: center;
        color: $font-color;
        margin-bottom: 1.67vh;
      }
      .reward-list {
        display: flex;
        column-gap: 10px;
      }
      .reward {
        height: 13.33vh;
        width: 13.33vh;
        // padding-right: 10px;
        margin: 1.67vh auto 0;
        border-radius: 1.33vh;
        box-shadow: 0 0.44vh 0.44vh 0 #00000026;
        color: white;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-right: 16px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
