import { LightningElement,api, track } from 'lwc';

export default class jzTable extends LightningElement {
    

    connectedCallback(){
        this.OnChreateNotSelectedData();
        if (this.isselectedtable) {
            this.OnChreateShowData();
        }
        this.clickShow = this.isselectedtable;

    }
    

    @api selecttitle = "已选择";
    @api  notselecttitle = '未选择';

    idKey = 0;

    isSelected = false; //全选
    //全选
    selectedAllOnClick(){

        this.isSelected = !this.isSelected;

        var newshowData = [];
        var newshowIds = [];
        this.showData.forEach(sItem=>{
            var temp = {...{},...sItem};
            if (this.isSelected) {
                temp.IsSelected = "1"
            }else{
                temp.IsSelected = ""
            }
            newshowIds.push(sItem.Id);
            newshowData.push(temp);
        })

        var newNotData = [];
        var notshowIds = [];
        this.NotData.forEach(sItem=>{
            var temp = {...{},...sItem};
            if (this.isSelected) {
                temp.IsSelected = "1"
              
            }else{
                temp.IsSelected = ""
            }
            notshowIds.push(sItem.Id);
            newNotData.push(temp);
        })

        if (this.isSelected) {
            this.SelectShowArr = [];
            this.NotSelectShowArr = notshowIds;
        }else{
            this.SelectShowArr = newshowIds;
            this.NotSelectShowArr = [];
        }

        this.showData = newshowData;
        this.NotData = newNotData;

        this.onselecteChange();
    }

    @api isselectedtable = false;
    isselectedtable = true;

// --- 已选择
    @api optionsdata=[]

    @api selectdata=[]



    //已选择
    @track showData=[]


    clickShow=true;
    clickShowFn(event)
    {
        this.clickShow = !this.clickShow;
    }

    SelectShowArr=[];
    SelectShowFn(event)
    {
        var id = event.target.title;
        var flag = false;
        var newArr = [];
        this.SelectShowArr.forEach(item=>{
            if (item == id) {
                flag = true;
            }else{
                newArr.push(item);
            }
        })
        if (flag) {
            this.SelectShowArr = newArr;
        }else{
            this.SelectShowArr.push(id);
        }

        this.onselecteChange();
    }

    OnChreateShowData()
    {
        var TempShowData= [];
        this.selectdata.forEach(item=>{
            var values=[];
            this.optionsdata.forEach(option=>{
                var valuesItem = {};
                valuesItem.value = item[option.props];
                valuesItem.type  = option.Type;
                valuesItem.valueId = this.idKey++;
                valuesItem.IdDataStr = item.Id+"##-##"+option.props;
                valuesItem.checkBoxOptionData = option.CheckOptionData;
                 if (valuesItem.type == 'input') {
                    valuesItem.input= true
                }else if (valuesItem.type == 'checkBox') {
                    valuesItem.checkBox= true
                }else if (valuesItem.type == 'date') {
                    valuesItem.date= true
                }else if (valuesItem.type == 'search') {
                    valuesItem.search= true
                }else if (valuesItem.type == 'text') {
                    valuesItem.text= true;
                }else if (valuesItem.type == 'url') {
                    valuesItem.url= true
                    valuesItem.urlValue= '/'+item[option.url];
                }else if (valuesItem.type == 'urlNoJump') {
                    valuesItem.urlNoJump= true
                }
                else if (valuesItem.type == 'richtext') {
                    valuesItem.richtext= true
                }

                values.push(valuesItem);
                
            })
            var showDataTemp = {};

            showDataTemp.Id = item.Id;
            showDataTemp.values = values;
            showDataTemp.checkId = item.Id +" column-group-header"
            showDataTemp.IsSelected = '1';
            TempShowData.push(showDataTemp);
        })
        
        this.showData = TempShowData;
    }

    @api  NotData=[]


    @api  notselectdata=[]



    clickShowNotSelect=true;
    clickShowNotSelectFn(event)
    {
        this.clickShowNotSelect = !this.clickShowNotSelect;
    }


    NotSelectShowArr=[];
    NotSelectShowFn(event)
    {
        var id = event.target.title;
        var flag = false;
        var newArr = [];
        this.NotSelectShowArr.forEach(item=>{
            if (item == id) {
                flag = true;
            }else{
                newArr.push(item);
            }
        })
        if (flag) {
            this.NotSelectShowArr = newArr;
        }else{
            this.NotSelectShowArr.push(id);
        }
        this.onselecteChange();
    }

    //更改选中的颜色
    CheckNoDataSelected()
    {
        this.NotData.forEach(item=>{
            this.template.querySelector('[data-parent-id="'+item.Id+'"]').style.backgroundColor="";
        })
        this.NotSelectShowArr.forEach(item=>{
            this.template.querySelector('[data-parent-id="'+item+'"]').style.backgroundColor="#ecebea";
        })
    }

    OnChreateNotSelectedData()
    {
        var TempShowData= [];
        this.notselectdata.forEach(item=>{
            var values=[];
                this.optionsdata.forEach(option=>{
                var valuesItem = {};
                valuesItem.value = item[option.props];
                valuesItem.type  = option.Type;
                valuesItem.valueId = this.idKey++;
                valuesItem.IdDataStr = item.Id+"##-##"+option.props;
                valuesItem.checkBoxOptionData = option.CheckOptionData;
                 if (valuesItem.type == 'input') {
                    valuesItem.input= true
                }else if (valuesItem.type == 'checkBox') {
                    valuesItem.checkBox= true
                }else if (valuesItem.type == 'date') {
                    valuesItem.date= true
                }else if (valuesItem.type == 'search') {
                    valuesItem.search= true
                }else if (valuesItem.type == 'text') {
                    valuesItem.text= true
                }else if (valuesItem.type == 'url') {
                    valuesItem.url= true
                    valuesItem.urlValue= '/'+item[option.url];
                }else if (valuesItem.type == 'urlNoJump') {
                    valuesItem.urlNoJump= true
                }
                else if (valuesItem.type == 'richtext') {
                    valuesItem.richtext= true
                }

                values.push(valuesItem);
                
            })
            var showDataTemp = {};

            showDataTemp.Id = item.Id;
            showDataTemp.values = values;
            showDataTemp.checkId = item.Id +" column-group-header"
            showDataTemp.IsSelected = '';
            showDataTemp.SelecedStyle = '';
            TempShowData.push(showDataTemp);
        })

        this.NotData = TempShowData;
    }


    //刷新 未选中和选中的数据
    @api refreshdata(selectdata,notselectdata){
        this.SelectShowArr = [];
        this.NotSelectShowArr = [];
        if (selectdata!=undefined) {
            this.selectdata = selectdata;
        }
        if (notselectdata!=undefined) {
            this.notselectdata = notselectdata;
        }
        this.OnChreateShowData();
        this.OnChreateNotSelectedData();
    }
    // 勾选
    onselecteChange(){
        this.SelectShowArr;
        this.NotSelectShowArr;

        var SelectedShowTemp = [];
        var NotSelectShowTemp = [];

        this.SelectShowArr.forEach(sId=>{
            this.selectdata.forEach(s=>{
                if (s.Id == sId) {
                    SelectedShowTemp.push({...{},...s});
                    return;
                }    
            })
        })

        this.NotSelectShowArr.forEach(sId=>{
            this.notselectdata.forEach(s=>{
                if (s.Id == sId) {
                    NotSelectShowTemp.push({...{},...s});
                    return;
                }    
            })
        })
        var returnSelected = {
            selected:SelectedShowTemp,
            notselected:NotSelectShowTemp
        }
        const getSearchParamsEvent = new CustomEvent('selectedchange', {
            detail: returnSelected
        });
        this.dispatchEvent(getSearchParamsEvent);
        //更改颜色
        this.CheckNoDataSelected();
    }
// ---End 

    
    //检索条件

    onChangeFn(event)
    {
        var a = event;

        var DataStr = event.target.name;
        DataStr= DataStr.split("##-##");
        
        var TargetValue = event.target.value;

        this.ChangeDataFn(DataStr[0],DataStr[1],TargetValue);
    }

    searchoptions=[]
    searchdatas=[]
    queryoptions=[]
    isQuery = false;
    queryData=[];

    SearchOption = {}; //选中的option
    SearchInitData = []; //选中查询的数据
    SearchReturnData={Id:"",prop:"",value:[]}


    onChangeSearchFn(event)
    {

        // const isEnterKey = event.keyCode === 13;

        // if (isEnterKey) {
            var value = event.target.value;
            var DataStr = event.target.name;
            DataStr= DataStr.split("##-##");

            this.SearchReturnData.Id = DataStr[0];
            this.SearchReturnData.prop = DataStr[1];

  
            //修改事件
            this.ChangeDataFn(DataStr[0],DataStr[1],value);

            // 初始化 模态框
            var propTemp = {};
            if (this.SearchOption!= {} && this.SearchOption.props == DataStr[1]) {
                propTemp = this.SearchOption;
            }else{
                this.optionsdata.forEach(item=>{
                    if (item.props == DataStr[1]) {
                        propTemp = {...{},...item};
                        return;
                    }
                })
    
                if (propTemp == {}&&propTemp.searchoption == undefined&&propTemp.searchTableDataInit == undefined) {
                    console.error("搜索列配置错误");
                }    
            }

            this.SearchOption = propTemp;
          
            this.searchoptions = propTemp.searchoption;
            var initData = propTemp.searchTableDataInit({Id:DataStr[0],prop:DataStr[1],value:value});
            //判断是否启用搜索
            if (propTemp.isQuery) {
                this.isQuery = true;
                var queryoptionsTemp =[];
                propTemp.queryOption.forEach(item=>{
                    var tempItem = {};
                    tempItem.label = item.label;
                    tempItem.prop = item.prop;
                    tempItem.value = item.value;
                    if (item.Type == 'input') {
                        tempItem.input= true
                    }else if (item.Type == 'checkBox') {
                        tempItem.checkBox= true
                    }else if (item.Type == 'date') {
                        tempItem.date= true
                    }
                    tempItem.checkBoxOptionData = item.CheckOptionData;
                    tempItem.Id = this.idKey++;
                    
                    queryoptionsTemp.push(tempItem);

                    this.queryData.push({prop:item.prop,value:item.value});
                })
                this.queryoptions = queryoptionsTemp;
            }else{
                this.isQuery = false;
            }

            this.SearchInitData = initData;

           
            this.OpenShowModelFn();

            this.searchDataInit(initData);

        

    }
    //模态  查询
    onQueryChangeFn(event){
    
        var prop = event.target.title;
        var value = event.target.value;

        var queryDataTemp = [];
        this.queryData.forEach(item=>{
            var temp = {...{},...item};
            if (temp.prop == prop) {
                temp.value = value;
            }
            queryDataTemp.push(temp);
        })
        this.queryData = queryDataTemp;
    }

    querySearchFn(){
        var querySearchData=  this.SearchOption.queryTable(this.queryData);
        this.SearchInitData = querySearchData;
        this.searchDataInit(querySearchData);
    }

    searchDataInit(data)
    {
        var TempShowData= [];
        data.forEach(item=>{

            var values=[];
       
            this.searchoptions.forEach(option=>{
                var temp = {};
                temp.value=item[option.props];
                temp.IdDataStr = item.Id+"##-##"+option.props;
                temp.valueId = this.idKey++;
                values.push({...{},...temp});
            })
            var showDataTemp = {};

            showDataTemp.Id = item.Id;
            showDataTemp.values = values;
            showDataTemp.checkId = item.Id +" column-group-header"
            showDataTemp.IsSelected = '';
            TempShowData.push(showDataTemp);
        })
        
        this.searchdatas = TempShowData;
    }

    //模态框选中
    OnSearchId=[];
    showCheckFn(event)
    {
        var a = event;
        var id = event.target.title;

        var flag = false;
        var newArr = [];
        this.OnSearchId.forEach(item=>{
            if (item == id) {
                flag = true;
            }else{
                newArr.push(item);
            }
        })
        if (flag) {
            this.OnSearchId = newArr;
        }else{
            this.OnSearchId.push(id);
        }
        //判断是否是单选
        if(this.SearchOption.isSingle)
        {
            this.ShowModelSaveFn();
        }
    }

    TempModelShows = false;
    OpenShowModelFn()
    {
        this.TempModelShows = true;
    }

    ShowModelCloseFn()
    {
        this.TempModelShows = false;
    }
    ShowModelSaveFn()
    {
        
        if (this.SearchOption.searchTableSave != undefined) {
            var arrTemp = [];
            this.OnSearchId.forEach(id=>{
                this.SearchInitData.forEach(item=>{
                    if (item.Id == id) {
                        arrTemp.push({...{},...item});
                        return;
                    }
                })
            })
            this.SearchReturnData.value = arrTemp;
            
            this.SearchOption.searchTableSave(this.SearchReturnData);
        }else{
            console.error("searchTableSave 方法未配置");
        }
        //清空值
        this.OnSearchId = [];
        this.SearchOption = {};
        //TODU刷新列表
        this.TempModelShows = false;
    }
   

    //修改 值 事件
    ChangeDataFn(Id,prop,value){
        var flag = false;
        var newselectdata = [];
        var returnData = {Id:"",prop:"",PreValue:"",CurrentValue:""};
        this.selectdata.forEach(sitem=>{
            var temp = {...{},...sitem};
            if (sitem.Id == Id) {
                returnData.Id = Id;
                returnData.prop=prop;
                returnData.PreValue = temp[prop];
                returnData.CurrentValue = value;

                temp[prop] = value;
                
                flag = true;
            }
            newselectdata.push(temp);
        })
        if (flag) {
            this.selectdata = newselectdata;
        }else
        {    
            var newNotSeletctData = []
            this.notselectdata.forEach(nitem=>{
                var temp = {...{},...nitem};
                if (nitem.Id == Id) {
                    returnData.Id = Id;
                    returnData.prop=prop;
                    returnData.PreValue = temp[prop];
                    returnData.CurrentValue = value;

                    temp[prop] = value;
                    
                    flag = true;
                }
                newNotSeletctData.push(temp);
            })
            this.notselectdata = newNotSeletctData;
        }

        if (flag) {
            const getSearchParamsEvent = new CustomEvent('datachange', {
                detail: returnData
            });
            this.dispatchEvent(getSearchParamsEvent);
        }
        // this.refreshdata();
    }

    UrlOnClick(event)
    {
        var DataStr = event.target.name;
        DataStr= DataStr.split("##-##");
        
        const getSearchParamsEvent = new CustomEvent('urlclick', {
            detail: {Id:DataStr[0],prop:DataStr[1]}
        });
        this.dispatchEvent(getSearchParamsEvent);
        debugger;
    }
    //对父组件提供获取当前表格数据
    @api getdata(){
        return {selectdata:this.selectdata,notselectdata:[...[],...this.notselectdata]}
    }
    
}