import { defineComponent, ref } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'
import './index.less'

export default defineComponent({
  name: 'info-accordion',
  props: {
    title: {
      type: String,
      default: '基本信息'
    }
  },
  emits: {},
  setup (props, ctx) {
    const visible = ref<boolean>(true)

    const iconDom = ref<HTMLDivElement>()

    const contentDom = ref<HTMLDivElement>()

    const titleClick = () => {
      if (visible.value) {
        contentDom.value?.classList.add('close-contant')
        contentDom.value?.classList.remove('open-contant')
        iconDom.value!.style.transform = 'rotate(-90deg)'
      } else {
        contentDom.value?.classList.add('open-contant')
        contentDom.value?.classList.remove('close-contant')
        iconDom.value!.style.transform = 'rotate(0deg)'
      }

      visible.value = !visible.value
    }

    return () => (
      <div class='info-box'>
      <div class='title-box' onClick={titleClick}>
        <span class='title-text' >{props.title}</span>
        <a-space>
          <DownOutlined
            class='icon-box'
            ref={iconDom}
          />
        </a-space>
      </div>
      <div class='contant-box' ref={contentDom} >
        {ctx.slots.default!()}
      </div>
    </div>
    )
  }
})
