<template>
    <div class="y_cellMobile y_cellGroup_item ">
        <y-cell :custom-class="classStr"
                :title="title"
                type="bodyMax"

                :is-require="isRequire"
                disable-click
                :dis-padding-horizontal="disPaddingHorizontal">
            <div :class="{y_cellMobile_pet:groupTopic == 'pet',y_cellField_petBig:groupTopic == 'petBig'}">
                <div class="y_cellMobile_box">
                    <div class="y_cellMobile_arrowUp" v-text="areacodeShow" @click="fnOpenList"></div>
                    <div class="y_cellMobile_input">
                        <input placeholder-style="color:#C9CACA;" type="number" :placeholder="placeHolder" v-model="mobile" @blur="$emit('blur',$event)"/>
                    </div>
                </div>
            </div>
        </y-cell>
        <y-popup :show.sync="mobileListShow" :title="langPackage.yCellMobile.areacode">
            <div class="mobileListBox">
                <div style="display: none;">
                    兼容微信小程序错误绑定了第一个组件的时间
                    <y-button topic="gradient" size="large" width="100%" :text="langPackage.yCellMobile.enter" @click="fnChooseCode"></y-button>
                </div>
                <y-picker :columns="mapAreaList" :value-key="selectKey" @update:valueKey="val=>selectKey=val"></y-picker>
                <div class="y_picker_areaCodeBtn">
                    <y-button topic="gradient" size="large" width="100%" :text="langPackage.yCellMobile.enter" @click="fnChooseCode"></y-button>
                </div>
            </div>
        </y-popup>
    </div>


</template>

<script>
    import yCell from "./yCell";
    import yPopup from "./yPopup";
    import yButton from "./yButton";
    import yPicker from "./yPicker";
    import field from "./mixins/field";
    import {each} from "../utils/utils";

    export default {
        name: "yCellMobile",
        mixins: [field],
        computed: {
            classStr() {
                return (this.customClass ? " " + this.customClass : "");
            },
            groupTopic(){
                return this.cellTopic ? this.cellTopic : "";
            },
            areacodeShow() {
                let ret = "";
                let defaultCode = "";
                const self = this;
                this.areaCodeList.forEach((item, index) => {
                    if (item.value == self.defaultAreaKey) {
                        defaultCode = item.value;
                    }
                    if (item.value == self.mapAreaKey) {
                        ret = item.value
                    }
                });
                return "+" + (ret || defaultCode || "");
            }
        },
        components: {
            yCell,
            yPopup,
            yButton,
            yPicker
        },
        data() {
            return {
                cellTopic:false,
                mapAreaList: [],
                mapAreaKey: this.areacode || this.defaultAreaKey,
                mobile: this.modelValue,
                mobileListShow: false,
                selectKey: this.areacode || this.defaultAreaKey
            }
        },
        inject:["yCellGroup"],
        methods: {
            fnChooseCode() {
                this.mapAreaKey = this.selectKey;
                this.mobileListShow = false;
            },
            fnOpenList(e) {
                this.selectKey = this.mapAreaKey;
                this.mobileListShow = true;

            },
            fnSetAreaList() {
                const self = this;
                if (self.areaCodeList) {
                    self.mapAreaList.splice();
                    let defaultValue = this.defaultAreaKey;
                    self.areaCodeList.forEach((item, index) => {
                        if (!defaultValue) {
                            defaultValue = item.value;
                        }
                        self.mapAreaList.push({
                            value: "(" + item.key + ") " + "+" +  item.value,
                            key: item.value
                        })
                    });
                    if (defaultValue) {
                        self.mapAreaKey = defaultValue;
                    }
                }
            }
        },
        model: {
            prop: "modelValue",
            event: "update:modelValue"
        },
        props: {
            areacode: String,
            areaCodeList: {
                default: () => [],
                type: Array
            },
            customClass:{
                default:"",
                String,
            },//样式
            defaultAreaKey: "",
            disPaddingHorizontal:Boolean,
            isRequire:Boolean,
            langPackage:{
                type:Object,
                default(){
                    return {
                        yCellMobile:{
                            enter:"确定",
                            areacode:"选择区号"
                        }
                    }
                }
            },
            modelValue: {
                default: ""
            },
            placeHolder:{
                default:"请输入手机号码",
                type:String
            },
            title: {
                default: "手机号码",
                //type: String
            },
            disabled: Boolean,
            required: Boolean,
            formValue: ""
        },
        watch: {
            mobile() {
                this.$emit("update:modelValue", this.mobile)
            },
            modelValue() {
                this.mobile = this.modelValue;
            },
            areaCodeList() {
                this.fnSetAreaList();
            },
            mapAreaKey() {
                this.selectKey = this.mapAreaKey;
                this.$emit("update:areacode", this.mapAreaKey);
            }
        },
        created() {
            this.fnSetAreaList();
        },
        beforeMount() {
            if(this.yCellGroup){
                this.cellTopic = this.yCellGroup.topic;
            }
        },
    }
</script>

<style lang="scss">
    @import "../css/var.scss";

    .y_cellMobile {
    }

    .y_cellMobile_pet{
        .y_cellMobile_input {
            input {
                font-weight: bold;

                &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                    font-weight: normal;
                }

                &:-moz-placeholder { /* Mozilla Firefox 4 to 18*/
                    font-weight: normal;
                }

                &::-moz-placeholder { /* Mozilla Firefox 19+ */
                    font-weight: normal;
                }

                &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                    font-weight: normal;
                }
            }
        }
        .y_cellMobile_arrowUp{
            &:after {
                right:-22px;
            }
        }
    }

    .y_cellField_petBig{
        .y_cellMobile_box{

           /* padding: 8px 15px;
            border-radius: 30px;
            background: $color_bg_default;*/
        }
    }

    .y_cellMobile_arrowUp {
        display: inline-block;
        height: $mobile_lineHeight;
        line-height: $mobile_lineHeight;
        margin-right: 8px;
        position: relative;
        color: $font_color_title;

        &:after {
            font-family: yesaway_ui;
            content: "\e621";
            display: inline-block;
            position: absolute;
            right: -16px;
            top:0;
            transform:scale(0.25) translateY(4px);
        }
    }

    .y_cellMobile_box {
        display: flex;
        min-height: 24px;
    }

    .y_cellMobile_input {
        flex: 1;
        margin-left: 8px;
        width: 100%;
        height: $mobile_lineHeight;
        line-height: $mobile_lineHeight;

        input{
            display: block;
            width: 100%;
            border: none;
            background: none;
            text-align: left;
            height: $mobile_lineHeight;
            line-height: $mobile_lineHeight;
            min-height: 0;
            padding: 0;
            color: $font_color_title;

            &::-webkit-input-placeholder,&.y_cellMobile_input_holder {
                color: $font_color_contentSecondeary;
            }
        }


    }

    .y_picker_areaCodeBtn {
        padding: 15px $popup_padding_horizantal;
    }

</style>
