<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="设备编号">
          <el-input v-model="formSearch.deviceNum" placeholder="输入完整设备编号"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="formSearch.deviceStatus"
            style="margin-left: 20px;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="formSearch.timeRange"
            align="right"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            value-format="yyyy/MM/dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-pagination
      :current-page="formSearch.currentPage"
      :page-sizes="[20, 80, 150, 300]"
      :page-size="formSearch.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formSearch.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <el-table :key="tableKey" :data="equipment" border fit highlight-current-rows>
      <el-table-column label="设备编号" width="209">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.device_num,$event)">{{ scope.row.device_num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户ID" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.user_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="值" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态值" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.device_status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备状态" width="130">
        <template slot-scope="scope">
          <span>
            <el-tag :type=" scope.row.device_status==1 ? 'success' : 'warning' " effect="dark">{{ scope.row.device_status==1 ? '正常' : '异常' }}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.time | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-tooltip placement="top" content="tooltip">
      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
    </el-tooltip>
  </div>
</template>

<script>
import { detedevice } from '@/api/device';
import clip from '@/utils/clipboard';
import BackToTop from '@/components/BackToTop';
export default {
  components: { BackToTop },
  data() {
    return {
      formSearch: {
        deviceNum: '',
        deviceStatus: 0,
        timeRange: null,
        pageSize: 20,
        currentPage: 1,
        total: 0,
      },
      optionStatus: [{
        value: 0,
        label: '全部',
      }, {
        value: 1,
        label: '正常',
      }, {
        value: 2,
        label: '错误',
      }, {
        value: 3,
        label: '传感器故障',
      }, {
        value: 4,
        label: '报警',
      }, {
        value: 5,
        label: '低报',
      }, {
        value: 6,
        label: '高报',
      }, {
        value: 7,
        label: '通信故障',
      }, {
        value: 8,
        label: '超量程',
      }, {
        value: 9,
        label: '离线',
      }, {
        value: 10,
        label: '电量低',
      }, {
        value: 11,
        label: '主电故障',
      }, {
        value: 12,
        label: '备电故障',
      }, {
        value: 13,
        label: '无此节点',
      }, {
        value: 14,
        label: '低电压',
      }, {
        value: 15,
        label: '故障',
      }, {
        value: 16,
        label: '报警联动',
      }],
      equipment: [],
      timer: null,
      tableKey: 0,
      value2: undefined,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '24小时内',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', [start, end]);
          },
        },
        ],
      },
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // Please keep consistent with height to center vertically
        background: '#e7eaf1', // The background color of the button
      },
    };
  },
  created() {
    this.dataSearch();
  },
  methods: {
    handleSizeChange(val) {
      this.formSearch.pageSize = val;
      this.dataSearch();
    },
    handleCurrentChange(val) {
      this.formSearch.currentPage = val;
      this.dataSearch();
    },
    handleCopy(text, event) {
      clip(text, event);
    },
    onSubmit() {
      this.formSearch.currentPage = 1;
      this.dataSearch();
    },
    dataSearch() {
      detedevice(this.formSearch)
        .then(response => {
          if (response.code === 200) {
            this.equipment = response.data.list;
            this.formSearch.total = response.data.total;
          } else if (response.code === 105) {
            this.$message({
              message: response.msg,
              type: 'warning',
            });
            this.equipment = response.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    timers() {
      // this.timer = setInterval(() => {
      //   this.equipmentlist();
      // }, 10000);
    },
    destroyed() {
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.timer);
      });
    },
  },
};
</script>
<style scoped lang="scss">
.placeholder-container {
  ul {
    li {
      margin: 10px;
      list-style-type: none;
    }
  }
}
</style>
