<template>
  <div class='graph-validate-cantainer' @click="handlePop" v-cloak v-if="show"  style="height:100%;">
    <div class="graph-validate" ref="container">
        <div class="graph-validate-title" v-text="graphValidateTitle"></div>
        <span class="graph-validate-close" @click="handleClickClose">
            <chaos-icon icon="m-sys-topclose" ></chaos-icon>
        </span>
        <div class="graph-validate-error-msg" >
            <div v-if="showError" v-text="graphValidateErrorMsg"></div>
        </div>
        <div class="graph-validate-input-container">
            <input
                class="graph-validate-input"
                :value="value"
                @keyup="handleChange"
                @focus="focus"
                @blur="blur"
                type="text"
                :placeholder="placeholder" />
            <img :src="graphValidateImg" alt="" @click="handleImg">
        </div>
        <div
            :class="[`graph-validate-disabled-${disabled}`, 'graph-validate-button']"
            @click="handleClickBtn">{{confirm}}</div>
     </div>
     <div class="graph-validate-pop"  @click="handlePop"></div>
    </div>
</template>
<script>
import icon from '../chaos-icon/ChaosIcon';
function isAndroid(){
	var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  return isAndroid;
}
export default {
  name: 'mu-graph-validate-code',
  props:{
    graphValidateTitle: {
        type: String,
        default: '请输入图形验证码'
    },
    graphValidateErrorMsg: {
        type: String,
        default: '验证码错误'
    },
    showError: {
        type: Boolean,
        default: false
    },
    graphValidateImg: {
        type: String
    },
    isShow:{
        type: Boolean,
        default: false,
    },
    disabled: {
        type: Boolean,
        default:false,
	},
    isclear: {
        type: Boolean,
        default:false,
    },
    confirm: {
        type: String,
        default: '确定'
    },
    placeholder:{
        type: String,
        default: '请输入'
    }
  },
  data(){
    return {
        show: this.isShow
    }
  },
  watch:{
      isShow(v) {
          this.show = v;
			},
			isclear(v) {
				v ? this.handleClear() : null;
			},
  },
  mounted(){
  },
  methods:{
		handleChange(e) {
			this.value = e.target.value;
			this.$emit('handle-change', e.target.value);
		},
		handleClickBtn(e) {
			e.stopPropagation();
			e.preventDefault();
			this.$emit('handle-click-btn');
		},
		handleClickClose(e) {
			e.stopPropagation();
			e.preventDefault();
			this.show = false;
			this.$emit('handle-click-close')
		},
		handlePop(e) {
			e.stopPropagation();
			e.preventDefault();
			return;
		},
		handleClear() {
			this.value = '';
		},
		focus() {
			if (isAndroid()) {
				const container = this.$refs.container;
				container.style.top = '110px';
			}
		},
		blur() {
			setTimeout(() => {
				if (isAndroid()) {
					const container = this.$refs.container;
					container.style.top = '210px';;
				}
			}, 500)
		},
		handleImg() {
				this.$emit('handle-click-img');
		}
  },
  components: {
    'chaos-icon': icon,
  }
}

</script>
<style lang="less">
  .graph-validate-cantainer {
    height: 100%;
    width: 100%;
    overflow: hidden;
    // display: flex;
    // justify-content: center;
    position: absolute;
    z-index: 10;
    top:0;
    .graph-validate {
        position: absolute;
        top: 210px;
        width: 330px;
        height: 210px;
        background: #fff;
        z-index: 11;
        text-align: center;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08);
        border-radius: 8px;
        margin-left: -165px;
        overflow: hidden;
        left: 50%;
        &-button {
            width: 258px;
            height: 42px;
            line-height: 42px;
            background: #3296FA;
            border: 0 solid #1695F0;
            border-radius: 3px;
            display: inline-block;
            color: #fff;
            font-size: 16px;
            color: #FFFFFF;
            letter-spacing: 0;
            margin-top: 16px;
        }

        &-title{
            font-size: 18px;
            color: #252C33;
            line-height: 24px;
            margin: 26px 0 4px 0;
        }
        &-error-msg{
            font-size: 14px;
            color: #FF5C5C;
            width: 100%;
            margin-bottom: 6px;
            height: 20px;
        }
        &-close {
            position: absolute;
            top: 16px;
            right: 16px;
            font-size: 16px;
            z-index: 12;
        }
        &-input-container{
            position: relative;
            border: 1px solid #E1E6EB;
            border-radius: 2px;
            width: 258px;
            height: 46px;
            /* text-indent: 16px; */
            display: inline-block;
        }
        &-disabled-true {
            opacity: 0.4;
        }
    }
    .graph-validate-pop {
        height: 100%;
        background: rgba(0,0,0,0.4);
        // position: absolute;
        left: 0;
        width: 100%;
        float: left;
    }
    input {
        width: 180px;
        height: 44px;
        position: absolute;
        left: 0;
        text-indent: 16px;
        font-size: 16px;
    }
    img {
        width: 66px;
        height: 28px;
        position: absolute;
        right: 10px;
        top: 12px;
    }
    @media screen and (max-width: 374px) {
        .graph-validate{
            width: 310px;
            margin-left: -155px;
            &-button {
                width: 240px;
            }
            &-input-container {
                width: 240px;
            }
            &-close {
                right: 12px;
            }
        }

    }
}
</style>
