<template>
  <div>
    <!-- 成功获得奖品弹窗 -->
    <el-dialog class="Explore-dialog" :visible.sync="ExploreDialogVisible" :modal="false" :before-close="ExploreDialog">
      <div v-if="eventName == 'explore_event'">
        <div class="top">
          <div class="top-title" v-if="awardData.chest.length != 0">{{ dialogTitle }}</div>
          <div class="top-close" @click="ExploreDialog">
            <img src="./../../assets/common/CloseButton.png" alt="">
          </div>
        </div>
        <div class="content" v-if="awardData.chest.length != 0">
          <div class="content-points">
            <div>Points</div>
            <div>
              <span>X {{ awardData.score }}</span>
              <img src="./../../assets/common/Icon_Points.png" alt="">
            </div>
          </div>
          <div class="content-list">
            <li v-if="level1.length !=0">
              <div class="title">Normal Chest</div>
              <div class="box-img">
                <img :src="require(`./../../assets/box/box${level1[0].level}.png`)" alt="">
              </div>
              <div class="box-bg"></div>
              <div class="amount">
                X{{ level1.length }}
              </div>
            </li>
            <li v-if="level2.length !=0">
              <div class="title">Advanced Chest</div>
              <div class="box-img">
                <img :src="require(`./../../assets/box/box${level2[0].level}.png`)" alt="">
              </div>
              <div class="box-bg"></div>
              <div class="amount">
                X {{ level2.amount }}
              </div>
            </li>
            <li v-if="level3.length !=0">
              <div class="title">Epic  Chest</div>
              <div class="box-img">
                <img :src="require(`./../../assets/box/box${level3[0].level}.png`)" alt="">
              </div>
              <div class="box-bg"></div>
              <div class="amount">
                X {{ level3.amount }}
              </div>
            </li>
            <li v-if="level4.length !=0">
              <div class="title">Legendary Chest</div>
              <div class="box-img">
                <img :src="require(`./../../assets/box/box${level4[0].level}.png`)" alt="">
              </div>
              <div class="box-bg"></div>
              <div class="amount">
                X {{ level4.amount }}
              </div>
            </li>
          </div>
        </div>
        <div class="content" v-else>
          <div class="points-title">{{ dialogTitle }}</div>
          <div class="points-amount">
            <div>Points</div>
            <div>
              <span>X {{ awardData.score }}</span>
              <img src="./../../assets/common/Icon_Points.png" alt="">
            </div>
          </div>
        </div>
        <div class="btn" @click="ExploreDialog">Confirm</div>
      </div>
      <div v-else-if="eventName == 'help_event'">
        <div class="top">
          <div class="top-title"></div>
          <div class="top-close" @click="ExploreDialog">
            <img src="./../../assets/common/CloseButton.png" alt="">
          </div>
        </div>
        <div class="content">
          <div class="points-title">{{ dialogTitle }}</div>
          <div class="points-amount">
            <div>Points</div>
            <div>
              <span>X {{ awardData.score }}</span>
              <img src="./../../assets/common/Icon_Points.png" alt="">
            </div>
          </div>
          <div v-if="awardData.isNewUser == 0">Complete tasks to get more rewards</div>
        </div>
        <div class="btn" v-if="awardData.isNewUser == 0" @click="toComplete">To complete</div>
        <div class="btn" v-else @click="ExploreDialog">Confirm</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    eventName: String,
    ExploreDialogVisible: Boolean,
    awardData: Object,
    level1: Array,
    level2: Array,
    level3: Array,
    level4: Array,
    dialogTitle: String,
  },
  data() {
    return {
    }
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    ExploreDialog() {
      this.$emit('handleClose')
    },
    toComplete() {
      this.$emit('toComplete', 0)
    }
  },
}
</script>

<style lang="scss" scoped>
div {
  ::v-deep .el-dialog {
      border: 1px solid #924df2;
      // box-shadow: 0px 0px 20px #924df2;
      background: #1a1821;
      border-radius: 80px;
      padding: 0px 50px;
      .el-dialog__header {
        padding: 0;
      }
      .el-dialog__body {
        position: relative;
        color: #fff;
        .top {
          display: flex;
          
          .top-title {
            color: #fff;
            font-size: 28px;
            font-family: "Anton-Regular";
          }
          .top-close {
            position: absolute;
            top: -8%;
            right: -9%;
            width: 100px;
            height: 100px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .content {
          margin: 20px 0;
          // height: 420px;
          .content-points {
            width: 200px;
            height: 30px;
            line-height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            background: #2d2738;
            border-radius: 20px;
            color: #fff;
            div {
              display: flex;
              align-items: center;
              span {
                color: #924df2;
                font-weight: 700;
              }
              img {
                width: 10px;
                height: 13px;
                margin-left: 5px;
              }
            }
          }
          .content-list {
            width: 100%;
            margin-top: 20px;
            padding: 30px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            background: url('./../../assets/common/chest bg.png') no-repeat;
            background-size: 100% 100%;
            li {
              width: 25%;
              position: relative;
              .title {
                font-size: 28px;
                font-weight: 700;
                font-family: "Anton-Regular";
                margin-bottom: 10px;
              }
              .box-img {
                width: 160px;
                height: 120px;
                margin: 0 auto;
                position: relative;
                z-index: 1;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .box-bg {
                width: 160px;
                height: 120px;
                position: absolute;
                top: 60%;
                left: 50%;
                transform: translateX(-50%);
                background: url('@/assets/box/Treasure Chest_bg.png') no-repeat;
                background-size: 100% 100%;
              }
              .amount {
                z-index: 1;
                position: relative;
                font-size: 28px;
                font-weight: 700;
                font-family: "Anton-Regular";
              }
            }
          }
          .points-title {
            font-size: 28px;
            font-weight: 700;
            font-family: "Anton-Regular";
          }
          .points-amount {
              width: 200px;
              height: 30px;
              margin: 50px auto;
              line-height: 30px;
              display: flex;
              align-items: center;
              justify-content: space-evenly;
              background: #2d2738;
              border-radius: 20px;
              color: #fff;
              div {
                display: flex;
                align-items: center;
                span {
                  color: #924df2;
                  font-weight: 700;
                }
                img {
                  width: 10px;
                  height: 13px;
                  margin-left: 5px;
                }
              }
            }
        }
        .btn {
          width: 200px;
          height: 50px;
          line-height: 50px;
          margin: 0 auto;
          color: #000;
          background: url('./../../assets/home/explore map button.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
}
</style>