import { defineComponent } from 'vue'
import { Popup } from 'vant'
import Content from './content'
import styles from './content.module.less'

import Icon from './icon.png'

export default defineComponent({
  name: 'suggestion',
  data() {
    return {
      show: false,
      showed: false,
    }
  },
  render() {
    return (
      <>
        <img src={Icon} onClick={() => this.show = true}/>
        <Popup
          teleport="body"
          closeable
          class={styles.popup}
          style={{
            background: 'none',
            paddingTop: '10px'
          }}
          show={this.show}
          onOpen={() => this.showed = true}
          onClose={() => this.show = false}
          onClosed={() => this.showed = false}
          onClickCloseIcon={() => this.show = false}
        >
          {this.showed ? <Content close={() => this.show = false}/> : null}
        </Popup>
      </>
    )
  }
})
