import { PropType, computed, defineComponent } from 'vue';
import styles from './index.module.less';
import { Button } from 'vant';

export const getAssetsHomeFile = (fileName: string) => {
  const path = `./images/${fileName}`;
  const modules: any = import.meta.globEager('./images/*');
  return modules[path].default;
};

export default defineComponent({
  name: 'code-dialog',
  props: {
    showButton: {
      type: Boolean,
      default: true
    },
    btnText: {
      type: String,
      default: '我知道了'
    },
    type: {
      // ACTIVATED: '已激活',
      // INACTIVATED: '未激活',
      // EXPIRED: '已失效',
      // ACTIVATING: '激活中',
      // ACTIVATING-TWO: '激活中',
      // CANCELLED: '已作废',
      // OVERDUE: '已过期',
      // INVALID 错误
      type: String as PropType<
        | 'ACTIVATED'
        | 'ACTIVATED-TWO'
        | 'EXPIRED'
        | 'CANCELLED'
        | 'INFO'
        | 'ACTIVATING'
        | 'ACTIVATING-TWO'
        | 'OVERDUE'
        | 'INVALID'
      >,
      default: 'ACTIVATED'
    }
  },
  emits: ['confirm'],
  setup(props, { emit, slots }) {
    const headerImgs = computed(() => {
      let title = getAssetsHomeFile('title1.png');
      let icon = getAssetsHomeFile('brid1.png');
      if (props.type === 'ACTIVATED') {
        title = getAssetsHomeFile('title4.png');
        icon = getAssetsHomeFile('brid1.png');
      } else if (props.type === 'ACTIVATED-TWO') {
        title = getAssetsHomeFile('title8.png');
        icon = getAssetsHomeFile('brid1.png');
      } else if (
        props.type === 'ACTIVATING' ||
        props.type === 'ACTIVATING-TWO'
      ) {
        title = getAssetsHomeFile('title2.png');
        icon = getAssetsHomeFile('brid1.png');
      } else if (props.type === 'EXPIRED') {
        title = getAssetsHomeFile('title1.png');
        icon = getAssetsHomeFile('brid4.png');
      } else if (props.type === 'CANCELLED') {
        title = getAssetsHomeFile('title5.png');
        icon = getAssetsHomeFile('brid3.png');
      } else if (props.type === 'INFO') {
        title = getAssetsHomeFile('title3.png');
        icon = getAssetsHomeFile('brid2.png');
      } else if (props.type === 'INVALID') {
        title = getAssetsHomeFile('title6.png');
        icon = getAssetsHomeFile('brid3.png');
      } else if (props.type === 'OVERDUE') {
        title = getAssetsHomeFile('title7.png');
        icon = getAssetsHomeFile('brid3.png');
      }
      return {
        title,
        icon
      };
    });
    return () => (
      <div class={styles.codeDialog}>
        <div class={styles.header}>
          <div
            class={[
              styles.leftTitle,
              props.type === 'INFO' ? styles.info : ''
            ]}>
            <img src={headerImgs.value.title} />
          </div>
          <div class={styles.rightTitle}>
            <img src={headerImgs.value.icon} />
          </div>
        </div>

        <div class={styles.body}>
          <div class={styles.container}>
            <div class={styles.section}>
              <div class={styles.content}>
                {/* 您已成功激活一年乐器AI学练工具，有效期至<span>121212</span> */}
                {slots.default ? slots.default() : null}
              </div>
              {props.showButton && (
                <div class={styles.btnGroup}>
                  <Button
                    block
                    round
                    color="linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)"
                    onClick={() => {
                      emit('confirm');
                    }}>
                    {props.btnText}
                  </Button>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }
});
