import { defineComponent } from "vue";
import icon_title from "./icon_title.png";
import icon_btn from "./icon_btn.png";
import icon_btn_cancel from "./icon_btn_cancel.png";
import icon_close from "./icon_close.png";
import styles from "./index.module.less";
import { Popup } from "vant";
import { api_back, api_goback } from "/src/helpers/communication";
import { postMessage } from "/src/utils/native-message";
import { getQuery } from "/src/utils/queryString";

export default defineComponent({
  name: "TheVip",
  setup() {
    const apiUrls = {
      dev: "https://dev.kt.colexiu.com",
      test: "https://test.lexiaoya.cn",
      online: "https://kt.colexiu.com",
    };
    let environment: "dev" | "test" | "online" = location.origin.includes("//dev") ? "dev" : location.origin.includes("//test") ? "test" : location.origin.includes("//online") || location.origin.includes("//kt") || location.origin.includes("//mec") ? "online" : "dev";
    const close = () => {
      const query = getQuery();
      if (query.modelType) {
        api_goback();
      } else {
        api_back();
      }
    };

    return () => (
      <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom"]} show={true}>
        <div class={styles.container}>
          {/* <img class={styles.close} src={icon_close} onClick={close} /> */}
          {/* <img class={styles.title} src={icon_title} /> */}
          <div class={styles.content}>
            立即开通<span style={{ color: "#FF5A56" }}>"乐器AI学练工具"</span>服务，解锁更多专属权益，享受全新学习体验！
          </div>
          <div class={styles.btns}>
            <img class={[styles.btn, styles.btnCancel]} src={icon_btn_cancel} onClick={close} />
            <img
              class={styles.btn}
              src={icon_btn}
              onClick={() => {
                postMessage({
                  api: "openWebView",
                  content: {
                    url: `${location.origin.includes("192") ? "https://test.lexiaoya.cn" : apiUrls[environment]}/classroom-app/#/member-center`,
                    orientation: 1,
                  },
                });
              }}
            />
            {/* <div onClick={close}>暂不领取</div> */}
          </div>
        </div>
      </Popup>
    );
  },
});