<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-07-03 18:50:33
 * @LastEditors: 无尘
 * @LastEditTime: 2020-08-26 09:57:10
 -->
<!--
  限制输入框组件
   <countryMobile
    :inputWidth="500"
    :limitClass="'limit-color'"
    :disflag='disflag'
    v-model="ruleForm.addressDetail"
    :holder="'请输入'">
  </countryMobile>
 -->
<template>
  <div :class="['input-line-cell', limitClass]" :style="{ width: inputWidth + 'px' }">
    <el-input :style="{ width: inputWidth + 'px' }" maxlength="50" v-model="itemValue" :disabled="disflag" :placeholder="holder" @blur="inputBlur()" @focus="inputFocus()" @keyup.native="value => toInput(value)">
      <el-select v-model="selCode" slot="prepend" class="w-92" :disabled="disflag" @change="changeCode">
        <el-option v-for="(item, index) in nationCodeList" :label="'+' + item.dictCode" :value="item.dictCode" :key="index + 'option'">{{ item.dictName + '  +' + item.dictCode }}</el-option>
      </el-select>
    </el-input>
  </div>
</template>
<script>
import { postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'countryMobile',
  props: {
    // 传入 input value
    value: {
      type: [String, Number],
      default: ''
    },
    nationCode: {
      type: [String, Number],
      default: '86'
    },
    // input 长度
    inputWidth: {
      type: Number,
      default: 167
    },

    holder: {
      type: String,
      default: '请输入'
    },

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

    limitClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      itemValue: this.value,
      selCode: this.nationCode || '86',
      nationCodeList: []
    };
  },
  methods: {
    /* eslint-disable */
    inputFocus(num) {},
    /**
     * 选择国际码
     */
    changeCode() {
      const that = this;
      that.$emit('update:nationCode', that.selCode);
      that.$emit('input', that.itemValue);
    },
    // 输入
    toInput: function(e) {
      const that = this;
      let temp = '';
      that.itemValue = e.target.value.replace(/[^0-9]/gi, '');
      that.$emit('input', that.itemValue);
    },
    inputBlur() {
      const that = this;
      that.$emit('input', that.itemValue);
    },
    getNationalData() {
      let that = this;
      postRequest('/haoban-manage3-web/nationcode/get-nationcode-list', {})
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            let arr = [];
            resData.result.forEach(ele => {
              arr = arr.concat(ele.datas);
            });
            that.nationCodeList = arr;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    value: function(newData, oldData) {
      const that = this;
      that.itemValue = newData || '';
    },
    nationCode: function(newData, oldData) {
      const that = this;
      that.selCode = newData || '86';
    }
  },
  /* 接收数据 */
  mounted() {
    const that = this;
    that.getNationalData();
    that.itemValue = that.value || '';
    that.selCode = that.nationCode || '86';
  }
};
</script>
<style lang="scss" scoped>
.input-line-cell {
  position: relative;
  display: inline-block;
}

.w-92 {
  width: 92px;
}

.el-input-group {
  >>> .el-input-group__prepend {
    background: #fff;
  }
}

.w-340 {
  width: 340px;
  >>> .el-input__inner {
    font-size: 14px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
  }
}

.el-input {
  >>> .el-input__inner {
    font-size: 14px;
    color: #606266;
    background-color: rgba(255, 255, 255, 0.1);
  }
  &.is-disabled {
    opacity: 0.5;
  }
  .is-disabled {
    >>> .el-input__inner {
      font-size: 14px;
      color: #fff;
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}
</style>
