<template>
  <a-form-model-item>
    <a-checkbox
      slot="label"
      v-model="component.attrFD.formItemProps.inputProps.currentAsDefaultValue"
    >
      默认当前年份
    </a-checkbox>
  </a-form-model-item>
</template>

<script>
import components from './_import-components/xm-datetimeforyear-import'

export const metaInfo = {
  caption: '年份选择',
  icon: 'sd-list',
  component: {
    props: ['designerData'],
    methods: {
      yearChange(value) {
        this.defaultValue = value
        if (document.getElementsByClassName('ant-calendar-picker-container').length > 0) {
          for (
            let i = 0;
            i < document.getElementsByClassName('ant-calendar-picker-container').length;
            i++
          ) {
            document.getElementsByClassName('ant-calendar-picker-container')[i].style.display =
              'none'
          }
        }
      },
      handleEndOpenChange(open) {
        this.endOpen = open
      },
    },
    data() {
      return {
        endOpen: false,
        defaultValue: this.designerData.attr?.defaultValue || '',
      }
    },
    render() {
      // const defaultValue = this.designerData.attr?.defaultValue || ''
      return (
        <a-date-picker
          v-model={this.defaultValue}
          mode='year'
          picker='YYYY'
          format='YYYY'
          allow-clear={false}
          placeholder='选择年度'
          input-read-only={true}
          open={this.endOpen}
          vOn:panelChange={() => this.yearChange()}
          vOn:openChange={() => this.handleEndOpenChange()}
        />
      )
    },
  },
  order: 900,
  category: 'basic',
}

export const fieldProps = {
  dataType: 'string',
  contents: [],
  attr: {
    defaultValue: '',
  },
  attrFD: {
    formItemProps: { inputProps: { label: '', mode: 'year', currentAsDefaultValue: false } },
  },
}
export default {
  name: 'XmDatetimeforyear',
  components,
  computed: {},
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
