<template>
  <div class="qyjgBox">
    <div class="reportHead">
      <h3>区域管理</h3>
    </div>
    <div class="page-body">
      <el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
        >添加区域</el-button
      >
      <div class="qyjgTableBox">
        <el-table
          v-loading="qyjgLoading"
          :data="qyjgTableData"
          stripe
          border
          style="width: 100%"
          height="calc(100% - 0px)"
        >
          <el-table-column prop="id" label="ID"> </el-table-column>
          <el-table-column prop="mc" label="区域名称"> </el-table-column>
          <el-table-column prop="bdzName" label="所属电站"> </el-table-column>
          <el-table-column label="操作" width="200" class-name="editClass">
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="handleEditClick(scope.row)"
                size="small"
                icon="el-icon-document"
                >编辑</el-link
              >
              <el-link
                type="danger"
                @click="handleDeleteClick(scope.row)"
                size="small"
                icon="el-icon-delete"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <addqyjgDialog ref="qyjgAddRef" :title="title"></addqyjgDialog>
  </div>
</template>
<script>
import { areaDeleteApi, areaListAllApi } from "@/utils/api/index";
import addqyjgDialog from "./components/addqyjgDialog";
export default {
  components: {
    addqyjgDialog,
  },
  data() {
    return {
      qyjgLoading: false,
      qyjgTableData: [],
      title: "",
    };
  },
  created() {},
  mounted() {
    this.getAreaAllList();
  },
  watch: {},
  methods: {
    //获取所有区间间隔
    getAreaAllList() {
      this.qyjgLoading = true;
      areaListAllApi()
        .then((res) => {
          console.log(res);
          this.qyjgTableData = res.data;
          this.qyjgLoading = false;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //新增
    handleAddClick() {
      this.title = "添加区域";
      this.$refs.qyjgAddRef.display();
      //this.$refs.qyjgAddRef.getdataform(null);
    },
    //修改
    handleEditClick(data) {
      this.title = "编辑";
      this.$refs.qyjgAddRef.display();
      this.$refs.qyjgAddRef.getdataform(data);
    },
    //删除数据
    handleDeleteClick(data) {
      this.$confirm("确定要删除记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          areaDeleteApi({ id: data.id }).then((res) => {
            if (res.success) {
              this.$message({
                duration: 1500,
                showClose: true,
                type: "success",
                message: "删除成功",
              });
              this.getAreaAllList(); //刷新
            } else {
              this.$message.error(res.data);
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less">
.qyjgBox {
  width: 100%;
  height: 100%;
  .page-body {
    width: calc(100% - 24px);
    height: calc(100% - 74px);
    padding: 12px;
    background: #eee;
    .qyjgTableBox {
      margin-top: 8px;
      height: calc(100% - 38px);
      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
