import { defineComponent, ref } from 'vue'
import { Popover, Icon, Button } from 'vant'
import PopupWraper from '/src/components/popup-wraper'
import Content from './content'
import SettingState from '/src/pages/detail/setting-state'
import IconArrowLeft from '/src/pages/detail/icons/arrow-left-background.svg'
import IconBgNote from '/src/pages/detail/icons/bg-note.svg'

import styles from './index.module.less'

const popupRef = ref()

export default defineComponent({
  name: 'TuningPopup',
  props: {
    checkStatus: {
      type: Boolean,
      default: false
    },
    frequency: {
      type: Number,
      default: -1
    },
    onClosed: {
      type: Function,
      default: () => {}
    },
    onOpen: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      showPopover: false,
    }
  },
  mounted() {
    popupRef.value?.open()
  },
  methods: {
    selected(val: any, index: number) {
      popupRef.value?.close()
      // postMessage({
      //   api: 'proxyServiceMessage',
      //   content: {
      //     header:{
      //       status: 200,
      //       commond: 'checkEnd',
      //       type: 'SOUND_CHECK'
      //     },
      //     body: {}
      //   }
      // })
      if (index === 1) {
        SettingState.sett.tuning = false
      }
    }
  },
  render() {
    return (
      <PopupWraper
        ref={popupRef}
        onClosed={() => this.onClosed()}
        onOpen={() => this.onOpen()}
        rootClassName={styles.root}
        vSlots={{
          popup: () => <Content frequency={this.frequency} close={popupRef.value?.close}/>,
          more: () => (<div>
            <div class={styles.child}></div>
            <Button class={styles.back} onClick={popupRef.value?.close} icon={IconArrowLeft}/>
            <div class={styles.close}>
              <Popover
                trigger="click"
                get-container="body"
                actions={[
                  { text: '跳过本次' },
                  { text: '关闭校音' },
                ]}
                class={styles.popover}
                overlay={false}
                show={this.showPopover}
                onSelect={this.selected}
                onUpdate:show={(val: boolean) => this.showPopover = val}
                vSlots={{
                  reference: () => (<div><span>跳过本次</span><Icon name="play" class={styles.tran} onClick={() => {
                    setTimeout(() => {
                      this.showPopover = true
                    })
                  }} /></div>)
                }}
              >
              </Popover>
            </div>
          </div>)
        }}
        overlayClass={styles.overlay}
        className={styles.popup}
      ></PopupWraper>
    )
  }
})
