<template>
    <common-dialog
        width="1000px"
        title="选择点位"
        class="point_dialog"
        :visible="pointDialogVisible"
        :before-close="beforeClosePointDialog"
        destroy-on-close
    >
        <el-row :gutter="12" style="height: 100%">
            <el-col :span="16" style="height: 100%">
                <ht-table
                    v-if="pointDialogVisible"
                    @load="loadData"
                    @select="handleSelect"
                    @select-all="handleSelectAll"
                    :data="data"
                    :pageResult="pageResult"
                    :selection="true"
                    quick-search-props="pointName, varName"
                    :show-export="false"
                    :show-custom-column="false"
                    ref="htTable"
                >
                    <template>
                        <ht-table-column
                            prop="pointName"
                            label="点位名称"
                            :sortable="true"
                            :show-overflow-tooltip="true"
                        >
                        </ht-table-column>
                        <ht-table-column
                            prop="varName"
                            label="变量名称"
                            :sortable="true"
                            :show-overflow-tooltip="true"
                        >
                        </ht-table-column>
                        <ht-table-column
                            prop="dataType"
                            label="变量类型"
                            :sortable="true"
                            :filters="filters"
                            width="120"
                            :show-overflow-tooltip="true"
                        >
                            <template v-slot="{row}">
                                <el-tag v-if="row.dataType == 'B'">布尔</el-tag>
                                <el-tag
                                    type="success"
                                    v-if="row.dataType == 'F'"
                                    >浮点</el-tag
                                >
                                <el-tag
                                    type="warning"
                                    v-if="row.dataType == 'I'"
                                    >整型</el-tag
                                >
                            </template>
                        </ht-table-column>
                        <ht-table-column
                            prop="unit"
                            label="单位"
                            width="100"
                            :sortable="true"
                            :show-overflow-tooltip="true"
                        >
                        </ht-table-column>
                    </template>
                </ht-table>
            </el-col>
            <el-col :span="8" style="height: 100%">
                <div class="selectd-title">
                    <span>已选择</span>
                    <el-button type="danger" size="mini" @click="handleClearAll"
                        >清空</el-button
                    >
                </div>
                <div class="selectd-tree">
                    <el-tree
                        class="editScroll"
                        ref="selectTree"
                        node-key="pointName"
                        :props="selectProps"
                        :data="selectList"
                    >
                        <span
                            class="custom-tree-node"
                            slot-scope="{node, data}"
                        >
                            <span class="tree-node-data">
                                <span
                                    class="node-data-item"
                                    :title="`${node.label}`"
                                >
                                    {{ node.label }}
                                </span>
                                <span
                                    class="node-data-item"
                                    :title="`${node.data.varName}`"
                                >
                                    {{ node.data.varName }}
                                </span>
                            </span>
                            <span>
                                <i
                                    class="el-icon-delete-solid"
                                    @click="() => remove(node, data)"
                                ></i>
                            </span>
                        </span>
                    </el-tree>
                </div>
            </el-col>
        </el-row>
        <div slot="footer" style="text-align: right">
            <el-button type="primary" @click="handleOK">添加</el-button>
            <el-button size="small" @click="beforeClosePointDialog"
                >取消</el-button
            >
        </div>
    </common-dialog>
</template>

<script>
import utils from '@/hotent-ui-util.js'
export default {
    name: 'point-dialog',
    data() {
        return {
            data: [],
            pageResult: {
                page: 1,
                pageSize: 50,
                total: 0,
            },
            filters: [
                {text: '布尔', value: 'B'},
                {text: '浮点', value: 'F'},
                {text: '整型', value: 'I'},
            ],
            pointDialogVisible: false,
            type: '',
            currentSys: {},
            fanId: '',
            lineId: '',
            selectList: [],
            selectProps: {
                label: 'pointName',
            },
        }
    },
    methods: {
        handleClearAll() {
            this.selectList = []
            this.removeSeleced('', true)
        },
        remove(node, data) {
            console.log(node)
            const parent = node.parent
            const children = parent.data.children || parent.data
            const index = children.findIndex((d) => d.id === data.id)
            let remove = children.splice(index, 1)
            this.removeSeleced(remove)
        },
        handleSelect(rows, row) {
            let selected = rows.length && rows.indexOf(row) !== -1
            if (!selected) {
                return
            } else {
                this.selectList.push(row)
            }
        },
        handleSelectAll(rows) {
            this.selectList = utils.deepClone(rows)
        },
        open(type, currentSys, fanId, lineId) {
            this.currentSys = currentSys
            this.type = type
            this.fanId = fanId
            this.lineId = lineId
            this.pointDialogVisible = true
        },
        beforeClosePointDialog() {
            this.currentSys = {}
            this.type = ''
            this.fanId = ''
            this.lineId = ''
            this.pointDialogVisible = false
            this.selectList = []
            this.data = []
        },
        handleOK() {
            // let selection = this.$refs.htTable.$refs.htTable.selection
            let selection = this.selectList
            if (!selection || selection.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '请至少选择一个点位',
                })
                return
            }
            let ids = []
            for (let i = 0; i < selection.length; i++) {
                if (this.type == 2) {
                    ids.push(selection[i].pointId)
                } else {
                    ids.push(selection[i].id)
                }
            }
            let param = [...ids]
            this.$http
                .post(
                    '${cssc}/biz/scada/pointSystem/v1/savePointSystems?' +
                        `configType=${this.type}` +
                        `&sysId=${
                            this.currentSys.id ? this.currentSys.id : ''
                        }` +
                        `&fanType=${this.fanId ? this.fanId : ''}` +
                        `&lineId=${this.lineId ? this.lineId : ''}`,
                    param
                )
                .then(
                    (resp) => {
                        if (resp.data.state) {
                            this.$message.success(resp.data.message)
                            this.$parent.$refs[`htTable${this.type}`].load()
                        } else {
                            this.$message.warning(resp.data.message)
                        }
                    },
                    (error) => {
                        this.$message.warning(resp.data.message)
                        reject(error)
                    }
                )
                .finally(() => {
                    this.beforeClosePointDialog()
                })
        },
        loadData(param, cb) {
            let url = '',
                query = []
            if (this.type == 2) {
                // 环线查询可添加列表为已添加的机组点位列表
                query = [
                    {
                        group: 'filter',
                        operation: 'EQUAL',
                        property: 'ps.config_type_',
                        relation: 'AND',
                        value: 3,
                    },
                    {
                        group: 'filter',
                        operation: 'EQUAL',
                        property: 'ps.sys_id_',
                        relation: 'AND',
                        value: this.currentSys.id,
                    },
                ]
                url = '${cssc}/biz/scada/pointSystem/v1/queryPointSystemPage'
            } else {
                query = [
                    {
                        group: 'filter',
                        operation: 'EQUAL',
                        property: 'pointType',
                        relation: 'AND',
                        value: this.type == 1 ? 1 : 2,
                    },
                ]
                url = '${cssc}/biz/base/pointInfo/v1/query'
            }
            if (param.querys && param.querys.length) {
                param.querys.push(...query)
            } else {
                param.querys = [...query]
            }

            this.$http
                .post(url, param)
                .then(
                    (resp) => {
                        let response = resp.data
                        this.data = response.rows
                        this.pageResult = {
                            page: response.page,
                            pageSize: response.pageSize,
                            total: response.total,
                        }
                        // 选中回显
                        this.reloadSeleced()
                    },
                    (error) => {
                        reject(error)
                    }
                )
                .finally(() => cb())
        },
        removeSeleced(remove, all) {
            this.$nextTick(() => {
                if (all) {
                    this.$refs.htTable.$refs.htTable.clearSelection()
                } else {
                    let data =
                        this.$refs.htTable.$refs.htTable.$options.propsData.data
                    let removeRow = data.filter(
                        (row) => row.id == remove[0].id
                    )[0]
                    if (removeRow) {
                        this.$refs.htTable.$refs.htTable.toggleRowSelection(
                            removeRow,
                            false
                        )
                    }
                }
            })
        },
        reloadSeleced() {
            if (this.selectList.length && this.data.length) {
                this.$nextTick(() => {
                    let data =
                        this.$refs.htTable.$refs.htTable.$options.propsData.data
                    this.selectList.forEach((selected) => {
                        data.forEach((row) => {
                            if (selected.id == row.id) {
                                this.$refs.htTable.$refs.htTable.toggleRowSelection(
                                    row,
                                    true
                                )
                            }
                        })
                    })
                })
            }
        },
    },
}
</script>

<style lang='scss' scoped>
@import '@/assets/css/element-variables.scss';
.point_dialog /deep/ .el-dialog__body {
    height: calc(100vh - 270px);
}
.point_dialog /deep/ .el-dialog__body {
    padding: 20px;
}
.point_dialog /deep/ .inputs {
    width: 400px;
}
.selectd-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
        font-size: 14px;
        font-weight: bold;
    }
}
.selectd-tree {
    margin-top: 20px;
    border: 1px solid #eee;
    height: calc(100% - 50px);
}
.editScroll {
    height: 100% !important;
    overflow-x: hidden;
}
/deep/ .el-tree-node__expand-icon {
    display: none;
}
.custom-tree-node {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    box-sizing: border-box;
}
/deep/ .el-icon-delete-solid {
    color: $--color-danger;
}
.tree-node-data {
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.node-data-item {
    display: inline-block;
    width: calc(50% - 16px);
    margin: 0 6px 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>