<template>
    <div class="malfunction">
        <el-container class="container">
            <el-aside class="aside">
                <div class="searchTree">
                    <el-input v-model="searchTreeValue" clearable placeholder="搜索" :suffix-icon="Search" @change="searchTree"> </el-input>
                </div>
                <div class="treeMain">
                    <el-scrollbar>
                        <el-tree
                            ref="treeRef"
                            highlight-current
                            :data="treeData"
                            :props="defaultProps"
                            node-key="id"
                            :default-expanded-keys="defaultExpandKeys"
                            @node-click="handleNodeClick"
                        ></el-tree>
                    </el-scrollbar>
                </div>
            </el-aside>
            <el-container class="mainContainer">
                <el-header class="header">
                    <div class="searchFileName">
                        <span>文件名称</span>
                        <el-input v-model="searchData.fileName"></el-input>
                    </div>
                    <div class="searchDate">
                        <span>日期</span>
                        <el-date-picker
                            v-model="searchData.date"
                            type="monthrange"
                            unlink-panels
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            format="YYYY-MM"
                            date-format="YYYY/MM"
                            :shortcuts="shortcuts"
                            @change="getListForAirBlower"
                        ></el-date-picker>
                    </div>
                    <div class="btnPart">
                        <el-button v-show="curTreeData.id !== '0'" :icon="Setting" @click="openConfigDialog">配置</el-button>
                        <!--
                        <el-button type="primary" :icon="Download">下载</el-button>
                        <el-button type="primary" plain :icon="Delete">删除</el-button>
                        -->
                    </div>
                </el-header>
                <el-main class="main">
                    <el-table :data="tableData">
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="文件名称" prop="name" align="center"></el-table-column>
                        <el-table-column label="修改时间" prop="lastModified" align="center"></el-table-column>
                        <el-table-column label="文件大小" prop="size" align="center"></el-table-column>
                        <el-table-column label="操作" align="center" width="80">
                            <template #default="scope">
                                <el-button text type="primary" @click="readFile(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
                <el-footer class="footer">
                    <div class="footerPart">
                        <el-pagination
                            v-model:current-page="pageSetting.current"
                            v-model:page-size="pageSetting.pageSize"
                            :total="pageSetting.total"
                            :page-sizes="pageSetting.pageSizes"
                            background
                            :pager-count="7"
                            layout="total,prev, pager, next, jumper,sizes"
                            @change="changePageSetting"
                        ></el-pagination>
                    </div>
                </el-footer>
            </el-container>
        </el-container>
    </div>
    <el-dialog v-model="configDialogVisible" title="配置信息" width="500">
        <el-form ref="configFormRef" :model="configFormData" label-width="120" :rules="configFormRules">
            <el-form-item prop="timeFormat" label="时间格式">
                <el-input v-model="configFormData.timeFormat"></el-input>
            </el-form-item>
            <el-form-item prop="delimiter" label="分隔符">
                <el-input v-model="configFormData.delimiter"></el-input>
            </el-form-item>
            <el-form-item prop="validStartLine" label="有效起始行数">
                <el-input-number v-model="configFormData.validStartLine"></el-input-number>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submitConfig">保存</el-button>
            <el-button @click="cancelConfig">取消</el-button>
        </template>
    </el-dialog>

    <el-dialog v-model="previewFileDialogVisible" title="文件预览" width="1000" @close="closePreviewFileDialog">
        <el-row class="previewFilePart">
            <el-col :span="8" class="colPart leftCol" v-loading="previewTreeLoading">
                <el-input
                    v-model="previewSearchTreeVal"
                    @change="previewSearchTree"
                    class="previewSearchTree"
                    :suffix-icon="Search"
                    clearable
                ></el-input>
                <el-scrollbar class="previewTreeScrollbar">
                    <el-tree
                        ref="previewTreeRef"
                        :data="previewTreeData"
                        :props="previewTreeProps"
                        show-checkbox
                        node-key="key"
                        @check-change="handleCheckChange"
                    ></el-tree>
                </el-scrollbar>
            </el-col>
            <el-col :span="16" class="colPart">
                <div class="title">图表</div>
                <div class="chartPart">
                    <div ref="previewChartRef" class="previewChart"></div>
                </div>
            </el-col>
        </el-row>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { dayjs, ElMessage, FormInstance, TreeInstance } from 'element-plus'
import { Download, Delete, Search, Setting } from '@element-plus/icons-vue'
import { getMalFunctionListReq, setConfigReq, previewFileReq } from '/@/api/backend/malfunction/request'
import { equipList } from '/@/api/backend/temperature/request'
import * as echarts from 'echarts'
// import { encrypt_aes, generateRandomNumber } from '/@/utils/crypto'
import { tableItemData } from './type'
import init from '/@/utils/iconfont'
const defaultProps = {
    children: 'children',
    label: 'label',
}

const treeRef = ref()
let originTreeChildData: {
    label: string
    id: string
    code:string
    children?: any[]
}[] = []
const treeData = ref<
    {
        label: string
        id: string
        code: string
        children?: any[]
    }[]
>([
    {
        label: '风机列表',
        id: '0',
        code: '0',
        children: [],
    },
])
const defaultExpandKeys: string[] = ['0']

const searchTreeValue = ref('')
const searchTree = (val: string) => {
    if(val == ''){
        treeData.value[0].children = originTreeChildData
        return 
    }
    const reg = new RegExp(val, 'i')
    treeData.value[0].children = originTreeChildData.filter((item: any) => {
        return reg.test(item.label)
    }) ?? []
}

const curTreeData = ref<{
    label: string
    id: string
    code: string
    children?: any[]
}>({
    label: '风机列表',
    id: '0',
    code: '0',
})

const handleNodeClick = (target: { label: string; id: string; code: string }) => {
    curTreeData.value = target
    if (target.id === '0') return
    getListForAirBlower()
}

const getTreeDataList = () => {
    return new Promise((resolve) => {
        equipList({ objectType: 10002 }).then((res) => {
            const data = res.data.map((item: any) => {
                return {
                    label: item.name,
                    code: item.code,
                    id: item.id,
                }
            })
            originTreeChildData = data
            treeData.value[0].children = data
            resolve(res.data[0])
        })
    })
}

const searchData = reactive<{ fileName: ''; date: Date[] }>({
    fileName: '',
    date: [dayjs().toDate(), dayjs().toDate()],
})
const shortcuts = [
    {
        text: '本月',
        value: () => {
            const start = dayjs().startOf('month').toDate()
            const end = dayjs().endOf('month').toDate()
            return [start, end]
        },
    },
    {
        text: '上月',
        value: () => {
            const start = dayjs().subtract(1, 'month').toDate()
            const end = dayjs().subtract(1, 'month').toDate()
            return [start, end]
        },
    },
    {
        text: '近三月',
        value: () => {
            const start = dayjs().subtract(2, 'month').toDate()
            const end = dayjs().toDate()
            return [start, end]
        },
    },
]

let originTableData = ref<tableItemData[]>([])
const tableData = computed(() => {
    let data = originTableData.value
    if (searchData.fileName) {
        const reg = new RegExp(searchData.fileName, 'i')
        data = data.filter((item) => reg.test(item.name))
    }
    const res = data.slice((pageSetting.current - 1) * pageSetting.pageSize, pageSetting.current * pageSetting.pageSize)
    pageSetting.total = res.length
    return res
})
const pageSetting = reactive({
    current: 1,
    pageSize: 20,
    total: 0,
    pageSizes: [20, 50, 100],
})

const changePageSetting = () => {}

const getListForAirBlower = () => {
    const data = {
        deviceCode: curTreeData.value.code,
        startTime: dayjs(searchData.date[0]).format('YYYY-MM'),
        endTime: dayjs(searchData.date[1]).format('YYYY-MM'),
    }
    console.log(data)

    getMalFunctionListReq(data).then((res) => {
        if (res.success) {
            pageSetting.total = res.data.length
            originTableData.value = res.data
        }
    })
}

const configDialogVisible = ref(false)

const configFormRef = ref<FormInstance>()
const configFormData = reactive({
    timeFormat: 'yyyy-MM-dd-HH:mm:ss.SSS',
    delimiter: ';',
    validStartLine: 6,
})

const openConfigDialog = () => {
    configDialogVisible.value = true
}

const configFormRules = {
    timeFormat: [
        {
            required: true,
            message: '请输入时间格式',
            trigger: 'blur',
        },
    ],
    delimiter: [
        {
            required: true,
            message: '请输入分隔符',
            trigger: 'blur',
        },
    ],
    validStartLine: [
        {
            required: true,
            message: '请输入有效起始行',
            trigger: 'change',
        },
    ],
}

const submitConfig = () => {
    configFormRef.value?.validate((valid) => {
        if (valid) {
            setAirBlowerConfig()
        }
    })
}
const cancelConfig = () => {
    configDialogVisible.value = false
    configFormRef.value?.resetFields()
}

const setAirBlowerConfig = () => {
    setConfigReq({
        id: curTreeData.value.id,
        fdrFormat: JSON.stringify(configFormData),
    })
        .then(() => {
            ElMessage.success('配置成功')
            configDialogVisible.value = false
        })
        .catch((err) => {
            ElMessage.error('配置失败')
        })
}

const previewFileDialogVisible = ref(false)
const readFile = (data: tableItemData) => {
    previewFileDialogVisible.value = true
    getFileData(data.path)
}
const closePreviewFileDialog = () => {
    previewTreeData.value = []
    previewChartData = []
    selectPreviewTree = []
    curSeries = []
    previewChartInstance && previewChartInstance.clear()
}

const previewTreeLoading = ref(false)
const previewTreeRef = ref<TreeInstance>()
const previewTreeData = ref()
let originPreviewTreeData: any = []
const previewTreeProps = {
    children: 'children',
    label: 'label',
    isLeaf: 'isLeaf',
}
const previewSearchTreeVal = ref('')
const previewSearchTree = (val: string) => {
    console.log(val)
    if (val === '') {
        previewTreeData.value = originPreviewTreeData
        return
    }
    const regex = new RegExp(val, 'i')
    const filterData = originPreviewTreeData.filter((item: any) => regex.test(item.label))
    previewTreeData.value = filterData
    nextTick(() => {
        previewTreeRef.value?.setCheckedKeys(selectPreviewTree)
    })
}

let selectPreviewTree: any = []
const handleCheckChange = (data: any, state: boolean) => {
    previewChartInstance && previewChartInstance.clear()
    console.log(data, state)
    if (state) {
        selectPreviewTree.push(data.key)
    } else {
        const index = selectPreviewTree.findIndex((item: string) => item === data.key)
        selectPreviewTree.splice(index, 1)
    }
    initPreviewChart()
}

let previewChartData: any = {}
let curSeries: any = []
let previewChartInstance: any = null
const previewChartRef = ref()

const createSeriresData = () => {
    const seriesData: any = []
    const curAttr = curSeries.map((item: any) => item.name)
    selectPreviewTree.forEach((item: string, index: number) => {
        if (curAttr.includes(item)) {
            seriesData.push(curSeries[index])
        }
    })
    selectPreviewTree.forEach((item: string) => {
        if (!curAttr.includes(item)) {
            const color = '#' + Math.floor(Math.random() * 16777215).toString(16)
            const data = {
                name: item,
                type: 'line',
                barWidth: 20,
                itemStyle: {
                    color: color,
                    barBorderRadius: 2,
                },
                smooth: 0.6,
                symbol: 'none',
                data: previewChartData[item],
            }
            seriesData.push(data)
        }
    })
    curSeries = seriesData
    return seriesData
}
const initPreviewChart = () => {
    const chart = previewChartInstance ?? echarts.init(previewChartRef.value)
    const series = createSeriresData()
    const option = {
        grid: {
            top: 50,
            right: 23,
            bottom: 10,
            left: 18,
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        xAxis: {
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#dadada',
                    width: 1,
                    type: 'solid',
                },
            },
            axisLabel: {
                //x轴文字的配置
                show: true,
                color: '#4E5969',
                interval: 'auto',
                formatter: function (value: any) {
                    return value.slice(0, 10)
                },
                //rotate: 45
            },
            splitLine: {
                //分割线配置
                show: false,
                lineStyle: {
                    color: '#999999',
                },
            },
            data: previewChartData['TimeStamp'],
        },
        yAxis: [
            {
                type: 'value',
                name: '历史值',
                nameTextStyle: {
                    color: '#4E5969',
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#dadada',
                        width: 0,
                        type: 'solid',
                    },
                },
                axisLabel: {
                    //x轴文字的配置
                    show: true,
                    color: '#4E5969',
                },
                axisTick: { show: false },
                splitLine: {
                    interval: 50,
                    lineStyle: {
                        type: 'dashed',
                        color: '#dadada',
                    },
                },
            },
        ],
        legend: {
            data: [],
            textStyle: {
                color: '#73767a',
            },
        },
        series: series,
    }
    chart.setOption(option)
    previewChartInstance = chart
}

const getFileData = (url: string) => {
    previewTreeLoading.value = true
    previewFileReq({
        deviceCode: curTreeData.value.code,
        url: url,
    }).then((res) => {
        previewChartData = res.data
        const attrName = Object.keys(res.data)
        const data: any = []
        attrName.forEach((item) => {
            if (item === 'TimeStamp') {
                previewChartData.TimeStamp = previewChartData.TimeStamp.map((item: any) => {
                    return dayjs(item).format('YYYY-MM-DD HH:mm:ss')
                })
            } else {
                data.push({
                    label: item,
                    key: item,
                    isLeaf: true,
                })
            }
        })
        previewTreeData.value = data
        originPreviewTreeData = data
        previewTreeLoading.value = false
    })
}

onMounted(() => {
    getTreeDataList().then((data: any) => {
        treeRef.value && treeRef.value.setCurrentKey(data.id, true)
        curTreeData.value = data
        getListForAirBlower()
    })
})
</script>

<style lang="scss" scoped>
.malfunction {
    width: 100%;
    height: 100%;
    .container {
        width: 100%;
        height: 100%;
        .aside {
            width: 260px;
            height: 100%;
            padding: 0 20px;
            border-right: 1px solid #eaebed;
            .searchTree {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 80px;
                .el-input {
                    width: 220px;
                    height: 40px;
                }
            }
            .treeMain {
                width: 100%;
                height: calc(100% - 80px);
            }
        }
        .mainContainer {
            width: calc(100% - 260px);
            height: 100%;
            .header {
                display: flex;
                align-items: center;
                width: 100%;
                height: 80px;
                .searchFileName {
                    display: flex;
                    align-items: center;
                    width: 320px;
                    height: 40px;
                    span {
                        width: 70px;
                    }
                    .el-input {
                        width: 220px;
                        height: 40px;
                    }
                }
                .searchDate {
                    display: flex;
                    align-items: center;
                    width: 400px;
                    height: 40px;
                    span {
                        flex-shrink: 0;
                        width: 45px;
                    }
                    :deep(.el-date-editor) {
                        width: 400px;
                        height: 40px;
                    }
                }
                .btnPart {
                    margin-left: auto;
                    width: 360px;
                    text-align: right;
                    .el-button {
                        margin: 0 10px;
                        width: 100px;
                        height: 40px;
                    }
                }
            }
            .main {
                width: 100%;
            }
        }
        .footer {
            .footerPart {
                display: flex;
                justify-content: right;
            }
        }
    }
}
.el-input-number {
    width: 100%;
}
.previewFilePart {
    width: 100%;
    height: 500px;
    .colPart {
        width: 100%;
        height: 100%;
        .title {
            padding-left: 20px;
            width: 100%;
            height: 30px;
            font-size: 20px;
        }
        .previewSearchTree {
            width: 100%;
            height: 40px;
            padding: 0 20px 10px 20px;
        }
        .previewTreeScrollbar {
            height: calc(100% - 40px);
        }
        .chartPart {
            position: relative;
            width: 100%;
            height: calc(100% - 40px);
            .label {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100px;
                font-size: 20px;
            }
            .previewChart {
                width: 100%;
                height: 100%;
            }
        }
    }
    .leftCol {
        border-right: 1px solid #eaebed;
    }
}
</style>
