import { defineComponent, Ref, ref } from 'vue'
import { Popup, Tabs, Tab, Button, ImagePreview } from 'vant'
import TVIcon from './tv.png'
import { getEnvHostname, getTvIconUrl } from '/src/pages/detail/helpers'
import { browser } from '/src/helpers/utils'
import SettingFbcPopup from '/src/pages/detail/setting-popup/fbc-wraper'
import styles from './index.module.less'

const browserInfo = browser()

export const iframeRef: Ref = ref(null)

export default defineComponent({
  name: 'DetailTTv',
  data() {
    return {
      tvShow: false,
      tvShowed: true,
      opened: false,
    }
  },
  methods: {
    open() {
      this.tvShow = true
      this.tvShowed = true
      this.opened = true
    },
    close() {
      this.tvShow = false
    },
    closed() {
      this.tvShow = false
      this.tvShowed = false
    },
    loaded() {
      (iframeRef.value?.contentWindow as any).IFrameShowImage = (item: any) => {
        ImagePreview([item.src])
      }
    },
  },
  render() {
    return (
      <>
        {getTvIconUrl() ? <img id="tips-step-0" class={styles.icon} src={TVIcon} onClick={this.open}/> : null}
        <Popup
          show={this.tvShow}
          round
          closeable
          teleport="body"
          position="right"
          closeIcon="arrow-left"
          lazyRender={false}
          class={{[styles.android]: browserInfo.android, [styles.tvPopup]: true}}
          style={{ height: '100%', width: '50%' }}
          closeOnPopstate={true}
          onClickCloseIcon={this.close}
          onClickOverlay={this.close}
          onClosed={this.closed}
        >
          {this.opened ? (
            <Tabs line-height={2} title-active-color="#01C1B5" color="#01C1B5">
              <Tab title="投屏" style={{ height: '100%'}}>
                <iframe src={getTvIconUrl()}/>
              </Tab>
              <Tab title="帮助" style={{ height: '100%'}}>
                <div class={styles.wraper}>
                  <iframe onLoad={this.loaded} ref={iframeRef} class={styles.iframe} src={getEnvHostname() + '/#/KeepRepaire?mode=accompany'}/>
                  <SettingFbcPopup>
                    <Button class={styles.btn} plain size="small" color="#01C1B5">意见反馈 &gt;</Button>
                  </SettingFbcPopup>
                </div>
              </Tab>
            </Tabs>
          ) : null}
        </Popup>
      </>
    )
  }
})
