<template>
    <div id="rule">
        <div class="search-title">
            <span class="rule-item">
                <b>要识别的模型文件标高标记</b>
                <el-input :disabled="readonly" v-model="rule.SagaSign" style="width: 100px"></el-input>
            </span>
            <span class="rule-item">
                <b>要识别的模型阶段</b>
                <el-input :disabled="readonly" v-model="rule.UseablePhaseName" style="width: 100px"></el-input>
            </span>
            <span class="rule-item">
                <b>要识别模型中的房间/空间</b>
                <el-select v-model="spaceType" :disabled="readonly" placeholder="" style="width: 100px">
                    <el-option v-for="item in spaceList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </span>
            <el-button v-show="readonly" style="float: right" type="primary" @click="handleCheckReadonly">编辑模型识别规则</el-button>
            <el-button v-show="!readonly" style="float: right" type="primary">保 存</el-button>
            <el-button v-show="!readonly" style="float: right" type="primary" @click="readonly = true">取 消</el-button>
        </div>
        <div class="rule-view">
            <el-row class="rule-tab">
                <div class="types">
                    <el-tabs v-model="activeTab" type="card">
                        <template v-for="(item, index) in tabsList">
                            <el-tab-pane :name="item.code" :key="index" :label="item.name" :disabled="item.disabled"></el-tab-pane>
                        </template>
                    </el-tabs>
                </div>

                <div class="addBtn">
                    <el-button v-show="!readonly" @click="addRule">添加规则</el-button>
                </div>
            </el-row>
            <div class="rule-table" v-if="activeTab == 'equip'">
                <equip-rule :readonly="readonly" :tableData="equipTable" @edit="editRule" @delete="deleteRule"></equip-rule>
            </div>
            <div class="rule-table" v-else-if="activeTab == 'space'">
                <space-rule :readonly="readonly" :tableData="spaceTable"></space-rule>
            </div>
            <div class="rule-table" v-else-if="activeTab == 'pipe'">
                <pipe-rule :readonly="readonly" :tableData="pipeTable"></pipe-rule>
            </div>
        </div>
        <equip-dialog ref="equipDialog" :type="type"></equip-dialog>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { queryInfoMap, queryPipeMap, queryProjectRule } from "@/api/model/report";
import equipDialog from "@/components/ready/modelrule/dialog/equipDialog";
import equipRule from "@/components/ready/modelrule/table/equipRule";
import spaceRule from "@/components/ready/modelrule/table/spaceRule";
import pipeRule from "@/components/ready/modelrule/table/pipeRule";

export default {
    components: {
        equipDialog,
        equipRule,
        spaceRule,
        pipeRule,
    },
    data() {
        return {
            readonly: true,
            type: "添加规则",
            spaceList: [
                {
                    value: "space",
                    label: "空间",
                },
                {
                    value: "room",
                    label: "房间",
                },
            ],
            spaceType: "",
            rule: {}, // 项目识别规则
            activeTab: "pipe",
            tabsList: [
                { code: "equip", name: "设备/部件属性识别规则", disabled: true },
                { code: "space", name: "房间/空间属性识别规则", disabled: true },
                { code: "pipe", name: "管道名称对应规则", disabled: false },
            ], //tab页
            equipTable: [], // 设备/部件映射数据，
            spaceTable: [], // 房间/空间映射数据，
            pipeTable: [], // 管道映射数据
        };
    },
    mounted() {
        this.getMapData();
        this.getProjectRule();
    },
    computed: {
        ...mapGetters("layout", ["projectId"]),
    },
    methods: {
        /**
         * 获取项目识别规则
         */
        getProjectRule() {
            queryProjectRule({}, (res) => {
                if (res.Result === "success" && res.Content && res.Content.length && res.Content[0].ConfigJson) {
                    this.rule = res.Content[0].ConfigJson;
                    this.spaceType = res.Content[0].RoomSpace;
                } else {
                    this.rule = {
                        SagaSign: "-saga",
                        UseablePhaseName: "阶段1",
                    };
                    this.spaceType = "space";
                    console.error("接口未获取到项目模型识别规则！");
                }
            });
        },
        /**
         * 获取映射关系数据
         */
        getMapData() {
            const promise1 = new Promise((resolve, reject) => {
                queryInfoMap({ pageNumber: 1, pagesize: 1000, filters: "ObjType in ['Equipment', 'EquipPart']" }, (res) => {
                    resolve(res);
                });
            });
            const promise2 = new Promise((resolve, reject) => {
                queryInfoMap({ pageNumber: 1, pagesize: 1000, filters: "ObjType in ['Room', 'Space']" }, (res) => {
                    resolve(res);
                });
            });
            const promise3 = new Promise((resolve, reject) => {
                queryPipeMap({ pageNumber: 1, pagesize: 1000 }, (res) => {
                    resolve(res);
                });
            });
            Promise.all([promise1, promise2, promise3])
                .then((res) => {
                    const res1 = res[0],
                        res2 = res[1],
                        res3 = res[2];
                    this.equipTable = res1.Result === "success" ? res1.Content : [];
                    this.spaceTable = res2.Result === "success" ? res2.Content : [];
                    this.pipeTable = res3.Result === "success" ? res3.Content : [];
                })
                .catch((error) => {
                    console.error(error);
                    this.$message.error("映射识别规则获取失败，请联系开发人员！");
                });
        },
        /**
         * 切换编辑模式
         */
        handleCheckReadonly() {
            this.$message.info("暂不支持线上修改规则，如需修改请联系开发人员！");
            // this.readonly = false;
        },
        /**
         * 添加规则
         */
        addRule() {
            this.type = "添加规则";
            if (this.activeTab === "equip") {
                // 添加设备/部件属性识别规则
                this.$confirm("规则修改后上传的模型将按新规则进行识别（已上传模型如需按新规则需要重新上传）, 是否确认修改?", "提示", {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$refs.equipDialog.showDialog();
                    })
                    .catch(() => {});
            } else if (this.activeTab === "sapce") {
                // 添加房间/空间属性识别规则
            } else if (this.activeTab === "pipe") {
                // 添加管道名称对应规则
            }
        },
        /**
         * 修改规则
         * @param index  规则索引值
         * @param data   规则数据
         */
        editRule(index, data) {
            this.type = "修改规则";
            if (this.activeTab === "equip") {
                // 修改设备/部件属性识别规则
                this.$confirm("规则修改后上传的模型将按新规则进行识别（已上传模型如需按新规则需要重新上传）, 是否确认修改?", "提示", {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$refs.equipDialog.showDialog();
                    })
                    .catch(() => {});
            } else if (this.activeTab === "sapce") {
                // 修改房间/空间属性识别规则
            } else if (this.activeTab === "pipe") {
                // 修改管道名称对应规则
            }
        },
        /**
         * 删除规则
         * @param index  规则索引值
         * @param data   规则数据
         */
        deleteRule(index, editRule) {
            console.log("删除规则");
        },
    },
    watch: {
        projectId() {
            this.getProjectRule();
            this.getMapData();
        },
    },
};
</script>

<style lang="less" scoped>
#rule {
    display: flex;
    height: 100%;
    flex-direction: column;
    .rule-item {
        display: inline-block;
        margin-right: 50px;
        b {
            vertical-align: middle;
            margin-right: 10px;
        }
    }
    .rule-view {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        height: calc(100% - 63px);
        flex: 1;
        .rule-tab {
            .types {
                float: left;
                width: calc(100% - 200px);
            }

            .addBtn {
                float: left;
                width: 200px;
                text-align: right;
                height: 40px;
                padding: 4px 10px 0 0;
                box-sizing: border-box;
                border-bottom: 1px solid #e4e7ed;
            }
        }
        .rule-table {
            height: calc(100% - 56px);
        }
    }
}
</style>
