import { defineComponent } from 'vue'
import styles from './index.module.less'
import title1 from '../../new-images/icon-title-1.png'
import title2 from '../../new-images/icon-title-2.png'
import title3 from '../../new-images/icon-title-3.png'
import iconEquity from '../../new-images/icon-equity-bg.png'
import sVip1 from '../../new-images/svip-fun-1.png'
import sVip2 from '../../new-images/svip-fun-2.png'
import sVip3 from '../../new-images/svip-fun-3.png'
import sVip4 from '../../new-images/svip-fun-4.png'
import sVipQuestion from '../../new-images/svip-question-bg.png'
import vip1 from '../../new-images/vip-fun-1.png'
import vip2 from '../../new-images/vip-fun-2.png'
import vip3 from '../../new-images/vip-fun-3.png'
import vipQuestion from '../../new-images/vip-question-bg.png'

export default defineComponent({
  name: 'member-insteres',
  props: {
    type: {
      type: String,
      default: 'VIP'
    }
  },
  setup(props) {
    return () => (
      <div class={styles.member_insteres}>
        <div class={styles.title}>
          <img src={title3} />
        </div>

        <img src={iconEquity} />

        <div class={styles.title}>
          <img src={title1} />
        </div>

        {props.type === 'SVIP' ? (
          <div class={styles.intro}>
            <img src={sVip1} />
            <img src={sVip2} />
            <img src={sVip3} />
            <img src={sVip4} />
          </div>
        ) : (
          <div class={[styles.intro, styles.introVip]}>
            <img src={vip1} />
            <img src={vip2} style={{ 'margin-top': '-1px' }} />
            <img src={vip3} />
          </div>
        )}

        <div class={styles.title}>
          <img src={title2} />
        </div>

        {props.type === 'SVIP' ? (
          <img src={sVipQuestion} />
        ) : (
          <img src={vipQuestion} />
        )}
      </div>
    )
  }
})