<template lang="pug">
el-dialog(
  :title="type == 1 ? '历史数据' : '统计图表'",
  :close-on-click-modal="false",
  :visible.sync="visible",
  width="85%",
  :append-to-body="true"
)
  el-form(
    :model="dataForm",
    size="mini",
    :inline="true",
    :rules="dataRule",
    ref="dataForm",
    @keyup.enter.native="dataFormSubmit()",
    label-width="120px"
  )
    el-form-item(label="设备名称", prop="name")
      el-input(v-model="dataForm.name", placeholder="设备名称" readOnly)
    el-form-item(label="设备编号", prop="code")
      el-input(v-model="dataForm.code", placeholder="设备编号" readOnly)
    el-form-item(label="数据起止阶段", prop="time")
      el-button(
        size="mini",
        type="primary",
        @click="handleDate(item.id)",
        v-for="(item, index) in typeList",
        :key="index",
        :class="[item.id == currentActive ? 'isActive' : '']"
      ) {{ item.name }}
  span(v-if="type == 1")
    el-table(
      :data="dataList",
      size="mini",
      style="width: 100%",
      :header-cell-style="{ background: '#EEF8FF', color: '#333333' }"
    )
      el-table-column(
        :resizable="false",
        type="index",
        header-align="center",
        align="center",
        label="序号"
      )
      el-table-column(
        :resizable="false",
        prop="temperature",
        header-align="center",
        align="center",
        label="温度(℃)"
      )
      el-table-column(
        :resizable="false",
        prop="humidity",
        header-align="center",
        align="center",
        label="湿度(%RH)"
      )
      el-table-column(
        :resizable="false",
        prop="wind_speed",
        header-align="center",
        align="center",
        label="风速(m/s)"
      )
      el-table-column(
        :resizable="false",
        prop="Illuminance",
        header-align="center",
        align="center",
        label="光照(Lux)"
      )
      el-table-column(
        :resizable="false",
        prop="carbon_dioxide",
        header-align="center",
        align="center",
      )
        span(slot="header")
          span CO
          sub 2
          span (PPM)
      el-table-column(
        :resizable="false",
        prop="fine_particles",
        header-align="center",
        align="center",
        label="PM2.5(ug/m)"
      )
      el-table-column(
        :resizable="false",
        prop="radiation",
        header-align="center",
        align="center",
        label="辐射(w/m)"
      )
      //- el-table-column(
      //-   :resizable="false",
      //-   prop="name",
      //-   header-align="center",
      //-   align="center",
      //-   label="设备状态"
      //- )
      el-table-column(
        :resizable="false",
        prop="create_time",
        header-align="center",
        align="center",
        label="采集时间"
      )
    tablePagination(
      :pageSize="pageSize",
      :totalSize="totalPage",
      @parentMethod="getDataList"
    )
  span(v-else)
    .echartsWarp(width="100%", flex)
      div(v-for="item in chartList", :key="item.id")
        chart(
          :id="item.id",
          :data="item.data",
          :title="item.title",
          :color="item.color"
        )
      //- div
      //-   pie
  //- span.dialog-footer(slot="footer")
  //-   el-button(@click="visible = false", size="mini") 取消
  //-   el-button(type="primary", @click="dataFormSubmit", size="mini") 确定
</template>

<script>
import tablePagination from '@/pages/components/tablePagination'
import chart from '@/pages/components/chart.vue'
// import pie from './pie'

export default {
  components: {
    tablePagination,
    chart
    // pie
  },
  data() {
    return {
      type: null,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      visible: false,
      dataForm: {},
      typeList: [
        { name: '当日', id: 1 },
        { name: '本周', id: 2 },
        { name: '当月', id: 3 },
        { name: '今年', id: 4 }
      ],
      currentActive: 1,
      dataList: [],
      chartList: [
        { id: '11', title: '温度(℃)', color: '#21ACFC', data: [] },
        { id: '22', title: '湿度(%RH)', color: '#36CBCB', data: [] },
        { id: '33', title: '风速(m/s)', color: '#3AA0FF', data: [] },
        { id: '44', title: '光照(Lux)', color: '#FAD337', data: [] },
        { id: '55', title: 'CO2(PPM)', color: '#4ECB74', data: [] },
        { id: '66', title: 'PM2.5(ug/m)', color: '#999999', data: [] },
        { id: '77', title: '辐射(w/m)', color: '#975FE4', data: [] },
        { id: '88', title: '故障报警数', color: '#F2637B', data: [] }
      ],
      dataRule: {}
    }
  },

  methods: {
    init(data, type) {
      this.dataForm = data
      this.type = type // 1=>>> 历史数据 / 2=>>> 统计图表
      this.visible = true
      this.currentActive = 1
      if (this.type === 1) {
        this.getDataList() //获取历史数据列表
      } else if (this.type === 2) {
        this.getDataListTb()
      }
    },
    // 当日 ，本周
    handleDate(i) {
      this.currentActive = i
      if (this.type === 1) {
        this.getDataList() //获取历史数据列表
      } else if (this.type === 2) {
        this.getDataListTb()
      }
    },
    getDataList(page, size) {
      this.$http({
        url: this.$http.adornUrl(`/kanban/getListByTypeAndId`),
        method: 'get',
        params: this.$http.adornParams({
          resourceId: this.dataForm.id,
          resourceType: this.dataForm.type, //室外气象站
          type: this.currentActive,
          page: page || this.pageIndex,
          rows: size || this.pageSize
        })
      }).then((data) => {
        if (data && data.code === 0) {
          console.log('室外气象站历史数据', data)
          this.dataList = data.page.records
          this.totalPage = data.page.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
      })
    },
    getDataListTb() {
      this.$http({
        url: this.$http.adornUrl('/analysis/getSwqxzInfoTj'),
        method: 'get',
        params: this.$http.adornParams({
          type: this.currentActive
        })
      }).then((data) => {
        if (data && data.code === 0) {
          // console.log('数据', data)
          this.chartList[0].data = data.temperatureList
          this.chartList[1].data = data.humidityList
          this.chartList[2].data = data.windSpeedList
          this.chartList[3].data = data.illuminanceList
          this.chartList[4].data = data.carbonDioxideList
          this.chartList[5].data = data.fineParticlesList
          this.chartList[6].data = data.radiationList
          this.chartList[7].data = data.radiationList
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.echartsWarp {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: calc(100vh - 430px);
  // margin-bottom: 90px;
  // border: 1px solid;
  > div {
    width: 22%;
    height: calc(85% / 2);
    padding: 10px 10px 0 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 600;
      color: #000000;
      line-height: 40px;
      &::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #0097ff;
        margin: 0 10px;
      }
    }
  }
}
</style>