<template>
    <div class="bbsl-common-page" @click="commonPageClick">
        <div
            class="content-left"
            style="background-color: #fff; margin-right: 9px; overflow: auto"
        >
            <el-card
                class="box-card"
                style="overflow: auto; overflow-x: hidden"
            >
                <div
                    class="title"
                    style="padding-left:10px;font-size:14px;heightL30px;line-height:30px;background:rgb(238 237 237);color:rgb(106 106 106);"
                >
                    <i
                        style="font-size: 16px; margin: 0 5px"
                        class="el-icon-s-order"
                    ></i>
                    <span style="font-size: 16px">业务目录&emsp;</span>
                </div>
                <div
                    style="
                        display: flex;
                        padding: 5px 5px;
                        border-left: 1px solid rgb(238, 237, 237);
                        border-right: 1px solid rgb(238, 237, 237);
                    "
                >
                    <div style="flex: 1; display: flex">
                        <el-select
                            size="mini"
                            style="width: 70%"
                            @change="changeVedeoF"
                            v-model="query.zoneCode"
                            placeholder="请选择监控点"
                        >
                            <el-option
                                v-for="item in veideoF"
                                :key="item.id"
                                :label="item.name"
                                :value="item.code"
                            >
                            </el-option>
                        </el-select>
                        <div style="width: 30%">
                            <el-tooltip
                                content="同步目录"
                                placement="bottom"
                                effect="light"
                            >
                                <i
                                    class="el-icon-refresh"
                                    style="
                                        font-size: 20px;
                                        margin-left: 10px;
                                        line-height: 32px;
                                    "
                                    @click="synchroTree"
                                ></i>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <el-tree
                    :expand-on-click-node="false"
                    :highlight-current="true"
                    class="filter-tree editScroll"
                    :data="videoTree"
                    :props="defaultProps"
                    :filter-node-method="filterNode"
                    @node-click="changeNode"
                    ref="tree"
                >
                    <span class="custom-tree-node" slot-scope="{node, data}">
                        <span
                            ><i class="el-icon-folder" style="margin: 0 3px"></i
                            >{{ node.label }}</span
                        >
                        <span>
                            <el-tooltip
                                content="应用配置"
                                placement="bottom"
                                effect="light"
                            >
                                <i
                                    style="font-size: 14px; margin: 0 5px"
                                    class="el-icon-setting"
                                    @click="openClick(node, data)"
                                ></i>
                            </el-tooltip>
                            <el-tooltip
                                content="同步区域"
                                placement="bottom"
                                effect="light"
                            >
                                <i
                                    class="el-icon-refresh"
                                    style="font-size: 14px"
                                    @click="synchro(node, data)"
                                ></i>
                            </el-tooltip>
                        </span>
                    </span>
                </el-tree>
            </el-card>
        </div>
        <div class="content-right">
            <div class="bbsl-table-search">
                <el-form v-model="queryParam" :inline="true">
                    <el-form-item label="监控点名称：">
                        <el-input
                            clearable
                            size="mini"
                            placeholder="请输入监控点名称"
                            v-model="queryParam.params.name"
                            style="width: 200px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="在线状态：">
                        <el-select
                            size="mini"
                            style="width: 100px"
                            clearable
                            v-model="queryParam.params.status"
                            placeholder="请选择"
                        >
                            <el-option label="正常" value="1"> </el-option>
                            <el-option label="异常" value="0"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="onClickSearch"
                            >搜索</el-button
                        >
                        <el-button
                            type="success"
                            icon="el-icon-check"
                            size="mini"
                            @click="onClickSynch"
                            >同步</el-button
                        >
                        <el-button
                            type="warning"
                            icon="el-icon-s-operation"
                            size="mini"
                            @click="Application"
                            :disabled="prohibitButton"
                            >应用配置</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
            <videoFormDialog
                :fullName="fullName"
                :isShowPlay="showApplication"
                :videoVoList="videoVoList"
                @closeFormDiao="closeFormDiao"
                @refList="getDateList"
            ></videoFormDialog>
            <div class="bbsl-table-content" ref="contentPanel">
                <div class="bbsl-btn-content" ref="btnPanel"></div>
                <el-table
                    stripe
                    size="mini"
                    :height="tableMaxHeight"
                    :style="{width: '100%'}"
                    v-loading="loading"
                    ref="multipleSelection"
                    border
                    :data="tableData"
                    :row-key="getRowKey"
                    @selection-change="handleSelectionChange"
                    :header-cell-style="{'text-align': 'center'}"
                    :cell-style="{'text-align': 'center'}"
                >
                    <el-table-column
                        type="selection"
                        width="55"
                        :reserve-selection="true"
                    ></el-table-column>
                    <el-table-column
                        type="index"
                        width="50"
                        align="center"
                        label="序号"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        min-width="180"
                        sortable
                        prop="name"
                        label="监控点名称"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        min-width="120"
                        sortable
                        prop="appTypeName"
                        label="所属业务"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        min-width="140"
                        sortable
                        prop="lgtd"
                        label="经度"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        min-width="120"
                        sortable
                        prop="loc"
                        label="纬度"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        min-width="180"
                        sortable
                        prop="status"
                        label="在线状态"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <span
                                :style="{
                                    color:
                                        scope.row.status == 0
                                            ? 'red'
                                            : scope.row.status == 1
                                            ? 'green'
                                            : '',
                                }"
                                >{{
                                    scope.row.status == 0
                                        ? '异常'
                                        : scope.row.status == 1
                                        ? '正常'
                                        : ''
                                }}</span
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    ref="paginationPanel"
                    align="right"
                    class="bbsl-pagination"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParam.pageBean.page"
                    :page-sizes="[20, 30, 40, 50]"
                    :page-size="queryParam.pageBean.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </div>
            <!-- 应用配置弹框 -->
            <el-dialog
                title="应用配置"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose"
            >
                <div>
                    <el-row style="margin: 20px 0">
                        <el-col :span="3">
                            <span style="font-size: 14px">监控点名称：</span>
                        </el-col>
                        <el-col :span="10" style="font-size: 14px">
                            {{ treeTitle }}
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="3">
                            <span style="font-size: 14px">应用类型：</span>
                        </el-col>
                        <el-col :span="10">
                            <el-radio-group v-model="treeLog.appType">
                                <el-radio :label="1">山洪</el-radio>
                                <el-radio :label="2">水库</el-radio>
                                <el-radio :label="3">水文</el-radio>
                            </el-radio-group>
                        </el-col>
                    </el-row>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="opendialogVisible"
                        >确 定</el-button
                    >
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
import videoManger from '@/api/stManager/videoManger.js'
import req from '@/request.js'
import {TableMixin} from '@/mixins/tableMixin'
import videoFormDialog from './components/videoForm-dialog.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
export default {
    name: 'videoManger',
    components: {
        videoFormDialog,
    },
    mixins: [TableMixin],
    data() {
        return {
            veideoF: [],
            dialogVisible: false,
            values: '',
            loading: false,
            query: {
                zoneCode: null,
            },
            multipleSelection: [], // 复选框
            queryParam: {
                pageBean: {
                    pageSize: 20,
                    page: 1,
                },
                params: {
                    zoneCode: null,
                    status: null,
                },
            },
            treeTitle: '',
            regionIndexCode: '',
            queryParams: {
                pageBean: {
                    pageSize: 10,
                    page: 1,
                },
                params: {
                    name: null, //树点击查询条件
                    zoneCode: null,
                },
            },
            appTypes: [],
            total: 0,
            pId: '',
            treeLog: {
                //树节点配置弹框关闭
                zoneCode: null,
                appType: 1,
            },
            tableData: [],
            videoTree: [],
            defaultProps: {
                value: 'code',
                label: 'name',
            },
            data: [],
            filterText: '',
            showApplication: false, //弹框判断
            prohibitButton: true, //是否可以点击
            videoVoList: {}, //传过去的应用配置内容
            fullName: '', //树的部分数据
            czyyfl: [],
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        },
    },
    created() {
        this.czyyfl = dictUtils.getDictItemsFromCache('czyyfl')
        this.getDateList()
        this.getTreen()
    },
    methods: {
        changeVedeoF(val) {
            this.$refs.multipleSelection.clearSelection() //切换，选中就归零
            if (val) {
                this.query.zoneCode = val
                videoManger.getVideoTree(this.query, (res) => {
                    this.videoTree = res.value
                })
                this.getDateList()
            } else {
                this.videoTree = []
                this.$set(this.videoTree, this.videoTree, res.value)
                this.getDateList()
            }
        },
        //应用配置弹框
        Application() {
            this.showApplication = true
        },
        // 组织树查询
        getTreen() {
            videoManger.getVideoF({}, (res) => {
                this.veideoF = res.value
                // console.log(this.veideoF);
                this.query.zoneCode = this.veideoF[0].code
                videoManger.getVideoTree(this.query, (res) => {
                    this.videoTree = res.value
                    this.queryParam.params.zoneCode = this.videoTree[0].code
                })
            })
        },
        //同步数据
        synchroTree() {
            videoManger.asycCataLog((res) => {
                if (res.state) {
                    if (res.state) {
                        this.$message.success('同步成功')
                        this.getTreen()
                    } else {
                        this.$message.error('同步失败')
                    }
                }
            })
        },
        synchro(node, data) {
            videoManger.asycCataLogZone(
                {treeCode: this.query.zoneCode},
                (res) => {
                    if (res.state) {
                        this.$message.success('同步成功')
                        this.getTreen()
                    } else {
                        this.$message.error('同步失败')
                    }
                }
            )
        },
        renderContent(h, {node, data, store}) {
            return (
                <span
                    style="display:flex"
                    class="custom-tree-node"
                    on-mouseover={() => {
                        this.show = true
                    }}
                    on-mouseout={() => {
                        this.show = false
                    }}
                >
                    <span>{node.label}</span>
                </span>
            )
        },
        onClickSynch() {
            videoManger.getSynch(
                {regionIndexCode: this.queryParam.params.zoneCode},
                (res) => {
                    if (res.state) {
                        this.$message.success('同步成功')
                    } else {
                        this.$message.error('同步失败')
                    }
                }
            )
        },
        filterNode(value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },

        getDateList() {
            this.videoVoList = []
            this.loading = true
            this.tableData = []
            videoManger.getList(this.queryParam, (res) => {
                if (res.state) {
                    this.tableData = res.value.rows
                    console.log(this.tableData)
                    this.tableData.forEach((e) => {
                        this.czyyfl.forEach((f) => {
                            if (e.appType == f.value) {
                                console.log(e)
                                e.appTypeName = f.name
                            }
                        })
                    })
                    this.total = res.value.total
                    this.loading = false
                    this.closeFormDiao()
                }
            })
        },
        changeNode(val) {
            if (val) {
                this.fullName = val.fullName //把名称传入弹框
                this.regionIndexCode = val.code
                this.queryParam.params.zoneCode = val.code
                //如果点击树，选中状态归0
                this.$refs.multipleSelection.clearSelection()
            }
            this.getDateList()
        },

        handleSizeChange(val) {
            this.queryParam.pageBean.pageSize = val
            this.getDateList()
        },
        handleCurrentChange(val) {
            this.queryParam.pageBean.page = val
            this.getDateList()
            // this.queryParam = {
            //   pageBean: {
            //     pageSize: 20,
            //     page: 1,
            //   },
            //   params: {
            //     name: null, //树点击查询条件
            //     zoneCode: null,
            //   },
            // };
        },
        handleClose() {
            this.treeLog = {
                zoneCode: null,
                appType: null,
            }
            this.dialogVisible = false
        },
        //闭应用配置弹框
        closeFormDiao() {
            this.showApplication = false
            this.$refs.multipleSelection.clearSelection() //切换，选中就归零
        },
        opendialogVisible() {
            videoManger.stationRelation(this.treeLog, (res) => {
                if (res.state) {
                    this.$notify({
                        type: 'success',
                        message: '配置成功',
                        duration: 2000,
                    })
                    this.dialogVisible = false
                }
            })
        },
        openClick(node, data) {
            this.treeTitle = node.data.name
            this.treeLog.zoneCode = node.data.code
            this.dialogVisible = true
        },
        // // 修改
        // handleUpdate(row) {
        //   this.title = '修改'
        //   this.pId = row.id
        //   this.showFormDia = true;
        // },
        handleSelectionChange(val) {
            //判断是否选中，如果选中，可以点击弹框
            if (val.length) {
                this.prohibitButton = false
                this.videoVoList = val
                // console.log(this.videoVoList)
            } else {
                this.prohibitButton = true
                this.videoVoList = []
                // console.log(this.videoVoList + "hhh")
            }
            this.multipleSelection = val.map((item) => {
                return item.id
            })
        },
        // // 指定一个key标识这一行的数据
        getRowKey(row) {
            return row.id
        },
        // // // 批量删除
        // deleteSelect() {
        //   this.$confirm('确定删除选中数据？', '提示', {
        //     confirmButtonText: '确 定',
        //     cancelButtonText: '取 消',
        //     type: 'warning',
        //   })
        //     .then(() => {
        //       videoManger
        //         .remove(this.multipleSelection, (res) => {
        //           if (res.state) {
        //             this.$notify({
        //               type: 'success',
        //               message: '删除成功',
        //               duration: 2000,
        //               // offset: 80
        //             })
        //             // this.multipleSelection = [];
        //             this.$refs.multipleSelection.clearSelection()
        //             this.queryParam.pageBean.page = 1
        //             this.getDateList()
        //           }
        //         })
        //         .catch((res) => {
        //           this.$notify({
        //             type: 'error',
        //             message: res.message,
        //             duration: 2000,
        //             offset: 80,
        //           })
        //           this.getDateList()
        //         })
        //     })
        //     .catch(() => {})
        // },
        // /** 删除按钮操作 */
        handleSelect(val) {
            // console.log(val)
        },
        // // 点击查询
        onClickSearch() {
            this.queryParam.pageBean.page = 1
            this.getDateList()
        },
        //获取字典数据
        getSysDict() {
            let portal = window.context.portal
            return new Promise((resolve, reject) => {
                req.post(
                    portal + '/sys/sysDictionary/v1/queryAllDictItems'
                ).then(
                    (response) => {
                        resolve(response.data)
                        this.appTypes = response.data.czyyfl
                        this.getDateList()
                    },
                    (error) => {
                        reject(error)
                    }
                )
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.el-tree-node__content {
  width: 100% !important;
  height: 40px !important;
  flex: 1;
  display: flex !important;
  // align-items: center !important;
  justify-content: space-around !important;
  font-size: 14px;
  // padding-right: 8px;
}
.btn-content {
  display: flex;
}
.el-select-dropdown__item span {
  color: rgb(51, 51, 51) !important;
}
.el-select-dropdown__item {
  color: #9a9a9a !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #f5f7fa;
}
.btn-content :first-child {
  margin: 0 0 0 0 !important;
}
.el-card__body {
  width: 100% !important;
  height: 100% !important;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 5px;
}
// .custom-tree-node {
//   box-sizing: border-box;
//   display: flex;
//   justify-content: space-around !important;
// }

.el-card {
  width: 100% !important;
  height: 100% !important;
}
.el-main {
  width: 100% !important;
  height: 100% !important;
}
.fullheight {
  display: flex !important;
  width: 100% !important;
  height: 100%;
}
.content-left {
  width: 25% !important;
  border-right: 1px solid #ccc;
}
.content-right {
  width: 75% !important;
}
.sampling {
  ::v-deep .el-dialog__body {
    padding: 30px 20px 0 20px;
  }
}
.el-radio-group {
  vertical-align: sub;
}
::-webkit-scrollbar {
  background: #fff !important;
}
.custom-tree-node {
  font-size: 12px;
}
.el-popover {
  min-width: 35px !important;
  padding: 5px 0 !important;
}
.line {
  display: block !important;
  height: 1px !important;
  background: #ccc !important;
}
.bbsl-pagination {
  bottom: 10px !important;
}
</style>
