<template>
  <section class="AiPhone">
    <el-input v-if="mode=='input'" v-model="phone" clearable :disabled="disabled" :placeholder="placeholder"
              :maxLength="11" @change="autoComplete"></el-input>
    <el-row type="flex" v-if="mode=='show'" style="align-items: center">
      <el-button type="text" v-if="!rightBtn&&showEyes" :icon="showIcon" @click="isShow=!isShow"></el-button>
      <span v-if="isShow">{{value||"-"}}</span>
      <span v-else>{{hideId}}</span>
      <el-button type="text" v-if="rightBtn&&showEyes" :icon="showIcon" @click="isShow=!isShow"></el-button>
    </el-row>
  </section>
</template>

<script>
  export default {
    name: "AiPhone",
    model: {
      prop: "value",
      event: "change"
    },
    props: {
      value: String,
      mode: {type: String, default: 'input'},
      rightBtn: Boolean,
      show: {type: Boolean, default: false},
      disabled: Boolean,
      placeholder: String,
      showEyes: {type: Boolean, default: true}
    },
    computed: {
      showIcon() {
        return this.isShow ? 'iconfont iconHide_Content' : 'iconfont iconShow_Content'
      },
      hideId() {
        if (this.value) {
          let idArr = Array.from(this.value)
          idArr.splice(3, 4, "****")
          return idArr.join("") || "-"
        } else return "-"
      }
    },
    data() {
      return {
        isShow: false,
        phone: ""
      }
    },
    methods: {
      autoComplete() {
        this.$emit("valid", this.validate(this.phone))
      },
      validate(phone) {
        let result = false, msg = ''
        if(phone){
          if(phone.length==11){
            if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){
              result = true
            }else{
              msg = "手机号不合法!"
            }
          }else{
            msg = "手机号长度不合法!"
          }
        }else{
          msg = "手机号不能为空!"
        }
        return [result, msg]
      }
    },
    mounted() {
      this.phone = this.value
      this.isShow = this.show
    }
  }
</script>

<style lang="scss" scoped>
  .AiPhone {
  }
</style>
