const sdFormItemMixin = {
  props: {
    /**
     * 字段英文名称。数组表示为日期/事件范围
     */
    name: {
      type: [String, Array],
      required: true,
    },
    /**
     * 字段中文名
     */
    label: {
      type: String,
      default: undefined,
    },
    /**
     * <p>是否隐藏</p>
     * <p><font color="red">0.20开始，字段联动隐藏应该从后台xml中配置displayExpr，不要从前端指定hidden属性</font></p>
     */
    hidden: {
      type: Boolean,
      default: false,
    },
    /**
     * 用于日期、数值范围，表示当前值应该大于 rangeAfter 的值
     */
    rangeAfter: {
      type: String,
      default: undefined,
    },
    /**
     * 字段输入框的 props
     */
    inputProps: {
      type: [Object, Array],
      default: undefined,
    },
    /**
     * <p>将后台传递的 value 解析为前端适用的值</p>
     * <p>(backendValue) => frontendValue</p>
     */
    parseBackendValue: {
      type: Function,
      default: undefined,
    },
    /**
     * <p>将前端值转换为后台 value</p>
     * <p>(frontendValue) => backendValue</p>
     */
    toBackendValue: {
      type: Function,
      default: undefined,
    },
    /**
     * <p>获取只读模式显示的值</p>
     * <p>(value,{field}) => displayValue</p>
     */
    getDisplayValue: {
      type: Function,
      default: undefined,
    },
    /**
     * 用哪个组件来渲染
     * @since 8.0.2
     */
    component: {
      type: [String, Object],
      default: undefined,
    },
    /**
     * 只读模式用哪个组件来渲染
     * @since 0.21
     */
    componentForDisplay: {
      type: [String, Object],
      default: undefined,
    },
  },
  inject: {
    SdFormContext: { default: () => ({}) },
  },

  computed: {
    labelComputed() {
      let label = typeof this.label === 'undefined' ? this.field.caption : this.label
      if (label === null) return label
      switch (label.length) {
        case 2:
          // 两个字的插入两个全宽度空格
          label = label[0] + '\u2003\u2003' + label[1]
          break
        case 3:
          // 三个字的插入两个半宽度空格
          label = label[0] + '\u2002' + label[1] + '\u2002' + label[2]
          break
        default:
          break
      }
      return label
    },
    fields() {
      return this.SdFormContext.fields
    },
    field() {
      if (Array.isArray(this.name)) return this.fields[this.name[0]]
      else return this.fields[this.name]
    },
    readOnly() {
      return this.SdFormContext.readOnly || this.field.readonly || this.hiddenComputed
    },
    hiddenComputed() {
      if (Array.isArray(this.name)) return this.hidden
      // 本身指定了隐藏，或者后端表达式导致隐藏
      return this.hidden || this.SdFormContext.displayExprResults[this.name] === false
    },
    selector() {
      return this.SdFormContext.selectors.some((i) => i.field === this.name)
    },
  },
  methods: {
    pickerData(event) {
      event.stopPropagation()
      this.SdFormContext.pickerData(this.SdFormContext.selectors.find((i) => i.field === this.name))
    },
  },
  watch: {
    hiddenComputed: {
      immediate: true,
      handler(val) {
        this.$emit('hiddenChange', val)
      },
    },
  },
  mounted() {
    if (
      this.$el?.className?.includes(this.$style.selectorWapper) ||
      this.$el.querySelector?.('.' + this.$style.selectorWapper)
    ) {
      this.$el.addEventListener('click', this.pickerData, true)
      this.$once('hook:beforeDestroy', function() {
        this.$el.removeEventListener('click', this.pickerData)
      })
    }
  },
}
export default sdFormItemMixin
