import { Popup } from 'vant';
import { defineComponent, onMounted, ref } from 'vue';
import styles from './index.module.less';
import { browser } from '@/helpers/utils';

export default defineComponent({
  name: 'm-wx-tip',
  props: {
    // 是否显示微信弹窗
    show: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '温馨提示'
    },
    message: {
      type: String,
      default: '请使用微信打开'
    }
  },
  setup(props) {
    const showPopup = ref(false);
    onMounted(() => {
      if (!browser().weixin && props.show) {
        showPopup.value = true;
        return;
      }
    });
    return () => (
      <>
        <Popup
          v-model:show={showPopup.value}
          round
          style={{ width: '88%' }}
          closeOnClickOverlay={false}
          class={styles.wxPopupDialog}>
          <div class={styles.popupContainer}>
            <p class={styles.title1}>{props.title}</p>
            <p class={styles.popupTips}>{props.message}</p>
          </div>
        </Popup>
      </>
    );
  }
});
