<template>
    <!-- 选择人员 -->
    <view class="picker" :style="style">
        <global-popup v-model="show" :height="592" :customStyle="{ padding: '28rpx 32rpx' }">
            <template #top>
                <view>
                    <up-search placeholder="请输入内容后选择" :showAction="false" v-model="searchKey" @change="onChange"></up-search>
                </view>
            </template>
            <view class="popup-content-list" v-if="columns.length">
                <view
                    class="popup-content-item u-line-1"
                    :class="{ 'mocp-color-primary-6': modelValue == item[valueField] }"
                    v-for="(item, index) in columns"
                    :key="index"
                    @tap="handleChoose(item)"
                >
                    {{ item[labelField] }}
                </view>
            </view>
            <view style="width: 100%; height: 100%" v-else>
                <global-empty></global-empty>
            </view>
        </global-popup>
        <view class="picker-content" :class="getPickerClass" @tap="open" :style="getContentStyle">
            <text class="picker-value">{{ getLabelValue }}</text>
            <view class="picker-icon">
                <view class="picker-icon-close" v-if="clearable && !showPlaceholder && !disabled" @tap.stop="clear">
                    <up-icon name="close-circle-fill" color="#c0c4cc" size="36rpx"></up-icon>
                </view>
                <up-icon name="arrow-right" color="#86909C" size="36rpx"></up-icon>
            </view>
        </view>
    </view>
</template>

<script setup>
import { debounce } from 'lodash'
import { getAdminListApi } from 'mocp/api/system'
import { computed, ref, watch, watchEffect } from 'vue'

const es = defineEmits(['update:modelValue', 'change'])
const ps = defineProps({
    style: {
        type: Object,
        default: () => {
            return {}
        }
    },
    //默认搜索的内容
    searchValue: {
        type: String,
        default: ''
    },
    //显示为空的value值
    emptyValue: {
        type: [String, Number],
        default: ''
    },
    modelValue: {
        type: [String, Number],
        default: ''
    },
    options: {
        type: Array,
        default: () => {
            return []
        }
    },
    clearable: {
        type: Boolean,
        default: false
    },
    labelField: {
        type: String,
        default: 'label'
    },
    valueField: {
        type: String,
        default: 'value'
    },
    pickAlign: {
        type: String,
        default: 'left'
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    disabled: {
        type: Boolean,
        default: false
    },
    //打开前判断
    onBeforeOpen: {
        type: Function,
        default: null
    }
})
//获取人员列表接口
const getAdminList = async (realName = '') => {
    return new Promise((resolve, reject) => {
        const params = {
            pageIndex: 1,
            pageSize: 1000,
            realName
        }
        getAdminListApi(params, { loading: true }).then((res) => {
            if (res.code == 200) {
                const selectList = res.data.list.map((item) => {
                    return {
                        nickname: item.nickname,
                        [ps.labelField]: `${item.nickname}(${(item.enetAccount || '无易网号') + '-' + (item.deptFullName || '无机构')})`,
                        value: item.id
                    }
                })
                resolve(selectList)
            } else {
                uni.$mocpMessage.error(res.message)
                reject()
            }
        })
    })
}
//获取下拉框样式
const getContentStyle = computed(() => {
    let pickAlign = 'flex-start'
    if (ps.pickAlign == 'center') {
        pickAlign = 'center'
    } else if (ps.pickAlign == 'right') {
        pickAlign = 'flex-end'
    }
    return {
        justifyContent: pickAlign
    }
})
//下拉框显示的内容
const labelValue = ref('')
const getLabelValue = computed(() => {
    if (labelValue.value == ps.emptyValue) {
        return ps.placeholder
    }
    return labelValue.value || ps.placeholder
})
//获取下拉框class
const showPlaceholder = computed(() => {
    return !labelValue.value || labelValue.value == ps.emptyValue
})
const getPickerClass = computed(() => {
    return {
        disabled: ps.disabled,
        placeholder: showPlaceholder.value
    }
})
const show = ref(false)
//打开
const open = async () => {
    if (ps.onBeforeOpen) {
        const flag = await ps.onBeforeOpen()
        if (!flag) return
    }
    show.value = true
}
//获取下拉框的内容Columns
const columns = ref([])
//弹出层输入框搜索
const searchKey = ref()
//点击清空按钮
const clear = () => {
    labelValue.value = ''
    es('update:modelValue', ps.emptyValue)
    es('change', ps.emptyValue)
}
//搜索
const search = (value) => {
    if (value && value != ps.emptyValue) {
        getAdminList(value).then((data) => {
            columns.value = data
        })
    } else {
        columns.value = []
    }
}
//设置默认搜索的内容
watch(
    () => ps.searchValue,
    (value) => {
        if (ps.valueField == 'label') {
            searchKey.value = value?.split('(')[0]
        } else {
            searchKey.value = value
        }
        if (value != ps.modelValue) {
            search(searchKey.value)
        }
    },
    { immediate: true }
)
//监听搜索
const onChange = debounce((value) => {
    if (value != ps.searchValue) {
        search(value)
    }
}, 200)
//获取label的内容
watchEffect(() => {
    const option = columns.value?.find((option) => String(option[ps.valueField]) === String(ps.modelValue))
    if (option) {
        labelValue.value = option[ps.labelField]
    } else {
        labelValue.value = ps.emptyValue
    }
})
//弹出层列表点击
const handleChoose = (row) => {
    es('update:modelValue', row[ps.valueField], row)
    es('change', row[ps.valueField], row)
    show.value = false
}
defineExpose({
    getName: () => {
        return labelValue.value?.split('(')[0] || ''
    }
})
</script>
<style lang="scss" scoped>
.picker {
    flex: auto;
    &-content {
        display: flex;
        align-items: center;
        line-height: 48rpx;
        &.placeholder {
            .picker-value {
                color: $mocp-text-3;
            }
        }
        &.disabled {
            background: #f5f7fa;
        }
    }
    &-value {
        color: $mocp-text-4;
        margin-right: 8rpx;
    }
    &-icon {
        display: flex;
        align-items: center;
        &-close {
            margin-left: 4rpx;
        }
    }
    .popup-content {
        &-list {
            padding-top: 20rpx;
            color: $mocp-text-4;
        }
        &-item {
            margin-bottom: 40rpx;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}
</style>
