<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-left">
        <div class="filter-item">
          建筑名称:
          <el-input
            v-model="query.buildName"
            placeholder="请输入内容"
            style="width: 110px"
          ></el-input>
        </div>
        <div class="filter-item">
          地址:
          <el-input
            v-model="query.buildAddr"
            placeholder="请输入内容"
            style="width: 110px"
          ></el-input>
        </div>
        <el-button
          type="primary"
          icon="el-icon-search"
          class="search-button"
          @click="queryData()"
          >查询</el-button
        >
      </div>
      <div class="handle-button-right">
        <el-button icon="el-icon-plus" type="success" @click="addBuild()"
          >新增</el-button
        >
        <!-- <el-button icon="el-icon-delete" type="danger" @click="batchDelete"
          >删除</el-button
        > -->
      </div>
    </div>

    <el-divider></el-divider>
    <el-table
      id="out-table"
      :data="tableData"
      stripe
      border
      :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
      style="width: 100%"
    >
      <el-table-column prop="buildName" label="建筑名称"></el-table-column>
      <el-table-column prop="buildAddr" label="地址"></el-table-column>
      <el-table-column prop="longitude" label="经度"></el-table-column>
      <el-table-column prop="latitude" label="维度"></el-table-column>
      <el-table-column prop="creatTime" label="添加时间"></el-table-column>
      <el-table-column label="操作" width="130" fixed="right">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            style="color: #406ce5"
            @click="updateBuild(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            icon="el-icon-delete"
            style="color: #f27979"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="this.title_value" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="建筑名称:" :label-width="formLabelWidth">
          <el-input
            v-model="form.buildName"
            autocomplete="off"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址:" :label-width="formLabelWidth">
          <el-input
            v-model="form.buildAddr"
            autocomplete="off"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="维度:" :label-width="formLabelWidth">
          <el-input
            v-model="form.longitude"
            autocomplete="off"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="经度:" :label-width="formLabelWidth">
          <el-input
            v-model="form.latitude"
            autocomplete="off"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="dialogFormVisible = false"
          style="background: #f6f6f6"
          >关 闭</el-button
        >
        <el-button type="primary" @click="add_update_build()">{{
          this.title_value
        }}</el-button>
      </div>
    </el-dialog>

    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 30, 40]"
      @size-change="handleSizeChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="sizes,prev, pager, next"
      :total="totalCount"
    >
    </el-pagination>
  </div>
</template>


<script>
// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
import api from "@/api/building/building_mage";

export default {
  name: "javascriptthree",
  data() {
    return {
      //表单弹窗
      dialogFormVisible: false,
      //表单
      form: {
        id:undefined,
        buildName: undefined,
        buildAddr: undefined,
        latitude: undefined,
        longitude: undefined,
        ptName:undefined,
        pageNo:1,
        pageSize:20
      },
      //表单输入框宽度
      formLabelWidth: "120px",
      //存储列表数据
      tableData: [],
      //存储列表总数
      totalCount: 0,
      //列表每页条目数
      pageSize: 20,
      //开始页
      pageNo: 1,
      //存储动态列
      cols: [],

      //建筑名称
      buildName_value: "",
      //建筑地址
      buildAddr_value: "",
      //弹窗title
      title_value: "",
      query:{
        buildName: undefined,
        buildAddr: undefined,
        pageNo: 1,
        pageSize: 20,
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //重置搜索条件
    reset(){
      this.form.id = undefined;
      this.form.buildName = undefined;
      this.form.buildAddr = undefined;
      this.form.latitude = undefined;
      this.form.longitude = undefined;
      this.form.pageNo = this.pageNo,
      this.form.pageSize = this.pageSize

      this.query.buildName = undefined
      this.query.buildAddr = undefined
      this.query.pageNo = this.pageNo
      this.query.pageSize = this.pageSize
    },
    //初始列表
    getData() {
      api.queryBuild(this.form).then((Response) => {
        if(Response.data.pageList){
          this.tableData = Response.data.pageList
          this.reset()
        }
      });
    },
    //条件查询
    queryData(){
      api.queryBuild(this.query).then((Response) => {
        if(Response.data.pageList){
          this.tableData = Response.data.pageList
        }
      });
    },
    addBuild() {
      this.title_value = "新增";
      this.dialogFormVisible = true;
      this.reset()
    },
    updateBuild(index, row) {
      this.title_value = "修改";
      this.form.id = row.id;
      this.form.buildName = row.buildName;
      this.form.buildAddr = row.buildAddr;
      this.form.latitude = row.latitude;
      this.form.longitude = row.longitude;
      this.dialogFormVisible = true;
    },
    add_update_build() {
      if (this.title_value === "修改") {
        api.updateBuild(this.form).then((request) => {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          this.dialogFormVisible = false;
          this.reset()
          this.getData();
        });
      } else if (this.title_value === "新增") {
        api.addBuild(this.form).then((request) => {
          this.$message({
            type: "success",
            message: "新增成功!",
          });
          this.dialogFormVisible = false;
          this.reset()
          this.getData();
        });
      }
    },
    handleDelete(index, row) {
      this.form.id = row.id
      this.form.status = 0
      this.$confirm("确定删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          api.deletBuild(this.form).then((request) => {
            if (request.flag == true) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message.error(request.msg + "!");
            }
            this.reset()
            this.getData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //改变起始页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.form.pageNo = this.pageNo
      this.query.pageNo = this.pageNo
      this.getData();
    },
    //改变每条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.form.pageSize = this.pageSize
      this.query.pageSize = this.pageSize
      this.getData();
    },
  },
};
</script>
<style>
.el-radio {
  width: 70px;
}
.handled {
  color: #8dcf6e;
}
.unhandle {
  color: #fe5d0e;
}
</style>
