import { defineComponent, reactive } from 'vue';
import styles from '../operation.module.less';
import { Button, Field } from 'vant';

export default defineComponent({
  name: 'input-timer',
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const forms = reactive({
      minute: null,
      secord: null
    });

    // 格式化
    const onFomatter = () => {
      //
    };
    return () => (
      <div class={styles.popupContainer}>
        <h2 class={styles.popupTitle}>请输入节目时长</h2>
        <div class={styles.popupContent}>
          <div class={styles.popupTimer}>
            <Field
              v-model={forms.minute}
              type="number"
              // formatter={onFomatter}
            />
            {/* <input v-model={forms.minute} type="number"></input> */}分
            {/* <input v-model={forms.secord} type="number"></input> */}秒
          </div>
        </div>

        <div class={['btnGroupPopup']}>
          <Button round onClick={() => emit('close')}>
            取消
          </Button>
          <Button type="primary" round onClick={() => emit('confirm')}>
            确定
          </Button>
        </div>
      </div>
    );
  }
});