import IS from '../../utils/is'

const TR = {
    props: {
        type: {
            type: String,
            required: true,
            default: 'th'
        },
        columns: {
            type: Array
        },
        rowData: {
            type: Object
        },
        showFixed: { type: Object }
    },
    data() {
        return {
            FixedObj:{},
        }
    },
    watch: {
        showFixed: {
            handler(val) {
                this.FixedObj = val
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {

        itemAlign(align){
            const alignList = {'center':'ta-c','left':'ta-l','right':'ta-r'}
            if(!IS.isNullOrUnDef(align) && !IS.isEmpty(align)){
                return alignList[align]
            }
            return ''
        },
        itemEllipsis(ellipsis){
            if(IS.isBoolean(ellipsis) && ellipsis==true){
                return 'cell-ellipsis'
            }
            return ''
        },
        itemStyle(obj){
            const styleAction = {
                'width':()=>{
                    if(!IS.isNullOrUnDef(obj.value) && !IS.isEmpty(obj.value)){
                        if(IS.isNumber(obj.value)){
                            return `width:${obj.value}px`
                        }
                    }
                    return ''
                }
            }
            return styleAction[obj.type] && styleAction[obj.type]() || ''
        },
        itemFixed(fixed){
            const fixedAction ={
                'left':'sticky dir-l',
                'right':'sticky dir-r',
            }
            return fixedAction[fixed]
        },

        getTH(columns,showFixed) { 
            const tempArr = []
            columns.forEach(item => {
                const {title,dataIndex,type,tagOption,component,width,align,ellipsis,fixed} =item
                tempArr.push(<th class={['p-th ant-table-row-cell-break-word',this.itemEllipsis(ellipsis),this.itemAlign(align),this.FixedObj[fixed] && this.itemFixed(fixed)]} style={this.itemStyle({type:'width',value:width})}>{title}</th>)
            });
            return tempArr
        },
        getTD(columns,rowData,showFixed) { 
            const tempArr = []
            columns.forEach(item => {
                const {title,dataIndex,type,tagOption,component,width,align,ellipsis,fixed} =item
                const tempValue = rowData[dataIndex]
                tempArr.push(<td class={['p-td ant-table-row-cell-break-word',this.itemEllipsis(ellipsis),this.itemAlign(align),this.FixedObj[fixed] && this.itemFixed(fixed)]} style={this.itemStyle({width})}>{tempValue}</td>)
            });
            return tempArr
        },
        getItem(type,columns,rowData,showFixed){
            if(type=='th'){
                return this.getTH(columns,showFixed)
            }
            return this.getTD(columns,rowData,showFixed)
        },
    },
    render: function (h) {
        const { type,columns,rowData,showFixed } = this
        return (<tr class="p-tr">{this.getItem(type,columns,rowData,showFixed)}</tr>)
    }
}
export default TR