<template>
  <div class="main-info">
    <el-tabs :tab-position="tabPosition">
      <el-tab-pane label="站点列表"></el-tab-pane>
    </el-tabs>
    <el-row :gutter="10">
      <el-col :span="24">
        <ul class="site" v-if="siteList.length">
          <li v-for="item in siteList" :key="item.id">
            <div class="name">{{item.name}}<span class="state">{{item.open ? '公开' : '未公开'}}</span></div>
            <div>站点编号：{{item.code}}</div>
            <div>{{item.location}}</div>
            <div class="floatModule">
              <div>
                <el-button type="warning" @click="monitor(item)">实时监测</el-button>
              </div>
              <div>
                <el-button type="primary" @click="load">下载数据</el-button>
              </div>
            </div>
          </li>
        </ul>
      </el-col>
    </el-row>
    <download ref="downloadModul"></download>
  </div>
</template>
<script>
  import download from '@/views/timeMonitoring/component/download'
  import { getCookiesId } from '@/utils/auth'
  import { siteList } from '@/api/loginedHome'
  export default {
    data() {
      return {
        tabPosition: 'top',
        siteObj: {
          uid: getCookiesId('id'),
          active: [1],
          pageSize: 20,
          pageNo: 1
        },
        siteList: []
      }
    },
    components: {
      download
    },
    created() {
      siteList(this.siteObj).then(res => {
        if (res.success) {
          this.siteList = res.data.data
        }
      })
    },
    methods: {
      monitor(data) {
        this.$router.push({ name: 'realtimeMonitor', query: { title: data.name, id: data.id }})
      },
      load() {
        this.$refs.downloadModul.dialogTableVisible = true
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .site {
    padding: 10px;
    margin: 0;
    li {
      margin-bottom: 15px;
      padding: 20px 20px;
      list-style: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      position: relative;

      div {
        margin-bottom: 10px;
        font-size: 15px;
        color: #1f2d3d;
      }
      .name {
        color: #304156;
        font-size: 18px;
        .state {
          margin-left: 10px;
        }
      }
      .floatModule {
        position: absolute;
        top: 20px;
        right: 30px;
      }
    }
  }
  .el-tabs__nav-wrap{
    z-index: 0;
  }
</style>