<template>
  <!-- <BasicTable @register="registerTable" /> -->
  <div class="wrap">
    <div class="content">
      <Select :placeholder="placeholder" />
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, onUpdated, reactive, nextTick, toRefs } from 'vue';
  import { Select } from 'ant-design-vue';

  const props = {
    value: { type: Object, default: '' },
    placeholder: { type: String, default: '' },
    type: { type: Number, default: 1 },
  };
  interface State {
    value: object | string;
    placeholder: string;
    disabled: boolean;
    type: number;
  }

  export default defineComponent({
    name: 'CustomInput',
    components: { SelectSelect },
    props,
    emits: ['change'],
    setup(props, { emit }) {
      const state = reactive<State>({
        value: '',
        placeholder: props.placeholder,
        disabled: false,
        type: 1,
      });
      // 初始化
      function init() {
        nextTick(() => {
          state.type = props.type;
        });
      }
      onUpdated(() => {
        init();
      });

      function select(data) {
        emit('change', data);
      }

      return {
        select,
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped>
  .content {
    display: flex;
  }

  .add-btn {
    margin-left: 2px;
  }

  .input-width {
    width: 70%;
  }
  .checkbox {
    height: 30px;
  }
  @media screen and (max-width: 450px) {
    .input-width {
      width: 39%;
    }
  }
  @media screen and (max-width: 380px) {
    .input-width {
      width: 35%;
    }
  }
  @media screen and (max-width: 330px) {
    .input-width {
      width: 23%;
    }
  }
</style>
