<!--
    systemType 设备所属类型
-->
<template>
    <el-dialog title="所属系统实例" :visible.sync="dialog.systemType" width="900px">
        <div>
            <div id="systemType">
                <div class="title-search query-form" style="padding: 10px; margin-bottom: 10px" v-if="type != 'read'">
                    <el-row>
                        <el-col :span="10">
                            <span>系统所属建筑</span>
                            <el-select v-model="buildId" placeholder="请选择" @change="getTableData">
                                <el-option v-for="item in options" :key="item.id" :label="item.localName" :value="item.id"> </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="14">
                            <el-input
                                placeholder="输入名称或编码进行查询"
                                v-model="search"
                                size="small"
                                style="width: 300px; margin-right: 10px"
                                clearable
                            ></el-input>
                            <el-button size="small" @click="getTableData">查找</el-button>
                        </el-col>
                    </el-row>
                </div>
                <el-table
                    class="data-table"
                    border
                    row-key="id"
                    :data="tableData"
                    @selection-change="handleSelectionChange"
                    style="width: 100%"
                    ref="multipleTable"
                >
                    <el-table-column v-if="type != 'read'" type="selection" :reserve-selection="true" :disabled="true" width="55"></el-table-column>
                    <el-table-column label="系统名称" header-align="center">
                        <template slot-scope="scope">{{ scope.row.localName || scope.row.name }}</template>
                    </el-table-column>
                    <el-table-column label="本地编码" header-align="center">
                        <template slot-scope="scope">{{ scope.row.localId || "--" }}</template>
                    </el-table-column>
                    <el-table-column label="系统类型" prop="categoryName" header-align="center"></el-table-column>
                    <el-table-column label="详情" header-align="center" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button @click="lookDeatils(scope.row)" type="text">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <span slot="footer" class="dialog-footer" v-if="type != 'read'">
            <el-button type="primary" @click="getChange">确 定</el-button>
        </span>
        <el-dialog title="系统详情" :visible.sync="iframeShow" v-if="iframeShow" width="500px" append-to-body>
            <iframe
                id="google_ads_frame2"
                name="google_ads_frame2"
                frameborder="0"
                :src="iframeSrc"
                marginwidth="0"
                marginheight="0"
                vspace="0"
                hspace="0"
                style="width: 100%; height: 500px"
                allowtransparency="true"
                scrolling="no"
                allowfullscreen="true"
            ></iframe>
        </el-dialog>
    </el-dialog>
</template>
<script>
import myPagination from "@/components/ledger/lib/myPagination";
import { querySysLinkBuild, buildingQuery, equipLinkSys } from "@/api/scan/request"
import tools from "@/utils/scan/tools"
import { mapGetters } from 'vuex'

export default {
    components: {
        myPagination
    },
    props: {
        dialog: {
            type: Object,
            default: function () {
                return {
                    systemType: true
                };
            }
        },
        graphyId: {
            type: String,
            default: ""
        },
        device: {},
        curDevice: {
            default: ''
        },//设备id
        type: {
            type: String,
            default: "read"
        },
        list: {
            type: [Array]
        }
    },
    data() {
        return {
            search: "", //搜索文案
            tableData: [],
            systemList: [],
            linkSystemData: [],
            multipleSelection: [],
            iframeSrc: "",
            iframeShow: false,
            buildId: 'all', //查询条件
            options: [], //系统所属建筑
        };
    },
    computed: {
        ...mapGetters("layout", ["projectId", "secret", "userId"])
    },
    mounted() {
    },
    methods: {
        //获取查询条件-建筑
        getData() {
            let param = {
                orders: "localName asc",
                pageNumber: 1,
                pageSize: 1000
            }
            buildingQuery(param, res => {
                if (res.result == 'success') {
                    let data = res.content;
                    data.unshift({
                        id: "all",
                        localName: "全部"
                    }, {
                        id: "noKnow",
                        localName: "未明确建筑的系统"
                    })
                    this.options = data
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //设置默认
        toggleSelection(rows) {
            if (this.$refs.multipleTable) {
                this.$refs.multipleTable.clearSelection();
            }
            if (rows.length && this.list.length) {
                rows.map(row => {
                    this.list.map(t => {
                        if (row.id == t.id) {
                            this.$refs.multipleTable.toggleRowSelection(row)
                        }
                    })
                })
            }
        },
        //确认
        getChange() {
            this.createRelatSys()
            this.$emit("change", this.multipleSelection)
            this.dialog.systemType = false
            this.multipleSelection = []
        },
        //点击详情
        lookDeatils(infos) {
            this.$message("开发中...")
        },
        //根据设备类型-查询系统关联专业
        getTableData() {
            let param = {
                data: {
                    filters: `classCode="${this.device.deviceId.substring(0, 4)}"`,
                    pageNumber: 1,
                    pageSize: 1000
                }
            }
            //建筑id
            if (this.buildId === "noKnow") {
                param.buildingId = 1;
            } else if (this.buildId && this.buildId != "all") {
                param.buildingId = this.buildId;
            }
            //输入的查询条件
            if (this.search) {
                param.data.filters += `;localName contain "${this.search}" or localId contain "${this.search}"`
            }
            querySysLinkBuild(param, res => {
                this.tableData = res.content
                this.toggleSelection(res.content)
            })
        },
        getSystemTableData() {
            const sysIdList = this.linkSystemData.map(sys => {
                return sys.id
            })
            if (sysIdList.length) {
                let param = {
                    data: {
                        filters: `id in ${JSON.stringify(sysIdList)}`,
                        pageNumber: 1,
                        pageSize: 1000
                    }
                }
                querySysLinkBuild(param, res => {
                    this.tableData = res.content
                })
            } else {
                this.tableData = [];
            }
        },
        //获取关联的系统
        getLinkSystemData() {
            this.linkSystemData = this.list ? JSON.parse(JSON.stringify(this.list)) : []
            if (this.type == 'read') {
                this.getSystemTableData();
            }
        },
        //添加设备关联系统关系
        createRelatSys() {
            if (this.curDevice) {//有即为编辑
                let param = {
                    equipId: this.curDevice,
                    sysIdList: []
                }
                this.multipleSelection.map(t => {
                    param.sysIdList.push(t.id)
                })
                equipLinkSys(param, res => {
                    this.multipleSelection = []
                })
            }
        }
    },
    watch: {
        dialog: {
            deep: true,
            handler() {
                if (this.dialog.systemType) {
                    this.getData()
                    this.tableData = [];
                    if (this.type == 'read') {
                        this.getLinkSystemData()
                    } else {
                        this.getLinkSystemData()
                        this.getTableData()
                    }
                }
            }
        },
        projectId() {
            this.buildId = 'all';
            this.options = [];
            this.getData()
        }
    }
};
</script>

<style lang="less">
#systemType {
    height: 455px;
    overflow-y: auto;

    .el-table thead {
        tr {
            th {
                background-color: #f5f7fa;
            }
        }
    }
}
</style>
