<template lang="pug">
card-warp(title="室外气象数据", height="45px", showBackground)
  div(slot="content", style="height: 90%")
    el-form(:inline="true", :model="formData")
      el-form-item(label="设备编号:")
        el-input(size="mini", v-model="formData.code", readOnly)
      el-form-item(label="设备名称:")
        el-input(size="mini", v-model="formData.name", readOnly)
      //- el-button(@click="csHandle" size="mini" icon="el-icon-search" type="primary") 发送消息

    .data-warp
      .data-item(v-for="item in typeList")
        .type {{ item.type }}
        div(:style="{ color: item.color }")
          span.num {{ item.num }}
          span.unit {{ item.unit }}
    .clearfix
      el-button(
        size="mini",
        type="primary",
        style="float: right; margin-bottom: 10px",
        @click="toggle"
      ) 图形 / 列表
    el-table(
      v-if="showList",
      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",
        label="序号"
      )
      el-table-column(
        :resizable="false",
        prop="code",
        header-align="center",
        align="center",
        label="设备编号"
      )
      el-table-column(
        :resizable="false",
        prop="name",
        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="statusName",
        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"
      )
    .echartsWarp(v-else, 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
    history(
      v-if="historyVisible",
      ref="history",
      @refreshdatalist="getDataList"
    )
</template>

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

export default {
  components: {
    tablePagination,
    chart,
    history
  },
  data() {
    return {
      formData: {
        name: '',
        code: ''
      },
      historyVisible: false,
      chartListVisible: false,
      showList: false,
      activeName: '1',
      dataList: [],
      dataListLoading: false,
      pageSize: 50,
      totalPage: 0,
      typeList: [
        { type: '温度', num: '36', unit: '℃', color: '#21ACFC' },
        { type: '湿度', num: '25', unit: '%', color: '#36CBCB' },
        { type: '风速', num: '3', unit: 'm/s', color: '#3AA0FF' },
        { type: '风向', num: '东南', unit: '', color: '#3AA0FF' },
        { type: '光照', num: '253', unit: 'Lux', color: '#FAD337' },
        { type: 'CO2', num: '17', unit: 'PPM', color: '#4ECB74' },
        { type: 'PM2.5', num: '80', unit: 'ug/m', color: '#999999' },
        { type: '辐射', num: '13', unit: 'w/m', color: '#975FE4' },
        { type: '故障报警数', num: '3', unit: '', color: '#F2637B' }
      ],
      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: [] }
      ],
      type: 1
    }
  },
  computed: {
    socketData() {
      return this.$store.state.d2admin.paramsList.list.swqxzList[0]
    }
  },
  watch: {
    socketData: {
      handler(n, o) {
        if (n) {
          this.setTypeList()
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getDataList()
    this.getDataListTb()
  },
  methods: {
    // 设置数字变化
    setTypeList() {
      this.typeList[0].num = this.socketData.temperature
      this.typeList[1].num = this.socketData.humidity
      this.typeList[2].num = this.socketData.wind_speed
      this.typeList[3].num = this.socketData.wind_direction
      this.typeList[4].num = this.socketData.Illuminance
      this.typeList[5].num = this.socketData.carbon_dioxide
      this.typeList[6].num = this.socketData.fine_particles
      this.typeList[7].num = this.socketData.radiation
      this.typeList[8].num = this.socketData.region
      //列表
      for (var i = 0; i < this.dataList.length; i++) {
        this.$set(this.dataList[i], 'temperature', this.socketData.temperature)
        this.$set(this.dataList[i], 'humidity', this.socketData.humidity)
        this.$set(this.dataList[i], 'wind_speed', this.socketData.wind_speed)
        this.$set(this.dataList[i], 'Illuminance', this.socketData.Illuminance)
        this.$set(
          this.dataList[i],
          'carbon_dioxide',
          this.socketData.carbon_dioxide
        )
        this.$set(
          this.dataList[i],
          'fine_particles',
          this.socketData.fine_particles
        )
        this.$set(this.dataList[i], 'radiation', this.socketData.radiation)
      }
    },
    csHandle() {
      this.$http({
        url: this.$http.adornUrl('/equipment/sendParamsInfo'),
        method: 'post',
        params: this.$http.adornParams({})
      }).then((data) => {
        if (data && data.code === 0) {
        }
      })
    },
    // 获取数据列表
    getDataList(page, size) {
      this.$http({
        url: this.$http.adornUrl('/liResource/list'),
        method: 'post',
        data: {
          type: '9a570e608d0840499551eca89d76449d', //室外气象站
          page: page || this.pageIndex,
          size: size || this.pageSize
        }
      }).then((data) => {
        if (data && data.code === 0) {
          console.log('数据', data)
          this.dataList = data.page.rows
          this.formData.name = this.dataList[0].name
          this.formData.code = this.dataList[0].code
          this.totalPage = data.page.total
          this.setTypeList()
        } else {
          this.dataList = []
          this.totalPage = 0
        }
      })
    },
    getDataListTb() {
      this.$http({
        url: this.$http.adornUrl('/analysis/getSwqxzInfoTj'),
        method: 'get',
        params: this.$http.adornParams({
          startTime: '',
          endTime: ''
        })
      }).then((data) => {
        if (data && data.code === 0) {
          console.log('charts数据', 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
        }
      })
    },
    showParams(data, type) {
      this.historyVisible = true
      this.$nextTick(() => {
        this.$refs.history.init(data, type)
      })
    },
    toggle() {
      this.showList = !this.showList
    }
  }
}
</script>

<style lang="scss" scoped>
.data-warp {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-bottom: 20px;
  .data-item {
    width: 110px;
    height: 103px;
    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: 15px;
    }
    .num {
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 600;
      // color: #21ACFC;
      // padding-top: 26px;
    }
    .unit {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
    }
  }
}
.echartsWarp {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: calc(100vh - 480px);
  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;
      }
    }
  }
}
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
</style>