<template>
    <el-table
        id="CommonTable"
        ref="multipleTable"
        :header-cell-style="{ color: '#909399', fontSize: '14px', background: '#F0f2f5', fontWeight: '400', padding: '6px 0' }"
        :cell-style="{ fontSize: '14px', color: '#303133', padding: '10px 0' }"
        :data="tableData"
        style="width: 100%"
        :class="tableObj.name"
        :max-height="maxHeight"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
    >
        <el-table-column v-if="hasCheckbox" type="selection" width="55" />
        <el-table-column v-for="(item, index) in tableProp" :key="`specialProp${index}`" :label="item.label" :prop="item.prop" :fixed="item.fixed" :width="item.labelWidth" :sortable="item.sortable">
            <template slot-scope="scope">
                <!-- 普通文字 -->
                <TooltipOver v-if="item.type === 'label' || !judgeEmpty(item.type)" class="name-tip-box" :content="`${scope.row[item.prop] || '--'}`" :ref-name="`label${item.prop}`" />
                <!-- 文字变色，只处理这种简单的html（复杂需定制自己的类型不能使用这个类型） -->
                <TooltipOver v-else-if="item.type === 'htmlType'" :is-html="true" :xss-content="$xss(scope.row[`xss${item.prop}`] || '--')" :content="scope.row[item.prop]" :ref-name="`htmlType${item.prop}`" :current-row="scope.row" v-bind="$attrs" v-on="$listeners" />
                <!-- 播放音频 -->
                <el-button v-else-if="item.type === 'audio'" type="text" :disabled="scope.row['disabled']" size="small" class="ptb0" :icon="item.icon" style="font-size: 20px" @click="handleTableClick(scope.row, item.type)" />
                <!-- 操作 \-->
                <el-button v-else-if="item.type === 'button'" :disabled="scope.row['disabled']" :type="item.btnType" size="small" @click="handleTableClick(scope.row, item.type)">
                    {{ scope.row[item.prop] }}
                </el-button>
                <!-- 多个按钮 -->
                <div v-else-if="item.type === 'buttons'" class="more-operate-btns">
                    <el-button v-for="(btnItem, btnIdx) in scope.row[item.prop]" :key="btnIdx" :disabled="btnItem.disabled" :type="item.btnType" size="small" class="single-button" @click="handleTableClick(scope.row, btnItem.type)">
                        {{ btnItem.text }}
                        <i v-if="btnIdx < scope.row[item.prop].length - 1" class="mlr5">|</i>
                    </el-button>
                </div>
                <!-- 计数器 -->
                <div v-else-if="item.type === 'counter'" class="flex-vertical-center">
                    <div class="mr15">
                        <div class="counter">
                            <el-button icon="el-icon-remove-outline" circle size="mini" class="counter-icon" @click="handleCut(scope.row, item)" />
                            <el-input
                                v-model.number="scope.row[item.prop]"
                                class="inputWidth-30"
                                size="mini"
                                max="10"
                                @input="
                                    val => {
                                        handleCounterChange(val, scope.row, item);
                                    }
                                "
                            />
                            <el-button icon="el-icon-circle-plus-outline" circle size="mini" class="counter-icon" @click="handlePlus(scope.row, item)" />
                        </div>
                        <P class="count-limit c-303133 ft14 ta-c">{{ scope.row[item.prop] ? scope.row[item.prop] : 0 }}/{{ scope.row.surplusNum }}</P>
                    </div>
                    <el-button type="text" @click="handlePeek(scope.row, item)">取数</el-button>
                </div>
                <!-- 信息 -->
                <div v-else-if="item.type === 'avatarLabel'" class="avatar-label-box ps-r">
                    <el-avatar class="avatar-img" shape="circle" :size="20" :src="scope.row['url']" />
                    <TooltipOver class="avatar-label" :content="scope.row[item.prop]" :ref-name="`avatarLabel${item.prop}`" />
                </div>
                <!-- 客户信息标记 -->
                <div v-else-if="item.type === 'mark'" class="flex-start-center">
                    <el-tooltip effect="light" class="item" :content="scope.row['customerName']" :disabled="scope.row['customerName'] && scope.row['customerName'].length < 6" placement="top-start">
                        <p class="over-flow max-width-tooltip pointer">{{ scope.row['customerName'] }}</p>
                    </el-tooltip>
                    <img v-if="scope.row['icon']" class="ml10" :src="scope.row['icon']" alt="">
                </div>
                <!-- 客户信息 -->
                <div v-else-if="item.type === 'information'" class="fix">
                    <el-avatar class="left mr10" shape="square" :size="44" :src="scope.row['headImg']">
                        <img class="avatar-info-img" :src="scope.row['headImg']" alt="">
                    </el-avatar>
                    <div class="left">
                        <div class="flex-start-center">
                            <el-tooltip effect="light" class="item" :content="scope.row['name']" :disabled="scope.row['name'] && scope.row['name'].length < 6" placement="top-start">
                                <p class="over-flow max-width-tooltip pointer">{{ scope.row['name'] }}</p>
                            </el-tooltip>
                            <div v-if="scope.row['customerStar']">
                                <i v-for="idx in Number(scope.row['customerStar'])" :key="idx" class="el-icon-star-on c-e6a23c" />
                            </div>
                            <img v-if="scope.row['icon']" class="ml-4" :src="scope.row['icon']" alt="">
                        </div>
                        <div class="">
                            {{ scope.row['ageSex'] }}
                        </div>
                    </div>
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import { TooltipOver } from '@/components/index';
export default {
    components: {
        TooltipOver
    },
    props: {
        tableObj: {
            type: Object,
            default: () => {}
        },
        hasCheckbox: {
            type: Boolean,
            default: false
        },
        maxHeight: {
            type: Number,
            default: 10000
        }
    },
    data() {
        return {
            tableData: [],
            tableProp: []
        };
    },
    watch: {
        tableObj: {
            handler() {
                this.handleData();
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        handleTableClick(row, itemType) {
            const tableRowObj = { row: row, type: itemType };
            this.$emit('handleTableClick', tableRowObj);
        },
        // 处理数据
        handleData() {
            this.tableData = [].concat(this.tableObj['data'] || []);
            this.tableProp = this.tableObj['tableProp'] || [];
        },
        // 多选
        handleSelectionChange(val) {
            this.$emit('handleSelectionChange', val);
        },
        // 计数器输入值发生改变限制最大输入值
        handleCounterChange(val, row) {
            const rowObj = { val: val, row: row };
            this.$emit('handleCounterChange', rowObj);
        },
        // 计数器后边btn
        handlePeek(row) {
            this.$emit('handlePeek', row);
        },
        // 计数器--
        handleCut(row) {
            this.$emit('handleCut', row);
        },
        // 计数器++
        handlePlus(row) {
            this.$emit('handlePlus', row);
        },
        // 排序
        handleSortChange(sortObj) {
            console.log('column, prop, order', sortObj);
            this.$emit('handleSortChange', sortObj);
        }
    }
};
</script>
<style lang="less" scoped>
.avatar-label-box {
	padding-left: 25px;

	.avatar-img {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.avatar-label {
		width: calc(100% - 25px);
	}

	.avatar-info-img {
		border-radius: 8px;
	}
}
.counter-icon {
	height: 28px;
}
.count-limit {
	height: 28px;
	line-height: 28px;
}
.inputWidth-30 {
	width: 100px;
	margin-left: 4px;
	margin-right: 4px;
}
.ml-4 {
	margin-left: 4px;
}
</style>
