<template>
    <div class="selects"  :class="data.prepend||data.prependIcon?'el-input--prefix':data.appendIcon||data.append?'el-input--suffix':'' " :model="models">
        <div  class="el-input-group__prepend" v-if='data.prepend'>{{data.prepend}}</div>
        <div  class="el-input-group__prepend" v-else-if="data.prependIcon">
            <el-button :icon="data.prependIcon" />
        </div>
        <el-select class="select-item" clearable v-model="models.province" placeholder="请选择省" :fit-input-width="true" :collapse-tags-tooltip="true" :disabled="data.disabled" @change="changeProvince">
            <el-option :label="option.name || option " :key="key" :value="option.value || option" v-for="(option , key) in province"></el-option>
        </el-select>
        <el-select class="select-item" clearable v-model="models.city" placeholder="请选择市、县" :fit-input-width="true" :collapse-tags-tooltip="true" :disabled="data.disabled" @change="changeCity">
            <el-option :label="option.name || option " :key="key" :value="option.value || option" v-for="(option , key) in city"></el-option>
        </el-select>
        <el-select class="select-item" clearable v-model="models.town" placeholder="请选择区、镇" :fit-input-width="true" :collapse-tags-tooltip="true" :disabled="data.disabled">
            <el-option :label="option.name || option " :key="key" :value="option.value || option" v-for="(option , key) in town"></el-option>
        </el-select>
        <div  class="el-input-group__append"  v-if="data.appendIcon">
            <el-button :icon="data.appendIcon" />
        </div>
        <div class="el-input-group__append" v-else-if="data.append">
            {{data.append}}
        </div>
    </div>
</template>

<script>
import address from "./address.json";
export default {
    props: {
        data: {
            type: Object
        },
        validator: {
            type: Function
        },
        _p:{
            type: Object
        }
    },
     data(){
        const parent = this._p;
         const {
            province: provinceV,
            city: cityV,
            town: townV
        } = parent.formModel[this.data.id] || {};

        const province = Object.keys(address),city = [],town = [],models = {
            province: provinceV,
            city: cityV,
            town: townV,
        };
        parent.formModel[this.data.id] = models;
        return {
            province,
            city,
            town,
            models,
            parent,
            showCalendar:false,
        }
    },
    mounted(){
        if (this.models.town) {
            this.city = Object.keys(address[this.province]);
            this.own = address[this.province][this.city];
        }
    },
    methods:{
        changeProvince(){
            if (this.models.province) {
                this.city= Object.keys(address[this.models.province]);
                this.town = [];
                this.models.city = "";
                this.models.town = "";
            }
        },
        changeCity(){
            if (this.models.province&&this.models.city) {
                this.town = address[this.models.province][this.models.city];
                this.models.town = "";
            }
        }
    }
}
</script>

<style lang="less" scoped>
.selects {
    display: flex;
    flex: 1;

    .select-item {
        width: calc(100% / 3);
    }
     &.el-input--prefix{
        :deep(.el-input__wrapper){
            border-radius: 0 4px 4px 0;
        }
    }
    /deep/ .el-input__inner{
        height:40px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
     &.el-input--suffix{
        :deep(.el-input__wrapper){
            border-radius: 0 4px 4px 0;
        }
    }
    .el-input-group__prepend,.el-input-group__append{
        --el-input-border-color:#dcdfe6;
        min-width:56px;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    :deep(.el-cascader){
        .el-input--suffix,.el-input .el-input__inner,.el-input{
            height:100%;
        }
    }
}
</style>
