<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-07-03 18:50:33
 * @LastEditors: 无尘
 * @LastEditTime: 2020-10-21 10:57:49
 -->
<!--
  限制输入框组件
   <countryMobile
    :nationCode.sync="loginForm.nationCode"
    :input-width="500"
    :limit-class="'limit-color'"
    :disflag='disflag'
    v-model="ruleForm.addressDetail"
    :holder="'请输入'"
    @checkPhoneNum="checkPhoneNum">
  </countryMobile>
 -->
<template>
  <div :class="['input-line-cell', limitClass]" :style="{ width: inputWidth + 'px' }">
    <el-input :style="{ width: inputWidth + 'px' }" v-model="itemValue" maxlength="20" :disabled="disflag" :placeholder="holder" @blur="inputBlur()"  @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.nationCode" :value="item.nationCode" :key="index + 'option'">{{ item.name + '  +' + item.nationCode }}</el-option>
      </el-select>
    </el-input>
  </div>
</template>
<script>
import fetch from '@/api/contact.js';
const { getNationCode } = fetch;
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: []
    };
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.getNationalData();
    that.itemValue = that.value || '';
    that.selCode = that.nationCode || '86';
  },
  methods: {
    /**
     * @description: 选择国际码
     * @author: 无尘
     */
    changeCode() {
      const that = this;
      that.$emit('update:nationCode', that.selCode);
      that.$emit('input', that.itemValue);
      that.$emit('checkPhoneNum');
    },
    /**
     * @description: 输入
     * @param {Object} e
     * @author: 无尘
     */
    toInput: function(e) {
      const that = this;
      that.itemValue = e.target.value.replace(/[^0-9]/gi, '');
      that.$emit('input', that.itemValue);
    },
    inputBlur() {
      const that = this;
      that.$emit('input', that.itemValue);
    },
    /**
     * @description: 获取国家码
     * @author: 无尘
     */
    getNationalData() {
      let that = this;
      getNationCode({})
        .then(res => {
          that.nationCodeList = res.result || [];
        })
        .catch(function(error) {

        });
    }
  },
  watch: {
    value: function(newData, oldData) {
      const that = this;
      that.itemValue = newData || '';
    },
    nationCode: function(newData, oldData) {
      const that = this;
      that.selCode = newData || '86';
    }
  }
};
</script>
<style lang="less" scoped>
.input-line-cell {
  position: relative;
  display: inline-block;
}

.w-92 {
  width: 92px;
}

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

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

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