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: 'o-guide',
  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>
    );
  }
});
