import { Tab, Tabs } from 'vant'
import { defineComponent, ref } from 'vue'
import styles from './index.module.less'
import icon1 from './image/1.png'
import icon2 from './image/2.png'
import icon3 from './image/3.png'
import Guide from './guide/guide'

export default defineComponent({
  name: 'OGuide',
  setup(props, ctx) {
    const active = ref('tv')
    return () => (
      <div class={styles.guideWrap}>
        <Tabs animated swipeable v-model:active={active.value}>
          <Tab title="电视投屏" name="tv">
            <Guide class={styles.tv} />
          </Tab>
          <Tab title="电脑投屏" name="computer">
            <div class={styles.content}>
              <div style={{ fontSize: '16px', marginBottom: '20px' }}>
                通过爱思投屏助手将手机投屏至电脑
              </div>
              <div class={styles.item}>
                <div class={styles.title}>第1步</div>
                <div>在需要投屏的电脑上打开以下链接</div>
                <a href='http://pc.i4.cn/pro_screen.html' target='_blank'><div style={{ color: '#33BDFF' }}>http://pc.i4.cn/pro_screen.html</div></a>
              </div>

              <div class={styles.item}>
                <div class={styles.title}>第2步</div>
                <div>下载并安装【爱思投屏助手】</div>
                <div style={{ padding: '20px 0', textAlign: 'center' }}>
                  <img src={icon1} />
                </div>
              </div>

              <div class={styles.item}>
                <div class={styles.title}>第3步</div>
                <div>打开【爱思投屏助手】</div>
                <div style={{ padding: '20px 0', textAlign: 'center' }}>
                  <img src={icon2} />
                </div>
              </div>

              <div class={styles.item}>
                <div class={styles.title}>第4步</div>
                <div>使用数据线将手机与电脑连接，出现投屏准备就绪提示后，点击【开始投屏】</div>
                <div style={{ padding: '20px 0', textAlign: 'center' }}>
                  <img style={{ width: '50%' }} src={icon3} />
                </div>
              </div>
            </div>
          </Tab>
        </Tabs>
      </div>
    )
  }
})