<template>
    <div class="container">

        <div class="left">

            <div class="title-bg">
                <img src="../../assets/img/big_screen_1.png" />
                <div style="color: white;margin-left: 10px;">基本信息</div>
            </div>

            <div class="left_content">

                <div style="display: flex;">
                    <div style="flex: 1;">
                        <div class="key">
                            设备名称
                        </div>

                        <div class="value" style="margin-top: 10px;">
                            {{ deviceInfo.deviceName }}
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="key">
                            型号
                        </div>

                        <div class="value" style="margin-top: 10px;">
                            {{ deviceInfo.model }}
                        </div>
                    </div>

                </div>


                <div style="display: flex;margin-top: 20px;">
                    <div style="flex: 1;">
                        <div class="key">
                            出厂编号
                        </div>

                        <div class="value" style="margin-top: 10px;">
                            {{ deviceInfo.productNo }}
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="key">
                            出厂日期
                        </div>

                        <div class="value" style="margin-top: 10px;">
                            {{ filterTimeY_M_D(deviceInfo.factoryDate) }}
                        </div>
                    </div>

                </div>

                <div style="background: #0B4E81;width: 100%;height: 1px;margin: 25px 0;"></div>



                <div style="display: flex;">
                    <div style="flex: 1;">
                        <div class="key">
                            检验日期
                        </div>

                        <div class="value" style="margin-top: 10px;">
                            {{ filterTimeY_M_D(deviceInfo.inspectionTime) }}
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="key">
                            下次检验日期
                        </div>

                        <div class="value" style="margin-top: 10px;">
                            {{ filterTimeY_M_D(deviceInfo.nextInspectionTime) }}
                        </div>
                    </div>

                </div>



                <div style="display: flex;margin-top: 20px;">
                    <div style="flex: 1;">
                        <div class="key">
                            设备注册号
                        </div>

                        <div class="value" style="margin-top: 10px;">
                            {{ deviceInfo.registrationNo }}
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="key">
                            使用证编号
                        </div>

                        <div class="value" style="margin-top: 10px;">
                            {{ deviceInfo.useCertificateNo }}
                        </div>
                    </div>

                </div>

                <div style="display: flex;margin-top: 20px;">
                    <div style="flex: 1;">
                        <div class="key">
                            发证日期
                        </div>

                        <div class="value" style="margin-top: 10px;">
                            {{ filterTimeY_M_D(deviceInfo.certificateIssueDate) }}
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="key">
                            备注
                        </div>

                        <div class="value" style="margin-top: 10px;">
                            {{ deviceInfo.remarks }}
                        </div>
                    </div>

                </div>

                <div style="background: #0B4E81;width: 100%;height: 1px;margin: 25px 0;"></div>




                <div>
                    <div class="key">
                        制造单位
                    </div>

                    <div class="value" style="margin-top: 10px;">
                        {{ deviceInfo.manufacturer }}
                    </div>
                </div>


                <div style="margin-top: 25px;">
                    <div class="key">
                        使用部门
                    </div>

                    <div class="value" style="margin-top: 10px;">
                        {{ deviceInfo.companyName }}
                    </div>
                </div>


                <div style="margin-top: 25px;">
                    <div class="key">
                        所在位置
                    </div>

                    <div class="value" style="margin-top: 10px;">
                        {{ deviceInfo.address }}
                    </div>
                </div>


            </div>


        </div>

        <div class="middle">

            <div class="middle_content">

                <div class="middle_left">

                    <div style="display: flex;align-items: center;height: 40px;">
                        <img src="../../assets/img/big_screen_1.png" />
                        <div style="display: flex;margin-left: 20px;">
                            <template v-for="(item, index) in alarmMenuArr">
                                <div :class="['tab_text', alarmMenuIndex == index ? 'active' : '']"
                                    @click="alarmMenuClick(index)">
                                    {{ item }}</div>
                            </template>
                        </div>
                    </div>

                    <div style="width: 100%;height: calc(100% - 40px);" ref="alarmLineChartRef"></div>

                </div>


                <div class="middle_right">
                    <div style="width: 100%;height: calc(100% - 20px);" ref="alarmPieChartRef"></div>
                </div>

            </div>

            <div style="height: 30px;"></div>

            <div class="middle_content">
                <div class="middle_left">
                    <div style="display: flex;align-items: center;height: 40px;">
                        <img src="../../assets/img/big_screen_1.png" />
                        <div style="display: flex;margin-left: 20px;">
                            <template v-for="(item, index) in maintainMenuArr">
                                <div :class="['tab_text', maintainMenuIndex == index ? 'active' : '']"
                                    @click="maintainMenuClick(index)">
                                    {{ item }}</div>
                            </template>
                        </div>
                    </div>

                    <div style="width: 100%;height: calc(100% - 40px);" ref="maintainLineChartRef"></div>
                </div>


                <div class="middle_right">
                    <div style="width: 100%;height: calc(100% - 20px);" ref="maintainPieChartRef"></div>
                </div>
            </div>

        </div>



        <div class="right">

            <div class="right_content">
                <div class="title-bg">
                    <img src="../../assets/img/big_screen_1.png" />
                    <div style="color: white;margin-left: 10px;">维修保养记录</div>
                </div>

                <div style="height: 12px;"></div>

                <div class="right_content_list">

                    <div class="maintain_record_title">
                        <div class="text">类别</div>
                        <div class="text">派单时间</div>
                        <div class="text">完成时间</div>
                        <div class="text">维修员</div>
                        <div class="text">状态</div>
                    </div>


                    <div class="maintain_record_list">
                        <div style="display: flex;flex-direction: column;align-items: center;"
                            v-if="repairRecord.length == 0">
                            <img style="width: 170px; height: 170px;" src="../../assets/img/big_screen_no_alarm_.png" />
                            <div style="color: white;font-size: 13px;margin-top: 10px;">暂无数据记录</div>
                        </div>
                        <vue3-seamless-scroll :list="repairRecord" :step="0.3" :hover="true">
                            <template v-for="item in repairRecord">
                                <div class="maintain_record_item">
                                    <div style="width: calc(100% / 5)">
                                        <div class="shape_trapezium" :class="{ 'maintain': item.type == 2 }">{{
                                            item.typeFormat
                                        }}
                                        </div>
                                    </div>

                                    <div style="color: white;font-size: 14px;width: calc(100% / 5);text-align: center;">{{
                                        item.assignTime }}
                                    </div>

                                    <div style="color: white;font-size: 14px;width: calc(100% / 5);text-align: center;">{{
                                        item.completeTime }}
                                    </div>

                                    <div style="color: white;font-size: 14px;width: calc(100% / 5);text-align: center;">{{
                                        item.repairer }}
                                    </div>

                                    <div :class="['maintain_state', item.state == 5 ? 'active' : '']">{{ item.stateFormat }}
                                    </div>

                                </div>
                            </template>
                        </vue3-seamless-scroll>
                    </div>
                </div>

            </div>

            <div style="height: 20px;"></div>
            <div class="right_content">
                <div class="title-bg">
                    <img src="../../assets/img/big_screen_1.png" />
                    <div style="color: white;margin-left: 10px;">工作寿命</div>
                </div>

                <div style="height: 12px;"></div>

                <div class="right_content_list">

                    <div class="life_list" style="margin-top: 20px;">

                        <div style="display: flex;flex-direction: column;align-items: center;"
                            v-if="repairRecord.length == 0">
                            <img style="width: 170px; height: 170px;" src="../../assets/img/big_screen_no_alarm_.png" />
                            <div style="color: white;font-size: 13px;margin-top: 10px;">暂无数据记录</div>
                        </div>

                        <vue3-seamless-scroll :list="lifeRecord" :step="0.3" :hover="true">
                            <template v-for="item in lifeRecord">
                                <div class="life_item">
                                    <div class="name">{{ item.name }}</div>

                                    <el-progress style="width: 40%;" :stroke-width="10" :show-text="false" type="line"
                                        :color="progressColor(item.scale)" :percentage="item.scale" />

                                    <div class="value" :style="{ color: progressColor(item.scale) }">{{ item.description }}
                                    </div>

                                </div>
                            </template>
                        </vue3-seamless-scroll>
                    </div>

                </div>
            </div>

        </div>


    </div>
</template>

<script setup lang="ts">

import { getDeviceAlarmChart, getDeviceInfo, getDeviceLifeRecord, getDeviceRepairChart, getDeviceRepairRecord } from '@/api/bigScreen';
import { filterTimeY_M_D } from '@/utils/dateUtil'
import * as echarts from 'echarts'

const props = defineProps({
    deviceId: {
        type: Number,
        default: 0
    },

})


const alarmLineChartRef: any = ref(null)
const alarmLineChart: any = markRaw({ value: null })
const alarmPieChartRef: any = ref(null)
const alarmPieChart: any = markRaw({ value: null })


const maintainLineChartRef: any = ref(null)
const maintainLineChart: any = markRaw({ value: null })
const maintainPieChartRef: any = ref(null)
const maintainPieChart: any = markRaw({ value: null })

const alarmMenuArr = ['本年报警', '本月报警']
const alarmMenuIndex = ref(0)
const maintainMenuArr = ['本年维护', '本月维护']
const maintainMenuIndex = ref(0)

const deviceId = ref(0)
const deviceInfo: any = ref({})
const alarmData: any = ref(null)
const currentAlarmData: any = ref(null)

const repairData: any = ref(null)
const currentRepairData: any = ref(null)



const alarmMenuClick = (index: number) => {
    alarmMenuIndex.value = index
    if (alarmData.value == null) {
        return
    }
    if (index == 0) {
        currentAlarmData.value = alarmData.value.year
    } else {
        currentAlarmData.value = alarmData.value.month
    }

    alarmLineOption.xAxis.data = currentAlarmData.value.line.map((item: any) => item.key)
    alarmLineOption.series[0].data = currentAlarmData.value.line.map((item: any) => item.value)
    const aMax = Math.max(...alarmLineOption.series[0].data)
    alarmLineOption.yAxis.max = aMax == 0 ? aMax + 5 : Math.ceil(aMax * 1.4)
    alarmLineChart.value.setOption(alarmLineOption)

    alarmPieOption.series[0].data = currentAlarmData.value.pie.datas
    alarmPieChart.value.setOption(alarmPieOption)
}

const maintainMenuClick = (index: number) => {
    maintainMenuIndex.value = index
    if (repairData.value == null) {
        return
    }
    if (index == 0) {
        currentRepairData.value = repairData.value.year
    } else {
        currentRepairData.value = repairData.value.month
    }

    maintainLineOption.xAxis.data = currentRepairData.value.line.map((item: any) => item.key)
    maintainLineOption.series[0].data = currentRepairData.value.line.map((item: any) => item.value)
    const aMax = Math.max(...maintainLineOption.series[0].data)
    maintainLineOption.yAxis.max = aMax == 0 ? aMax + 5 : Math.ceil(aMax * 1.4)
    maintainLineChart.value.setOption(maintainLineOption)

    maintainPieOption.series[0].data = currentRepairData.value.pie.datas
    maintainPieChart.value.setOption(maintainPieOption)
}

const progressColor = (percentage: any) => {
    if (percentage <= 5) {
        return '#FD4142';
    } else if (percentage > 5 && percentage <= 10) {
        return '#FC7E03';
    } else {
        return '#57FDF3';
    }
}


const repairRecord: any = ref([])

const lifeRecord: any = ref([])
const chartTimer: any = ref('')

onMounted(async () => {
    deviceId.value = props.deviceId

    alarmLineChart.value = echarts.init(alarmLineChartRef.value)
    alarmPieChart.value = echarts.init(alarmPieChartRef.value)

    maintainLineChart.value = echarts.init(maintainLineChartRef.value)
    maintainPieChart.value = echarts.init(maintainPieChartRef.value)


    getDeviceInfoFun()
    getDeviceAlarmFun()
    getDeviceRepairFun()
    getDeviceRepairRecordFun()
    getDeviceLifeRecordFun()

    chartTimer.value = setInterval(() => {
        if (alarmData.value != null) {
            let a = alarmMenuIndex.value
            let b = a + 1
            let c = b == 2 ? 0 : b
            alarmMenuClick(c)
        }

        if (repairData.value != null) {
            let a = maintainMenuIndex.value
            let b = a + 1
            let c = b == 2 ? 0 : b
            maintainMenuClick(c)
        }
    }, 1000 * 10)

    window.addEventListener('resize', () => {
        alarmLineChart.value.resize()
        alarmPieChart.value.resize()
        maintainLineChart.value.resize()
        maintainPieChart.value.resize()
    })
})


const getDeviceInfoFun = async () => {
    deviceInfo.value = await getDeviceInfo({ deviceId: deviceId.value })
}

const getDeviceAlarmFun = async () => {
    alarmData.value = await getDeviceAlarmChart({ deviceId: deviceId.value })
    currentAlarmData.value = alarmData.value.year

    alarmLineOption.xAxis.data = currentAlarmData.value.line.map((item: any) => item.key)
    alarmLineOption.series[0].data = currentAlarmData.value.line.map((item: any) => item.value)
    const aMax = Math.max(...alarmLineOption.series[0].data)
    alarmLineOption.yAxis.max = aMax == 0 ? aMax + 5 : Math.ceil(aMax * 1.4)
    alarmLineChart.value.setOption(alarmLineOption)

    alarmPieOption.series[0].data = currentAlarmData.value.pie.datas
    alarmPieChart.value.setOption(alarmPieOption)

}


const getDeviceRepairFun = async () => {

    repairData.value = await getDeviceRepairChart({ deviceId: deviceId.value })
    currentRepairData.value = repairData.value.year

    maintainLineOption.xAxis.data = currentRepairData.value.line.map((item: any) => item.key)
    maintainLineOption.series[0].data = currentRepairData.value.line.map((item: any) => item.value)
    const aMax = Math.max(...maintainLineOption.series[0].data)
    maintainLineOption.yAxis.max = aMax == 0 ? aMax + 5 : Math.ceil(aMax * 1.4)
    maintainLineChart.value.setOption(maintainLineOption)

    maintainPieOption.series[0].data = currentRepairData.value.pie.datas
    maintainPieChart.value.setOption(maintainPieOption)
}


const getDeviceRepairRecordFun = async () => {
    repairRecord.value = await getDeviceRepairRecord({ deviceId: deviceId.value })
}


const getDeviceLifeRecordFun = async () => {
    lifeRecord.value = await getDeviceLifeRecord({ deviceId: deviceId.value })
}


let alarmLineOption = {
    grid: {
        left: '2%', top: '10%', right: '3%', bottom: '2%', containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
            show: false,
        },
        axisTick: { show: false },
        splitLine: {
            show: false,
        },
        axisLabel: {
            color: 'rgba(87, 253, 243, 0.2)',
            fontSize: 12
        },
        data: ['1', '2', '3']
    },
    yAxis: {
        max: 5,
        type: 'value',
        splitLine: {
            lineStyle: {
                color: 'rgba(87, 253, 243, 0.2)'
            }
        },
        axisLabel: {
            color: 'rgba(87, 253, 243, 0.2)',
            fontSize: 12
        },
        axisTick: { show: false },
    },
    series: [{
        data: [0, 20, 60],
        type: 'line',
        color: '#57FDF3',
        symbolSize: 6,
        symbol: 'circle',
    }]
};


let alarmPieOption = {
    grid: {
        left: '2%', top: 0, right: '2%', bottom: '2%'
    },
    legend: {
        top: '60%',
        left: '10%',
        orient: 'vertical',
        type: 'scroll',
        textStyle: {
            color: 'white',
            fontSize: 12
        },
        pageIconColor: '#44e6fd',//翻页按钮颜色
        pageIconSize: 12,
        pageButtonItemGap: 1,
        pageTextStyle: {
            color: '#35ffff'
        },
    },
    series: [
        {
            type: 'pie',
            radius: ['25%', '50%'],
            center: ['50%', '30%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderColor: '#023973',
                borderWidth: 3,
                borderRadius: 5,
            },
            label: {
                normal: {
                    show: false,
                },
                emphasis: {//中间文字显示
                    show: false,
                }
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 0, name: '待派单sssssss' },
                { value: 0, name: '待接单' },
                { value: 0, name: '维修中' },
                { value: 0, name: '待审核' }
            ]
        }
    ]
};


let maintainLineOption = {
    grid: {
        left: '2%', top: '10%', right: '2%', bottom: '2%', containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
            show: false,
        },
        axisTick: { show: false },
        splitLine: {
            show: false,
        },
        axisLabel: {
            color: 'rgba(87, 253, 243, 0.2)',
            fontSize: 12
        },
        data: ['1', '2', '3']
    },
    yAxis: {
        max: 5,
        type: 'value',
        splitLine: {
            lineStyle: {
                color: 'rgba(87, 253, 243, 0.2)'
            }
        },
        axisLabel: {
            color: 'rgba(87, 253, 243, 0.2)',
            fontSize: 12
        },
        axisTick: { show: false },
    },
    series: [{
        data: [0, 20, 60],
        type: 'line',
        color: '#57FDF3',
        symbolSize: 6,
        symbol: 'circle',
    }]
};

let maintainPieOption = {
    grid: {
        left: '2%', top: 0, right: '2%', bottom: '2%'
    },
    legend: {
        top: '60%',
        left: '10%',
        orient: 'vertical',
        type: 'scroll',
        textStyle: {
            color: 'white',
            fontSize: 12
        },
        pageIconColor: '#44e6fd',//翻页按钮颜色
        pageIconSize: 12,
        pageButtonItemGap: 1,
        pageTextStyle: {
            color: '#35ffff'
        },
    },
    series: [
        {
            type: 'pie',
            radius: ['25%', '50%'],
            center: ['50%', '30%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderColor: '#023973',
                borderWidth: 3,
                borderRadius: 5,
            },
            label: {
                normal: {
                    show: false,
                },
                emphasis: {//中间文字显示
                    show: false,
                }
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 0, name: '待派单sssssss' },
                { value: 0, name: '待接单' },
                { value: 0, name: '维修中' },
                { value: 0, name: '待审核' },
                { value: 0, name: '2' },
                { value: 0, name: '3' },
                { value: 0, name: '4' },
                { value: 0, name: '5' },
            ]
        }
    ]
};


onUnmounted(() => {
    clearInterval(chartTimer.value)
})

</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
}

.left {
    width: 25%;
    height: calc(100% - 120px);
    display: flex;
    flex-direction: column;
    padding: 0 15px 0 50px;
}

.key {
    color: #9BAEC4;
    font-size: 16px;
}

.value {
    color: white;
    font-size: 16px;
}


.middle {
    width: 46%;
    height: calc(100% - 120px);
    display: flex;
    flex-direction: column;
    padding: 0 15px 0 15px;
}

.right {
    width: 29%;
    height: calc(100% - 120px);
    display: flex;
    flex-direction: column;
    padding: 0 50px 0 15px;
}



.title-bg {
    width: 100%;
    height: 40px;
    display: flex;
    background-image: url(../../assets/img/big_screen_real_data_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    align-items: center;
    padding: 0 20px;
}

.left_content {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    margin-top: 12px;
    background: #032C5B;
    padding: 20px;

}


.middle_content {
    display: flex;
    width: 100%;
    height: calc(50% - 15px);
}

.middle_left {
    display: flex;
    flex-direction: column;
    width: 60%;
    flex: 1;
    background: #023A73;
    padding: 20px;
}

.tab_text {
    margin-right: 15px;
    cursor: pointer;
    color: white;
    font-size: 16px;
    font-weight: normal;

    &.active {
        color: #57FDF3;
        font-weight: bold;
    }
}

.middle_right {
    display: flex;
    flex-direction: column;
    width: 40%;
    flex: 1;
    background: #023A73;
}


.right_content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(50% - 10px);
}

.right_content_list {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    overflow: hidden;
    background: #032F5F;
}


.shape_trapezium {
    width: 70px;
    height: 30px;
    line-height: 30px;
    color: white;
    font-size: 13px;
    text-align: center;
    background-image: url(../../assets/img/big_screen_trapezium_1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    &.maintain {
        background-image: url(../../assets/img/big_screen_trapezium_2.png);
    }
}

.maintain_state {
    color: #FD9F52;
    font-size: 14px;
    width: calc(100% / 5);
    text-align: center;

    &.active {
        color: #57FDF3;
    }
}


.maintain_record_title {
    width: 100%;
    display: flex;
    height: 40px;
    align-items: center;

    .text {
        text-align: center;
        color: #57FDF3;
        font-size: 16px;
        width: calc(100% / 5);
    }
}



.maintain_record_list {
    display: flex;
    flex-direction: column;
    height: calc(100% - 50px);
    overflow: hidden;
    padding: 0 10px;
}

.maintain_record_item {
    display: flex;
    width: 100%;
    border-top: 1px solid rgba(87, 253, 243, 0.2);
    padding: 10px 0;
    justify-content: space-around;
    align-items: center;
}


.life_list {
    display: flex;
    flex-direction: column;
    height: calc(100% - 50px);
    overflow: hidden;
    padding: 0 10px;
}

.life_item {
    display: flex;
    width: 100%;
    padding: 10px 0;
    justify-content: space-between;
    align-items: center;

    .name {
        color: white;
        font-size: 14px;
        width: 28%;
    }

    .value {
        color: white;
        font-size: 14px;
        width: 28%;
        text-align: right;
        font-family: OPPOSans, OPPOSans;
    }
}


// 需要关闭 scoped ，如果你是有scoped属性的，需要添加属性穿透 ::v-deep
.el-progress {
    :deep .el-progress-bar__inner {
        border-radius: 0;
    }

    :deep .el-progress-bar__outer {
        background-color: #1A4971;
        border-radius: 0;
    }
}
</style>
