<template>
    <div class="van-cell van-field" style="overflow:inherit" :class="{'van-cell--required':!!option.required}">
        <div class="van-cell__title van-field__label"><span>{{option.label}}</span></div>
        <div class="relative w100 text-left" @click="clickBox">
            <span class="van-field__label" :key="model">{{!!msg?msg+option.label:selectName}}</span>
            <ul class="selectBox" v-if="isShow">
                <li class="van-cell list selectItem" v-if="getSelectData['length']<=0">暂无数据</li>
                <li class="van-cell list selectItem" @click="selectValue(sValue)" v-for="(sValue) in getSelectData" :selected="(option.value)==sValue[dataColumn['key']||'key']" :key="sValue[dataColumn['key']||'key']" :value="sValue[dataColumn['key']||'key']">{{sValue[dataColumn['value']||'value']}}</li>
            </ul>
        </div>
        <div class="selectItem selectShaw" v-if="isShow" @click="isShow=false"></div>
        <!-- <select class="card_type"  v-model="model" placeholder="ddd">
            <option value="">请选择</option>
                <option v-for="(sValue) in option.columns" :selected="(option.value)==sValue[dataColumn['key']||'key']" :key="sValue[dataColumn['key']||'key']" :value="sValue[dataColumn['key']||'key']">{{sValue[dataColumn['value']||'value']}}</option>
        </select> -->
    </div>
</template>

<script>
export default {
    name:"mySelect",
    model:{
        prop:"give",
        event:'change'
    },
    props:{
        pValue:String|Number,
        give:String|Number,
        str:String|Number,
        option:Object,
        compentChilds:Object,
        selectChild:Array
    },
    data(){
        return{
            msg:'请选择',
            selectName:'',
            isShow:false,
            pCode:'',
        }
    },
    created(){
        if(!!this.option.value){
            this.selectKey(this.option.value)
        }
    },
    mounted(){
        this.$nextTick(()=>{
             if(!!this.option['dataUrl']&&!this.option['parentCode']){
                 this.option.columns=[]
                this.getDataUrl();
            }
        })
    },
    computed:{
        getSelectData(){
            return this.option.columns||[]
        },
        dataColumn(){
            return this.option.dataColumn||{key:'key',value:'value'};
        },
        model:{
            get() {
                return this.give;
            },
            set(val) {
                this.$emit('change', val);
                this.$emit('changeStr',this.selectName)
            }
        },
    },
    updated(){
        // if(!!this.option['parentCode']){
        //     console.log(this.option.label+'====='+this.pValue)
        //     this.getDataUrl(this.pValue)
        // }
    },
    methods:{
        init(){
            this.msg="请选择"
            this.model=""
            this.selectName=""
            this.$set(this.option, "columns", [])
            this.$emit('changeStr',this.selectName)
        },
        selectKey(key){
            let selectValue = ""
            for (let k in this.option.columns){
                let item = this.option.columns[k]
                if(item[this.dataColumn.key]==key){
                    selectValue=item[this.dataColumn.value]
                    this.$emit('change', key);
                    break;
                }
            }
            this.selectValue({[this.dataColumn.key]:key,[this.dataColumn.value]:selectValue})
        },
        getDataUrl(pvalue){
            let dataurl =  this.option['dataUrl'];
            this.init();
            if(this.option['dataUrl'].indexOf('${key}')!= -1){
                dataurl=this.option['dataUrl'].replace('${key}',pvalue)
            }
            let config = this.option['dataUrlConfig']||{}
            this.$get(dataurl,config).then(res=>{
                let data = res.data;
                if(!!this.option['dataFormat']){
                    data=this.option['dataFormat'](res)
                }
                this.$set(this.option, "columns", data)
            })
        },
        clickBox(e){
            if(e.target.className.indexOf("selectItem") != -1){
                this.isShow=false
            }else{
                this.isShow=true
            }
        },
        selectValue(e){
            this.selectName = e[this.dataColumn.value]
            this.model = e[this.dataColumn.key]
            this.msg=""
            // for(let key in this.selectChild){
            //     this.compentChilds[this.selectChild[key]][0].getDataUrl(e[this.dataColumn.key])
            // }
            // console.log(this.selectChild)
            // console.log(this.compentChilds)
        },
        // changeFn(e){
        //     this.$emit('change', e.target.value);
        // }
    },
    watch:{
        pValue(nw,old){
            if(old==undefined)return
            if(!!nw&&nw!=old&&!!this.option['parentCode']){
                this.getDataUrl(nw)
            }else if(!nw){
                this.init()
            }
        }
    }
}

</script>
<style scoped>
    .selectBox{
        position: absolute;
        left: 0;right: 0;
        max-height: 20rem;
        z-index: 100;
        overflow: scroll;
        background: white;
        box-shadow: 0px 0px 10px rgba(100,100,100,.6);
        border-radius: 5px;
    }
    .list:hover{
        background-color: rgba(100,100,100,.2);
    }
    .selectShaw{
        position: fixed;
        z-index: 10;
        top:0;left: 0;right: 0;bottom: 0;
        background-color: rgba(0, 0, 0, .1);
    }
</style>