import { defineComponent } from 'vue';
import { getImage } from '../images';
import styles from './andoird-guide.module.less';

export const getAssetsHomeFile = getImage;

const infoMsg = {
  meizu: {
    img1: getAssetsHomeFile('4.png'),
    img2: getAssetsHomeFile('5.png'),
    img3: getAssetsHomeFile('6.png'),
    title1: '打开“设置”页面，点击“更多连接方式”按钮：',
    title2: '点击“投射屏幕”',
    title3:
      '打开“投射屏幕”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。'
  },
  xiaomi: {
    img1: getAssetsHomeFile('7.png'),
    img2: getAssetsHomeFile('8.png'),
    img3: getAssetsHomeFile('9.png'),
    title1: '打开“设置”页面，点击“连接与共享”按钮：',
    title2: '点击“投屏”：',
    title3:
      '打开“打开投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。'
  },
  vivo: {
    img1: getAssetsHomeFile('12.png'),
    img2: getAssetsHomeFile('13.png'),
    img3: getAssetsHomeFile('14.png'),
    title1: '打开“设置”页面，点击“其他网络与连接”按钮：',
    title2: '点击“手机投屏”：',
    title3:
      '打开“手机投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。'
  },
  huawei: {
    img1: getAssetsHomeFile('1.png'),
    img2: getAssetsHomeFile('2.png'),
    img3: getAssetsHomeFile('3.png'),
    title1: '打开“设置”页面，点击“更多连接”按钮：',
    title2: '点击“手机投屏”：',
    title3:
      '打开“无线投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。'
  }
} as any;
export default defineComponent({
  name: 'adnroid-guide',
  data() {
    return {
      brand: 'huawei'
    };
  },
  mounted() {
    const ua = navigator.userAgent.split('(')[1].split(')')[0];
    this.brand = '';
    const phone = [/MZ/gi, /mi/gi, /vivo/gi];
    if (phone[0].test(ua)) {
      this.brand = 'meizu';
    } else if (phone[1].test(ua)) {
      this.brand = 'xiaomi';
    } else if (phone[2].test(ua)) {
      this.brand = 'vivo';
    } else {
      this.brand = 'huawei';
    }
  },
  render() {
    return (
      <div class={styles.wrap}>
        <div class={styles.topTitle}>
          <div class={styles.title}>通过镜像方式显示手机或平板上的内容</div>
        </div>
        <div class={styles.wrapInfo}>
          <section>
            <img
              style={{ width: '100%', marginBottom: '20px' }}
              src={getAssetsHomeFile('guide.png')}
            />
            <h3>第1步</h3>
            <p>将您的手机或平板连接到您智能电视机所在的同一无线局域网。</p>
            <h3>第2步</h3>
            <p>{infoMsg[this.brand]['title1']}</p>
            <div class={styles.imgWrap}>
              <img
                class={styles.img}
                src={infoMsg[this.brand]['img1']}
                alt=""
              />
            </div>

            <h3>第3步</h3>
            <p>{infoMsg[this.brand]['title2']}</p>
            <div class={styles.imgWrap}>
              <img
                class={styles.img}
                src={infoMsg[this.brand]['img2']}
                alt=""
              />
            </div>

            <h3>第4步</h3>
            <p>{infoMsg[this.brand]['title3']}</p>
            <div class={styles.imgWrap}>
              <img
                class={styles.img}
                src={infoMsg[this.brand]['img3']}
                alt=""
              />
            </div>
          </section>
          <section>
            <p class={[styles.blod, styles.bigP]}>如果音乐意外停止：</p>
            <p>
              如果在这台设备上使用语音助手或进行其他任务，则可能会导致所有音频设备停止播放音乐
            </p>
            <p class={[styles.blod, styles.bigP]}>
              如果您看到视频但听不到声音：
            </p>
            <p>
              如果您听不到任何声音，则请确保手机设备和电视机/听筒的音量都已调高，而且没有静音。
            </p>
            <p>
              请检查响铃/静音开关。如果开关设为静音，您会看到一条橙色的线。切换开关以开启响铃。
            </p>
            <p class={[styles.blod, styles.bigP]}>如果内容中断或网络卡顿:</p>
            <p>
              如果 Wi-Fi
              信号欠佳或受到附近设备（例如，微波炉或婴儿监视器）的干扰尝试完成以下步骤：
            </p>
            <p>移开或关闭其他可能造成干扰的设备。</p>
            <p>
              如果您正尝试使用“隔空播放”将内容流化到智能电视，请尝试使用以太网线缆（而不是通过
              Wi-Fi）将智能电视直接连接到路由器。
            </p>
            <p class={(styles.blod, styles.red)}>
              *当您锁定设备、将其置于睡眠模式或切换到其他应用时，“隔空播放”连接可能会中断。
            </p>
          </section>
          <section>
            <p class={[styles.blod, styles.bigP]}>
              如果“隔空播放”或屏幕镜像在您的设备上无法使用：
            </p>
            <p>1.确保您的设备都已开机且彼此距离较近。</p>
            <p>2.请重新启动您要与“隔空播放”或屏幕镜像配合使用的设备。</p>
            <p>3.以上方式尝试了仍无法搜到要使用的智能电视:</p>
            <p class={(styles.blod, styles.red)}>
              将您的设备连接到同一个 Wi-Fi 网络
            </p>
            <p>
              首先需要确认电视与手机是否连接了同一个Wi-Fi
              ，电视可以插网线，但必须是同一个路由器的，如果不确认，就把电视网线拔了改为连接Wi-Fi
              。
            </p>
            <p class={[styles.blod, styles.bigP]}>
              如果同一个Wi-Fi 也无法搜索到需要投屏的设备：
            </p>
            <p>
              原因1·可能电视本身没有投屏功能（如果以前投屏过，也是可以判断为电视是支持投屏的。）
            </p>
            <p>A.是不是智能电视？</p>
            <p>B.能不能自己安装软件？</p>
            <p>C.是不是安卓系统？</p>
            <p>D.能不能连接WiFi？</p>
            <p>请确认以上4点，通常2016年以后购买的智能电视都支持投屏功能</p>
          </section>
          <section>
            <p class={[styles.blod, styles.bigP]}>
              如果是智能电视或者智能投影仪，但是没有投屏功能怎么办？
            </p>
            <p>
              解决办法：自己安装一个投屏软件进去（幕享、傲软投屏、乐播投屏......）。相当于更新了电视投屏功能。也能解决这个问题。
            </p>
            <p>如果是老电视，老投影仪，老机顶盒怎么办？</p>
            <p>这个也不是没有办法，电视最值钱的就是屏幕了。</p>
            <p>
              所以屏幕我们不要浪费了，继续使用，此时我们通过互联网机顶盒，从机顶盒应用商店安装投屏软件，也同样可以
              进行投屏。
            </p>
            <p>a.是不是智能机顶盒？</p>
            <p>b.能不能自己安装软件？</p>
            <p>
              c.是不是安卓系统？买回来之后利用HDMI线连接老电视，再从机顶盒应用商店下载投屏软件，就可以使用投屏了。
            </p>
          </section>
        </div>
      </div>
    );
  }
});
