<template>
  <div :class="boxClass" :style="boxStyle">
    <a-checkbox
        :checked="innerValue"
        v-bind="cellProps"
        @change="handleChange"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types'
import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks'
import { isArray, isBoolean } from '/@/utils/is'

export default defineComponent({
  name: 'JVxeCheckboxCell',
  props: useJVxeCompProps(),
  setup(props: JVxeComponent.Props) {
    const {
      innerValue,
      cellProps,
      originColumn,
      scrolling,
      handleChangeCommon,
    } = useJVxeComponent(props)
    // 是否启用边框
    const bordered = computed(() => !!props.renderOptions.bordered)
    // box 类名
    const boxClass = computed(() => {
      return {
        'j-vxe-checkbox': true,
        'no-animation': scrolling.value,
      }
    })
    // box 行内样式
    const boxStyle = computed(() => {
      const style = {}
      // 如果有边框且未设置align属性，就强制居中
      if (bordered.value && !originColumn.value.align) {
        style['text-align'] = 'center'
      }
      return style
    })

    // onChange 事件
    function handleChange(event) {
      handleChangeCommon(event.target.checked)
    }

    return {
      cellProps,
      innerValue,
      boxClass,
      boxStyle,
      handleChange,
    }
  },

  // 【组件增强】注释详见：JVxeComponent.Enhanced
  enhanced: {
    switches: {
      visible: true,
    },
    getValue(value, ctx) {
      let { context } = ctx!
      let { originColumn } = context
      // 处理 customValue
      if (isArray(originColumn.value.customValue)) {
        let customValue = getCustomValue(originColumn.value)
        if (isBoolean(value)) {
          return value ? customValue[0] : customValue[1]
        } else {
          return value
        }
      } else {
        return value
      }
    },
    setValue(value, ctx) {
      let { context } = ctx!
      let { originColumn } = context
      // 判断是否设定了customValue（自定义值）
      if (isArray(originColumn.value.customValue)) {
        let customValue = getCustomValue(originColumn.value)
        return neverNull(value).toString() === customValue[0].toString()
      } else {
        return !!value
      }
    },
    createValue(_defaultValue, ctx) {
      let { context } = ctx!
      let { column: { params: col } } = context
      if (isArray(col.customValue)) {
        let customValue = getCustomValue(col)
        return col.defaultChecked ? customValue[0] : customValue[1]
      } else {
        return !!col.defaultChecked
      }
    },
  } as JVxeComponent.EnhancedPartial,
})


function neverNull(value, def?) {
  return value == null ? (neverNull(def, '')) : value
}

function getCustomValue(col) {
  let customTrue = neverNull(col.customValue[0], true)
  let customFalse = neverNull(col.customValue[1], false)
  return [customTrue, customFalse]
}
</script>

<style lang="less">
// 关闭动画，防止滚动时动态赋值出现问题
.j-vxe-checkbox.no-animation {
  .ant-checkbox-inner,
  .ant-checkbox-inner::after {
    transition: none !important;
  }
}
</style>