<!-- 积分规则 -->
<template>
  <div class="default-width d-flex pa-3" style="height: 800px;">
    <v-card class="left">
      <h3>{{ $t('points.integralRules') }}</h3>
      
      <v-list density="compact" mandatory v-model:selected="selected">
        <v-list-item
          v-for="(val, index) in items"
          :key="val.key"
          :value="val.key"
          color="primary"
        >
          <!-- <v-list-item-title class="list-item" @click="tab = index">{{ val.title }}</v-list-item-title> -->
          <v-list-item-title
            class="list-item"
            @click="tab = index; htmlContent = val.htmlContent"
          >
            <!-- @click="handleClick(val, index)" -->
            {{ $t('rulesOfPoints.' + val.key) }}
          </v-list-item-title>
        </v-list-item>
      </v-list>
    </v-card>

    <v-card class="right ml-3" style="padding: 30px 60px">
      <div style="font-size: 18px; font-weight: bold;">{{ $t('rulesOfPoints.' + items[tab].key) }}</div>
      <div class="mt-5 mb-8" style="max-height: calc(100% - 120px); overflow-y: auto;">
        <div v-if="htmlContent" class="requirement" v-html="htmlContent"></div>
        <Empty v-else :elevation="false"></Empty>
      </div>
      <template v-if="htmlContent">
        <v-divider></v-divider>
        <div class="mt-3">所列问题中未包含您的问题？<span class="defaultLink">点击提交工单</span>，获得在线支持。</div>
      </template>
    </v-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
defineOptions({name: 'personal-integralRules-index'})

const items = [
  { key: 'whatIsPoints', htmlContent: '<p>所有门墩儿注册用户在门墩儿活动（回答问题、采纳答案、分享内容等）过程中均有机会获得积分，积分是一种荣誉的体现。</p><p>&nbsp;</p><p>所获积分可以通过访问积分商城用来购买道具甚至兑换实物礼品。积分商城将在每月上旬（每月10日以前）进行产品库存更新，请随时关注关于积分的新消息吧。</p>' },
  { key: 'howToEarnPoints', htmlContent: '' },
  { key: 'pointsViolation', htmlContent: '<p>如果会员利用系统漏洞作弊等违规方式获得积分，经查证后，门墩儿有权自由裁定，追缴相关积分，甚至查封会员帐号，并保留追究相应法律责任的权利。</p><p>&nbsp;</p><p><strong>修改及终止：</strong>门墩儿有权根据需要取消细则或增删、修订细则的权利（包括但不限于用户资格、积分计算及兑换标准），本积分管理规则。</p><p>&nbsp;</p>' },
  { key: 'transferOfPoints', htmlContent: '<ol style="list-style-type: decimal;margin-left: 20px;"><li style="margin-bottom: 10px;"><h4 style="color: var(--color-333);">基本转让条件</h4><p>- 积分持有人必须是注册并验证的账户所有者。<br>- 转让的积分必须是账户内有效且未过期的积分。<br>- 转让双方必须同意转让条款和条件，并遵循所有适用的法律和规定。</p></li><li style="margin-bottom: 10px;"><h4 style="color: var(--color-333);">转让限额</h4><p>- 设定每日、每周或每月的积分转让限额，以防止滥用。<br>- 根据账户类型或会员级别，设定不同的转让限额。<br>- 允许特殊情况下（如促销活动、奖励计划等）的临时调整。</p></li><li style="margin-bottom: 10px;"><h4 style="color: var(--color-333);">转让费用</h4><p>- 根据转让的积分数量或金额，收取一定比例的转让费用。<br>- 费用可以用于维护积分系统、提供客户服务或作为其他奖励计划的资金来源。<br>- 提前公开并明确告知所有费用结构。</p></li><li style="margin-bottom: 10px;"><h4 style="color: var(--color-333);">转让流程</h4><p>- 明确积分转让的申请、审核和确认流程。<br>- 要求双方提供必要的身份验证和转让信息。<br>- 使用安全的电子交易系统或平台来完成积分转让。<br>- 转让完成后，向双方发送确认通知，并更新账户余额。</p></li><li style="margin-bottom: 10px;"><h4 style="color: var(--color-333);">违规处理</h4><p>- 明确规定违反转让规则的行为及其后果，如冻结账户、撤销转让、扣除积分等。<br>- 设立投诉和申诉机制，以便对任何争议或问题进行调查和解决。<br>- 定期审查并更新规则，以应对新的威胁和漏洞。</p></li></ol>' },
  { key: 'expiredOfPoints', htmlContent: '' },
]
const tab = ref(0)
const selected = ref([items[0].key])
const htmlContent = ref([items[0].htmlContent])
</script>

<style lang="scss" scoped>
.left {
  width: 220px;
}
.right {
  flex: 1;
}
:deep(.v-list-item) {
  padding: 0 !important;
}
.list-item {
  height: 50px;
  width: 100%;
  line-height: 50px;
  font-weight: 500;
  // color: var(--color-666);
  font-size: 16px;
  cursor: pointer;
  margin: 0;
  padding-left: 40px;
  text-align: left;
  transition: all .3s;
}
h3 {
  font-size: 20px;
  padding: 18px 0 8px 40px;
  text-align: left;
  font-weight: 600;
}
.requirement {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 28px;
  color: var(--color-333);
  font-size: 15px;
  text-align: justify;
  letter-spacing: 0;
}
</style>