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

const dateTableConfig_init = {
    // 如果存在，则用于行选择的复选框列将被隐藏。
    hideCheckboxColumn: false,
    // 指定未排序列的默认排序方向。有效选项包括“ asc”和“ desc”。默认值为“ asc”，用于按升序排序。
    defaultSortDirection: 'asc',
    // 指定排序方向。使用onsort事件处理程序对数据进行排序。有效选项包括“ asc”和“ desc”。
    sortDirection: 'asc',
    // 控制排序顺序的列字段名。使用onsort事件处理程序对数据进行排序
    sortedBy: undefined,
    // 是否后台接口排序
    sortInterfaces: true,
    // 搜索列
    searchColumns: [],
    // 搜索条件
    listQuery: {
        page: 1,
        limit: 10,
        sort: "",
        sortOrder: "",
        search: ""
    }, 
    // 分页
    page: {
        currentPage: 1,
        total: 0,
        pageSize: 10
    },

}

export default class BasicDatatable extends LightningElement {
    @api name;
    @api idkey = "Id";
    @api miniheight = "min-height: 250px";
    @api options = {};
    // 数据集
    @api tableData = [];
    @api tableIsLoding = false;

    connectedCallback(){
        this.initJzDataTable(this.options);
    }

    @track dataTableConfig = dateTableConfig_init;

    initJzDataTable(init){
        let searchParams = {};
        for(let obj of init.searchColumns){
            if(obj.value) searchParams[obj.name] = obj.value;
        }
        this.refreshDataTable(init);
    }

    @api
    refreshDataTable(init){
        init = init || {};
        // 定义搜索参数变量
        let listQuery = {};
        // 获取搜索信息 将搜索信息放入搜索变量中
        listQuery = {search: init.searchParams ? encodeURI(JSON.stringify(init.searchParams), 'utf-8') : this.dataTableConfig.listQuery.search};
        // 获取当前分页信息 将分页信息放入搜索条件中
        let page = init.page || this.dataTableConfig.page;
        listQuery = {...listQuery, page: page.currentPage, pageLimit: page.pageSize};
        // 将排序信息放入搜索条件中
        listQuery = {...listQuery, sortPlus: init.sortedBy || this.dataTableConfig.sortedBy, sortOrder: init.sortDirection || this.dataTableConfig.sortDirection };
        // 执行搜索获取数据
        // let data = await fetchDataHelper(listQuery);
        const getTableDataEvent = new CustomEvent('gettabledata', {
            detail: {listQuery: listQuery}
        });
        this.dispatchEvent(getTableDataEvent);

        // 将数据返回给表格中
        this.dataTableConfig = {...this.dataTableConfig, ...init, listQuery: listQuery, page: page};
    }

    // 点击排序
    onHandleSort(event) {
        const { fieldName: sortedBy, sortDirection } = event.detail;
        if(this.dataTableConfig.sortInterfaces){
            this.refreshDataTable({sortDirection,sortedBy});
        } else {
            const cloneData = [...this.tableData];

            cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
            this.tableData = cloneData;
            this.dataTableConfig.sortDirection = sortDirection;
            this.dataTableConfig.sortedBy = sortedBy;
        }
    }

    sortBy(field, reverse, primer) {
        const key = primer
            ? function(x) {
                  return primer(x[field]);
              }
            : function(x) {
                  return x[field];
              };

        return function(a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        };
    }

    get dataPlus(){
        return this.tableData;
    }

    get isLoading(){
        return this.tableIsLoding;
    }

    selecttionPlus(event){
        const getSearchParamsEvent = new CustomEvent('rowselection', {
            detail: {rows:event.detail.selectedRows}
        });
        this.dispatchEvent(getSearchParamsEvent);
    }
    handleSave(event)
    {
        const getSearchParamsEvent = new CustomEvent('save', {
            detail: {rows:event.detail.draftValues}
        });
        this.dispatchEvent(getSearchParamsEvent);
    }

}