<template>
    <div>
        <modulen :loading="loading" :error="error">
            <template #title>机电巡检总数</template>
            <template #end>
                <dateSwitcher :selectTime="3"
                    :showAll="true"
                    @change="getChartDataByBtn"></dateSwitcher>
            </template>
            <template v-if="!loading">
                <piePoll style="width: 100%; height: 160px;margin-top: 10px;" :chartData="pollingCharts"></piePoll>
            </template>
        </modulen>
        <modulen :loading="loading" :error="error">
            <template #title>故障统计</template>
            <template #end>
                <dateSwitcher :selectTime="3"
                    @change="getChartDataByBtnTwo"></dateSwitcher>
            </template>             
            <template v-if="!loading">
                <div class="w-full">
                    <div class="dis-flow" style="width: 100%;">
                        <div class="top-flow-wrapper">
                            <div class="number-box" v-for="(item, index) in numList.dataList" :key="index"
                                @click="openWindow(item)">
                                <span class="amount">{{ item.amount }}</span>
                                <span class="text">{{ item.text }}</span>
                            </div>
                        </div>
                    </div>
                    <Flow :flowList="flowList.dataList" />
                </div>


            </template>
        </modulen>
        <modulen :loading="loading" :error="error" class="faultAnalysis">
            <template #title>故障分析</template>
            <template #end >
                                <dateSwitcher :selectTime="3"
                    @change="getChartDataByBtnThree"></dateSwitcher>
                <div class="type-select">

                    <el-select
                        v-model="selection"
                        placeholder="设备系统"
                        style="width: 100px;"
                        @change="setData"
                        class="road-select"
                        size="mini"
                        :popper-append-to-body="false"
                    >
                        <el-option
                            v-for="(item, index) in dataOptions.valueList"
                            :key="index"
                            :label="item.text"
                            :value="item.value"
                        ></el-option>
                    </el-select>  
                </div>
                  
            </template>            
            <template v-if="!loading">
                <div class="analysis h-full">
                    <div class="analysisCenter">
                        <div class="analysisData">
                            <span class="totalNum">{{ dataConfig.sum }}</span>
                            <span class="totalName">总数量</span>
                        </div>

                        <div class="analysisItem" :class="`item${index + 1}${
                            dataConfig.dataList.length === 3 ? ' dataList3' : ''
                        }`" v-for="(item, index) in dataConfig.dataList" :key="index" @click="jumpTo(item)">
                            <span class="marker" v-if="[1, 2, 6].includes(index + 1)">
                                <span class="bg"></span>
                            </span>
                            <div class="text">
                                {{ `${item.name}：${item.value} ` }}
                            </div>
                            <span class="marker" v-if="[3, 5, 4].includes(index + 1)">
                                <span class="bg"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </template>

            <!-- <Flow :flowList="flowList" /> -->
        </modulen>
    </div>

</template>
<script lang="ts" setup>
import { computed, watch, nextTick, reactive, ref } from "vue";
import moment from "moment";
import {
    checkTaskData,
    faultTotalData,
    faultMapData
} from '@/api/ele-control-cabin'
import imageInner from '@/views/electromechanicalMange/assets/chart-inner.png'
import piePoll from '../Echarts/ePiePoll.vue'
import Flow from './flow.vue'
import dateSwitcher from './switcher.vue' 
import { useStore } from "vuex";
import { key } from "@/store";
const store = useStore(key);
import { generateKey } from "@/api/operation";

const pollingCharts = reactive({})
const charts1Option = reactive({})
const charts2Option = reactive({})
const charts3Option = reactive({})
const charts4Option = reactive({})
const numList = reactive({
    dataList: []
})
numList.dataList = [
    {
        amount: 0,
        text: '故障上报',
        path: '#/electromechanical/malfunction',
        value: '0'
    },
    // {
    //     amount: 0,
    //     text: '故障派发',
    //     path: '#/electromechanical/malfunction',
    //     value: '2'
    // },
    // {
    //     amount: 0,
    //     text: '故障维修',
    //     path: '#/electromechanical/malfunction',
    //     value: '3'
    // },
    {
        amount: 0,
        text: '故障完成',
        path: '#/electromechanical/malfunction',
        value: 5
    },
    // {
    //     amount: 0,
    //     text: '故障误报',
    //     path: '#/electromechanical/malfunction',
    //     value: 6
    // },
    {
        amount: 0,
        text: '故障未完成',
        path: '#/electromechanical/malfunction',
        value: 3 
    }
]
const flowList = reactive({
    dataList: []
})
flowList.dataList = [
    {
        title: '上报故障',
        data: [
            {
                subtitle: '今日上报新增',
                amount: 0
            },
            {
                subtitle: '误报故障',
                amount: 0
            }
        ]
    },
    {
        title: '派发任务故障',
        data: [
            {
                subtitle: '今日派发新增',
                amount: 0
            },
            {
                subtitle: '当前待受理',
                amount: 0
            }
        ]
    },
    {
        title: '维修故障',
        data: [
            {
                subtitle: '今日维修新增',
                amount: 0
            },
            {
                subtitle: '当前维修中',
                amount: 0
            }
        ]
    },
    {
        title: '验收故障',
        data: [
            {
                subtitle: '今日验收新增',
                amount: 0
            },
            {
                subtitle: '当前验收中',
                amount: 0
            }
        ]
    }
]
const colorArr = ['#2D82F7', '#D59035', '#58B8C6', '#D59035', '#E1A18E', '#6AD5CA']
const selection = ref('1')
const dataOptions = reactive({
    valueList: [
        {
            text: '故障等级',
            value: '1'
        },
        {
            text: '故障来源',
            value: '2'
        },
        {
            text: '故障所属系统',
            value: '3'
        },
        {
            text: '故障所在位置',
            value: '4'
        }
    ]
})
const dataConfig = reactive({
    sum: 0,
    dataLis: []
})
const refresh = computed(() => store.state.ele?.refresh);
const currentTime = computed(() => store.state.ele?.currentTime);
const orgCode = computed(() => store.state.ele?.orgCode);
const orgType = computed(() => store.state.ele?.orgType);
const pOrg = computed(() => store.state.ele?.pOrg);

watch([refresh], () => {
    initData(currentTime.value)
})
const initData = (time: any) => {
    getCheckTaskData(time)
    getfaultTotalData(time)
    getfaultMapData(time)
}
const openWindow = (item: any) => {
    if (item.text === '故障派发' || item.text === '故障维修') {
        return
    } 
    generateKey().then((res) => {
        window.open(`http://183.64.175.153:8891/?tokenKey=${res.data}${item.path}?type=${item.value}`);
      });

}
const jumpTo=(item:any)=>{
    if(!item.key)return
    generateKey().then((res) => {
        console.log(item)
        window.open(`http://183.64.175.153:8891/?tokenKey=${res.data}${item.path}?${item.key}=${item.keyValue}`);
      });
}
// 机电巡检年月日
const getChartDataByBtn = (params: any) => {
    getCheckTaskData(params)
}
// 机电故障年月日
const getChartDataByBtnTwo = (params: any) => {
    getfaultTotalData(params)
}
// 机电故障年月日
const getChartDataByBtnThree = (params: any) => {
    getfaultMapData(params)
}
//机电巡检api
const getCheckTaskData = (year: any) => {
    console.log(year)
    let params = {}
    if (orgType.value) {
        params = pOrg.value
    } else {
        params = orgCode.value
    }
    year
    checkTaskData({
        year: year,
        ...params
    }).then(res => {
        if (res.data) {
            Object.assign(pollingCharts, handleChartData(res.data || []))
        }
    })
}
//故障分析
const getfaultMapData = (year: any) => {

    let nodedata = {
        oneFaultNum: 8,
        twoFaultNum: 5,
        threeFaultNum: 0,
        dataFromNum1: 0,
        dataFromNum2: 13,
        typeDataVos: [
            {
                text: '供配电系统',
                value: 0
            },
            {
                text: '通信系统',
                value: 0
            },
            {
                text: '收费系统',
                value: 0
            },
            {
                text: '隧道系统',
                value: 0
            },
            {
                text: '监控系统',
                value: 7
            },
            {
                text: '其他',
                value: 6
            }
        ],
        unitDataVos: [
            {
                text: '第一管理中心',
                value: 5
            },
            {
                text: '第二管理中心',
                value: 4
            },
            {
                text: '第三管理中心',
                value: 2
            },
            {
                text: '第四管理中心',
                value: 2
            },
            {
                text: '第五管理中心',
                value: 0
            },
            {
                text: '第六管理中心',
                value: 0
            }
        ]
    }
    let params = {}
    if (orgType.value) {
        params = pOrg.value
    } else {
        params = orgCode.value
    }
    faultMapData({
        year: year,
        ...params
    }).then(res => {
        if (res.data) {
            Object.assign(charts2Option, handleCharts2(res.data))

            Object.assign(charts1Option, handleCharts1(res.data, charts2Option.sum))

            Object.assign(charts3Option, handleCharts3(res.data, charts2Option.sum))

            Object.assign(charts4Option, handleCharts4(res.data))
            selection.value = '1'
            setData()
        }
    })
}
const setData = () => {
    if (selection.value === '1') {
        Object.assign(dataConfig, { ...charts1Option })
    } else if (selection.value === '2') {
        Object.assign(dataConfig, { ...charts2Option })

    } else if (selection.value === '3') {
        Object.assign(dataConfig, { ...charts3Option })

    } else if (selection.value === '4') {
        Object.assign(dataConfig, { ...charts4Option })

    }
}
const handleCharts1 = (data: any, total: any) => {
    let legendArr = ['一级故障', '二级故障', '三级故障', '其他']
    const valueList=[31,32,33]
    let seriesData = []
    let sum = 0
    let dataList = [];
    ['oneFaultNum', 'twoFaultNum', 'threeFaultNum'].map((item, index) => {
        sum += data[item] || 0
        seriesData.push({
            value: data[item] || 0,
            name: legendArr[index],
            itemStyle: {
                color: colorArr[index],
                borderWidth: 4,
                borderRadius: 50,
                borderColor: '#0c1622'
            }
        })
        dataList.push({
            value: data[item] || 0,
            name: legendArr[index],
            path: '#/electromechanical/malfunction',
            key:'faultLevel',
            keyValue:valueList[index]
        })
    })
    seriesData.push({
        value: total - sum,
        name: '其他',
        itemStyle: {
            color: colorArr[4],
            borderWidth: 4,
            borderRadius: 50,
            borderColor: '#0c1622'
        }
    })

    dataList.push({
        value: total - sum,
        name: '其他',
        path: '#/electromechanical/malfunction',
            key:'faultLevel',
            keyValue:'100'
    })
    return {
        legendArr,
        sum: total,
        dataList: dataList,
        seriesData
    }
}
const handleCharts2 = (data: any) => {
    let legendArr = ['巡检上报', '直接上报', '监控上报']
    const valueList=[2,2,3]
    let seriesData: any = []
    let sum = 0
    let dataList: any = [];
    ['dataFromNum1', 'dataFromNum2', 'dataFromNum3'].map((item, index) => {
        sum += data[item] || 0
        dataList.push({
            value: data[item] || 0,
            name: legendArr[index],
            path: '#/electromechanical/malfunction',
            key:'dataFrom',
            keyValue:valueList[index]
        })
        seriesData.push({
            value: data[item] || 0,
            name: legendArr[index],
            itemStyle: {
                color: colorArr[index],
                borderWidth: 4,
                borderRadius: 50,
                borderColor: '#0c1622'
            }
        })
    })
    return {
        dataList: dataList,
        legendArr,
        sum,
        seriesData
    }
}
const handleCharts3 = (data: any, total: any) => {
    let legendArr = []
    let seriesData = []
    let sum = 0
    let dataList = []
    let nodatatypeDataVos = []
    if (data.typeDataVos.length !== 0) {
        nodatatypeDataVos = data.typeDataVos
    } else {
        nodatatypeDataVos = [
            {
                text: '',
                value: 0
            }
        ]
    }
    nodatatypeDataVos.map((item: any, index: any) => {
        dataList.push({
            value: item.value || 0,
            name: item.text || '',
            // path: '#/electromechanical/malfunction',
            // key:'eqType',
            // keyValue:item.text
        })
        legendArr.push(item.text || '')
        sum += item.value || 0
        seriesData.push({
            value: item.value || 0,
            name: item.text || '',
            itemStyle: {
                color: colorArr[index],
                borderWidth: 4,
                borderRadius: 50,
                borderColor: '#0c1622'
            }
        })
    })
    legendArr.push('其他')
    seriesData.push({
        value: total - sum,
        name: '其他',
        itemStyle: {
            color: colorArr[6],
            borderWidth: 4,
            borderRadius: 50,
            borderColor: '#0c1622'
        }
    })
    dataList.push({
        value: total - sum,
        name: '其他'
    })
    return {
        legendArr,
        sum: total,
        seriesData,
        dataList: dataList
    }
}
const handleCharts4 = (data: any) => {
    let legendArr: any = []
    let seriesData: any = []
    let sum = 0
    let dataList: any = []

    let nodataunitDataVos = []
    if (data.unitDataVos.length !== 0) {
        nodataunitDataVos = data.unitDataVos
    } else {
        nodataunitDataVos = [
            {
                text: '',
                value: 0
            }
        ]
    }
    nodataunitDataVos.map((item: any, index: any) => {
        dataList.push({
            value: item.value || 0,
            name: item.text || ''
        })
        legendArr.push(item.text || '')
        sum += item.value || 0
        seriesData.push({
            value: item.value || 0,
            name: item.text || '',
            itemStyle: {
                color: colorArr[index],
                borderWidth: 4,
                borderRadius: 50,
                borderColor: '#0c1622'
            }
        })
    })

    return {
        dataList: dataList,
        legendArr,
        sum,
        seriesData
    }
}

//机电巡检格式处理
const handleChartData = (data: any) => {
    let legendArr: any = []
    let sum = 0
    let styleData: any = []
    let legendData = data
    data.map((item: any, index: any) => {
        sum += item.value || 0
        legendArr.push(item.text)
        styleData.push({
            value: item.value || 0,
            name: item.text,
            itemStyle: {
                color: ['#2D82F7', '#D59035', '#58B8C6', '#727FF7', '#D95F5F'][index],
                borderWidth: 4,
                borderRadius: 50,
                borderColor: '#0c1622'
            }
        })
    })
    return {
        legendArr,
        sum,
        styleData,
        orgCode,
        legendData
    }
}
// 机电统计
const getfaultTotalData = (year: any) => {
    let params = {}
    if (!orgCode.value) {
        return
    }
    params = orgCode.value
    faultTotalData({
        year: year,
        ...orgCode.value
    }).then(res => {
        if (res.data) {
            [
                'faultPushNum',
                // 'faultTaskNum',
                // 'faultMaintNum',
                'faultFinishNum',
                // 'faultMisNum',
                'faultUnFinishNum'
            ].map((item, index) => {
                numList.dataList[index].amount = res.data[item]
            })
            const multData = [
                ['todayPushNum', 'misNum'],
                ['todayTaskNum', 'waitTaskNum'],
                ['todayMaintNum', 'waitMaintNum'],
                ['todayAcceptNum', 'waitAcceptNum']
            ]
            multData.map((item, index) => {
                const target = numList.dataList[index]
                item.map((iitem, iindex) => {
                    flowList.dataList[index].data[iindex].amount = res.data[iitem]
                })
            })
        }
    })
}
</script>

  
<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";

::v-deep .module-content {
    z-index: 0;
}
.faultAnalysis{
    height: vh(335);
    ::v-deep(input::placeholder) {
    color: #94c2e2;
    font-size: 12px;
  }
}

.type-select {
  ::v-deep(input::placeholder) {
    color: #94c2e2;
    font-size: 12px;
  }

  ::v-deep(.el-input__inner) {
    color: #3DA5FF;
    font-size: 12px;
    background-color: rgba(73, 153, 255, 0.1);
    border: 1px solid rgba(73, 153, 255, 0.35);
    border-radius: 2px;
    height: 18px;
    line-height: 18px;
    padding-left: 7px;
    padding-right: 20px;
  }
 
  ::v-deep(.el-input--mini) {
    line-height: 20px;
  }

  ::v-deep(.el-input__icon) {
    width: 16px;
    height: 20px;
    line-height: 20px;
  }

  ::v-deep(.el-select__popper.el-popper) {
    background: rgba(5, 15, 45, 0.7);
    color: white;
  }
}
.top-flow-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;

    .number-box {
        width: 80px;
        height: 60px;
        text-align: center;
        cursor: pointer;
        background: url('@/views/electromechanicalMange/assets/top-flow.png') no-repeat;
        background-size: 100%;
        flex: 1;

        &:hover {
            width: 80px;
            height: 60px;
            text-align: center;
            cursor: pointer;
            background: url('@/views/electromechanicalMange/assets/top-flowHover.png') no-repeat;
            background-size: 100%;
        }

        span {
            display: block;
        }

        .amount {
            font-size: 20px;
            color: #1afbfe;
        }

        .text {
            margin-top: -4px;
            font-size: 12px;
        }
    }
}

.analysis {
    // display: grid;
    // grid-template-columns: 1fr 1fr;
    // grid-template-rows: 1fr 1fr;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: vw(123);
    margin-top: 10px;
}

.analy-box {
    flex: 0 0 45%;
}

.text-light {
    width: 90px;
    text-align: center;
}

.analysisCenter {
    position: relative;
    display: flex;
    width: vw(212);
    height: vh(212);
    background: url('@/views/electromechanicalMange/assets/analysisCenter.png') no-repeat;
    background-size: 95% 100%;
    justify-content: center;
    align-content: center;
    margin-top:-50px;
    .analysisData {
        display: flex;
        margin-left: -10px;
        text-align: center;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: center;

        .totalNum {
            font-size: 34px;
            font-weight: bold;
            color: #fff;
        }

        .totalName {
            font-size: 16px;
            font-weight: 500;
            color: #fff;
        }
    }

    .analysisItem {
        position: absolute;
        display: flex;
        width: max-content;
        height: 40px;
        font-size: 12px;
        font-weight: 500;
        line-height: 42px;
        border-radius: 20px;
        box-shadow: inset 0 0 10px #61cad9;
        align-items: center;
        cursor: pointer;
        .text {
            margin: 10px;
        }

        .marker {
            display: inline-block;
            display: flex;
            width: 36px;
            height: 36px;
            margin: 0 3px;
            border: 2px solid #2f89ff;
            border-radius: 50%;
            box-shadow: inset 0 0 20px #61cad9;
            align-items: center;
            justify-content: center;

            .bg {
                display: inline-block;
                width: 17px;
                height: 17px;
                background: url('@/views/electromechanicalMange/assets/mark.png') no-repeat;
                background-size: 100% 100%;
            }
        }
    }

    .item1 {
        top: vh(10);
        right:vw(-88);
        box-shadow: inset 0 0 10px rgba(47, 137, 255, 1);

        .marker {
            border: 2px solid rgba(47, 137, 255, 1);
            box-shadow: inset 0 0 20px rgba(47, 137, 255, 1);
        }
    }

    .item2 {
        right: vw(-88);
        bottom: 10px;
        box-shadow: inset 0 0 10px rgba(228, 122, 75, 1);

        .marker {
            border: 2px solid rgba(228, 122, 75, 1);
            box-shadow: inset 0 0 20px rgba(228, 122, 75, 1);
        }
    }

    .item5 {
        right:vw(175);
        bottom:vh( 82);
        box-shadow: inset 0 0 10px rgba(97, 202, 217, 1);

        .marker {
            border: 2px solid rgba(97, 202, 217, 1);
            box-shadow: inset 0 0 20px rgba(97, 202, 217, 1);
        }
    }

    .item6 {
        bottom:vh(82);
        left: vw(175);
        box-shadow: inset 0 0 10px rgba(126, 218, 126, 1);

        .marker {
            border: 2px solid rgba(126, 218, 126, 1);
            box-shadow: inset 0 0 20px rgba(126, 218, 126, 1);
        }
    }

    .item3 {
        bottom: 10px;
        left: vw(-70);
        box-shadow: inset 0 0 10px rgba(197, 136, 52, 1);

        .marker {
            border: 2px solid rgba(197, 136, 52, 1);
            box-shadow: inset 0 0 20px rgba(197, 136, 52, 1);
        }
    }

    .dataList3.item3 {
        bottom: vh(82);
        left: vw(-115);
    }

    .item4 {
        top: 10px;
        left:vw(-70);
        box-shadow: inset 0 0 10px rgba(114, 127, 247, 1);

        .marker {
            border: 2px solid rgba(114, 127, 247, 1);
            box-shadow: inset 0 0 20px rgba(114, 127, 247, 1);
        }
    }
}

</style>
  