<template>
    <div :class="bem()">

        <GdInput
            type="tel"
            v-model="innerValue.number"
            v-bind="$attrs"
            v-on="$listeners"
            @input="e => $emit('update', innerValue)"
            maxlength="20"
            autocomplete="on"
            placeholder="输入手机号码"
        >
            <template slot="prepend">
                <Popover
                    trigger="click"
                    offset="4px"
                    :modifiers="{
                        offset: {
                            offset: '-18px, 18px'
                        }
                    }"
                    :arrow="false"
                    :visible.sync="showCountryList"
                    placement="bottom-start">
                    <label :class="bem('code', {active: showCountryList})">
                        {{ '+' + innerValue.code }}
                        <Icon name="triangle-down"/>
                    </label>
                    <div :class="bem('country-list')" v-show="showCountryList" slot="content">
                        <ul>
                            <li
                                v-for="(country, index) in countries"
                                :key="index"
                                @click="selectCountry(country.code)"
                            >{{ country.name + ' +' + country.code }}</li>
                        </ul>
                    </div>
                </Popover>
            </template>
            <template slot="append">
                <div class="loading-status" v-show="loading"/>
                <Icon name="check" v-show="checked" style="color: 60C94D;"/>
            </template>
        </GdInput>
    </div>
</template>

<script>
import GdInput from '../../Input';
import Icon from '../../Icon';
import { componentMixin, createComponentName } from '../../_utils/component';
import Popover from '../../Popover';

export default {
    name: createComponentName('phone-number'),
    components: {
        GdInput,
        Icon,
        Popover
    },
    mixins: [componentMixin],
    model: {
        event: 'update',
        name: 'value'
    },
    props: {
        value: {
            type: Object,
            required: true,
        },
        countries: {
            type: Array,
            default() {
                return [
                    {
                        name: '中国',
                        code: 86
                    },
                    {
                        name: '中国香港',
                        code: 852
                    },
                    {
                        name: '中国澳门',
                        code: 853
                    },
                    {
                        name: '中国台湾地区',
                        code: 886
                    }
                ];
            }
        },
        loading: {
            type: Boolean,
            defalut: false,
        },
        checked: {
            type: Boolean,
            defalut: false,
        }
    },
    data() {
        return {
            showCountryList: false,
            innerValue: { ...this.value },
        };
    },
    watch: {
        value(value) {
            if (value) this.innerValue = value;
        }
    },
    methods: {
        selectCountry(code) {
            this.showCountryList = false;
            this.innerValue.code = code;
            this.$emit('update', { ...this.innerValue });
        },
    }
};
</script>

<style lang="less">

@import '../../_styles/base.less';
@phone-number: ~'@{prefix}-phone-number';

.@{phone-number} {
    width: 100%;

    &__code {
        color: #000;
        display: flex;
        align-items: center;
        min-width: 36px;

        &--active {
            color: #005cf9;
        }

        .@{icon} {
            font-size: 8px;
            width: 8px;
            margin-left: 2px;
        }
    }

    &__country-list {
        height: 285px;
        border-radius: 2px;
        box-shadow: 0px 9px 9px 0 rgba(0, 92, 249, 0.08);
        background-color: #ffffff;
        border: solid 1px #81b0ff;
        overflow: scroll;
        width: 283px;
        z-index: 2;

        &::-webkit-scrollbar {
            width: 8px;
            height: 0;
        }
        &::-webkit-scrollbar-track:vertical {
            border-radius: 2px;
            background-color: #ffffff;
        }
        &::-webkit-scrollbar-thumb:vertical {
            border-radius: 2px;
            background-color: #e4eeff;
            margin: 7px 0;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        li {
            line-height: 44px;
            padding-left: 23px;
            cursor: pointer;
            list-style: none;

            &:hover {
            color: #ffffff;
            background-color: #81b0ff;
            }
        }
    }

    .loading-status,
    .pass-status {
        background-size: contain;
        width: 16px;
        height: 16px;
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .loading-status {
        background-image: url('../../../assets/img/loading.gif');
    }
}


.country-list-mask {
  opacity: 0;
  position: fixed;
  height: 200vh;
  width: 200vw;
  z-index: 1;
  top: -100%;
  left: -100%;
}
</style>
