<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>

      <el-button
        size="small"
        icon="el-icon-circle-plus-outline"
        :disabled="$store.getters.xt_user.subscibe.state == 3 ? true : false"
        type="primary"
        @click="addDeviceNumberAction"
        >新增</el-button
      >
    </div>
    <div class="app-container" v-loading="loading">
      <el-row>
        <el-col :span="24">
          <el-table
            :data="device_numbers"
            border
            :row-style="{ color: '#303133' }"
            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
          >
            <el-table-column prop="number" label="床位号" align="center">
            </el-table-column>
            <el-table-column
              prop="zone_name"
              label="所属分区"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="group_name"
              label="所属分组"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <el-button
                    :disabled="
                      $store.getters.xt_user.subscibe.state == 3 ? true : false
                    "
                    type="primary"
                    icon="el-icon-edit-outline"
                    size="small"
                    @click="modifyDeviceNumberAt(scope.row)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button
                    :disabled="
                      $store.getters.xt_user.subscibe.state == 3 ? true : false
                    "
                    type="danger"
                    icon="el-icon-delete"
                    size="small"
                    @click="deleteDeviceNumberAt(scope.row)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-dialog
        width="800px"
        :title="number_form.id === 0 ? '新增床位号/机号' : '修改床位号/机号'"
        :visible.sync="showEditDeviceNumber"
      >
        <el-form
          :model="number_form"
          ref="form_number"
          :label-width="formLabelWidth"
        >
          <el-form-item
            size="small"
            label="床位号/机号 : "
            prop="number"
            :rules="[
              { required: true, message: '请输入床位号/机号', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model="number_form.number"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item
            size="small"
            label="所属分区 : "
            prop="zone"
            :rules="[
              { required: true, message: '请选择分区', trigger: 'blur' }
            ]"
          >
            <el-select v-model="number_form.zone" style="width: 220px">
              <el-option
                v-for="item in zones"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            size="small"
            label="所属分组 : "
            prop="group"
            :rules="[
              { required: true, message: '请输入分组', trigger: 'blur' }
            ]"
          >
            <el-select v-model="number_form.group" style="width: 220px">
              <el-option
                v-for="item in groups"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
                    <el-button @click="cancelModifyDeviceNumber">取 消</el-button>
                    <el-button :disabled="$store.getters.xt_user.subscibe.state==3?true:false" type="primary" @click="editDeviceNumberSubmitAction">保存</el-button>
                </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelModifyDeviceNumber">取 消</el-button>
          <el-button
            :disabled="
              $store.getters.xt_user.subscibe.state == 3 ? true : false
            "
            type="primary"
            @click="editDeviceNumberSubmitAction"
            >保 存</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getDeviceInitData,
  createDeviceNumber,
  modifyDeviceNumber,
  disableDeviceNumber
} from "@/api/device/device";
import BreadCrumb from "@/xt_pages/components/bread-crumb";

export default {
  name: "DeviceNumberMain",
  data() {
    return {
      crumbs: [
        { path: false, name: "设备管理" },
        { path: "/device/numbers", name: "床位管理" }
      ],
      loading: false,
      number_form: {
        id: 0,
        number: "",
        zone: "",
        group: ""
      },
      formLabelWidth: "110px",
      showEditDeviceNumber: false,
      zones: [],
      groups: [],
      device_numbers: []
    };
  },
  components: {
    BreadCrumb
  },
  created() {
    this.loading = true;
    getDeviceInitData().then(rs => {
      this.loading = false;
      var resp = rs.data;
      if (resp.state === 1) {
        // console.log(resp)
        this.zones.push(...resp.data.zones);
        this.groups.push(...resp.data.groups);
        this.device_numbers.push(...resp.data.numbers);
      } else {
        this.$message.error(resp.msg);
      }
    });
  },
  methods: {
    addDeviceNumberAction() {
      this.showEditDeviceNumber = true;
    },
    modifyDeviceNumberAt(row) {
      this.number_form.id = row.id;
      this.number_form.number = row.number;
      this.number_form.zone = row.zone_id;
      this.number_form.group = row.group_id;
      this.showEditDeviceNumber = true;
    },
    cancelModifyDeviceNumber() {
      this.number_form.id = 0;
      this.number_form.number = "";
      this.number_form.zone = "";
      this.number_form.group = "";
      this.$refs.form_number.clearValidate();
      this.showEditDeviceNumber = false;
    },
    editDeviceNumberSubmitAction() {
      this.$refs.form_number.validate(valid => {
        if (valid) {
          if (this.number_form.id === 0) {
            createDeviceNumber(
              this.number_form.number,
              this.number_form.zone,
              this.number_form.group
            ).then(rs => {
              var resp = rs.data;
              if (resp.state === 1) {
                var newNumber = resp.data.number;
                this.device_numbers.push(newNumber);
                this.cancelModifyDeviceNumber();
              } else {
                this.$message.error(resp.msg);
              }
            });
          } else {
            modifyDeviceNumber(
              this.number_form.id,
              this.number_form.number,
              this.number_form.zone,
              this.number_form.group
            ).then(rs => {
              var resp = rs.data;
              // console.log(resp.data)
              if (resp.state === 1) {
                for (
                  let index = 0;
                  index < this.device_numbers.length;
                  index++
                ) {
                  const number = this.device_numbers[index];
                  if (number.id == this.number_form.id) {
                    number.number = resp.data.number.number;
                    number.zone_id = resp.data.number.zone_id;
                    number.group_id = resp.data.number.group_id;
                    number.zone_name = resp.data.number.zone_name;
                    number.group_name = resp.data.number.group_name;
                    break;
                  }
                }
                this.cancelModifyDeviceNumber();
              } else {
                this.$message.error(resp.msg);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    deleteDeviceNumberAt: function(row) {
      this.$confirm("删除后将无法恢复，确定继续删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        disableDeviceNumber(row.id).then(rs => {
          this.loading = false;
          var resp = rs.data;
          if (resp.state == 1) {
            var index = this.device_numbers.indexOf(row);
            if (index > -1) {
              this.device_numbers.splice(index, 1);
            }
          } else {
            this.$message.error(resp.msg);
          }
        });
      });
    }
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
</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>
