<template>
    <div class="row_tab">
        <div class="row_monitors">
            <div class="col">
                <div class="item" :class="tab_key === '1' ? 'select' : ''" @click="tabTap('1')">
                    <span>位移</span>
                </div>
            </div>
            <div class="col">
                <div class="item" :class="tab_key === '2' ? 'select' : ''" @click="tabTap('2')">
                    <span>温度</span>
                </div>
            </div>
            <div class="col">
                <div class="item" :class="tab_key === '3' ? 'select' : ''" @click="tabTap('3')">
                    <span>应变</span>
                </div>
            </div>
        </div>
        <div class="search-form">
            <div class="form-type">
                <el-select v-model="searchForm.sensorId" @change="groupListChange">
                    <el-option v-for="item in groupList" :key="item.sensorId" :label="item.sensorName" :value="item.sensorId" />
                </el-select>
            </div>
            <div class="form-date">
                <el-date-picker
                    v-model="dateTime"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="YYYY-MM-DD"
                    @change="dateTimeChange"
                />
            </div>
        </div>
    </div>
    <div class="row_data_statistics">
        <div class="statistics_item_container" style="padding-right: 8px;">
            <div class="statistics_item blue">
                <div class="left_text">
                    <div class="number">暂无</div>
                    <div class="text">本周最大值</div>
                </div>
                <div class="divider" />
                <div class="right_text">
                    <div>环比上周：暂无</div>
                    <div>监测时间：暂无</div>
                </div>
            </div>
        </div>
        <div class="statistics_item_container" style="padding-left: 8px;">
            <div class="statistics_item purple">
                <div class="left_text">
                    <div class="number">暂无</div>
                    <div class="text">本周平均值</div>
                </div>
                <div class="divider" />
                <div class="right_text">
                    <div>环比上周：暂无</div>
                    <div>最大变幅：暂无</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row_radio_group">
        <el-radio-group v-model="change_type" size="large" @change="typeChange">
            <el-radio label="echarts">图表</el-radio>
            <el-radio label="table">表格</el-radio>
        </el-radio-group>
    </div>
    <div class="data_container">
        <baseEcharts v-if="change_type === 'echarts'" :unit="groupUnit" :datas="echartsData" />
        <template v-if="change_type === 'table'">
            <div class="data_table_box">
                <el-table :data="tableData" height="100%" style="width: 100%">
                    <el-table-column prop="date" label="检测时间" />
                    <el-table-column prop="sensorName" label="传感器名称" />
                    <el-table-column prop="ysValue" label="原始值" />
                    <el-table-column prop="jcValue" label="检测值">
                        <template #default="scope">
                            {{ scope.row.jcValue + groupUnit }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="bjInfo" label="报警信息">
                        <template #default="scope">
                            {{ scope.row.bjInfo ? scope.row.bjInfo : '-' }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="data_page_box">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="searchForm.total"
                    :page-size="searchForm.size"
                    :current-page="searchForm.current"
                    @size-change="sizesUpdate"
                    @current-change="pagesUpdate"
                />
            </div>
        </template>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import baseEcharts from './echarts.vue'
import { getArrValue } from 'js-fast-way'
import mainApi from '~api/data'

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')

//获取初始日期
const toDay = dayjs().format('YYYY-MM-DD')
const sevenDay = dayjs().subtract(7, 'day').format('YYYY-MM-DD')

//选项卡
const tab_key = ref('1')
const tabTap = (val) => {
    tab_key.value = val
    getGroupList()
}

onMounted(() => {
    getGroupList()
})

//获取分组列表
const groupList = ref([])
const groupUnit = ref('°C')
const getGroupList = async () => {
    groupList.value = []
    const { data } = await mainApi.getGroupList({
        type: tab_key.value,
    })
    const res = getArrValue(data)
    groupList.value = res
    if (res.length > 0) {
        searchForm.value.sensorId = res[0].sensorId
        groupUnit.value = res[0].numericalUnit
        getTableData().then()
    }
}

//分组切换
const groupListChange = () => {
    searchForm.value.current = 1
    getTableData()
}

//日期时间范围
const dateTime = ref([sevenDay, toDay])
const dateTimeChange = (val) => {
    searchForm.value.current = 1
    if (val && val.length > 0) {
        searchForm.value.startTime = val[0] + ' 00:00:00'
        searchForm.value.endTime = val[1] + ' 23:59:59'
    }
    getTableData()
}

//搜索数据
const searchForm = ref({
    sensorId: null,
    startTime: sevenDay + ' 00:00:00',
    endTime: toDay + ' 23:59:59',
    total: 1000,
    size: 30,
    current: 1,
})

//条数改变
const sizesUpdate = (val) => {
    searchForm.value.size = val
    getTableData()
}

const pagesUpdate = (val) => {
    searchForm.value.current = val
    getTableData()
}


//类型
const change_type = ref('echarts')
const typeChange = () => {
    searchForm.value.current = 1
    getTableData()
}

//表格或图表数据
const tableData = ref([])
const echartsData = ref({ name: '', date: [], data: [] })
const getTableData = async () => {
    const type = change_type.value
    if (type === 'echarts') {
        echartsData.value = { name: '', date: [], data: [] }
        let newData = { name: '', date: [], data: [] }
        const { data } = await mainApi.getChartList(searchForm.value)
        const res = getArrValue(data)
        if (res.length > 0) {
            newData.name = res[0].sensorName
        }
        for (let i = 0; i < res.length; i++) {
            newData.date.push(res[i].date)
            newData.data.push(res[i].jcValue)
        }
        echartsData.value = newData
    } else if (type === 'table') {
        tableData.value = []
        const { data } = await mainApi.getPageList(searchForm.value)
        tableData.value = getArrValue(data?.records)
        searchForm.value.total = data?.total ?? 0
    }
}
</script>

<style lang="scss">
@import "./style";
</style>
