<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="address" label="点位地址" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="type" label="点位类型" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <span>{{ typeData[scope.row.type] }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="byte_order" label="字节顺序" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <span>{{ byteData[scope.row.byte_order] }}</span>
                </template>
            </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: [],
            typeData: {
                1: 'bool',
                2: 'int16',
                3: 'int32',
                4: 'int64',
                5: 'unit16',
                6: 'unit32',
                7: 'unit64',
                8: 'float32',
                9: 'float64'
            },
            byteData: {
                1: 'null',
                2: '12',
                3: '21',
                4: '4321',
                5: '2143',
                6: '1234',
                7: '3412',
                8: '4312',
                9: '3421',
                10: '2134',
                11: '1243',
                12: 'BIG',
                13: 'LIT'
            }
        });
        const visible = computed(() => {
            return props.dialogVisible;
        });

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

        const getPointList = async () => {
            const parm = {
                template_name: props.formData.name
            }
            const res = await infoApi.getP(parm);
            if (res.code == 0) {
                state.propertiesData = [];
                const pointData = res.data;
                for (let i in pointData) {
                    state.propertiesData.push(pointData[i]);
                }
            } else {
                console.log(res);
            }
        };
        const closeDialog = () => {
            ctx.emit("dialogClose");
        };

        const delData = (item) => {
            ElMessageBox.confirm("确定删除该数据?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let param = {
                        template_name: props.formData.name,
                        name: item.name
                    }
                    const res = await infoApi.detP(param);
                    if (res.code == 0) {
                        ElMessage.success(res.message || "删除成功");
                        getPointList();
                    } 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>
  