<template>
    <div class="search-card" :style="{'--expand':expandPadding}">
        <searchForm @searchQuery="search" :formConf="formConf" v-if="formConf.length" @resetAll="resetAll" :selectOptions="selectOptions" @initSearch="initSearch"
         @btnMoreAction="btnMoreAction" :btnMore="btnMore" @change="change"/>
        <div class="table-list" name="列表">
            <div class="table-padding_both">
                <el-table
                    class="c-table kyol-table_empty kyol-table_fixed"
                    :max-height="tableMaxHeight"
                    :data="tableData"
                    style="width: 100%"
                    @filter-change="filterChange"
                    @select="select"
                    @select-all="select"
                    v-loading="loading"
                    v-if="showTbale"
                    ref="pushTable"
                    :height="tableHeight"
                    >                     
                    
                    <template v-if="showTitle">                        
                        <el-table-column :label="showTitle" header-align="center">
                            <!-- 多选 -->
                            <el-table-column v-if="showSelection" type="selection" fixed="left" :selectable="selectable"> </el-table-column>
                            <!-- 索引列 -->
                            <el-table-column v-if="showIndex"  type="index" :label="showIndex.label || '序号'" :header-align="showIndex.headerAlign || 'left'" :align="showIndex.align || 'left'" :fixed="showIndex.fixed" :width="showIndex.width || '60px'"/>                   
                            <!-- 扩展内部展示块 -->
                            <el-table-column type="expand" v-if="showExpand">
                                <template slot-scope="{row,$index}">
                                    <slot :name="showExpand" :row="row" :index="$index"/>
                                </template>
                            </el-table-column> 
                            <template v-for="(item,i) in tableConf">
                                <!-- 正常列 -->
                                <template v-if="!item.insertHeader">
                                    <el-table-column :key="'tab'+i" :prop="item.prop" :label="item.label" :width="item.width" :filters="item.filters" :min-width="item.minWidth"
                                    :header-align="item.headerAlign||'left'" :align="item.align || 'left'" :column-key="item.columnKey" show-overflow-tooltip>
                                        <template slot-scope="{row}">
                                            <div class="eslpse">
                                                <!-- 正常的 如果带入函数 返回值 则使用函数带入 -->
                                                <span v-if="!item.money" :style="{color:item.colors ? item.colors.get(row[item.prop]) : ''}">{{row[item.prop] ?  item.func ? item.func(row[item.prop]) : row[item.prop] : defaultValue }}</span>
                                                <!-- 列配置 money为真 则 金钱格式化 -->
                                                <span v-else>{{row[item.prop] | toMoney | addMoneyPre}}</span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </template>
                                
                                <!-- 过滤器列 -->
                                <el-table-column :key="'tab'+i" v-else width="160px">
                                    <template slot="header" slot-scope="{column,$index}">
                                        <div class="kyol-column_header" v-if="!item.slotHeadName">
                                            <selectDataRange @search="dateQuery" :columnKey="item.columnKey" :columnName="item.label" ></selectDataRange>
                                        </div>
                                        <slot :name="item.slotHeadName" :column="column" :index="$index" v-else/>
                                    </template>
                                    <template slot-scope="{row}">
                                        <div>
                                            {{row[item.prop]}}
                                        </div>
                                     </template>
                                </el-table-column>
                                </template>
                                <slot name="lastColumn" v-if="lastColumn">
                                    <el-table-column
                                        header-align="center"
                                        align="center"
                                        label="操作"
                                        fixed="right"
                                        >
                                        <template slot-scope="{row,$index}">
                                            <div v-if="!btnSlot">
                                                <template v-for="(btn,btn_i) in (btns || row.btns || [])"> 
                                                    <el-button :key="btn_i" type="text" @click="handlerClick(row,$index)" :style="{color:btn.color}" v-if="!btn.hide || !row.hideBtns.includes(btn.label)">{{btn.label}}</el-button>     
                                                </template>
                                            </div>
                                            <div v-else>
                                                <slot name="btnSlot" :row="row" :index="$index"></slot>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </slot>
                        </el-table-column>
                    </template>
                    <!-- 下面是没有带有表头标题的表格 -->
                    <template v-else>
                        <!-- 多选 -->
                        <el-table-column v-if="showSelection" type="selection" fixed="left" :selectable="selectable"> </el-table-column>
                         <!-- 索引列 -->
                        <el-table-column v-if="showIndex"  type="index" :label="showIndex.label || '序号'" :header-align="showIndex.headerAlign || 'left'" :align="showIndex.align || 'left'" :fixed="showIndex.fixed" :width="showIndex.width || '60px'"/>                   
                        <!-- 扩展内部展示块 -->
                        <el-table-column type="expand" v-if="showExpand">
                            <template slot-scope="{row,$index}">
                                <slot :name="showExpand" :row="row" :index="$index"/>
                            </template>
                        </el-table-column> 
                        <template v-for="(item,i) in tableConf">
                            <!-- 正常列 -->
                            <template v-if="!item.insertHeader">
                                <el-table-column :key="'tab'+i" :prop="item.prop" :label="item.label" :width="item.width" :filters="item.filters" :min-width="item.minWidth"
                                :header-align="item.headerAlign||'left'" :align="item.align || 'left'" :column-key="item.columnKey" show-overflow-tooltip>
                                    <template slot-scope="{row}">
                                        <div class="eslpse">
                                            <!-- 正常的 如果带入函数 返回值 则使用函数带入 -->
                                            <span v-if="!item.money" :style="{color:item.colors ? item.colors.get(row[item.prop]) : ''}">{{row[item.prop] ?  item.func ? item.func(row[item.prop]) : row[item.prop] : defaultValue}}</span>
                                            <!-- 列配置 money为真 则 金钱格式化 -->
                                            <span v-else>{{row[item.prop] | toMoney | addMoneyPre}}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                            </template>
                            
                            <!-- 过滤器列 -->
                            <el-table-column :key="'tab'+i" v-else :width="item.width || '160px'">
                                <template slot="header" slot-scope="{column,$index}">
                                    <div class="kyol-column_header" v-if="!item.slotHeadName">
                                        <selectDataRange @search="dateQuery" :columnKey="item.columnKey" :columnName="item.label" ></selectDataRange>
                                    </div>
                                    <slot :name="item.slotHeadName" :column="column" :index="$index" v-else/>
                                </template>
                                <template slot-scope="{row}">
                                    <div>
                                        {{row[item.prop]}}
                                    </div>
                                </template>
                            </el-table-column>
                        </template>
                        <slot name="lastColumn" v-if="lastColumn">
                            <el-table-column
                                header-align="center"
                                align="center"
                                label="操作"
                                fixed="right"
                                >
                                <template slot-scope="{row,$index}">
                                    <div v-if="!btnSlot">
                                        <template v-for="(btn,btn_i) in (btns || row.btns || [])"> 
                                            <el-button :key="btn_i" type="text" @click="handlerClick(row,$index)" :style="{color:btn.color}" v-if="!btn.hide || !row.hideBtns.includes(btn.label)">{{btn.label}}</el-button>     
                                        </template>
                                    </div>
                                    <div v-else>
                                        <slot name="btnSlot" :row="row" :index="$index"></slot>
                                    </div>
                                </template>
                            </el-table-column>
                        </slot>
                    </template>
                    <slot name="outColumn"/>
                </el-table>

            </div>
            <page
            style="margin-top:10px;"
            v-if="showPaginaition"
            :size-change="handleSizeChange" 
            :current-change="handleCurrentChange" 
            :page-config="pageConfig" ></page>
        </div>
    </div>
</template>
<script>
import searchForm from '../components/searchForm'
import selectDataRange from "@/components/resourceManagement1/components/selectDataRange"
const creater = () => {
        const createdField = (fieldL = 'label',fieldV = 'prop',surplus) => (label,prop,options ) => ({[fieldL]:label,[fieldV]:prop,...surplus,...options})
        const setField = (label,list,compareValue = 'label') => func => {
            const field = list.find(v => v[compareValue] === label) || {}
            if(!Object.keys(field)){
            list.push(field)
            }
            func(field)
            return list
        }
        return {createdField,setField}
    }
const createdDefault = creater()
export default {
    name:'searchList',
    components:{searchForm,selectDataRange},
    props:{
        // 表单配置对象 {prop:表单字段名,}
        formConf:{
            type:Array,
            default:()=>([])
        },
        // 表格配置
        /*
        column=>
        insertHeader 时候需要表头单独设置；label:表头文字,prop：对应数据row字段名，width：宽度,fixed:固定列
        filters:过滤配置
        align：对其 
        headerAlign:表头对其
        money: Boolean 是否显示金钱 格式带￥
        color:文字颜色 类型为 new Map()的对象格式返回值
        func：列显示回调函数，用来处理列中的回显的 数据处理，必须有返回值
        slotHeadName : insertHeader为真时，给与slotHeadName，来外部设定格式配置的插槽
        */
        tableConf:{
            type:Array,
            default:()=>([])
        },
        // 内部控制按钮，自定义按钮数组
        btns:Array,
        // 是否需要按钮插槽，外部控制显示按钮
        btnSlot:Boolean,
        // 表格加载效果
        loading:Boolean,
        showSelection:Boolean,
        showPaginaition:{
            type:Boolean,default:true
        },
        tableMaxHeight:String,// 表格的高度
        tableHeight:String,// 表格高度
        showIndex:Object, // {label:显示文字,headerAlign,align 对齐方式}
        pageConf:Object,// 分页设置配置
        lastColumn:{
            type:Boolean,
            default:true
        }, // 使用最后一列插槽
        data:Array,//传入的数据对象优先显示,
        rowCheckable:Function,
        showTitle:String,// 显示表头单列,
        selectOptions:{type:Object,default:()=>({})},// 异步下拉数据表
        btnMore:{
            type:Array,default:()=>([])
        },
        resetQuery:{type:Boolean,default:true}, // 重置之后是否查询，默认查询,
        showExpand:String,// 是否有扩展的内部块
        expandPadding:{
            type:String,
            default:'10px 20px'
        },//扩展内部块的Padding
        defaultValue:{// 默认显示的文字信息
            type:String,
            default:''
        }
    },
    data(){
        return {
            dataList:[], //{ ...prop,btns:[要显示的所有按钮],hideBtns:[需要隐藏的按钮],slot}
            pageConfig: {
                pageSize: 10,
                total: 0,
                pageNumber: 1,
                pageSizes: this.pageSizes || [10, 20, 50],
                layout: 'slot,sizes, prev, pager, next, jumper',
                ...this.pageConf
            },
            curParams:{},// 当前查询变量
            showTbale:true
        }
    },
    computed:{
        tableData(){
           return  this.data || this.dataList
        }
    },
    methods:{
        // 搜索关键字
        search(formData){
            this.curParams = {
                ...this.curParams,
                ...formData,
            }
            this.query()
        },
        // 开始查询
        query(){
            if(this.showPaginaition){
                this.curParams.pageSize = this.pageConfig.pageSize
                this.curParams.pageNo = this.pageConfig.pageNumber
            }
            this.throwEmit()
        },
        // 分页大小
        handleSizeChange(val){
            this.pageConfig.pageSize = val
            this.query(this.curParams)
        },
        // 当前页
        handleCurrentChange(val){
            this.pageConfig.pageNumber = val
            this.query(this.curParams)
        },
        // 接受表格头部过滤的函数
        dateQuery(params,columnKey){
            const list = Object.keys(params).reduce( (p,c) =>{
                p[c+'Time'] = params[c]
                return p
            },{})
            this.curParams = {...this.curParams,...list}
            this.query()
        },
        // 过滤器筛选结构
        filterChange(filters){
            const {0:key} = Object.keys(filters)
            this.curParams[key] = filters[key].join()
            this.query()
        },
        select(selection,row){
            this.$emit('select',selection,row)
            console.log(selection,row)
        },
        // 清楚所有选中
        clearSelectedAll(){
            this.$refs['pushTable'].clearSelection()
        },
        //设置某一行被选中
        setCurrentRow(rows,selected){
            rows.forEach( row => this.$refs['pushTable'].toggleRowSelection(row,selected) )
        },
        // 抛出数据 和最新的查询条件
        throwEmit(){
            this.$emit('querySearch',this.curParams)
        },
        //当前行时候可勾选
        selectable(row,index){
          return  this.rowCheckable ? this.rowCheckable(row,index) : true
        },
        // 重置查询条件 
        resetAll(searchParams){
            this.curParams = {...searchParams}
            this.pageConfig.pageSize = 10
            this.pageConfig.pageNumber = 1
            this.showTbale = false
            this.$nextTick(_ =>{this.showTbale = true})
            if(this.resetQuery) this.query()
            this.$emit('resetAll',this.curParams)
        },
        // 创建函数
        createdDefault,
        //更多按钮事件
        btnMoreAction(item){
            this.$emit('btnMoreAction',item)
        },
        initSearch(clickFunc){
            this.$emit('initSearch',clickFunc)
        },
        change(params){
            this.$emit('change',params)
        }
    }
}
</script>
<style lang="scss" scoped>
 @import "@/projects/proGdton/pages/EAS/common.scss";
.search-card{
    overflow:inherit;
    .table-list{
        .table-padding_both{
            margin:10px 20px;
            /deep/ .el-table th > .cell.highlight {
                    color: #1ab394;
                }
            .kyol-column_header{
                display: flex;
                justify-content: flex-start;
                align-items:center;
            }
        }
       /deep/ .el-table{
           .el-table__expanded-cell[class*=cell]{
               padding:var(--expand)
           }
        }
        .c-table{
            .eslpse{
                width:100%;
                white-space:nowrap;
                overflow: hidden;
                text-overflow:ellipsis;
            }
        }

    }
}
</style>