<style lang="scss">
 @import '../style/style.scss';
    .sub{
        .el-input{
            width: 300px !important;
        }
    }
</style>
<template>
    <span v-if='!subject_id'>
        <el-cascader v-if='value' class="sub" :props='props' 
        placeholder="请选择培训科目 / 作业类别 / 准操项目"
        v-model="value1" @change="handleChange"
        :options="data"></el-cascader>
        <el-cascader v-else class="sub" :props='props1' clearable
        placeholder="请选择培训科目 / 作业类别 / 准操项目"
        v-model="value1" @change="handleChange"
        :options="data"></el-cascader>
    </span>
    <span v-else>
        <el-cascader class="sub" :props='props1' clearable
        placeholder="请选择作业类别 / 准操项目"
        v-model="value1" @change="handleChange"
        :options="data">
        </el-cascader>
    </span>
</template>   
<script>
export default {
    data(){
        return{
            data:[],
            value1:[],
            props:{
                label:'name',
                checkStrictly:true,
                value:'id'
            },
            props1:{
                label:'name',
                checkStrictly:true,
                value:'name'
            }
        }
    },
    props: {
        value:'',
        subvalue:'',
        subject_id:''
    },
    methods:{
        getData(type){
            this.$api.getSubList().then(res=>{
                let data=res.data.data;
                if(this.subject_id){
                    for(let i=0;i<data.length;i++){
                        if(data[i].id == this.subject_id){
                            this.data=data[i].children
                        }
                    }
                }else{
                    this.data=res.data.data
                }
              
          })
        },
        handleChange(value) {
            var id='',that=this;
            if(value.length>=3&&isNaN(value[0])){
                var item1=this.data.filter(item=>item.name==value[0]),
                    item2=item1[0].children.filter(item=>item.name==value[1]),
                    item3=item2[0].children.filter(item=>item.name==value[2])
                    id=item3[0].id;
            }
            setTimeout(function(){
                let values=document.querySelector('.el-input__inner').value;
                let items=values.split(' / ');
                console.log(values)
                that.$emit('subChange',items,id,value)
            },100)
            
            
        }
    },
    created(){
        this.getData()
        if(this.value){
            this.value1=this.value   
        }
        if(this.subvalue){
            this.value1=this.subvalue.split('|')
        }
    }
}
</script>