/*
 * @Author: wfl
 * @LastEditors: wfl
 * @description:
 * @updateInfo:
 * @Date: 2022-09-01 16:43:55
 * @LastEditTime: 2022-10-12 12:25:45
 */
import { useMenuSetting } from '@/global/hooks/setting/useMenuSetting';
import { useDesign } from '@/global/hooks/web/useDesign';
import { SearchOutlined, SyncOutlined } from '@ant-design/icons-vue';
import { Button, Form, FormInstance } from 'ant-design-vue';
import { computed, defineComponent, ref, Ref, watch } from 'vue';
import './contentSearch.less';

interface IFormConfig {
  type: string;
  label: string;
  placeholder: string;
  default: any;
  selectList: any[];
}

const contentHeader = defineComponent({
  props: {
    config: {
      type: Array as PropType<IFormConfig[]>,
      default: () => [],
    },
    reset: {
      type: Boolean,
      default: true,
    },
    search: {
      type: Boolean,
      default: true,
    },
    form: {
      type: Object,
      default: () => null,
    },
    formRef: {
      type: Object as PropType<Ref<FormInstance>>,
      default: () => null,
    },
    // 自动适配
    labelAuto: {
      type: Boolean,
      default: false,
    },
    labelCol: {
      type: Number,
      default: 4,
    },
    wrapperCol: {
      type: Number,
      default: 20,
    },
    labelAlign: {
      type: String as PropType<'left' | 'right'>,
      default: 'right',
    },
    // 每行显示的查询条件数量
    num: {
      type: Number,
      default: 4,
    },
  },
  emits: ['reset', 'search'],
  setup(props, { slots, emit }) {
    const formRef: Ref<null | FormInstance> = ref(null);
    const { prefixCls } = useDesign('content-search');
    const { getContentPadding, getContentMargin, getContentRadius } = useMenuSetting();

    const seachFormStyle = computed(() => {
      return {
        display: 'grid',
        gridTemplateColumns: `repeat(auto-fill, calc((100%-175px) / ${props.num}))`,
        gridRowGap: '12px',
      };
    });

    const mainStyle = computed(() => {
      const { reset, search } = props;
      const width = (reset ? 90 : 0) + (search ? 90 : 0);
      return {
        padding: `8px ${getContentPadding.value}px`,
        margin: `${getContentMargin.value}px`,
        borderRadius: `${getContentRadius.value}px`,
        gridTemplateColumns: `calc(100% - ${width}px) ${width}px`,
      };
    });

    const handResetForm = () => {
      formRef?.value?.resetFields();
      emit('reset');
    };

    watch(
      () => props.form,
      (oldValue, newValue) => {
        for (const k of Object.keys(oldValue)) {
          if (oldValue[k] !== '' && newValue[k] === '') {
            emit('search');
            return;
          }
        }
      },
    );

    return () => (
      <div className={prefixCls} id="iking-content-search" style={mainStyle.value}>
        <Form
          layout="inline"
          model={props.form}
          ref={formRef}
          labelAlign={props.labelAlign}
          labelCol={{ span: props.labelCol }}
          wrapperCol={{ span: props.wrapperCol }}
          style={seachFormStyle.value}
          onKeyup={(e) => {
            if (e.keyCode === 13) emit('search');
          }}
        >
          <slot>{slots?.default ? slots.default() : null}</slot>
        </Form>
        <div className={`${prefixCls}_btn`}>
          {props.reset ? (
            <Button onClick={() => handResetForm()} className="mr-8px">
              {{
                icon: () => <SyncOutlined />,
                default: '重置',
              }}
            </Button>
          ) : null}
          {props.search ? (
            <Button type="primary" onClick={() => emit('search')}>
              {{
                icon: () => <SearchOutlined />,
                default: '搜索',
              }}
            </Button>
          ) : null}
        </div>
      </div>
    );
  },
});

export default contentHeader;