<template>
  <div class="app-container">
    <div class="rightCont">
      <el-form label-width="50px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="区域名称/编码" label-width="110px">
              <el-input v-model="KEYWORDS" placeholder="请输入关键字"/>
            </el-form-item>
          </el-col>
          <el-col :span="4"/>
          <el-col :span="4">
            <el-form-item label-width="10px">
              <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
                搜索
              </el-button>
              <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="varList"
          :row-key="getRowKey"
          border
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column :selectable="selectable" type="selection" reserve-selection width="55" align="center"/>
          <el-table-column type="index" label="序号" width="55" align="center"/>
          <el-table-column prop="FIRE_REGION_NAME" label="区域名称"/>
          <el-table-column prop="DEPARTMENT_NAME" label="负责部门"/>
          <el-table-column prop="FIRE_REGION_CODE" label="编码"/>
          <el-table-column prop="ITEMCOUNT" label="区域下点位数"/>
          <el-table-column prop="STATE" label="状态">
            <template slot-scope="{row}">
              <span v-if="row.STATE === 1" class="color-red">禁用</span>
              <span v-if="row.STATE === 0" class="color-green">启用</span>
            </template>
          </el-table-column>
          <el-table-column prop="REMAKE" label="备注"/>
          <el-table-column label="操作" width="300">
            <template slot-scope="{row}">
              <el-button
                v-show="edit"
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="handleEdit(row.FIRE_REGION_ID,row.STATE)">编辑
              </el-button>
              <el-button
                v-show="edit && row.ITEMCOUNT == 0"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="handelDelete(row)">删除
              </el-button>
              <el-button
                v-show="row.STATE === 0"
                type="warning"
                icon="el-icon-circle-close"
                size="mini"
                @click="handleClose(row.FIRE_REGION_ID,row.FIRE_REGION_NAME)">禁用
              </el-button>
              <el-button
                v-show="row.STATE === 1"
                type="success"
                icon="el-icon-circle-check"
                size="mini"
                @click="handleOpen(row.FIRE_REGION_ID,row.FIRE_REGION_NAME)">启用
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div>
            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            <el-button type="danger" icon="el-icon-plus" @click="handelDelete">批量删除</el-button>
            <el-button type="info" icon="el-icon-plus" @click="handelEditDept">批量修改负责部门</el-button>
          </div>
          <pagination
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList(HIDDENREGION_ID)"/>
        </div>
      </div>
    </div>
    <el-dialog v-loading ="listLoading" :visible.sync="dialogEditDept" title="批量修改负责部门" width="800px">
      <el-form ref="firefightingBatchEditDept" :model="form" :rules="rule" label-width="150px">
        <el-row>
          <el-form-item label="负责部门" prop="DEPARTMENT_ID">
            <SelectTree
              v-if="deptTreeData.length !== 0"
              ref="deptTree_Select"
              :key="form.DEPARTMENT_ID"
              :clearable="false"
              :options="deptTreeData"
              :props="defaultProps"
              v-model="form.DEPARTMENT_ID"
              style="width: 80%;"
              placeholder="请选择部门"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditDept = false">取 消</el-button>
        <el-button type="primary" @click="dialogEditDeptConfirm">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { requestFN } from '@/utils/request'

import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'

export default {

  components: { Pagination, SelectTree },

  directives: { waves },
  data() {
    return {
      addBtnType: true,
      listLoading: true,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 20
      },
      ls: [],
      dates: [],
      total: 0,
      KEYWORDS: '',
      // 树形菜单
      filterText: '',
      varList: [],
      pd: [],
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name'
      },
      dialogEditDept: false,
      form: {
        DEPARTMENT_ID: ''
      },
      rule: {
        DEPARTMENT_ID: [{ required: true, message: '负责部门不能为空', trigger: 'blur' }]
      },
      deptTreeData: [],
      editDataIds: []
    }
  },
  watch: {
    filterText(val) {
      console.log(val)
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList()
    this.hasButton()
    this.getTreeList()
    this.getTreeData()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleEdit(FIRE_REGION_ID, STATE) {
      if (STATE == 1) {
        this.$message({
          message: '该区域已禁用',
          type: 'warning'
        })
        return
      }
      this.$parent.FIRE_REGION_ID = FIRE_REGION_ID
      this.$parent.activeName = 'Edit'
    },
    handleSubset(FIRE_REGION_ID) {
      this.$parent.FIRE_REGION_NAME = FIRE_REGION_ID
      this.$parent.activeName = 'Subset'
    },
    // 部门列表树
    getTreeData() {
      requestFN(
        '/department/listTreeV2',
        {}
      ).then((data) => {
        this.deptTreeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
      })
    },
    handleClose(FIRE_REGION_ID, name) {
      this.$confirm('确定要禁用[' + name + ']吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/fireregion/udpStateById',
          {
            FIRE_REGION_ID: FIRE_REGION_ID,
            STATE: 1
          }
        ).then(() => {
          this.$message({
            message: '禁用成功',
            type: 'success'
          })
          this.listLoading = false
          this.getTreeList()
          this.varList = []
          this.listQuery.page = 1
          this.getList(this.FIRE_REGION_ID)
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    handleOpen(FIRE_REGION_ID, name) {
      this.$confirm('确定要启用[' + name + ']吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/fireregion/udpStateById',
          {
            FIRE_REGION_ID: FIRE_REGION_ID,
            STATE: 0
          }
        ).then(() => {
          this.$message({
            message: '启用成功',
            type: 'success'
          })
          this.listLoading = false
          this.getTreeList()
          this.varList = []
          this.listQuery.page = 1
          this.getList(this.FIRE_REGION_ID)
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    getRowKey(row) {
      return row.FIRE_REGION_ID
    },
    selectable(row, index) {
      return row.ITEMCOUNT == 0
    },
    // 批量修改负责部门
    handelEditDept(row) {
      this.editDataIds = []
      if (row.FIRE_REGION_ID) {
        this.editDataIds.push(row.FIRE_REGION_ID)
      } else {
        const selection = this.$refs.multipleTable.selection
        if (!selection.length > 0) {
          this.$message({
            type: 'warning',
            message: '请选择要修改负责部门的数据'
          })
          return
        }
        selection.forEach(item => {
          this.editDataIds.push(item.FIRE_REGION_ID)
        })
      }
      this.dialogEditDept = true
      this.form = {
        DEPARTMENT_ID: ''
      }
    },
    dialogEditDeptConfirm() {
      this.$refs.firefightingBatchEditDept.validate((valid) => {
        if (valid) {
          this.listLoading = true
          requestFN(
            '/fireregion/batchEditDeptByIds',
            {
              DATA_IDS: this.editDataIds.join(','),
              DEPARTMENT_ID: this.form.DEPARTMENT_ID
            }
          ).then(() => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.$refs.multipleTable.clearSelection()
            this.listLoading = false
            this.dialogEditDept = false
            this.varList = []
            this.listQuery.page = 1
            this.getList()
          }).catch((e) => {
            this.listLoading = false
          })
        }
      })
    },
    // 批量删除
    handelDelete(row) {
      const DATA_IDS = []
      if (row.FIRE_REGION_ID) {
        DATA_IDS.push(row.FIRE_REGION_ID)
      } else {
        const selection = this.$refs.multipleTable.selection
        if (!selection.length > 0) {
          this.$message({
            type: 'warning',
            message: '请选择要删除的数据'
          })
          return
        }
        selection.forEach(item => {
          DATA_IDS.push(item.FIRE_REGION_ID)
        })
      }
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/fireregion/delFireRegionByIds',
          {
            DATA_IDS: DATA_IDS.join(',')
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.$refs.multipleTable.clearSelection()
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    // 添加
    handleAdd() {
      this.$parent.activeName = 'Edit'
      this.$parent.FIRE_REGION_ID = ''
      this.$parent.FIRE_REGION_CODE = ''
      this.$parent.FIRE_REGION_NAME = ''
    },
    // 搜索
    getQuery() {
      // this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    // 获取列表
    getList(pid) {
      this.listLoading = true
      this.varList = []
      this.HIDDENREGION_ID = pid
      requestFN(
        '/fireregion/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          KEYWORDS: this.KEYWORDS
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.total = data.page.totalResult
        this.hasButton()
      }).catch((e) => {
        this.listLoading = false
      })
    }, goKeyReset() {
      this.KEYWORDS = ''
      this.getList()
    },
    getDict() {
      requestFN(
        'dictionaries/getLevels',
        {
          DICTIONARIES_ID: '4a3d0d99b0ea4e268c11dd0b18866917'
        }
      ).then((data) => {
        this.typeList = data.list
      })
        .catch((e) => {
          this.listLoading = false
        })

      requestFN(
        'dictionaries/getLevels',
        {
          DICTIONARIES_ID: 'f60cf0e8315b4993b6d6049dd29f2ba5'
        }
      ).then((data) => {
        this.periodList = data.list
      })
        .catch((e) => {
          this.listLoading = false
        })

      requestFN(
        'dictionaries/getLevels',
        {
          DICTIONARIES_ID: '4a661fa8aedc4d158c9cddaa9d2ec47e'
        }
      ).then((data) => {
        this.listingLevelList = this.listingLevelList.concat(data.list)
      })
        .catch((e) => {
          this.listLoading = false
        })
    },

    handleDelete(id, name) {
      this.$confirm('确定要删除[' + name + ']吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/fireregion/delFireRegionByIds',
          {
            FIRE_REGION_ID: id
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.getTreeList()
          this.varList = []
          this.listQuery.page = 1
          this.getList(this.FIRE_REGION_ID)
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },

    hasButton: function() {
      var keys = 'listmanager:add,listmanager:del,listmanager:edit,toExcel'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.listmanagerfhadminadd		// 新增权限
        this.del = data.listmanagerfhadmindel		// 删除权限
        this.edit = data.listmanagerfhadminedit	// 修改权限
        this.toExcel = data.toExcel // 导出到excel权限
      }).catch((e) => {
        this.listLoading = false
      })
    },
    handleNodeClick(node, data, value) {
      /*
      this.handleEdit(node.id)
*/
      // this.getListSubset(node.id)
      this.getPaging(node.id)
    },
    getTreeList() {
      this.treeLoading = true
      requestFN(
        '/hiddenRegion/listAll',
        {}
      ).then((data) => {
        this.treeLoading = false
        this.treeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
        this.treeLoading = false
      })
    }
  }
}
</script>

<style scoped>
.returnBtn {
  float: right;
}

.app-container {
  display: flex; /**/
  align-items: baseline;
}

.rightCont {
  width: 100%
}
</style>