<template>
  <view id="view" style="flex: 1;">
    <input id="input" value="input" class="input" />
    <textarea id="textarea" value="textarea" class="textarea" />
    <web-view id="webview" src="/hybrid/html/local.html" class="web-view"></web-view>
    // 注意：iOS平台真机运行时需要安装 Xcode 开发工具具备 UTS 开发环境，或提交自定基座打包后 checkNativeView 相关方法才会生效
    <button class="button" type="primary" @click="checkViewNativeView">检测view标签原生View</button>
    <button class="button" type="primary" @click="checkInputNativeView">检测input标签原生View</button>
    <button class="button" type="primary" @click="checkTextareaNativeView">检测textarea标签原生View</button>
    <button class="button" type="primary" @click="checkWebViewNativeView">检测webview标签原生View</button>
  </view>
</template>

<script>
  import { checkWebViewNativeView, checkInputNativeView, checkTextareaNativeView, checkViewNativeView } from '@/uni_modules/uts-get-native-view';
  export default {
    data() {
      return {

      }
    },
    methods: {
      checkViewNativeView() : boolean {
        var viewName = "ViewGroup"
        // #ifdef APP-IOS
        viewName = "UIView"
        // #endif
        const msg = "检测view组件对应原生" + viewName
        if (checkViewNativeView("view")) {
          this.showTip(msg + "成功")
          return true
        }
        this.showTip(msg + "失败")
        return false
      },
      checkInputNativeView() : boolean {
        var viewName = "AppCompatEditText"
        // #ifdef APP-IOS
        viewName = "UITextField"
        // #endif
        const msg = "检测input组件对应原生" + viewName
        if (checkInputNativeView("input")) {
          this.showTip(msg + "成功")
          return true
        }
        this.showTip(msg + "失败")
        return false
      },
      checkTextareaNativeView() : boolean {
        var viewName = "AppCompatEditText"
        // #ifdef APP-IOS
        viewName = "UITextView"
        // #endif
        const msg = "检测textarea组件对应原生" + viewName
        if (checkTextareaNativeView("textarea")) {
          this.showTip(msg + "成功")
          return true
        }
        this.showTip(msg + "失败")
        return false
      },
      checkWebViewNativeView() : boolean {
        var viewName = "WebView"
        // #ifdef APP-IOS
        viewName = "WKWebView"
        // #endif
        const msg = "检测webview组件对应原生" + viewName
        if (checkWebViewNativeView("webview")) {
          this.showTip(msg + "成功")
          return true
        }
        this.showTip(msg + "失败")
        return false
      },
      showTip(title : string) {
        console.log("title===" + title)
        uni.showToast({
          title: title,
          icon: "none"
        })
      }
    }
  }
</script>

<style>
  .input {
    width: 300px;
    height: 40px;
    border-radius: 4px;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    margin: 20px auto;
  }

  .textarea {
    width: 300px;
    height: 80px;
    border-radius: 4px;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    margin: 20px auto;
  }

  .web-view {
    width: 300px;
    height: 120px;
    margin: 20px auto;
    border-radius: 4px;
    border-width: 1px;
    border-color: black;
    border-style: solid;
  }

  .button {
    margin: 10px 20px;
  }
</style>