import { Button, Popup } from 'vant';
import { PropType, defineComponent, onMounted, ref, watch } 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: '请使用微信打开'
    },
    messageAlign: {
      type: String as PropType<'center' | 'left' | 'right'>,
      default: 'center'
    },
    /** 是否展示取消按钮 */
    showCancelButton: {
      type: Boolean,
      default: false
    },
    /** 取消按钮文案 */
    cancelButtonText: {
      type: String,
      default: '取消'
    },
    /** 取消按钮颜色 */
    cancelButtonColor: {
      type: String,
      default: ''
    },
    /** 是否展示确认按钮 */
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    /** 确认按钮文案 */
    confirmButtonText: {
      type: String,
      default: '确认'
    },
    /** 确认按钮颜色 */
    confirmButtonColor: {
      type: String,
      default: ''
    },
    /** 是否有关闭按钮 */
    showCloseButton: {
      type: Boolean,
      default: true
    }
  },
  emits: ['confirm', 'cancel', 'close'],
  setup(props, { emit }) {
    const showPopup = ref(false);
    onMounted(() => {
      if (props.show) {
        showPopup.value = true;
      }
    });

    watch(
      () => [props.show, props.message],
      () => {
        if (props.show) {
          showPopup.value = true;
        } else {
          showPopup.value = false;
        }
      }
    );
    return () => (
      <>
        <Popup
          v-model:show={showPopup.value}
          round
          style={{ width: '100%', maxWidth: '520px' }}
          closeOnClickOverlay={false}
          class={styles.wxPopupDialog}>
          <div class={styles.popupContainer}>
            {props.showCloseButton && (
              <i class={styles.iconClose} onClick={() => emit('close')}></i>
            )}

            <p class={styles.title1} v-html={props.title}></p>
            <p
              class={styles.popupTips}
              style={{ 'text-align': props.messageAlign }}
              v-html={props.message}></p>

            {(props.showConfirmButton || props.showConfirmButton) && (
              <div class={styles.btnGroup}>
                {props.showCancelButton && (
                  <Button
                    round
                    class={[styles.button, styles.cancelBtn]}
                    color={props.cancelButtonColor}
                    onClick={() => emit('cancel')}>
                    {props.cancelButtonText}
                  </Button>
                )}
                {props.showConfirmButton && (
                  <Button
                    round
                    class={[styles.button, styles.confirmBtn]}
                    color={props.confirmButtonColor}
                    onClick={() => emit('confirm')}>
                    {props.confirmButtonText}
                  </Button>
                )}
              </div>
            )}
          </div>
        </Popup>
      </>
    );
  }
});