import { defineComponent, ref } from "vue";
import { Button, Popup } from "vant";
import state from "/src/state";
import TipsIcon from "./tips.png";
import styles from "./index.module.less";

export const vipShow = ref(false)
export default defineComponent({
  name: "vip-popup",
  data() {
    return {
      content: "您尚未开通云练习服务，请联系乐团老师开通",
    };
  },
  methods: {
    open() {
      vipShow.value = false;
    },
    getContent() {
      if (state.isSchool) {
        this.content = "VIP曲目暂不可用";
      }
      return this.content;
    },
  },
  render() {
    return (
      <Popup show={vipShow.value} get-container="body" closeable onClickCloseIcon={() => (vipShow.value = false)} round>
        <div class={styles.vip}>
          <img src={TipsIcon} />
          <p>{this.getContent()}</p>
          <Button class={styles.btn} onClick={this.open} round color="#01C1B5">
            确定
          </Button>
        </div>
      </Popup>
    );
  },
});