<import-sjs
  from="./index.sjs"
  name="componentUtils"
></import-sjs>
<template name="checkbox">
  <view class="ant-checkbox-item-wrap">
    <checkbox
      class="ant-checkbox-item-base"
      value="{{value}}"
      onChange="onChange"
      checked="{{mixin.value}}"
      disabled="{{disabled}}"
    ></checkbox>
    <view class="ant-checkbox-item-fake">
      <view
        class="ant-checkbox-item-fake-{{componentUtils.getClassName(mixin.value, disabled)}}"
        style="{{mixin.value && !disabled && color ? 'background:' + color : ''}}"
      >
        <ant-icon
          a:if="{{mixin.value}}"
          type="CheckOutline"
          className="ant-checkbox-item-fake-{{componentUtils.getClassName(mixin.value, disabled)}}-icon"
        ></ant-icon>
      </view>
    </view>
  </view>
</template>
<label
  a:if="{{isLabelSupport}}"
  class="ant-checkbox-item {{className || ''}}"
  style="{{style || ''}}"
>
  <view class="ant-checkbox-item-container">
    <template
      is="checkbox"
      data="{{ value, mixin, disabled, color }}"
    ></template>
    <view class="ant-checkbox-item-content {{disabled ? 'ant-checkbox-item-disabled' : ''}}">
      <slot></slot>
    </view>
  </view>
</label>
<view
  a:else
  class="ant-checkbox-item {{className || ''}}"
  style="{{style || ''}}"
  catchTap="onChange"
>
  <view class="ant-checkbox-item-container">
    <template
      is="checkbox"
      data="{{ value, mixin, disabled, color }}"
    ></template>
    <view class="ant-checkbox-item-content {{disabled ? 'ant-checkbox-item-disabled' : ''}}">
      <slot></slot>
    </view>
  </view>
</view>