<template>
  <div class="activity-rank">
    <el-drawer
      :title="$t('pages.activityTemplateManage.dialog.rank')"
      :visible="true"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="drawer-auto-layout"
    >
      <div v-loading="rankLoading" class="activity-rank-content">
        <el-alert
          type="info"
          show-icon
          style="margin-bottom: 10px;"
          :closable="false"
        >
          <p>{{ $t('pages.activityTemplateManage.message.rankRetention') }}</p>
          <p>{{ $t('pages.activityTemplateManage.message.rankRewardRetention') }}</p>
        </el-alert>
        <div class="blockquote blockquote-mini">{{ $t('pages.activityTemplateManage.section.button1Top20') }}</div>
        <div v-for="(item, index) in rank.butOneRanks" :key="'but1_'+index" class="reward">
          <el-row>
            <el-col :span="12">
              <user-table-exhibit :user-profile="item.userProfile" :query-details="true" />
            </el-col>
            <el-col :span="12">
              <el-tag style="margin-top: 20px;">{{ item.quantity }}/ {{ item.quantityFormat }}</el-tag>
            </el-col>
          </el-row>
        </div>
        <div class="blockquote blockquote-mini">{{ $t('pages.activityTemplateManage.section.button2Top20') }}</div>
        <div v-for="(item, index) in rank.butTwoRanks" :key="'but1_'+index" class="reward">
          <el-row>
            <el-col :span="12">
              <user-table-exhibit :user-profile="item.userProfile" :query-details="true" />
            </el-col>
            <el-col :span="12">
              <el-tag style="margin-top: 20px;">{{ item.quantity }}/ {{ item.quantityFormat }}</el-tag>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>

  </div>
</template>
<script>
import { listActivityRank } from '@/api/sys'
export default {
  props: {
    row: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  data() {
    return {
      rank: {},
      rankLoading: false
    }
  },
  computed: {
  },
  watch: {
    row: {
      handler(val) {
        if (!val) {
          return
        }
        this.loadActivityRank()
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    loadActivityRank() {
      const that = this
      that.rankLoading = true
      listActivityRank(that.row.config.id).then(res => {
        that.rankLoading = false
        that.rank = res.body || {}
      }).catch(er => {
        that.rankLoading = false
      })
    }
  }
}
</script>
<style scoped lang="scss">
.activity-rank-content {
  padding: 0px 15px 100px 15px;
  .reward {
    padding: 0px 15px;
  }
}
</style>
