import { defineComponent, ref } from 'vue';
import styles from './index.module.less';
import { NIcon, NImage, NDatePicker, NSelect } from 'naive-ui';

import activeArrow from './images/activeArrow.png';
import arrow from './images/arrow.png';
export default defineComponent({
  props: {
    inline: {
      type: Boolean,
      default: false
    }
  },
  name: 'CSelect',
  setup(props, { emit, attrs }) {
    const timer = ref(null);
    const updateTimer = () => {
      console.log('更新日期', timer.value);
      emit('update:value', timer.value);
    };
    const isFocus = ref(false);
    return () => (
      <>
        <div
          class={[
            styles.CSelectWrap,
            props.inline ? styles.CSelectInitWrap : null
          ]}>
          <NSelect
            show-checkmark={false}
            {...attrs}
            onUpdate:show={(flag: boolean) => {
              isFocus.value = flag;
            }}
            // v-slots={{
            //   arrow: () =>
            //     isFocus.value ? (
            //       <NImage
            //         class={styles.arrow}
            //         previewDisabled
            //         src={activeArrow}></NImage>
            //     ) : (
            //       <NImage
            //         class={styles.arrow}
            //         previewDisabled
            //         src={arrow}></NImage>
            //     )
            // }}
            ></NSelect>
        </div>
      </>
    );
  }
});
