<template>
    <div>
        <el-dialog
            :close-on-click-modal="false"
            title="告警单策略绑定"
            :visible.sync="dialogVisible"
            width="1300px"
            :before-close="handleClose"
        >
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form :model="form" ref="form">
                        <el-form-item label="策略名称:">
                            <el-input
                                placeholder="请输入策略名称"
                                style="width: 240px; margin-top: 5px"
                                class="mb10"
                                v-model="form.strategyName"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="title" :style="`color:${WordColor}`">干扰源类型</div>
                    <div class="checkbox">
                        <el-checkbox
                            :indeterminate="isIndeterminate"
                            v-model="checkAll"
                            :disabled="flag"
                            @change="handleCheckAllChange($event, 0)"
                        >
                            全选
                        </el-checkbox>
                        <el-checkbox-group v-model="form.monitorTag" @change="handleCheckedCitiesChange($event, 0)">
                            <el-checkbox
                                :disabled="flag"
                                v-for="(item, ind) in typeList"
                                :key="ind"
                                :label="item.id"
                                style="display: block"
                            >
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="title" :style="`color:${WordColor}`">指标类型</div>

                    <div class="checkbox">
                        <div  style="display: flex; justify-content: space-between">
                            <el-checkbox
                                :indeterminate="isIndeterminates"
                                v-model="parameterAll"
                                @change="handleCheckAllChange($event, 1)"
                                :disabled="flag"
                            >
                                全选
                            </el-checkbox>
                            <div>
                                <el-radio v-model="form.operation" :disabled="flag" :label="0">与</el-radio>
                                <el-radio v-model="form.operation" :disabled="flag" :label="1">或</el-radio>
                            </div>
                        </div>

                        <el-checkbox-group v-model="form.indicatorTypes" @change="handleCheckedCitiesChange($event, 1)">
                            <el-checkbox
                                :disabled="flag"
                                v-for="(item, ind) in parameterList"
                                :key="ind"
                                :label="item.id"
                                style="display: block"
                            >
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="title" :style="`color:${WordColor}`">监测点</div>
                    <div class="checkbox">
                        <el-input
                            placeholder="输入关键字进行过滤"
                            style="width: 240px; margin-top: 5px"
                            class="mb10"
                            v-model="filterText"
                            clearable
                        ></el-input>
                        <el-tree
                            :data="tableData"
                            show-checkbox
                            v-loading="loading"
                            default-expand-all
                            highlight-current
                            node-key="id"
                            ref="trees"
                            style="height: 550px; overflow: auto"
                            :filter-node-method="filterNode"
                            :tree-config="{ children: 'children' }"
                            :props="defaultProps"
                        ></el-tree>
                    </div>
                </el-col>
            </el-row>

            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { dicData } from '@/assets/commjs/dictypeData'
import {
    getUpdateStrategy,
    bindStrategy,
    getMonitor,
    getStrategyList,
    echoMonitor
} from '@/api/Processsupervision/tactics.js'

export default {
    components: {},
    props: {
        id: {
            type: String,
            required: true
        },
        //0.新增 1.修改 2.查看
        operateType: {
            type: Number,
            required: true
        },
        grade: {
            type: Number,
            required: true
        },

        type: {
            type: Number,
            required: true
        },

        deptId: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            WordColor: JSON.parse(window.localStorage.echartsColor).WordColor,
            radio: '1',
            flag: false,
            dialogVisible: true,
            checkAll: false,
            typeList: [], //负荷类型
            form: {
                deptId: '',
                strategyName: '',
                indicatorTypes: [],
                monitorTag: [],
                monitorIds: [],
                operation: 0,
                grade: 0,
                strategyType: 0,
                id: ''
            },
            isIndeterminate: false,

            isIndeterminates: false,

            parameterList: [], //指标参数
            parameterAll: false,

            multipleSelection: [],
            filterText: '',
            loading: false,
            tableData: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },

            rules: {
                strategyName: [{ required: true, message: '请输入策略名称', trigger: 'blur' }]
            }
        }
    },
    created() {
        this.info()
    },
    mounted() {
        this.typeList = dicData('Monitoring_Labels', [])
        this.parameterList = dicData('Steady_Statis', [])
    },
    methods: {
        info() {
            this.getMonitorTree(this.deptId, 1)
            this.form.strategyType = this.type
            this.form.deptId = this.deptId
            this.form.grade = this.grade
            if (this.operateType !== 0) {
                this.loading = true
                getUpdateStrategy({
                    id: this.id
                }).then(res => {
                    this.form = res.data
                    this.form.strategyName = res.data.name
                    this.form.strategyType = res.data.type
                    this.$refs.trees.setCheckedKeys(res.data.monitorIds)
                    this.loading = false
                })
            } else {
                //新增
            }
        },
        onSubmit() {
            if (this.form.strategyName == '') {
                this.$message({
                    message: '策略名称不可为空!',
                    type: 'warning'
                })
                return false
            }

            this.form.monitorIds = []
            this.multipleSelection = this.$refs.trees.getCheckedNodes()
            this.multipleSelection.forEach(item => {
                if (item.leven == 3) {
                    this.form.monitorIds.push(item.id)
                }
            })

            console.log(this.form)

            bindStrategy(this.form).then(res => {
                if (res.code == 'A0000') {
                    this.$message({
                        message: '绑定成功!',
                        type: 'success'
                    })
                    this.handleClose()
                }
            })
        },
        handleCheckedCitiesChange(value, num) {
            if (num == 0) {
                let checkedCount = value.length
                this.checkAll = checkedCount === this.typeList.length
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.typeList.length
            } else {
                let checkedCount = value.length
                this.parameterAll = checkedCount === this.parameterList.length
                this.isIndeterminates = checkedCount > 0 && checkedCount < this.parameterList.length
            }
        },
        handleCheckAllChange(val, num) {
            if (num == 0) {
                this.form.monitorTag = val ? this.ChangeMethods(this.typeList) : []
                this.isIndeterminate = false
            } else {
                this.form.indicatorTypes = val ? this.ChangeMethods(this.parameterList) : []
                this.isIndeterminates = false
            }
        },
        ChangeMethods(e) {
            let list = []
            e.forEach(item => {
                list.push(item.id)
            })
            return list
        },
        handleClose() {
            this.$emit('close')
        },

        filterNode(value, data, node) {
            if (!value) {
                return true
            }
            let _array = [] //这里使用数组存储 只是为了存储值。
            this.getReturnNode(node, _array, value)
            let result = false
            _array.forEach(item => {
                result = result || item
            })
            return result
        },

        getReturnNode(node, _array, value) {
            let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
            isPass ? _array.push(isPass) : ''
            this.index++
            if (!isPass && node.name != 1 && node.parent) {
                this.getReturnNode(node.parent, _array, value)
            }
        },

        //获取监测点树
        async getMonitorTree(deptId, grade) {
            //this.loading = true

            await getMonitor({
                orgId: deptId
            }).then(res => {
                this.tableData = res.data
                //this.loading = false
            })

            /*await echoMonitor({
        deptId: data.id,
        type: this.typeKey,
        grade: grade
      }).then(res => {
        this.$refs.trees.setCheckedKeys(res.data.children)
        if (res.data.id != null) {
          this.tableData1.forEach(item => {
            if (item.id == res.data.id) {
              this.$refs.xTable.setRadioRow(item)
            }
          })
        }
      })*/
        }
    },

    computed: {},

    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        }
    }
}
</script>
<style lang="scss" scoped>
.title {
    font-size: 16px;
    font-weight: 600;
}

.checkbox {
    height: 600px;
    overflow-y: auto;
    padding-left: 10px;
}

</style>
