<template>
    <el-select
        v-model="selectedValue"
        :placeholder="placeholder"
        style="width: 240px"
        :filterable="filterable"
        :remote="remote"
        :remote-method="remoteMethod"
        :clearable="clearable"
        @change="handleChange"
    >
        <el-option v-for="item in deviceOptions" :key="item.orgId" :label="item.mobile" :value="item.orgId" />
        <el-pagination
            v-if="pagination"
            small
            style="padding: 0px 20px"
            @current-change="handlePageChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
        />
    </el-select>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue';
import { queryListOps } from '@/api/farmOps';

const emits = defineEmits(['selected-value-change']);

const props = defineProps({
    cid: { type: Number, default: '' },
    placeholder: { type: String, default: '请选择养殖户账号' },
    filterable: { type: Boolean, default: true },
    remote: { type: Boolean, default: true },
    clearable: { type: Boolean, default: true },
    pagination: { type: Boolean, default: true },
    name: { type: String, default: '' },
    managerName: { type: String, default: '' },
});

const selectedValue = ref('');
const deviceOptions = ref([]);
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const loading = ref(false);

// 远程搜索方法
const remoteMethod = (query) => {
    if (query !== '') {
        loading.value = true;
        const params = { mobile: query, pageNum: 1, pageSize: pageSize.value };
        queryListOps(params).then((ret) => {
            loading.value = false;
            total.value = ret.data.total;
            deviceOptions.value = ret.data.rows;
        });
    } else {
        getOptions();
    }
};

// 分页切换页码方法
const handlePageChange = (val) => {
    currentPage.value = val;
    getOptions();
};

// 选项变化时的回调方法
const handleChange = (val) => {
    if (val) {
        const row = deviceOptions.value.find((item) => item.orgId === val);
        if (row) {
            emits('update:name', row.name);
            emits('update:managerName', row.managerName);
            emits('update:cid', val);
        } else {
            emits('update:name', '');
            emits('update:managerName', '');
            emits('update:cid', '');
        }
    } else {
        emits('update:name', '');
        emits('update:managerName', '');
        emits('update:cid', '');
    }
};

const getOptions = () => {
    const params = { pageNum: currentPage.value, pageSize: pageSize.value };
    queryListOps(params).then((ret) => {
        deviceOptions.value = ret.data.rows;
        total.value = ret.data.total;
    });
};

// 方法：根据 ID 查找并设置选中的值
// const setSelectedValueById = async (id) => {
//     const params = { id: id, pageNum: 1, pageSize: 1 };
//     const { data } = await queryListOps(params);
//     if (data.rows.length > 0) {
//         selectedValue.value = data.rows[0].id;
//     } else {
//         selectedValue.value = '';
//     }
// };

onMounted(() => {
    getOptions();
});
</script>
