import { defineComponent, ref, watch, computed, h } from 'vue';
import { ElForm, ElDialog, ElButton, ElIcon } from 'element-plus';

export default defineComponent({
  emits: ['update:visible'],
  setup(props, { attrs, slots, expose, emit }) {
    const {
      debug = false,
      title = '',
      visible = false,
      model = {},
      rules = [],
      onClosed = () => {},
      dialogProps = {},
      formProps = {},
      disabled = false,
      ...attr
    } = attrs;

    const log = (type, ...msg) => {
      debug && console.log(`[ DialogForm ] ${type} => `, ...msg);
    };
    log('setup', {
      props,
      attrs,
      slots,
      emit
    });

    const formRef = ref(null);
    const _visible = ref(!!visible);
    const _model = ref(model);

    log('_visible', _visible.value);

    watch(
      () => attrs.model,
      v => {
        log('watch model', v);
        _model.value = v;
      }
    );

    watch(
      () => attrs.visible,
      v => {
        log('watch visible', v);
        _visible.value = v;
      }
    );
    // // 验证表单
    // const validate = computed(() => formRef.value?.validate);
    // // 重置表单
    // const resetFields = computed(() => formRef.value?.resetFields);
    // 验证表单
    const validate = () => {
      return formRef.value && formRef.value.validate();
    };
    // 重置表单
    const resetFields = () => {
      return formRef.value && formRef.value.resetFields();
    };
    // 打开弹窗
    const _onOpen = () => {
      log('_onOpen', _visible.value);
      _visible.value = true;
      emit('update:visible', true);
    };
    // 关闭弹窗
    const _onClose = () => {
      log('_onClose', _visible.value);
      _visible.value = false;
      emit('update:visible', false);
    };

    expose({
      form: formRef,
      open: _onOpen,
      close: _onClose,
      resetFields,
      validate
    });
    // 关闭弹出
    const _onClosed = () => {
      resetFields();
      _onClose();
      onClosed();
    };

    let openButton = '';
    if (slots.openButton) {
      openButton = slots.openButton(_onOpen);
    } else {
      switch (typeof attrs.openButton) {
        case 'function':
          openButton = attrs.openButton(_onOpen);
          break;
        case 'object':
          const { text, icon, ...temp } = attrs.openButton;
          openButton = (
            <ElButton  type="primary" {...temp} onClick={_onOpen}>
              {text}
              {icon ? h(ElIcon, null, { default: () => h(icon) }) : ''}
            </ElButton>
          );
          break;
        case 'string':
          openButton = (
            <ElButton   type="primary" onClick={_onOpen}>
              {attrs.openButton}
            </ElButton>
          );
          break;
        case 'boolean':
          if (attrs.openButton) {
            openButton = (
              <ElButton   type="primary" onClick={_onOpen}>
                打开
              </ElButton>
            );
          }
          break;
        default:
          openButton = (
            <ElButton   type="primary" onClick={_onOpen}>
              打开
            </ElButton>
          );
          break;
      }
    }

    return () => (
      <div
        class="addButton"
        style={{
          display: 'inline-block'
        }}
      >
        {openButton}
        <ElDialog
          {...dialogProps}
          modelValue={_visible.value}
          title={title}
          onClosed={_onClosed}
          // 去掉会影响数据表格
          destroyOnClose={true}
          v-slots={{ title: slots.title, footer: slots.footer }}
        >
          <ElForm
            {...formProps}
            disabled={disabled}
            ref={formRef}
            model={_model}
            rules={rules}
            v-slots={{ default: slots.default }}
          ></ElForm>
        </ElDialog>
      </div>
    );
  }
});
