<template>
    <div class="selects" :class="data.prepend||data.prependIcon?'el-input--prefix':data.appendIcon||data.append?'el-input--suffix':'' ">
        <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>
        <div class="select-item" :model="models" :key="key" v-for="(item , key) in columns">
            <el-select clearable v-model="models[key]" :placeholder="data.placeholder||'请选择'" :filterable="data.filterable" :fit-input-width="true" :collapse-tags-tooltip="true" :disabled="data.disabled || disabled" @change="change">
                <el-option :label="option[data.config?data.config.label:'name']" :key="key" :value="option[data.config?data.config.value:'value'] === undefined?option.name:option[data.config?data.config.value:'value']" v-for="(option , key) in item"></el-option>
            </el-select>
            
            <span class="unitName">{{item.name}}</span>
        </div>
        <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 {
    fromEntries
} from '../../utils'
export default {
    props: {
        disabled:{
            require: false,
            type: Boolean
        },
        data: {
            require: false,
            type: Object
        },
        validator: {
            type: Function,
            require: false,
        },
        _p:{
            require: false,
            type: Object
        }
    },
    watch:{
        'data.answer':{
            handler(){
                console.info(this)
                this.models[0] = "";
                this.parent.formModel[this.data.id] = ""
                this.columns = [this.data.answer]
            }
        },
        '_p.formModel':{
            handler(val) {
                
                this.models[0] = val[this.data.id];
            }
        },
        deep:true
    },
    data(){
        const parent = this._p;
        const {
            data: formData
        }  = parent;
        const {
            answer,
            list,
            id,
        } = this.data;
        let columns = [], models = fromEntries((answer ? [answer] : list).map((a, key) => [key, '']))
        if (list) {
            let keys = [];
            if (parent.formModel[id]) {
                if (id == "gestationWeek" && parent.formModel[id].indexOf("周") == -1) {
                    keys = [`${Math.floor(parent.formModel[id]/7)}`, `${parent.formModel[id]%7}`]
                } else {
                    keys = parent.formModel[id];
                }
            }
            columns = list.map(a => {
                let list = [];
                const {
                    min = 0, max = 100, unit
                } = a;
                for (let i = min; i <= max; i++) {
                    list.push({
                        name:unit?i + unit:i
                    });
                }
                return list
            });
            keys.map((a, key) => {
                models[key] = a;
            })
        } else {
            columns = [answer];
            models[0] = parent.formModel[id];
        }
        return {
            parent,
            columns,
            models,
            formData
        }
    },
    mounted(){
        this.change();
    },
    methods:{
        hideRelations(){
            let relationsIds = [];
            this.answer.forEach(item => {
                if (item.relationsIds) {
                    relationsIds = relationsIds.concat(item.relationsIds)
                }
            });
            [...new Set(relationsIds)].map(id => {
                let form = this.formData.find(a => a.id == id);
                form.isHide = true;
            });
        },
        change(){
            if (this.data.answer || this.data.list && Object.values(this.models).find(a => a == "") != "") {
                if (this.data.id == "gestationWeek") {
                    this.parent.formModel[this.data.id] = parseInt(this.models[0].replace("周", "")) * 7 + parseInt(this.models[1].replace("天", ""));
                }else if(this.data.list){
                    this.parent.formModel[this.data.id] = [this.models[0],this.models[1]];
                } else {
                    this.parent.formModel[this.data.id] = this.models[0] === ""?undefined:this.models[0];
                    const {
                        relationsIds = []
                    } = this.data.answer.find(b => (b.value ? b.value : b.name) == Object.values(this.models).join("")) || {};
                    if (relationsIds.length) {
                        this.hideRelations();
                        relationsIds.map(id => {
                            let form = this.formData.find(a => a.id == id);
                            if (form) {
                                form.isHide = false;
                            }
                        });
                    }
                    if(this.data.change){
                        this.data.change(this.models[0])
                    }
                }
            }
        }
    }
}
</script>

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