<template>
  <div class="search-container">
    <el-button @click="handleOpen">搜索地图电梯信息</el-button>
    <el-dialog
      title="查询项"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="电梯名称">
          <el-input placeholder="请搜索电梯名称" v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="电梯地址">
          <el-input
            placeholder="请搜索电梯名称"
            v-model="formLabelAlign.region"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input placeholder="请搜索项目名称" v-model="formLabelAlign.type"></el-input>
        </el-form-item>
        <el-form-item label="二维码">
          <el-input
            placeholder="请搜索电梯二维码"
            v-model="formLabelAlign.type"
          ></el-input>
        </el-form-item>
        <el-form-item label="维保单位">
          <el-input placeholder="请搜索维保单位" v-model="formLabelAlign.type"></el-input>
        </el-form-item>
        <el-form-item label="物业单位">
          <el-input placeholder="请搜索物业单位" v-model="formLabelAlign.type"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">搜索</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      labelPosition: "left",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
    };
  },
  methods: {
    handleOpen() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  color: white;
}
::v-deep .el-input__inner {
  background: rgba(6, 15, 48, 1);
  border: solid rgb(20, 45, 134) 1px;
}
::v-deep .el-dialog {
  background: #10295f;
}
::v-deep .el-dialog__title {
  color: white;
}
::v-deep .el-dialog__footer {
  text-align: center;
}
::v-deep .el-button {
  background: rgba(6, 15, 48, 1);
  border: solid rgb(20, 45, 134) 1px;
  color: white !important;
  width: 6rem;
}
.search-container {
  pointer-events: all;
  position: fixed;
  top: 3.5rem;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
