<template>
  <div :class="PREFIX" :style="style">
    <hcm-field
      v-model="field"
      v-bind="innerProps"
      @input="updateField"
      @change="onChange"
    />
    <div v-if="$designTime" :class="`${PREFIX}-mask-wrapper`"></div>
  </div>
</template>

<script>
import { Field } from '@mypaas/honeycomb-mobile-ui'
import { postUnit } from '@platform/utils'

const getVarStr = space => {
  if (typeof space === 'number') {
    return postUnit(space)
  }
  if (typeof space === 'string') {
    return `var(--hcm-${space})`
  }
  return '0'
}

const calcMode = mode => {
  return mode
    ? mode === 'inherit' ? undefined : mode === 'readonly'
    : undefined
}

export default {
  name: '<%= name %>',

  components: {
    HcmField: Field,
  },

  props: {
    designtime: Boolean,
    // 必须 绑定的字段值
    value: String,
    // 必须 绑定的字段key值
    fieldName: String,
    // useCommon开启后必须 标题
    label: String,
    // useCommon开启后必须 是否显示标题
    showLabel: {
      type: Boolean,
      default: true
    },
    // useCommon开启后必须 组件状态
    mode: String,
    // useCommon开启后必须 标题
    layout: String,

    placeholder: String,
    required: Boolean,
    actions: {
      type: Object,
      default: () => ({}),
    },
    boxArea: {
      type: Object,
      default: () => ({
        margin: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
        },
      }),
    },
  },

  data() {
    return {
      PREFIX: '<%= dirname %>',
      field: this.value,
    }
  },

  watch: {
    value(val) {
      this.field = val
    },
  },

  computed: {
    innerProps() {
      const { fieldName, mode, label, showLabel, layout,placeholder, required } = this
      return {
        // name为表单输入组件必须，作为提交表单的键值
        name: fieldName,
        // mode需要转换为readonly
        readonly: calcMode(mode),
        label,
        showLabel,
        layout,
        placeholder,
        // 必填开启时，需要同时配置rules规则，才能触发表单校验
        required,
        // rules: required ? [{required: true}] : [],
        clearable: true,
        focusResetValidation: true
      }
    },

    innerEvent() {
      return {
        change: this.onChangeFunc,
      }
    },

    style() {
      const { boxArea } = this
      const { margin = {} } = boxArea || {}

      const marginLeft = getVarStr(margin.left)
      const marginTop = getVarStr(margin.top)
      const marginRight = getVarStr(margin.right)
      const marginBottom = getVarStr(margin.bottom)

      return {
        marginLeft,
        marginTop,
        marginRight,
        marginBottom,
      }
    },
  },
  
  methods: {
    /**
     * 事件执行
     */
    onChange() {
      const { actions } = this
      if ( actions && actions.change && actions.change.length > 0) {
        actions.change.forEach(action => {
          this.triggerAction(action)
        })
      }
    },
    /**
     * 更新数据
     */
    updateField() {
      this.$emit('input', this.field, 'value')
    },
    /**
     * 用户通过扩展函数主动修改字段
     */
    setValueByExtensionFunction(value = '') {
      if (typeof value !== 'string' && typeof value !== 'number') return false
      this.field = value.toString()
      this.updateField()
      return true
    },

  }
}
</script>

<style lang="less" scoped>
.<%= dirname %>{
  &-mask-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>
