<template>
  <div :style="{'width':width,'height':height,'line-height':height}" style="font-size: 0;">
    <!--标签-->
    <al-label
      :label="label"
      :labelWidth="labelWidth"
      :labelOption="labelOption"
      :value="labelActiveIndex"
      @input="labelChange"
      :height="height">{{label}}</al-label>

    <!--级联选择器-->
    <al-form-item :class="{'autoWidth':label}" :prop="prop"
                  :style="{width:label||labelOption.length?'calc( 100% - '+labelWidth+')':'100%','height':height,'line-height':height}">
      <el-cascader
        :value="value"
        @input="onInput"
        size="medium"
        :options="options"
        :style="{width:'100%'}"
        :disabled="disabled"
        :clearable="clearable"
        :props="props"
        @change="getOptions"
        :popper-class="(mixed?'memberEdit ':'')+'cascader'"
      ></el-cascader>
    </al-form-item>
  </div>
</template>

<script>
    import AlFormItem from '../AlFormItem'
    export default {
        name: "index",
        data() {
            return {
                oldSelectOptions:[],
            }
        },
        components: {
            AlFormItem,
        },
        computed:{
            props(){
                var o={};
                if(this.multiple){
                    o.multiple=true
                }
                if(this.checkStrictly){
                    o.checkStrictly=true
                }
                if(this.trigger=='click'){
                    o.expandTrigger='click'
                }else{
                    o.expandTrigger='hover'
                }
                if(this.lazyLoad!=null){
                    o.lazy=true;
                    o.lazyLoad=this.lazyLoad
                }
                return o
            }
        },
        props: {
            //labelOption 激活值
            labelActiveIndex:{
                type:Number,
                default:0
            },
            //label下拉框的选项
            labelOption: {
                type: Array,
                default() {
                    return []
                }
            },
            //选择任意一级选项
            checkStrictly:{
                type:Boolean,
                default:false
            },
            //多选
            multiple:{
                type:Boolean,
                default:false
            },
            //混合多选
            mixed:{
                type:Boolean,
                default:false
            },
            lazyLoad:{
                type:Function,
                default:undefined
            },
            trigger:{
                type:String,
                default:''
            },
            prop: {
                type: String,
                default: ''
            },
            //数据
            options:{
                type:Array,
                default(){
                    return []
                }
            },
            //输入值
            value: {
                type: Array,
                default(){
                    return []
                }
            },
            //标签
            label: {
                type: String,
                default: ""
            },
            //宽度
            width: {
                type: String,
                default: '260px'
            },
            //标签宽度
            labelWidth: {
                type: String,
                default: "100px"
            },
            //组件高度
            height: {
                type: String,
                default: '36px'
            },
            //组件禁用
            disabled: {
                type: Boolean,
                default: false
            },
            //可清空
            clearable: {
                type: Boolean,
                default: false
            }
        },
        methods:{
            onInput(newValue) {
                console.log('input')
                console.log(newValue)
                this.$emit("input", newValue)
            },
            labelChange(v){
                this.$emit('labelChange',v)
            },
            getOptions(e){
                if(this.mixed){
                    console.log('change')
                    console.log(e)
                    var selectUserOptions=e;
                    var old=this.oldSelectOptions;
                    //对比两个数组，双重去重
                    var newArr=[];
                    //先遍历最新的值
                    for(var i=0;i<selectUserOptions.length;i++){
                        var isNewItem=true;
                        for(var j=0;j<newArr.length;j++){
                            //如果新数组存在当前这个组的值，则有重复，又重复了，则去上一次的配置里查重
                            if(newArr[j][0]==selectUserOptions[i][0]){
                                // isNewItem=false
                                for(var k=0;k<old.length;k++){
                                    if(old[k][0]==newArr[j][0]){
                                        //已经推进新数组的项是重复项
                                        if(old[k][1]==newArr[j][1]){
                                            //如果是已经推进去的项，则直接修改那个项，然后不推进去
                                            newArr[j]=selectUserOptions[i];
                                            isNewItem=false;
                                        }
                                        if(old[k][1]==selectUserOptions[i][1]){
                                            //如果是还没推进去的项,不推进去
                                            isNewItem=false;
                                        }
                                    }
                                }
                            }
                        }
                        if(isNewItem){
                            newArr.push(selectUserOptions[i])
                        }
                    }
                    this.oldSelectOptions=newArr;
                    this.$emit('input',newArr)
                }
            },
        }
    }
</script>

<style scoped lang="scss">

  .label {
    display: inline-block;
    font-size: 14px;
    text-align: right;
    padding-right: 12px;
    box-sizing: border-box;
    vertical-align: top;

    /deep/ {
      .el-icon--right {
        margin-left: 2px;
      }
    }
  }
</style>
<style lang="scss">
  .el-popper.cascader{
    font-size: 14px!important;
    margin-top: 14px;
    /deep/{
      .el-cascader-node__label{
        font-size: 14px!important;
      }
    }
  }
  .memberEdit {
    font-size: 14px!important;
    /deep/{
      .el-cascader-node__label{
        font-size: 14px!important;
      }
      .el-cascader-menu{
        &:first-child{
          .el-cascader-menu__wrap{
            .el-checkbox__inner{
              display: none;
            }
          }
        }
      }
    }
  }
</style>
