<import-sjs
  from="../../_util/arrow.sjs"
  name="arrowUtil"
></import-sjs>
<import-sjs
  from="../../_util/isPropsEmpty.sjs"
  name="u"
></import-sjs>
<form-item
  className="{{className}}"
  style="{{style}}"
  position="{{position}}"
  label="{{label}}"
  labelWidth="{{labelWidth}}"
  status="{{formData.status}}"
  errors="{{formData.errors}}"
  tooltip="{{tooltip}}"
  required="{{formData.required}}"
  requiredMark="{{requiredMark}}"
  validateStatus="{{validateStatus}}"
  help="{{help}}"
>
  <view>
    <block a:if="{{readonly && !formData.value}}">
      <slot
        name="readonly"
        formData="{{formData}}"
      >
        -
      </slot>
    </block>
    <ant-picker
      style="{{readonly && !formData.value ? 'display:none' : ''}};{{pickerStyle}}"
      cancelText="{{u.isPropsEmpty(cancelText) ? locale.global.cancelText : cancelText}}"
      okText="{{u.isPropsEmpty(okText) ? locale.global.okText : okText}}"
      placeholder="{{u.isPropsEmpty(placeholder) ? locale.global.placeholder : placeholder}}"
      maskClosable="{{maskClosable}}"
      maskStyle="{{maskStyle}}"
      popClassName="{{popClassName}}"
      popStyle="{{popStyle}}"
      animationType="{{animationType}}"
      disabled="{{disabled}}"
      readonly="{{readonly}}"
      title="{{title}}"
      maskClassName="{{maskClassName}}"
      indicatorStyle="{{indicatorStyle}}"
      indicatorClassName="{{indicatorClassName}}"
      options="{{options}}"
      value="{{formData.value}}"
      onOk="onOk"
      onChange="onChange"
      onCancel="onDismissPicker"
      onVisibleChange="onVisibleChange"
      onFormat="{{handleFormat ? handleFormat : 'handleFormat'}}"
    >
      <slot
        name="title"
        slot="title"
      ></slot>
      <slot
        name="content"
        slot="content"
      ></slot>
      <ant-icon
        a:if="{{!readonly && arrowUtil.getArrow(arrow)}}"
        className="ant-form-picker-arrow"
        type="{{arrowUtil.getArrow(arrow)}}"
        slot="suffix"
      ></ant-icon>
    </ant-picker>
  </view>
  <view
    a:if="{{!tooltip}}"
    slot="tooltip"
  >
    <slot name="tooltip"></slot>
  </view>
  <view slot="extra">
    <slot name="extra">
      {{extra}}
    </slot>
  </view>
  <view
    slot="header"
    slot-scope="item"
  >
    <slot
      name="header"
      errors="{{item.errors}}"
      status="{{item.status}}"
    ></slot>
  </view>
  <view
    slot="footer"
    slot-scope="item"
  >
    <slot
      name="footer"
      errors="{{item.errors}}"
      status="{{item.status}}"
    ></slot>
  </view>
</form-item>