<template>
    <div>
        <base-search :formItemList="formItemList" @search="searchFrom" ref="baseSearchRef"> </base-search>
        <div style="display: flex; padding: 10px; background: #fff; margin-bottom: 10px">
            <el-button type="primary" @click="showAddDialog(null)">新增租户</el-button>
        </div>
        <div class="main-container">
            <el-table :data="data.rows" border v-loading="data.dataListLoading" element-loading-text="数据加载中..." style="width: 100%">
                <el-table-column label="租户姓名" prop="name"> </el-table-column>
                <el-table-column label="手机号" prop="mobile"> </el-table-column>
                <el-table-column label="智能耳标" prop="jbqCount"> </el-table-column>
                <el-table-column label="智能项圈" prop="xqCount"> </el-table-column>
                <el-table-column label="智能主机" prop="serverCount"> </el-table-column>
                <el-table-column label="创建时间" prop="createTime"> </el-table-column>
                <el-table-column label="操作" width="340">
                    <template #default="scope">
                        <el-button link type="primary" @click="showAddDialog(scope.row)">编辑</el-button>
                        <el-button link type="primary" @click="del(scope.row.id)">删除</el-button>
                        <el-button link type="primary" @click="assign(scope.row.id, '2')">耳标分配</el-button>
                        <el-button link type="primary" @click="assign(scope.row.id, '4')">项圈分配</el-button>
                        <el-button link type="primary" @click="assign(scope.row.id, '1')">主机分配</el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <div class="dataListOnEmpty">暂无数据</div>
                </template>
            </el-table>
            <pagination v-model:limit="form.pageSize" v-model:page="form.pageNum" :total="data.total" @pagination="getDataList" />
            <TenantDialog ref="TenantDialogRef" @success="getDataList" />
            <AssignDialog ref="AssignDialogRef" @success="getDataList" />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import baseSearch from '@/components/common/searchCustom/index.vue';
import { tenantList, tenantDel } from '@/api/sys.js';
import { iotDeviceAssignableList, iotDeviceAssignToTenant } from '@/api/hardware.js';
import TenantDialog from './tenantDialog.vue';
import AssignDialog from './assignDevice.vue';

const baseSearchRef = ref();
const TenantDialogRef = ref();
const AssignDialogRef = ref();
const formItemList = reactive([
    {
        label: '租户姓名',
        type: 'input',
        param: 'name',
        placeholder: '请输入租户姓名',
    },
]);
const data = reactive({
    rows: [],
    total: 0,
    dataListLoading: false,
});
const form = reactive({
    pageNum: 1,
    pageSize: 10,
});

const searchFrom = () => {
    form.pageNum = 1;
    getDataList();
};
// 列表
const getDataList = () => {
    data.dataListLoading = true;
    const params = {
        ...form,
        ...baseSearchRef.value.penetrateParams(),
    };
    tenantList(params)
        .then((res) => {
            data.dataListLoading = false;
            data.rows = res.data.rows;
            data.total = res.data.total;
        })
        .catch(() => {
            data.dataListLoading = false;
        });
};
// 删除
const del = (id) => {
    ElMessageBox.confirm('请确认是否删除', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
    }).then(() => {
        tenantDel(id).then(() => {
            ElMessage.success('操作成功');
            getDataList();
        });
    });
};
// 分配弹层
const assign = (tenantId, deviceType) => {
    if (AssignDialogRef.value) {
        // 传递租户ID和设备类型到分配对话框
        // onShowDialog(tenantId, deviceType, deliveryId, deliveryNumber, carNumber, mode)
        AssignDialogRef.value.onShowDialog(tenantId, deviceType, null, '', '', 'tenant');
    }
};
const showAddDialog = (row) => {
    if (TenantDialogRef.value) {
        TenantDialogRef.value.onShowDialog(row);
    }
};
onMounted(() => {
    getDataList();
});
</script>

<style lang="less" scoped></style>
