<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.name"
        >
        </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>

        <permission-btn
          moduleName="modulemanager"
          :size="'mini'"
          v-on:btn-event="onBtnClicked"
        ></permission-btn>
      </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="imaUrl"
                label="图标"
                show-overflow-tooltip
                align="center"
              >
                <template  slot-scope="scope">
                  <img :src="image_base+'/'+scope.row.imaUrl" alt="">
                </template>
              </el-table-column>
              <el-table-column
                prop="unitName"
                label="队伍名称"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>

              <el-table-column
                prop="createTime"
                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"
        :detailInfo="detailInfo"
        @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>

    <!-- 导入护林员 -->
    <el-dialog
      width="400px"
      height="60%"
      top=" calc(50vh - 340px)"
      class="dialog-mini body-small addWindow"
      v-el-drag-dialog
      :title="'导入信息'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="importVisible"
    >
      <ImportForestranger v-if="importVisible" @importSuccess="importSuccess"></ImportForestranger>
    </el-dialog>
  </div>
</template>

<script>
import AppConfigInfo from "/public/config/app.json";
import Pagination from "@/components/Pagination";
import { listToTreeSelect } from "@/utils";
import extend from "@/extensions/delRows.js";
import * as modules from "@/api/modules";
import * as login from "@/api/login";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import waves from "@/directive/waves"; // 水波纹指令
import permissionBtn from "@/components/PermissionBtn";
import elDragDialog from "@/directive/el-dragDialog";
import iconData from "@/assets/public/css/comIconfont/iconfont/iconfont.json";
import { getMethodCommon, postMethodCommon } from "@/api/common";
import AddForm from "./widget/AddForm";

import Sticky from "@/components/Sticky";
import ImportForestranger from './widget/ImportForestranger.vue'
import EditForm  from './widget/EditForm.vue'
let VUE_APP_BASE_IMG_URL = process.env.VUE_APP_BASE_IMG_URL
export default {
  name: "module",
  components: {
    permissionBtn,
    Pagination,
    AddForm,
    Sticky,
    ImportForestranger,
    EditForm
  },
  mixins: [extend],
  directives: {
    waves,
    elDragDialog,
  },
  data() {
    return {
      image_base:VUE_APP_BASE_IMG_URL,
      areaId:null,
      orgs:[],
      cascaderProps:{label:'name',value:'id',children:'child',checkStrictly: true},
      importVisible:false,
      rowdata: {},
      tableKey: 0,
      titleStr: "添加",
      tableData: [],
      addServiceVisible: false,
      editServiceVisible:false,
      total: 0,
      listQuery: {
        // 查询条件
        pageIndex: 1,
        pageSize: 20,
        name: null,
      },
      detailInfo: [],
      clocklnglat: "",
      clockInList: [],
      clockInName: "",
      clockInVisible: false,
      rowdataKey: 1,
      flyCenter: [],
      clockDetail: {},
    };
  },
  computed: {},
  filters: {},
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    handleChange(e){
            this.listQuery.areaId = e && e[e.length-1];
            this.getList();
        },
    gethlyList(){
            getMethodCommon("/FireGrid/LoadUsers").then(res =>{
                this.orgs = res.data;
                this.handleOrgs();
            })
        },
        handleOrgs(orgs){
            for(let i=0;i<this.orgs[0].child.length;i++){
                if(this.orgs[0].child[i]){
                  if(this.orgs[0].child[i].child){
                            this.orgs[0].child[i].child = null;
                        }

                    // for(let j=0;j<this.orgs[0].child[i].child.length;j++){
                        
                    // }
                }
                
            }
        },
    importSuccess(){
        this.importVisible = false;
        this.getList();
    },  
    rightClick(e) {
      console.log("rightClick", e);
      this.clockInVisible = true;
      this.clocklnglat = e;
      this.clockDetail = null;
    },
    editClock(e) {
      console.log("223311", e);
      this.clockDetail = e;
      this.clockInVisible = true;
    },
    gofly(item) {
      console.log("iii", item);
      this.flyCenter = [item.lng, item.lat];
    },
    delItem(item) {
      console.log("123", item);
      let param = {
        id: item.id,
      };
      this.$confirm("确定删除本条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postMethodCommon("/FireGrid/DeleteCheckPoint?id=" + param.id).then(
            (res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
              }
              this.rowdataKey++;
              this.getClockInList();
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    clockInSuccess() {
      this.rowdataKey++;
      this.getClockInList();
    },
    getClockInList() {
      let param = {
        name: this.clockInName,
      };
      getMethodCommon("/FireGrid/GetTotalCheckPoint", param).then((res) => {
        this.clockInList = res.result;
      });
    },
    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.length != 1) {
        this.$message({
          type: "info",
          message: "请选择一条数据进行删除",
        });
        return;
      }
      this.$confirm("确定删除所选数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          postMethodCommon("/FireCodePC/DeleteUserUnitById?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.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;
    },
    onBtnClicked: function (domId) {
      console.log("you click:" + domId);
      switch (domId) {
        case "btnAdd":
          this.addServiceVisible = true;
          break;
        case "btnEdit":
          if (this.multipleSelection.length != 1) {
            this.$message({
              message: "只能选中一个进行编辑",
              type: "error",
            });
            return;
          }
          this.handleUpdate();
          break;
        case "btnDel":
          if (this.multipleSelection.length < 1) {
            this.$message({
              message: "至少删除一个",
              type: "error",
            });
            return;
          }
          this.handleDelete();
          break;
        case "btnAddMenu":
          this.handleAddMenu();
          break;
        case "btnEditMenu":
          if (this.selectMenus.length !== 1) {
            this.$message({
              message: "只能选中一个进行编辑",
              type: "error",
            });
            return;
          }
          this.handleEditMenu(this.selectMenus[0]);
          break;
        case "btnDelMenu":
          if (this.selectMenus.length < 1) {
            this.$message({
              message: "至少删除一个",
              type: "error",
            });
            return;
          }
          this.handleDelMenus(this.selectMenus);
          break;
        default:
          break;
      }
    },
    getList() {
      this.listLoading = true;
      getMethodCommon("/FireCodePC/GetUserUnit", 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();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      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-container {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

.site-header {
  width: 100%;
  height: 99px;
  background-image: url(/img/gridman/header.png);
  background-size: 100% 100%;
  text-align: center;
  color: #fff;
  line-height: 90px;
  font-size: 36px;
  letter-spacing: 5px;
}

.header-btn {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 4%;
  left: 2%;
}

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

.app-container {
  height: 100%;
}



.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el-card__header {
  padding: 12px 20px;
}

.selectIcon-box {
  text-align: center;
  border: 1px solid #eeeeee;
  border-right: 0;
  border-bottom: 0;

  .el-col {
    padding: 10px 0;
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;

    &.active {
      .iconfont {
        color: #409eff;
      }
    }
  }

  .iconfont {
    cursor: pointer;
    font-size: 20px;
  }
}

.custom-icon-input::before {
  font-size: 18px;
  position: absolute;
  right: 10px;
  top: 0;
}
.forestlistbox {
  height: calc(100% - 30px);
  padding: 10px;
  overflow: auto;
}
.forestUl {
  margin-bottom: 10px;
  padding: 10px 20px;
}


</style>
