<template>
	<div class="xd-margin-padding" v-if="placeholderUi !== null">
		<div class="xd-margin-padding__list" v-if="showTop||showBottom">
			<div class="xd-margin-padding__list-item" v-if="showTop">
				<span>上{{typeName}}</span>
				<el-input type='number' :disabled="disabled" v-model="top" @input="handleEnterInput" @blur="handleEnterInput">
          <template slot="append">{{unit}}</template>
        </el-input>
			</div>
			<div class="xd-margin-padding__list-item"  v-if="showBottom">
				<span>下{{typeName}}</span>
				<el-input type='number' :disabled="disabled" v-model="bottom" @input="handleEnterInput" @blur="handleEnterInput">
          <template slot="append">{{unit}}</template>
        </el-input>
			</div>
		</div>
		<div class="xd-margin-padding__list" v-if="showLeft||showRight">
			<div class="xd-margin-padding__list-item"  v-if="showLeft">
				<span>左{{typeName}}</span>
				<el-input type='number' :disabled="disabled" v-model="left" @input="handleEnterInput" @blur="handleEnterInput">
          <template slot="append">{{unit}}</template>
        </el-input>
			</div>
			<div class="xd-margin-padding__list-item"  v-if="showRight">
				<span>右{{typeName}}</span>
				<el-input type='number' :disabled="disabled" v-model="right" @input="handleEnterInput" @blur="handleEnterInput">
          <template slot="append">{{unit}}</template>
        </el-input>
			</div>
		</div>
	</div>
</template>

<script>
  import emitter from 'element-ui/src/mixins/emitter';
  export default {
    name: "XdMarginPadding",
    mixins: [emitter],
		props:{
      defaultValue: {
        type: Object || null | String,
        default() {
          return {
            top: null,
            bottom: null,
            left: null,
            right: null,
          }
        },
      },

      maps: {
        type: Object | null,
        default() {
          return null
        },
      },

      setting: {
        type: Object,
        default() {
          return {
            type: 'margin', //margin(边距),padding(填充)
					}
        },
      },

      disabled: {
        type: Boolean,
        default: false,
      },

      size: {
        type: String,
        default: 'medium', //medium / small / mini
      },

      placeholder: {
        type: String,
        default: '@type@大小，单位像素'
      },

      required: {
        type: Boolean,
        default: false,
      },

      //是否启用自定义校验器
      useCustomRules: {
        type: Boolean,
        default: false,
      },

      //数字字符串 转 数字
      isNumber: {
        type: Boolean,
        default: true,
      },

      //自定义方法
      handleCustom: {
        type: Function || null,
        default: null
      },

		},
		data(){
      return {
        top: null,
        right: null,
        bottom: null,
        left: null,
        placeholderUi: null,
        typeName: '',
        showLeft: true,
        showRight: true,
        showBottom: true,
        showTop: true,
        unit:'px',
			}
		},

		created(){
      let typeName = '';
      if (this.setting &&
				this.$xdHelper.checkVarType(this.setting.type) === 'string'
			) {
        this.placeholderUi = {
          top: this.placeholder.replace(/@type@/, `上${typeName}`),
          bottom: this.placeholder.replace(/@type@/, `下${typeName}`),
          left: this.placeholder.replace(/@type@/, `左${typeName}`),
          right: this.placeholder.replace(/@type@/, `右${typeName}`),
        };
			}

      if(typeof this.setting.left === 'boolean') {
        this.showLeft = this.setting.left
      }
      if(typeof this.setting.right === 'boolean') {
        this.showRight = this.setting.right
      }
      if(typeof this.setting.top === 'boolean') {
        this.showTop = this.setting.top
      }
      if(typeof this.setting.bottom === 'boolean') {
        this.showBottom = this.setting.bottom
      }

      if(typeof this.setting.unit === 'string' && this.setting.unit) {
        this.unit = this.setting.unit
      }

      if (this.defaultValue !== null &&
				!this.$xdHelper.isEmpty(this.defaultValue) &&
				this.defaultValue !== ''
			) {
        this.top = this.checkDataToNUll( this.defaultValue.top) ? null :Number(this.defaultValue.top) ;
        this.bottom = this.checkDataToNUll( this.defaultValue.bottom) ? null : Number(this.defaultValue.bottom);
        this.left = this.checkDataToNUll( this.defaultValue.left) ? null : Number(this.defaultValue.left);
        this.right =this.checkDataToNUll( this.defaultValue.right) ? null :Number( this.defaultValue.right);
      }

      //绑定数据
      this.update();
		},

		methods: {

      handleEnterInput() {
        this.change();
        this.update()
      },

      checkDataToNUll(data){
        return data === null || data === ''
      },

      /**
       * @description 需要校验检查参数是正确处理方法
       */
      checkParams() {
        if(!this.required) {
          if(this.checkDataToNUll(this.top)
           && this.checkDataToNUll(this.right)
           && this.checkDataToNUll(this.bottom)
           && this.checkDataToNUll(this.left)
          ) {
            return null
          }
          return {
            top: this.checkDataToNUll(this.top) ? null : Number(this.top),
            right: this.checkDataToNUll(this.right) ? null : Number(this.right),
            bottom:this.checkDataToNUll(this.bottom) ? null : Number(this.bottom),
            left: this.checkDataToNUll(this.left) ? null : Number(this.left),
          }
        }
        else {
          if(this.checkDataToNUll(this.top)
            || this.checkDataToNUll(this.right)
            || this.checkDataToNUll(this.bottom)
            || this.checkDataToNUll(this.left)
          ) {
            return null
					}
          return {
            top: this.checkDataToNUll(this.top) ? null :Number(this.top),
            right: this.checkDataToNUll(this.right) ? null : Number(this.right),
            bottom:this.checkDataToNUll(this.bottom) ? null : Number(this.bottom),
            left: this.checkDataToNUll(this.left) ? null : Number(this.left),
					}
				}
      },

			/**
			 * @description 数据改变事件
			 */
			change(){
			  this.$emit('onChange', this.checkParams())
			},


      /**
			 * @description 双向绑定数据处理
       */
			update(){
        this.$emit('input', this.checkParams());
        if (this.$parent.$options['componentName'] === 'ElFormItem') {
          this.dispatch('ElFormItem', 'el.form.change', [this.checkParams()]);
          this.dispatch('ElFormItem', 'el.form.blur', [this.checkParams()])
        }
			},


		}
  }
</script>

<style scoped lang="scss">
	.xd-margin-padding {
		&__list {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-flow: wrap;
			margin-bottom: 10px;

			&:last-child {
				margin-bottom: 0;
			}

			&-item {
				width: 44%;
				flex-shrink: 0;
				display: flex;
				justify-content: center;
				align-items: center;

        &:first-child {
          margin-right: 10px;
        }

				& > span {
					flex-shrink: 0;
					margin-right: 10px;
					font-size: 13px;
          color:#606266
				}

				& > *:last-child {
					flex: 1;
				}
			}
		}
    ::v-deep {
      .el-input-group__append {
        padding: 0 10px;
      }
    }
	}

	@media screen and (max-width: 768px) {
		.xd-margin-padding {
		}
	}
</style>
