<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-09-16 16:26:07
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-09-18 16:46:02
 * @FilePath: \housekeeping-admin\src\components\channel-select-user\table-detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="mt-5" v-if="selectData.length">
        <el-table ref="tableDataRef" :data="selectData" height="200">
            <el-table-column
                v-for="column in columns"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                width="160"
                :formatter="row => parseEmpty(row, column.prop)"
            />
            <el-table-column label="操作" width="120" fixed="right">
                <template #default="scope">
                    <div class="flex">
                        <el-button type="primary" link @click="handleDeleteItem(scope.$index)">
                            移除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { CHANNEL_INJECTION_KEY } from '@/config/symbol';
import { parseEmpty } from '@/utils/util'
import { ChannelEnum } from '@/enums/modeEnum';

const props = withDefaults(
    defineProps<{
        modelValue?: any
    }>(),
    {
        modelValue: {},
    }
)
const emit = defineEmits(['update:modelValue'])

const parent = inject(CHANNEL_INJECTION_KEY)

const channel = computed(() => parent?.channel.value)
const selectData: any = computed(() => props.modelValue[unref(channel)!] || [])

const columns = ref<any[]>([])
/**生成column字段 */
function generateColumns() {
    if (channel.value === ChannelEnum.DISTBUTOR) {
        columns.value = [
            { prop: 'groupName', label: '组别' },
            { prop: 'name', label: '分销员名称' },
        ]
    } else {
        columns.value = [
            { prop: 'nickname', label: '用户名称' },
            { prop: 'username', label: '用户账号' },
            { prop: 'mobile', label: '手机号码' },
        ]
    }
}
/**切换渠道生成不同的column */
watch(() => unref(channel), () => generateColumns(), { immediate: true })

const handleDeleteItem = (index: number) => {
    selectData.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.move {
    @media screen and (max-width: 1536px) {
        @apply overflow-scroll;
    }
}
</style>