<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" @change="dataSearch"></el-date-picker>
    </div>
    <el-table :key="tableKey" :data="equipment" border fit highlight-current-rows>
      <el-table-column label="设备编号" width="169">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.devicenum,$event)">{{ scope.row.devicenum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备名称" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备备注" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceremark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备联系人" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.devicelinkman }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备手机号" width="140">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.devicephone,$event)">{{ scope.row.devicephone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备详情">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceinfo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备分类" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.tname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备介质" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.gas }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备单位" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.danwei }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备状态" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.status_name }}</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 { equipment, detedevice } from '@/api/device';
import clip from '@/utils/clipboard';
import BackToTop from '@/components/BackToTop';
export default {
  components: { BackToTop },
  data() {
    return {
      equipment: [],
      timer: null,
      tableKey: 0,
      value2: undefined,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          },
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          },
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          },
        }],
      },
      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.equipmentlist(); // 列表
  },
  methods: {
    equipmentlist() {
      equipment()
        .then(response => {
          if (response.code === 200) {
            this.equipment = response.data;
            this.timers();
          } else if (response.code === 105) {
            this.$message({
              message: response.msg,
              type: 'warning',
            });
          } else {
            this.$notify({
              title: '警告',
              message: 'TCP链接失败',
              type: 'warning',
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCopy(text, event) {
      clip(text, event);
    },
    dataSearch() {
      detedevice(this.value2)
        .then(response => {
          if (response.code === 200) {
            this.equipment = response.data;
          } 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>
