<template>
    <el-dialog :title="t('sip.user-list558539-0')" v-model="open" width="800px">
        <div style="margin-top: -50px">
            <el-divider />
        </div>
        <!--用户数据-->
        <el-form ref="queryFormRef" :inline="true" :model="queryParams" :rules="rules">
            <el-form-item :label="t('sip.user-list558539-1')" prop="phonenumber">
                <el-input
                    type="text"
                    :placeholder="t('sip.user-list558539-2')"
                    v-model="queryParams.phonenumber"
                    minlength="10"
                    clearable
                    size="small"
                    show-word-limit
                    style="width: 240px"
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :icon="Search" size="small" @click="handleQuery">{{ t('query') }}</el-button>
            </el-form-item>
        </el-form>

        <el-table ref="userTableRef" v-loading="loading" :data="userList" highlight-current-row size="small" @current-change="handleCurrentChange">
            <el-table-column :label="t('select')" width="50" align="center">
                <template #default="scope">
                    <input :checked="scope.row.isSelect" name="user" type="radio" />
                </template>
            </el-table-column>
            <el-table-column :label="t('sip.user-list558539-2')" align="center" key="userId" prop="userId" width="120" />
            <el-table-column :label="t('sip.user-list558539-3')" align="center" key="userName" prop="userName" />
            <el-table-column :label="t('sip.user-list558539-4')" align="center" key="nickName" prop="nickName" />
            <el-table-column :label="t('sip.user-list558539-1')" align="center" key="phonenumber" prop="phonenumber" width="120" />
            <el-table-column :label="t('sip.user-list558539-5')" align="center" prop="createTime" width="160">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum" :total="total" @pagination="getList" />

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="confirmSelectUser">确认</el-button>
                <el-button @click="closeSelectUser">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getSimpleUserList } from '@/api/system/user'
import { parseTime } from '@/utils/dateUtil'

// 使用组合式API
const { t } = useI18n()

// 定义 props
const props = defineProps({
    device: {
        type: Array,
        default: null,
    },
})

// 定义 emits
const emit = defineEmits(['userEvent'])

// refs
const queryFormRef = ref(null)
const userTableRef = ref(null)

// 数据状态
const loading = ref(false)
const ids = ref([])
const title = ref('')
const userList = ref([])
const user = ref({})
const deviceInfo = ref({})
const open = ref(false)
const total = ref(0)

// 查询参数
const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
    phonenumber: undefined,
    status: 0,
    deptId: undefined,
})

// 表单校验规则
const rules = reactive({
    phonenumber: [
        {
            required: true,
            message: t('sip.user-list558539-6'),
            trigger: 'blur',
        },
        {
            min: 11,
            max: 11,
            message: t('sip.user-list558539-7'),
            trigger: 'blur',
        },
    ],
})

// 监听 device prop 变化
watch(
    () => props.device,
    (newVal, oldVal) => {
        deviceInfo.value = newVal
    }
)

// 查询用户列表
const getList = (userId) => {
    loading.value = true
    getSimpleUserList(queryParams).then((response) => {
        userList.value = response.rows.map((item) => {
            if (userId && userId == item.userId) {
                item.isSelect = true
            }
            return item
        })
        total.value = response.total
        loading.value = false
    })
}

// 搜索按钮操作
const handleQuery = () => {
    queryFormRef.value.validate((valid) => {
        if (valid) {
            queryParams.pageNum = 1
            getList()
        }
    })
}

// 重置查询
const resetQuery = () => {
    queryFormRef.value.resetFields()
    userList.value = []
}

// 设置单选按钮选中
const setRadioSelected = (userId) => {
    for (let i = 0; i < userList.value.length; i++) {
        if (userList.value[i].userId === userId) {
            userList.value[i].isSelect = true
            user.value = userList.value[i]
        } else {
            userList.value[i].isSelect = false
        }
    }
}

// 单选数据
const handleCurrentChange = (currentUser) => {
    if (currentUser != null) {
        setRadioSelected(currentUser.userId)
        user.value = currentUser
    }
}

// 确认选择用户
const confirmSelectUser = () => {
    emit('userEvent', user.value)
    open.value = false
}

// 关闭选择用户
const closeSelectUser = () => {
    open.value = false
    resetQuery()
}

// 暴露方法给父组件
defineExpose({
    open,
    getList
})
</script>