<template lang="pug">
card-warp(title="室内气象分析", height="45px")
  div(slot="right")
    router-link.margin-lr-20(:to="{ name: 'kb-indoor' }")
      el-button(size="mini", type="primary") 图形 / 列表
    //- el-button(size='mini' type='primary' icon='el-icon-download') 下载

  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", size="mini")
      //- el-form-item(label="时间范围：")
      //-   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 }}
      el-form-item( label="时间范围：")
        el-date-picker(
          v-model="startTime"
          align="right"
          type="date"
           @change="startChangeHandle" :picker-options="startPickerOptions"
          value-format="yyyy-MM-dd"
          placeholder="选择日期")
        span( style="padding: 0 10px") 至
        el-date-picker(
          v-model="endTime"
          align="right"
          type="date"
          @change="endChangeHandle" :picker-options="endPickerOptions"
          value-format="yyyy-MM-dd"
          placeholder="选择日期")
        el-button( type="primary" style='margin-left:10px;' size="mini" icon="el-icon-search" @click="getDataList()") 查询
    .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")
</template>

<script>
import chart from '@/pages/components/chart.vue'
export default {
  components: {
    chart
  },
  data() {
    return {
      startPickerOptions: {},
      endPickerOptions: {},
      startTime: '',
      endTime: '',
      activeName: '1',
      typeList: [
        { name: '当日', id: 1 },
        { name: '本周', id: 2 },
        { name: '当月', id: 3 },
        { name: '今年', id: 4 }
      ],
      currentActive: 1,
      chartList: [
        { id: '11', title: '平均温度(℃)', color: '#21ACFC', data: [] },
        { id: '22', title: '平均湿度(%RH)', color: '#36CBCB', data: [] },
        { id: '33', title: '平均CO2(PPM)', color: '#4ECB74', data: [] },
        { id: '44', title: '平均故障报警', color: '#975FE4', data: [] }
      ]
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    tabClick(tab, event) {
      // console.log(tab, event)
      this.startTime = ''
      this.endTime = ''
      this.getDataList()
    },
    getDataList() {
      this.$http({
        url: this.$http.adornUrl('/analysis/getSnqxzInfoTj'),
        method: 'get',
        params: this.$http.adornParams({
          resourceId: '',
          region: Number(this.activeName), //区域类型
          startTime: this.startTime,
          endTime: this.endTime
        })
      }).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.carbonDioxideList
          this.chartList[3].data = data.carbonDioxideList
        }
      })
    },
    // 开始时间change事件
    startChangeHandle(val) {
      if (val) {
        this.endPickerOptions = {
          disabledDate(time) {
            return time.getTime() <= new Date(val) - 8.64e7
          }
        }
      } else {
        this.endPickerOptions = {}
      }
    },
    // 结束时间change事件
    endChangeHandle(val) {
      if (val) {
        this.startPickerOptions = {
          disabledDate(time) {
            return new Date(val) <= time.getTime()
          }
        }
      } else {
        this.startPickerOptions = {}
      }
    },
    // 当日 ，本周
    handleDate(i) {
      this.currentActive = i
      this.getDataList()
    }
  }
}
</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;
  }
}
.echartsWarp {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: calc(100vh - 350px);
  > div {
    width: 47%;
    height: calc(90% / 2);
    margin: 3px;
    padding: 13px;
    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;
      }
    }
  }
}
// 选中
.isActive {
  background: #4cb527 !important;
  border: transparent 1px solid;
}
</style>