<template>
    <el-dialog v-model="data.dialogVisible" title="查看设备" style="width: 1000px; padding-bottom: 20px">
        <el-table v-loading="data.dataListLoading" :data="data.rows" border element-loading-text="数据加载中...">
            <el-table-column label="设备编号" prop="deviceId">
                <template #default="scope">
                    {{ scope.row.deviceId || scope.row.sn || '--' }}
                </template>
            </el-table-column>
            <el-table-column label="设备类型" prop="deviceType">
                <template #default="scope">
                    {{
                        scope.row.deviceType == '2'
                            ? '智能耳标'
                            : scope.row.deviceType == '1'
                            ? '智能主机'
                            : scope.row.deviceType == '4'
                            ? '智能项圈'
                            : '--'
                    }}
                </template>
            </el-table-column>
            <el-table-column label="所属租户" prop="tenantName">
                <template #default="scope">
                    {{ scope.row.tenantName || '--' }}
                </template>
            </el-table-column>
            <el-table-column label="是否佩戴" prop="gpsState">
                <template #default="scope">
                    <el-tag :type="scope.row.isWare == '1' || scope.row.is_wear == 1 ? 'danger' : 'primary'" effect="light">
                        {{ scope.row.isWare == '1' || scope.row.is_wear == 1 ? '已佩戴' : '未佩戴' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <el-button link type="danger" @click="handleUnbind(scope.row)">解绑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination :limit="form.pageSize" :page="form.pageNum" :total="data.total" @pagination="getDataList" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { deviceAllList, unbindDevice } from '@/api/shipping.js';

const data = reactive({
    dialogVisible: false,
    deliveryId: '',
    dataListLoading: false,
    rows: [],
    total: 0,
});
const form = reactive({
    pageNum: 1,
    pageSize: 10,
});
const getDataList = () => {
    data.dataListLoading = true;
    const params = {
        deliveryId: data.deliveryId,
    };
    deviceAllList(params)
        .then((res) => {
            data.dataListLoading = false;
            if (res.code === 200) {
                data.rows = res.data || [];
                data.total = data.rows.length || 0;
            } else {
                data.rows = [];
                data.total = 0;
            }
        })
        .catch(() => {
            data.dataListLoading = false;
            data.rows = [];
            data.total = 0;
        });
};
// 处理逗号分隔的图片URL
const getImageList = (imageUrl) => {
    if (!imageUrl || imageUrl.trim() === '') {
        return [];
    }
    // 按逗号分割并过滤空字符串
    return imageUrl.split(',').map(url => url.trim()).filter(url => url !== '');
};

const handleClose = () => {
    data.dialogVisible = false;
};
const onShowLookDialog = (row) => {
    data.dialogVisible = true;
    if (row) {
        data.deliveryId = row.id;
        getDataList();
    }
};

// 解绑设备
const handleUnbind = (row) => {
    ElMessageBox.confirm('确认解绑该设备吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            unbindDevice(row.deviceId || row.sn)
                .then((res) => {
                    if (res.code === 200) {
                        ElMessage.success('解绑成功');
                        getDataList();
                    } else {
                        ElMessage.error(res.msg || '解绑失败');
                    }
                })
                .catch((error) => {
                    ElMessage.error('解绑失败');
                    console.error('解绑失败:', error);
                });
        })
        .catch(() => {
            // 用户取消操作
        });
};

defineExpose({
    onShowLookDialog,
});
</script>

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