<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="devices"
          border
          :row-style="{ color: '#303133' }"
          :header-cell-style="{
            backgroundColor: 'rgb(245, 247, 250)',
            color: '#606266'
          }"
          :highlight-current-row="true"
        >
          <el-table-column
            label="序列号"
            prop="serial_number"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            label="设备名"
            prop="name"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            label="型号"
            prop="model"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="150"
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
              >
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-edit-outline"
                  @click="handleEdit(scope.$index, scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <el-button
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  @click="delete_device_action(scope.$index, scope.row)"
                >
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <add-device-dialog
      ref="new_device_dialog"
      :device_numbers="device_numbers"
      @did_create_device="didCreateDevice"
    ></add-device-dialog>
    <edit-device-dialog
      ref="edit_device_dialog"
      :device_numbers="device_numbers"
      @did_update="update_device"
    ></edit-device-dialog>
    <partition-dialog
      ref="new_partition_dialog"
      :zones="zones"
      :device_numbers="device_numbers"
      :groups="groups"
    ></partition-dialog>
  </div>
</template>

<script>
import AddDeviceDialog from "./add_device_dialog";
import PartitionDialog from "./partition_dialog";
import { disableDevice, getDevices } from "@/api/device/device";
import EditDeviceDialog from "./edit_device_dialog";

export default {
  name: "DeviceList",
  components: {
    EditDeviceDialog,
    AddDeviceDialog,
    PartitionDialog
  },
  data() {
    return {
      edit_device_numbers: [],
      filter_form: {
        zone: "",
        schedule: "",
        device_type: ""
      },
      schedules: [
        { id: 1, name: "上午" },
        { id: 2, name: "下午" },
        { id: 3, name: "晚上" }
      ],
      device_types: [
        { id: 1, name: "透析机" },
        { id: 2, name: "水处理机" }
      ],
      devices: [],

      current_select_device: null
    };
  },
  props: {
    zones: {
      type: Array,
      require: true
    },
    groups: {
      type: Array,
      require: true
    },
    device_numbers: {
      type: Array,
      require: true
    }
  },
  created() {
    this._get_devices();
  },
  methods: {
    handleEdit: function(index, row) {
      this.$refs.edit_device_dialog.show();
      this.$refs.edit_device_dialog.set_device_id(row.id);
    },
    add_device_action: function() {
      this.$refs.new_device_dialog.show();
    },
    partition_dialog_action: function() {
      this.$refs.new_partition_dialog.show();
    },
    filter_devices: function() {
      this.$emit("did_select_device", null);
      this._get_devices();
    },
    _get_devices: function() {
      getDevices(this.filter_form.device_type, this.filter_form.zone).then(
        rs => {
          var resp = rs.data;
          if (resp.state === 1) {
            // console.log(resp)
            this.devices.splice(0, this.devices.length);
            this.devices.push(...resp.data.devices);
          } else {
            this.$message.error(resp.msg);
          }
        }
      );
    },
    didCreateDevice: function(newDevice) {
      this.$refs.new_device_dialog.hide();
      this.devices.push(newDevice);
    },
    select_row: function(row, event, column) {
      // console.log(row)
      this.current_select_device = row;
      this.$emit("did_select_device", row);
    },
    update_device: function(device) {
      if (device !== undefined) {
        for (let index = 0; index < this.devices.length; index++) {
          const _device = this.devices[index];
          if (_device.id == device.id) {
            _device.name = device.name;
            _device.model = device.model;
            _device.serial_number = device.serial_number;
            _device.device_group_id = device.device_group_id;
            _device.device_number = device.device_number;
            _device.device_number_id = device.device_number_id;
            _device.device_zone_id = device.device_zone_id;
            break;
          }
        }
      }
      this.$refs.edit_device_dialog.hide();
    },
    delete_device_action: function(index, row) {
      this.current_select_device = row;
      console.log(this.current_select_device);
      if (this.current_select_device != null) {
        this.$confirm("删除后将无法恢复，确定继续删除吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          disableDevice(this.current_select_device.id).then(rs => {
            var resp = rs.data;
            if (resp.state == 1) {
              var index = this.devices.indexOf(this.current_select_device);
              if (index > -1) {
                this.devices.splice(index, 1);
              }
              this.current_select_device = null;
              this.$emit("did_select_device", null);
            } else {
              this.$message.error(resp.msg);
            }
          });
        });
      }
    }
  }
};
</script>

<style scoped>
.header {
  /* background-color: rgb(223, 249, 255); */
  background-color: rgb(236, 245, 255);
  border-style: solid;
  border-radius: 10px;
  border-color: rgb(150, 202, 253);
  border-width: 1px;
  padding: 20px 20px 0px 20px;
  margin-bottom: 10px;
}

.el-row {
  margin-bottom: 15px;
}

.el-form-item {
  margin-bottom: 5px;
}

.header .item_title {
  font-size: 14px;
}
</style>
<style>
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
</style>
