<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="140px">
            <el-form-item label="节点名称" prop="roleName">
                <el-col :span="4">
                    <el-select
                            v-model="queryParams.roleName"
                            placeholder="节点名称"
                            style="width: 220px"
                            clearable>
                        <el-option
                                v-for="dict in sys_normal_disable"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"/>
                    </el-select>
                </el-col>
            </el-form-item>
            <el-form-item label="95宽带值Mbps/日" prop="roleKey">
                <el-col :span="4">
                    <el-date-picker
                            v-model="queryParams.roleKey"
                            type="dates"
                            placeholder="请选择日期范围"
                    />
                </el-col>
            </el-form-item>
            <el-form-item label="95宽带值Mbps/月" prop="monthsList">
                <el-col :span="4">
                    <el-date-picker
                            v-model="queryParams.monthsList"
                            type="months"
                            placeholder="请选择月范围"
                    />
                </el-col>
            </el-form-item>
            <el-form-item label="包端带宽值Mbps/日" prop="dataKey">
                <el-col :span="4">
                    <el-date-picker
                            v-model="queryParams.dataKey"
                            type="dates"
                            placeholder="请选择日期范围"
                    />
                </el-col>
            </el-form-item>
            <el-form-item label="设备业务客户名称" prop="nameKey">
                <el-col :span="4">
                    <el-input
                            v-model="queryParams.nameKey"
                            placeholder="请输入设备业务客户名称"
                            clearable
                            style="width: 220px"
                            @keyup.enter="handleQuery"
                    />
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="warning"
                        plain
                        icon="Download"
                        @click="handleExport"
                        v-hasPermi="['disRevenue:server:export']"
                >导出</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="success"
                        plain
                        icon="DataAnalysis"
                        @click="graphicAnalysis"
                >图形分析</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-row>

        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="节点ID" prop="roleId" v-if="columns[0].visible" />
            <el-table-column label="节点名称" prop="roleName" :show-overflow-tooltip="true" v-if="columns[1].visible" />
            <el-table-column label="硬件SN" prop="roleKey" :show-overflow-tooltip="true" v-if="columns[2].visible" />
            <el-table-column label="95宽带值Mbps/日" prop="roleSort" v-if="columns[3].visible">
                <template #header>
                    <span class="verticalAlign">95宽带值Mbps/日</span>
                    <el-tooltip trigger="click" effect="dark" content="使用服务器的发送流量，发送流量值除以1000000" placement="top">
                        <el-icon><QuestionFilled /></el-icon>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="95宽带值Mbps/月" prop="roleSort" v-if="columns[4].visible">
                <template #header>
                    <span class="verticalAlign">95宽带值Mbps/月</span>
                    <el-tooltip trigger="click" effect="dark" placement="top">
                        <template #content>使用服务器的发送流量，发送流量值除以1000000；<br />
                            若服务器在一个自然月内有收益方式的变更，以最后一次变更的时间为开始到月末，进行该值的统计；<br />
                            若服务器收益方式为包端，则月底不用进行该值的计算。</template>
                        <el-icon><QuestionFilled /></el-icon>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="包端带宽值Mbps/日" prop="roleSort" v-if="columns[5].visible" />
            <el-table-column label="设备业务客户" prop="roleSort" v-if="columns[6].visible" />
            <el-table-column label="业务号" prop="roleSort" v-if="columns[7].visible" />
            <el-table-column label="上联交换机" prop="roleSort" v-if="columns[8].visible" />
            <el-table-column label="创建时间" prop="roleSort" v-if="columns[9].visible" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-tooltip content="相关数据" placement="top">
                        <el-button link type="primary" icon="ChatLineSquare" @click="handleUpdate(scope.row)" v-hasPermi="['disRevenue:earnManage:server:edit']"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>

        <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"/>

        <!-- 图形分析 -->
        <el-dialog :title="title" v-model="open" width="780px" append-to-body fullscreen>
            <el-form ref="noticeRef" :model="form" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="节点名称" prop="noticeType">
                            <el-select v-model="form.noticeType" multiple placeholder="请选择节点名称">
                                <el-option
                                        v-for="item in roleList"
                                        :key="item.roleId"
                                        :label="item.roleName"
                                        :value="item.roleId"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div>
                <el-switch v-for="item of switchData" v-model="item.type" :activeText="item.name" class="mr20" />
               <div v-for="(item,index) of selectChoose">
                   <echartsLine v-show="switchData[0].type" :chartData="chartDataEvent"
                                :lineData="lineDataParams" :title="item.roleName + ':' + switchData[0].name" class="mt20 mb20" style="border: 1.5px solid #878787;"></echartsLine>
                   <echartsLine v-show="switchData[1].type" :chartData="chartDataEvent"
                                :lineData="lineDataParams" :title="item.roleName + ':' + switchData[1].name" class="mt20 mb20" style="border: 1.5px solid #878787;"></echartsLine>
                   <echartsBar v-show="switchData[2].type" :chartData="chartDataEvent"
                               :barData="lineDataParams" :title="item.roleName + ':' + switchData[2].name" class="mt20 mb20" style="border: 1.5px solid #878787;"></echartsBar>
               </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
<!--                    <el-button type="primary" @click="submitForm">确 定</el-button>-->
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Server">
    import echartsLine from "@/components/echartsList/line";
    import echartsBar from "@/components/echartsList/bar";
    import {listServer} from "@/api/disRevenue/server"
    const { proxy } = getCurrentInstance()
    const router = useRouter()
    const { sys_normal_disable, sys_notice_type } = proxy.useDict("sys_normal_disable", "sys_notice_type")

    const roleList = ref([])
    const loading = ref(true)
    const showSearch = ref(true)
    const ids = ref([])
    const single = ref(true)
    const multiple = ref(true)
    const total = ref(0)
    const dateRange = ref([])
    const open = ref(false)
    const title = ref("")
    const switchData = ref([
        {id: 'ninetyFiveDay', type: true, name: '95宽带值Mbps/日'},
        {id: 'ninetyFiveMonth', type: true, name: '95宽带值Mbps/月'},
        {id: 'packageEnd', type: true, name: '包端宽带值Mbps/日'}
    ]);
    let lineDataParams = ref({});
    let selectChoose = ref([]);

    // 列显隐信息
    const columns = ref([
        { label: `节点ID`},
        { label: `节点名称`, visible: true },
        { label: `硬件SN`, visible: true },
        { label: `95宽带值Mbps/日`, visible: true },
        { label: `95宽带值Mbps/月`, visible: true },
        { label: `包端带宽值Mbps/日`, visible: true },
        { label: `设备业务客户`},
        { label: `业务号`},
        { label: `上联交换机`},
        { label: `创建时间`}
    ])

    const data = reactive({
        form: {},
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            roleName: undefined,
            roleKey: undefined,
            status: undefined
        },
    })

    const { queryParams, form } = toRefs(data)

    /** 查询角色列表 */
    getList()
    function getList() {
        loading.value = true
        listServer(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
            roleList.value = response.rows
            total.value = response.total
            loading.value = false
        })
    }

    /** 搜索按钮操作 */
    function handleQuery() {
        queryParams.value.pageNum = 1
        getList()
    }

    /** 重置按钮操作 */
    function resetQuery() {
        dateRange.value = []
        proxy.resetForm("queryRef")
        handleQuery()
    }

    /** 导出按钮操作 */
    function handleExport() {
        proxy.download("system/role/export", {
            ...queryParams.value,
        }, `role_${new Date().getTime()}.xlsx`)
    }

    /** 多选框选中数据 */
    function handleSelectionChange(selection) {
        ids.value = selection.map(item => item.roleId)
        single.value = selection.length != 1
        multiple.value = !selection.length
    }

    /** 修改角色 相关数据 */
    function handleUpdate(row) {
        router.push("/disRevenue/earnManage/server/edit/index/" + row.roleId)
    }

    /** 图形分析 */
    function graphicAnalysis() {
        open.value = true;
        title.value = "图形分析";
        form.value.noticeType = ref([roleList.value[0].roleId,roleList.value[1].roleId]);
        form.value.noticeType.forEach(item => {
            roleList.value.some(val => {
                if (item === val.roleId) {
                    selectChoose.value.push(val);
                    return true;
                }
            });
        });
        lineDataParams.value = {
            lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    }

    /** 取消按钮 */
    function cancel() {
        open.value = false;
    }
    function chartDataEvent(val) {
        // console.log('val===',val);
        return val;
    }
</script>

<style scoped>
</style>
