<template>
  <el-dialog
    :visible.sync="dialogVisible"
    append-to-body
    title="设备列表"
    top="0"
    width="1200px"
  >
    <el-form
      inline
      :model="searchForm"
      style="padding: 10px; background: #0e3c75; margin-bottom: 10px"
    >
      <el-form-item label="在线状态">
        <el-select v-model="searchForm.is_online" clearable>
          <el-option
            v-for="(status, index) in deviceOnlineOptions"
            :label="status.name"
            :value="status.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="searchRecords"
          style="background: rgba(19, 168, 195, 1); color: #fff; border: none"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="tableData" height="550px" stripe>
      <el-table-column label="设备名称" prop="device_name" align="center">
      </el-table-column>
      <el-table-column
        label="设备编号"
        prop="device_no"
        align="center"
      ></el-table-column>
      <el-table-column
        label="设备型号"
        prop="model"
        align="center"
      ></el-table-column>
      <el-table-column label="厂家" align="center" prop="produce_name">
      </el-table-column>
      <el-table-column
        label="在线状态"
        align="center"
        width="90"
        prop="is_online_text"
      >
        <template slot-scope="scope">
          <span
            :style="{ color: scope.row.is_online == 1 ? '#5CFF6B' : '#FF5C5C' }"
            >{{ scope.row.is_online_text }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="所在区域" align="center" prop="area_name">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-dialog>
</template>
<script>
import { getDeviceConfigOptions, getDeviceList } from "@/api/index";
export default {
  name: "TodayCheckInDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      currentPage: 1,
      total: 0,
      searchForm: {
        status: "",
        is_online: "",
      },
      pageSize: 10,
      tableData: [],
      deviceOnlineOptions: [],
    };
  },
  methods: {
    handleCurrentChange(current) {
      getDeviceList({
        ...this.searchForm,
        limit: this.pageSize,
        page: current,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = current;
      });
    },
    handleSizeChange(size) {
      getDeviceList({
        ...this.searchForm,
        limit: size,
        page: 1,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = 1;
      });
    },
    searchRecords() {
      getDeviceList({
        ...this.searchForm,
        limit: this.pageSize,
        page: 1,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = 1;
      });
    },
  },
  mounted() {
    getDeviceConfigOptions().then((res) => {
      this.deviceOnlineOptions = res.data.isOnlineData;
    });
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("changeVisible", val);
      },
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.searchForm.is_online = this.type === "" ? "" : Number(this.type);
        this.searchRecords();
      } else {
        this.tableData = [];
        this.searchForm = {
          status: "",
          is_online: "",
        };
      }
    },
  },
};
</script>
<style lang="less" scoped>
.previewImg {
  width: 50px;
  height: 50px;
}
</style>