<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()">查询</el-button>
        <el-button type="primary" size="mini" @click="add()">添加</el-button>
        <el-button type="warning" size="mini" @click="react()">编辑</el-button>
        <el-button type="danger" size="mini" @click="del()">删除</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">
        <el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
          highlight-current-row style="width: 100%;" height="calc(100% - 54px)" @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="gender" label="性别" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="phone" label="电话" show-overflow-tooltip align="center">
          </el-table-column>
        </el-table>
        <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>

  </div>


</template>

<script>
  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'

  export default {
    name: 'module',
    components: {
      permissionBtn,
      Pagination,
      AddForm,
      Sticky
    },
    mixins: [extend],
    directives: {
      waves,
      elDragDialog
    },
    data() {
      return {
        tableKey: 0,
        titleStr: '添加',
        tableData: [],
        addServiceVisible: false,
        total: 0,
        listQuery: {
          // 查询条件
          pageIndex: 1,
          pageSize: 20,
          name: null,
        },
        detailInfo: []

      }
    },
    computed: {

    },
    filters: {

    },
    created() {
      this.getList()
    },
    mounted() {

    },
    methods: {
      add() {
        this.addServiceVisible = true;
        this.detailInfo = []
        this.titleStr = '添加'
      },
      addSuccess() {
        this.addServiceVisible = 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("/FireGrid/DeleteFireFighter?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.detailInfo = this.multipleSelection
        this.addServiceVisible = 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("/FireGrid/GetFireFighter", 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>
  .el-table {
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      width: 10px;
      /*滚动条宽度*/
      height: 10px;
      /*滚动条高度*/
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #071e4a inset;
      /*滚动条的背景区域的内阴影*/
      border-radius: 10px;
      /*滚动条的背景区域的圆角*/
      background-color: rgba(0, 9, 34, 1);
      /*滚动条的背景颜色*/
    }

    /*定义滑块 内阴影+圆角*/
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #00a0e9 inset;
      /*滚动条的内阴影*/
      border-radius: 10px;
      /*滚动条的圆角*/
      background-color: rgba(0, 9, 34, 1);

      /*滚动条的背景颜色*/
    }
  }

  ::v-deep .el-pagination__jump {
    color: #fff;
  }

  ::v-deep .sticky {
    background: rgba(0, 9, 34, 0.6);
  }

  ::v-deep .dialog-mini .el-dialog__header {
    background: rgba(10, 39, 78, 1);
  }

  ::v-deep .dialog-mini .el-dialog__header .el-dialog__title {
    color: #fff;

  }

  ::v-deep .el-descriptions__body {
    background: rgba(0, 9, 34, 1);
    color: #fff;
  }

  ::v-deep .el-descriptions-item__label.is-bordered-label {
    background: rgba(0, 9, 34, 0.6);
    color: #fff;
  }

  ::v-deep .el-input__inner {
    background: rgba(0, 9, 34, 1);
    color: #fff;
  }

  ::v-deep .el-dialog {
    background: rgba(10, 39, 78, 1);

  }

  ::v-deep .el-loading-mask {
    background: rgba(0, 9, 34, 0.9);

  }

  .filter-container {
    text-align: right;
  }

  .site-container {
    width: 100%;
    height: 100%;
    background-image: url(/img/gridman/bg.png);
    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%;
    background: rgba(0, 9, 34, 0.6);
  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  ::v-deep .el-table {
    background: rgba(0, 9, 34, 0.6);
    border-left: 1px solid #00EDE8;
  }

  ::v-deep .el-table .el-table__body tr:hover td {
    background: rgba(24, 77, 143, 0.4) !important;
    cursor: pointer;
  }

  ::v-deep .el-table .el-table__body tr.current-row td {
    cursor: pointer;
    background: rgba(24, 77, 143, 0.4) !important;
  }

  ::v-deep .el-table tr {
    background: rgba(0, 9, 34, 0.6);
    border: none;
    color: #fff;

  }

  ::v-deep .el-table th.el-table__cell {
    background: rgba(0, 9, 34, 0.6);
    color: #fff;
    border: 1px solid #00EDE8;

  }

  ::v-deep .el-pagination__total,
  .el-pagination__jump {
    color: #fff;
  }

  ::v-deep .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #00EDE8;
  }

  ::v-deep .el-table--border .el-table__cell,
  .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #00EDE8;
  }

  ::v-deep .pagination-container {
    background: rgba(0, 9, 34, 0.6) !important;
    border: none;
  }

  .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;
  }
</style>