<template>
  <popup v-model:value="value" header-title="帮助中心" content-animate="scale" @close="$emit('destroy-popup')">
    <section class="recharge-container help-container relative jCenter">
      <div @click="close" class="recharge-close-wrap cursor-pointer absolute animate-rotate-hover">
        <icon type="close" class="recharge-close"></icon>
      </div>

      <div class="help-title">您可以选择相应模块查看常见问题的解决方案</div>

      <section class="help-group row wrap">
        <aside
          v-for="(item,index) in data"
          :key="'help-item-'+index"
          class="help-item center cursor-pointer"
          @click="trigger(item)"
        >
          <v-image backgroundColor="transparent" :src="item.icon" mode="center" class="help-icon"></v-image>
          <div class="help-item-label">{{item.label}}</div>
        </aside>
      </section>

      <div class="help-introduce">订单异常，投诉举报</div>
      <div class="center">
        <v-button class="help-button">联系客服</v-button>
      </div>
    </section>
  </popup>
</template>

<script>
import {
  Popup,
  icon,
  vImage,
  vButton
} from '$components';
import mixins from '../mixins';
import props from '../props';
export default {
  name: "popup-help",
  components:{
    Popup,
    icon,
    vImage,
    vButton
  },
  mixins,
  props
}
</script>

<style scoped lang="scss" src="../style.scss"></style>