<template>
    <el-table :data="tableData" border height="100%" style="width: 100%">
        <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
        <el-table-column label="模型中的属性" align="center">
            <el-table-column prop="InfoPointName" label="属性名称" align="center" show-overflow-tooltip> </el-table-column>
        </el-table-column>
        <el-table-column label="对应到字典中的信息点" align="center">
            <el-table-column prop="SInfoPointCode" label="信息点编码" align="center" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="SInfoPointName" label="信息点" align="center" show-overflow-tooltip> </el-table-column>
        </el-table-column>
        <el-table-column v-if="!readonly" label="编辑" align="center" width="180">
            <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-edit-outline" @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
        </el-table-column>
        <template slot="empty">
            <div style="height: 60%; transform: translateY(50%)">
                <i class="icon-wushuju iconfont"></i>
                暂无设备/部件属性识别规则
            </div>
        </template>
    </el-table>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    props: {
        readonly: Boolean,
        tableData: Array,
    },
    data() {
        return {};
    },
    mounted() {},
    computed: {
        ...mapGetters("layout", ["projectId"]),
    },
    methods: {
        /**
         * 编辑规则
         * @param index  规则索引值
         * @param data   规则数据
         */
        handleEdit(index, data) {
            console.log("edit", index, data);
            this.$emit("edit", index, data);
        },
        /**
         * 删除规则
         * @param index  规则索引值
         * @param data   规则数据
         */
        handleDelete(index, data) {
            console.log("delete", index, data);
            this.$emit("delete", index, data);
        },
    },
    watch: {
        projectId() {},
    },
};
</script>

<style>
</style>