<template>
  <Progress
      :class="clazz"
      :percent="innerValue"
      size="small"
      v-bind="cellProps"
  />
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { Progress } from 'ant-design-vue'
import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types'
import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks'

export default defineComponent({
  name: 'JVxeCheckboxCell',
  components: { Progress },
  props: useJVxeCompProps(),
  setup(props: JVxeComponent.Props) {
    const { innerValue, cellProps, scrolling } = useJVxeComponent(props)
    const clazz = computed(() => {
      return {
        'j-vxe-progress': true,
        'no-animation': scrolling.value,
      }
    })
    return { innerValue, cellProps, clazz }
  },
  // 【组件增强】注释详见：：JVxeComponent.Enhanced
  enhanced: {
    switches: {
      editRender: false,
    },
    setValue(value) {
      try {
        if (typeof value !== 'number') {
          return Number.parseFloat(value)
        } else {
          return value
        }
      } catch {
        return 0
      }
    },
  } as JVxeComponent.EnhancedPartial,
})
</script>

<style scoped lang="less">
// 关闭进度条的动画，防止滚动时动态赋值出现问题
.j-vxe-progress.no-animation {
  ::v-deep(.ant-progress-bg) {
    transition: none !important;
  }
}
</style>
