<template>
    <el-dialog v-model="visible" title="设备管理" width="60%" :before-close="closeDialog">
        <el-table :data="propertiesData" height="230" style="width: 100%" border stripe
            :header-cell-style="{ background: '#F6F7FC' }">
            <el-table-column prop="name" label="设备名称" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="id" label="设备ID" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="template_name" label="设备的可用模板名称" align="center" show-overflow-tooltip>
            </el-table-column>

            <el-table-column prop="description" label="设备描述" align="center" show-overflow-tooltip>

            </el-table-column>
            <el-table-column label="操作" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <el-button type="danger" @click="delData(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
    props: ["formData", "dialogVisible"],
    emits: ["dialogClose", "dialogSuccess"],
    setup(props, ctx) {
        const state = reactive({
            propertiesData: [],
        });
        const visible = computed(() => {
            return props.dialogVisible;
        });

        onMounted(() => {
            getSet();
        });

        const getSet = async () => {
            const parm = {
                driver_name: props.formData.name
            }
            const res = await infoApi.getSet(parm);
            if (res.code == 0) {
                state.propertiesData = res.data;
            } else {
                console.log(res);
            }
        };
        const closeDialog = () => {
            ctx.emit("dialogClose");
        };

        const delData = (item) => {
            ElMessageBox.confirm("确定删除该数据?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let param = {
                        driver_name: props.formData.name,
                        name: item.name
                    }
                    const res = await infoApi.delSet(param);
                    if (res.code == 0) {
                        ElMessage.success(res.message || "删除成功");
                        getSet();
                    } else {
                        ElMessage.error(res.message | "删除失败");
                    }
                })
                .catch(() => {
                    ElMessage.info("已取消删除");
                });
        }


        return {
            ...toRefs(state),
            visible,
            closeDialog,
            delData
        };
    },
};
</script>
<style lang="scss" scoped>
.top-title {
    width: 100%;

    ::v-deep .el-card__body {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-weight: 800;
        font-size: 16px;
    }
}

.btns {
    padding: 15px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    cursor: pointer;
}
</style>
  