<template>
  <app-container>
    <div class="choose-device">
      <el-button type="primary" size="small">选择设备</el-button>
      <span class="detail"><span class="title">设备编号：</span>{{currentDevice.deviceNo}}</span>
      <span class="detail"><span class="title">安装点位：</span>{{currentDevice.deviceName}}</span>
      <span class="detail"><span class="title">地址：</span>{{currentDevice.position}}</span>
    </div>
    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default"
                 @search="fetchData" @clear="clearInput">
      <!--一般查询条件-->
      <search-item>
        <el-radio-group v-model="listQuery.searchType" size="small">
          <el-radio-button v-for="item of searchTypes" :label="item.value">{{item.name}}</el-radio-button>
        </el-radio-group>
      </search-item>
      <search-item>
        <el-date-picker
          v-model="timeRange"
          size="small"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始时间"
          end-placeholder="结束时间"/>
      </search-item>
      <search-item>
        <el-select v-model="listQuery.params" placeholder="参数选择" size="small" multiple collapse-tags clearable>
          <el-option
            v-for="item in paramsList"
            :key="item.value"
            :label="item.name"
            :value="item.value"/>
        </el-select>
      </search-item>
    </search-area>

    <div class="data-container">
      <div class="title-header">
        <i class="el-icon-menu"/>
        历史数据
      </div>
      <div class="edit_btns">
        <el-button type="primary" size="small">导出数据</el-button>
      </div>
    </div>
    <div style="padding:12px;">
      <ve-line :data="chartData" :settings="chartSettings"/>
    </div>

    <!--<el-row style="height: 12px;background-color: #ebebeb"/>-->
    <!--<div style="padding: 10px 10px 0px 10px">-->
      <!--<el-tabs v-model="activeName" type="card" @tab-click="lineSearch">-->
        <!--<el-tab-pane-->
          <!--v-for="(item, index) in tabs"-->
          <!--:key="item.name"-->
          <!--:label="item.title"-->
          <!--:name="item.name"/>-->
      <!--</el-tabs>-->
    <!--</div>-->

    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns"
                  :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption"
                  size="small" @change="changePage">
      <template slot="btns"/>
    </normal-table>
  </app-container>
</template>

<script>
  import {getToday} from '@/utils/dateutils'
  import ElSlPanel from "element-ui/packages/color-picker/src/components/sv-panel";

  export default {
    name: 'PointData',
    components: {ElSlPanel, getToday},
    data() {
      return {
        deviceList: [], //所有设备列表
        currentDevice: {
          id: "1",
          deviceNo: "2021030803100001",
          deviceName: "王泥岭",
          area: '崇仁县',
          online: '1',
          deptName: "城管局",
          areaCode: '361024',
          lat: 27.77740600,
          lng: 116.05673800,
          notes: "无",
          position: "王泥岭",
          ts: "2021-01-12",
          deptid: '24',
          installDate: "2021-07-01"

        },// 当前设备
        searchTypes:[
          {name:'分钟平均值', value:'minute'},
          {name:'小时平均值', value:'hour'},
          {name:'日平均值', value:'day'}
        ], // 查询类别
        paramsList:[
          {name: 'PM2.5', unit:'ug/m³', value:'pm25'},
          {name: 'PM10', unit:'ug/m³', value:'pm10'},
          {name: 'TSP', unit:'ug/m³', value:'tsp'},
          {name: '噪声', unit:'db', value:'noise'},
          {name: '风速', unit:'m/s', value:'windSpeed'},
          {name: '风力', unit:'级', value:'windPower'},
          {name: '风向', unit:'°', value:'windDirection'},
          {name: '温度', unit:'℃', value:'temperature'},
          {name: '湿度', unit:'%RH', value:'humidity'},
          {name: '气压', unit:'kpa', value:'pressure'},
        ], // 数据类型列表
        chartData: {
          columns: ['date', 'standard', 'value'],
          rows: []
        },
        chartSettings: {
          labelMap: {
            '': '指标值',
            'standard': '标准值'
          },
          metrics: ['standard', 'value'],
          dimension: ['date']
        },
        listQuery: {
          deviceNo:'', // 设备编号
          searchType:'minute', // 查询类型,
          params:[],
          startDate: '', // 开始时间
          endDate: '', // 结束时间
          offset: 1,
          limit: 20
        }, // 筛选条件
        columns: [], // 显示列
        timeRange: [], // 时间范围
        list: [], // 列表数据
        total: 0, // 数据总数
        listLoading: true, // 列表加载动画
        tableOption: {
          head: {
            show: true, // 是否需要标题栏，
            text: '历史数据列表' // 标题名称
          },
          options: {
            needIndex: false // 是否需要序号列
          },
          toolsOption: {
            selectColumns: false, // 是否需要筛选列
            refresh: false // 是否需要刷新按钮
          }
        } // 表格属性
      }
    },
    watch: {
      timeRange(val) {
        if (val && val.length > 0) {
          this.listQuery.startDate = val[0]
          this.listQuery.endDate = val[1]
          this.fetchData()
        } else {
          this.listQuery.startDate = ''
          this.listQuery.endDate = ''
        }
      }
    },
    activated() {
      if (this.$route.query) {
        this.listQuery.keywords = this.$route.query.name
      }
    },
    created() {
      if (this.$route.query) {
        this.listQuery.keywords = this.$route.query.name
      }
      this.listQuery.startDate = getToday('yyyy-MM-dd 00:00:00')
      this.listQuery.endDate = getToday('yyyy-MM-dd hh:mm:ss')
      this.timeRange = [this.listQuery.startDate, this.listQuery.endDate]
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.lineSearch()
        // this.listLoading = true
        const that = this
        // setTimeout(function () {
        //       that.list = [
        //         { deviceNo:'1245521111141', deviceName: '宝水新城监控点', pm25: '23.40', pm10: 25.80, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50, ts: '2021-05-07 11:15' },
        //         { deviceNo:'1245521111141', deviceName: '宝水新城监控点', pm25: '23.40', pm10: 25.80, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50, ts: '2021-05-07 11:15' },
        //         { deviceNo:'1245521111141', deviceName: '宝水新城监控点', pm25: '23.40', pm10: 25.80, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50, ts: '2021-05-07 11:15' },
        //         { deviceNo:'1245521111141', deviceName: '宝水新城监控点', pm25: '23.40', pm10: 25.80, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50, ts: '2021-05-07 11:15' }
        //       ]
        //       that.total = 4
        //   that.listLoading = false
        // }, 500)
      },
      lineSearch() {
        const labelMap = {}
        const metrics = []
        const columns = [{text: '名称', value: 'ts', align: 'center'}]
        for(const item of this.paramsList){
          if(this.listQuery.params.length==0){
            labelMap[item.value] = item.name
            metrics.push(item.value)
            columns.push({text:item.name, value:item.value})
          }else{
            if(this.listQuery.params.indexOf(item.value)>-1){
              labelMap[item.value] = item.name
              metrics.push(item.value)
            }
          }
        }
        this.columns = columns
        this.chartSettings = {
          labelMap: labelMap,
          metrics: metrics,
          dimension: ['ts']
        }
        this.chartData.rows = this.list = [
          {ts: '9月20日', pm25: 153, pm10: 43, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50 },
          {ts: '9月21日', pm25: 150, pm10: 30, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50 },
          {ts: '9月22日', pm25: 143, pm10: 23, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50 },
          {ts: '9月23日', pm25: 173, pm10: 23, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50 },
          {ts: '9月24日', pm25: 272, pm10: 52, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50 },
          {ts: '9月25日', pm25: 253, pm10: 53, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50 }
        ]
        this.listLoading = false
      },
      // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
      changePage(val) {
        if (val && val.size) {
          this.listQuery.limit = val.size
        }
        if (val && val.page) {
          this.listQuery.offset = val.page
        }
        this.fetchData()
      },
      // 重置后的操作， 若不需要显示重置按钮则不需要写
      clearInput() {
        this.$message.success('clearInput')
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .choose-device {
    padding: 12px 12px 0px 12px;
    .detail {
      padding: 0px 10px;
      font-size: 14px;
      .title {
        color: #8c939d;
      }
    }
  }
  .data-container{
    border-top:12px solid #ebebeb ;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title-header{
      font-size:15px;
      color: #606266;
    }
  }
</style>