<template>
  <div class="site-content">
    <sticky :className="'sub-navbar'">
      <div class="filter-container">

        <el-input
          @keyup.enter.native="handleFilter"
          size="mini"
          prefix-icon="el-icon-search"
          style="width: 200px; margin-bottom: 0; margin: 0px 12px"
          class="filter-item"
          :placeholder="'姓名'"
          v-model="listQuery.username"
        >
        </el-input>

        <el-button type="primary" size="mini" @click="getList()" icon="el-icon-search"
          >查询</el-button
        >
        <el-button type="primary" size="mini" @click="add()" icon="el-icon-plus">添加</el-button>
        <el-button type="warning" size="mini" @click="react()" icon="el-icon-edit">编辑</el-button>
        <el-button type="danger" size="mini" @click="del()" icon="el-icon-delete">删除</el-button>
 
      </div>
    </sticky>
    <div class="app-container flex-item">
      <div class="fh">
        <div class="flex jc-sb" style="height: calc(100% - 100px)">
          <div class="mr-1 max-h" style="width:100%;">
            <el-table
              ref="mainTable"
              :key="tableKey"
              :data="tableData"
              v-loading="listLoading"
              border
              fit
              highlight-current-row
              style="width: 100%"
              height="100%"
              @row-click="rowClick"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" align="center" width="55">
              </el-table-column>
              
              <el-table-column
                prop="name"
                label="姓名"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>

              <el-table-column
                prop="account"
                label="账号"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>

              <el-table-column width="120px" :label="'用户身份'">
                <template slot-scope="scope">
                  <span v-if="scope.row.identity==2">护林员</span>
                  <span v-if="scope.row.identity==3">消防员</span>
                  <span v-if="scope.row.identity==4">巡查员</span>
                  <span v-if="scope.row.identity==5">管理人员</span>
                </template>
              </el-table-column>
              
              <el-table-column
                prop="unitName"
                label="单位"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>

            </el-table>
          </div>
        </div>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.pageIndex"
          :limit.sync="listQuery.pageSize"
          @pagination="handleCurrentChange"
        />
      </div>
    </div>

    <el-dialog
      width="40%"
      height="60%"
      top=" calc(50vh - 340px)"
      class="dialog-mini body-small addWindow"
      v-el-drag-dialog
      :title="titleStr"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="addServiceVisible"
    >
      <AddForm
        v-if="addServiceVisible"
        @addSuccess="addSuccess"
        @close="addServiceVisible = false"
      ></AddForm>
    </el-dialog>

    <el-dialog
      width="40%"
      height="60%"
      top=" calc(50vh - 340px)"
      class="dialog-mini body-small addWindow"
      v-el-drag-dialog
      :title="titleStr"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="editServiceVisible"
    >
      <EditForm
        v-if="editServiceVisible"
        @addSuccess="editSuccess"
        :detailInfo="editForm"
        @close="editServiceVisible = false"
      ></EditForm>
    </el-dialog>

   
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import extend from "@/extensions/delRows.js";
import waves from "@/directive/waves"; // 水波纹指令
import elDragDialog from "@/directive/el-dragDialog";
import { getMethodCommon, postMethodCommon } from "@/api/common";
import AddForm from "./widget/AddForm";
import Sticky from "@/components/Sticky";
import EditForm  from './widget/EditForm.vue'

export default {
  name: "module",
  components: {
    Pagination,
    AddForm,
    Sticky,
    EditForm
  },
  mixins: [extend],
  directives: {
    waves,
    elDragDialog,
  },
  data() {
    return {
      tableKey: 0,
      titleStr: "添加",
      tableData: [],
      addServiceVisible: false,
      editServiceVisible:false,
      total: 0,
      listQuery: {
        // 查询条件
        pageIndex: 1,
        pageSize: 20,
        username: null,
      },
      detailInfo: [],
    };
  },
  computed: {},
  filters: {},
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
      
    add() {
      this.addServiceVisible = true;
      this.detailInfo = [];
      this.titleStr = "添加";
    },
    addSuccess() {
      this.addServiceVisible = false;
      this.getList();
    },
    editSuccess(){
      this.editServiceVisible = false;
      this.getList();
    },
    del() {
      var _this = this;
      if (!this.multipleSelection || this.multipleSelection.length != 1) {
        this.$message({
          type: "info",
          message: "请选择一条数据进行删除",
        });
        return;
      }
      this.$confirm("确定删除所选数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          postMethodCommon("/FireCodeApp/DeleteForestryUser?id=" +
              _this.multipleSelection[0].id,
            {}
          ).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
            }
            _this.getList();
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    react() {
      if (!this.multipleSelection || this.multipleSelection.length != 1) {
        this.$message({
          type: "info",
          message: "请选择一条数据进行编辑",
        });
        return;
      }
      this.editForm = this.multipleSelection[0];
      this.editServiceVisible = true;
      this.titleStr = "编辑";
    },
    rowClick(row) {
      this.$refs.mainTable.clearSelection();
      this.$refs.mainTable.toggleRowSelection(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    
    getList() {
      this.listLoading = true;
      getMethodCommon("/FireCodeApp/GetForestryUser", this.listQuery).then(
        (res) => {
          if (res.code == 200) {
            console.log(res);
            this.tableData = res.data;

            this.total = res.count;
            this.listLoading = false;
          }
        }
      );
    },
    handleFilter() {
      this.listQuery.pageIndex = 1;
      this.getList();
    },
 
    handleCurrentChange(val) {
      this.listQuery.pageIndex = val.page;
      this.listQuery.pageSize = val.limit;
      this.getList();
    },

    handleUpdate() {
      this.editForm = this.multipleSelection[0];
      this.editServiceVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>


.filter-container {
  text-align: right;
}
 
.site-content {
  width: 100%;
  height: 94%;
  background: rgba(0, 9, 34, 0.6);
}

.app-container {
  height: 100%;
}

 
 
 
 
 


</style>
