<template>
	<div class="xd-size" :class="{is_px: is_px}">
		<div class="xd-size__item">
			<div v-if="is_px">{{placeholder.width}}</div>
			<div>
				<el-input
					:disabled="disabled.wDisabled"
					v-model="width"
					type="number"
					@input="handleEnterInput"
					@blur="handleEnterInput"
				>
          <template slot="append">px</template>
        </el-input>
			</div>
		</div>
		<div class="x">x</div>
		<div class="xd-size__item">
			<div v-if="is_px">{{placeholder.height}}</div>
			<div>
				<el-input
					:disabled="disabled.hDisabled"
					v-model="height"
					type="number"
					@input="handleEnterInput"
					@blur="handleEnterInput"
				>
          <template slot="append">px</template>
        </el-input>
			</div>
		</div>
	</div>
</template>

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

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

      setting: {
        type: Object,
        default() {
          return {
            height: null,
            width: 750,
					}
        },
      },

      disabled: {
        type: Object,
        default() {
          return {
            wDisabled: true,
            hDisabled: false
          }
        },
      },

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

      placeholder: {
        type: Object,
        default() {
          return {
            width: '宽度px',
						height: '高度px'
          }
        },
      },

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

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

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

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

		},
		data(){
      return {
        height: null,
        width: null,
        wDisabled: true,
        hDisabled: false,
				is_px: false
			}
		},

		created(){
      if (this.$xdHelper.checkVarType(this.setting) === 'object') {
      	if (this.setting.height !== undefined) this.height = this.setting.height;
        if (this.setting.width !== undefined) this.width = this.setting.width;
      }

      if (this.$xdHelper.checkVarType(this.disabled) === 'object') {
        if (this.disabled.wDisabled) this.wDisabled = this.disabled.wDisabled;
        if (this.disabled.hDisabled) this.hDisabled = this.disabled.hDisabled;
      }

      if (this.$xdHelper.checkVarType(this.defaultValue) === 'object') {
        if (this.defaultValue.height) this.height = this.defaultValue.height;
        if (this.defaultValue.width) this.width = this.defaultValue.width;
      }

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

		methods: {

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


      /**
			 * @description 需要校验检查参数是正确处理方法
       */
			checkParams(){
        if (!this.required) return {
          width: this.width,
          height: this.height
				};

        let width = Number(this.width) || null;
        let height = Number(this.height) || null;
        if (width < 0) width = null;
        if (height < 0) height = null;
				if(height === null || width  === null) {
				  return  null;
				}

				return  {
          width,
          height
				}
			},

			/**
			 * @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-size {
		display: flex;
		justify-content: flex-start;
		align-items: center;

    & > div.x {
			margin: 0 5px;
			color: #999;
      flex-shrink: 0;
		}
		&.is_px > div:nth-child(2) {
			margin: 30px 15px 0;
			color: #999;
		}
		&__item {
			color: rgba(204, 204, 204, 1);
			flex: 1;
		}

    ::v-deep {
      .el-input-group__append {
        padding: 0 6px!important;
      }
    }
	}

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