<template lang="pug">
card-warp(title="室内气象数据" height='45px' showBackground )
    div(slot='right')
        router-link(:to="{name:'analysis-indoor'}")
            el-button(size='mini' type='primary') 综合图形
    div(slot="content", style="height: 90%")
        el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")
            el-tab-pane(label="候车室区域", name="1")
            el-tab-pane(label="办公区域", name="2")
        el-form(:inline='true')
            el-form-item(label='设备编号:')
                el-input(size='mini')
            el-form-item(label='')
                el-button(type='primary' size='mini') 查询
        .data-warp
            div.data-item
                div.type 温度
                div.color-blue
                    span.num 37
                    span.unit ℃
            div.data-item
                div.type 湿度
                div.color-cyan
                    span.num 25
                    span.unit %RH
            div.data-item()
                div.type   CO2
                div.color-green
                    span.num 17
                    span.unit PPM
        el-table(size="mini" :data='dataList'   stripe v-loading='dataListLoading'  style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
            el-table-column(:resizable="false" type="index" header-align='center'  align='center' width="50" label='序号')
            el-table-column(:resizable="false" prop='visitorId' header-align='center'  align='center' width='240' label='设备编号')
            el-table-column(:resizable="false" prop='visitorId' header-align='center'  align='center' width='240' label='设备名称')
            el-table-column(:resizable="false" prop='visitorId' header-align='center'  align='center' width='240' label='温度(℃)')
            el-table-column(:resizable="false" prop='visitorId' header-align='center'  align='center'  label='混度(%RH)')
            el-table-column(:resizable="false" prop='visitorId' header-align='center'  align='center' )
                span(slot='header')
                    span CO
                    sub 2
                    span ( PPM )
            el-table-column(:resizable="false" prop='visitorId' header-align='center'  align='center'  label='设备状态')
            el-table-column( :resizable="false"  header-align='center' align='center' width='180' label='操作内容')
                template(slot-scope='scope')
                    el-button(type='text' size='small'  @click='showParams(scope.row,1)') 历史数据
                    el-button(type='text' size='small'  @click='showParams(scope.row,2)') 统计图表
        tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='getDataList')
        history(v-if='historyVisible', ref='history', @refreshdatalist='getDataList')

</template>

<script>
import tablePagination from '@/pages/components/tablePagination'
import history from './history'

export default {
components: {
    tablePagination,
    history
  },
    data() {
        return {
            historyVisible: false,
            activeName: '1',
            dataList: [{ id: 1 }],
            dataListLoading: false,
            pageSize: 50,
            totalPage: 0
        }
    },
    methods: {
        tabClick(tab, event) {
            console.log(tab, event)
        },
        getDataList() {

        },
        showParams(data, type) {
            console.log(111)
            this.historyVisible = true
            this.$nextTick(() => {
                this.$refs.history.init(data, type)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.myTabs {
    /deep/ .el-tabs__nav-wrap::after {
        height: 0;
    }
    /deep/.el-tabs__nav-wrap {
        background: #f2f4f5;

        .el-tabs__nav {
            // background: #E5E9EC;
            border-bottom: 1px solid #e5e9ec;
        }
    }
    /deep/ .el-tabs__header {
        border: 1px solid #e5e9ec;
    }
    /deep/ .el-tabs__item:nth-child(2) {
        padding: 0 20px;
    }
    /deep/ .el-tabs__item:last-child {
        padding: 0 20px;
    }
    /deep/ .el-tabs__item.is-active {
        background: #fff;
    }
}
.data-warp{
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 20px;
    .data-item{
        width: 32%;
        height: 153px;
        background: #FFFFFF;
        border: 1px solid #ECECEC;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
        .type{
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            padding-top: 38px;
        }
        .num{
            font-size: 36px;
            font-family: PingFang SC;
            font-weight: 600;
            color: #21ACFC;
            padding-top: 12px;

        }
        .unit{
            height: 15px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
        }
    }
}
</style>
