<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="FIRE_POINT_NAME" placeholder="请输入关键字"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="点位编码" label-width="110px">
              <el-input v-model="FIRE_POINT_CODE" placeholder="请输入关键字"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="负责部门" label-width="110px">
              <SelectTree
                ref="deptTree_Select"
                :key="selectForm.DEPARTMENT_ID"
                :clearable="true"
                :options="deptTreeData"
                :props="defaultProps"
                v-model="selectForm.DEPARTMENT_ID"
                placeholder="请选择部门"
                style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <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="FIRE_POINT_NAME" label="点位名称"/>
          <el-table-column prop="FIRE_POINT_CODE" label="编码"/>
          <el-table-column prop="DEVICE_COUNT" label="点位下消防器材数"/>
          <el-table-column prop="DEPARTMENT_NAME" label="负责部门"/>
          <el-table-column prop="USERNAME" label="负责人"/>
          <el-table-column label="操作" width="380">
            <template slot-scope="{row}">
              <el-button
                v-show="true"
                class="tiffany-btn"
                icon="el-icon-picture"
                type="primary"
                size="mini"
                @click="handleShowQr(row)">点位二维码
              </el-button>
              <el-button
                v-show="edit"
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="handleEdit(row.FIRE_POINT_ID)">修改
              </el-button>
              <el-button
                v-show="row.DEVICE_COUNT == 0"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="handleDelete(row)">删除
              </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-delete" @click="handleDelete">批量删除</el-button>
            <el-button type="info" icon="el-icon-plus" @click="handleEditUser">批量修改负责人</el-button>
          </div>
          <pagination
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList(FIRE_POINT_ID)"/>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogFormShow" title="查看二维码" width="680px" class="top-dialog">
      <div id="printTest" style="border: 1px solid #fff;">
        <div class="level-title" style="margin-top:20px">
          <h1>消防点位信息</h1>
        </div>
        <table class="table-ui">
          <tr>
            <td class="tbg">消防区域</td>
            <td >{{ qrInfo.FIRE_REGION_NAME }}</td>
            <td class="tbg">消防点位</td>
            <td>{{ qrInfo.FIRE_POINT_NAME }}</td>
          </tr>
          <tr>
            <td class="tbg">负责部门</td>
            <td>{{ qrInfo.DEPARTMENT_NAME }}</td>
            <td class="tbg">负责人</td>
            <td>{{ qrInfo.USERNAME }}</td>
          </tr>
        </table>
        <div class="table-qrcode">
          <vue-qr :text="qrcodeStr" :margin="0" :size="300" color-dark="#000" color-light="#fff" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormShow = false">关 闭</el-button>
        <el-button v-print="'#printTest'" type="primary">打 印</el-button>
      </div>
    </el-dialog>
    <el-dialog v-loading ="listLoading" :visible.sync="dialogEditUser" title="批量修改负责人" width="800px">
      <el-form ref="firefightingBatchEditDept" :model="dialogEditUserForm" :rules="dialogEditUserRules" label-width="150px">
        <el-row>
          <el-form-item label="负责部门" prop="USER_ID">
            <el-select v-model="dialogEditUserForm.USER_ID" placeholder="请选择人员" class="filter-item" style="width: 80%;">
              <el-option v-for="item in userList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID"/>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditUser = false">取 消</el-button>
        <el-button type="primary" @click="dialogEditUserConfirm">确 定</el-button>
      </div>

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

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

import vueQr from 'vue-qr'
import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'

export default {

  components: { Pagination, SelectTree, vueQr },

  directives: { waves },
  data() {
    return {
      config: config,
      addBtnType: true,
      listLoading: true,
      dialogFormShow: false,
      qrcodeStr: '',
      qrInfo: {},
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 20
      },
      ls: [],
      dates: [],
      total: 0,
      KEYWORDS: '',
      FIRE_POINT_NAME: '',
      FIRE_POINT_CODE: '',
      selectForm: {
        DEPARTMENT_ID: ''
      },
      // 树形菜单
      filterText: '',
      varList: [],
      pd: [],
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name'
      },
      editDataIds: [],
      dialogEditUser: false,
      dialogEditUserForm: {
        USER_ID: ''
      },
      dialogEditUserRules: {
        USER_ID: [{ required: true, message: '请选择负责人', trigger: 'change' }]
      },
      deptTreeData: [],
      userList: []
    }
  },
  watch: {
    filterText(val) {
      console.log(val)
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList()
    this.hasButton()
    this.getTreeData()
  },
  methods: {
    handleShowQr(ROW) {
      this.dialogFormShow = true
      this.qrInfo = ROW
      // this.qrcodeStr = this.config.weburlWaiwang + 'static/qrcode/views/bsbw/point_list.html?id=' + ROW.FIRE_POINT_ID
      const json = {
        MANAGER_TYPE: 'fireListManager',
        FIRE_POINT_ID: ROW.FIRE_POINT_ID
      }
      const jsonStr = JSON.stringify(json)
      this.qrcodeStr = jsonStr
    },
    handleEdit(FIRE_POINT_ID) {
      this.$parent.FIRE_POINT_ID = FIRE_POINT_ID
      this.$parent.activeName = 'Edit'
    },
    selectable(row, index) {
      return row.DEVICE_COUNT == 0
    },
    getRowKey(row) {
      return row.FIRE_POINT_ID
    },
    // 添加
    handleAdd() {
      this.$parent.activeName = 'Edit'
      this.$parent.FIRE_POINT_ID = ''
      this.$parent.FIRE_POINT_CODE = ''
      this.$parent.FIRE_POINT_NAME = ''
    },
    // 搜索
    getQuery() {
      // this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    // 获取列表
    getList(pid) {
      this.listLoading = true
      this.varList = []
      this.FIRE_POINT_ID = pid
      requestFN(
        '/firePoint/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          FIRE_POINT_NAME: this.FIRE_POINT_NAME,
          FIRE_POINT_CODE: this.FIRE_POINT_CODE,
          DEPARTMENT_ID: this.selectForm.DEPARTMENT_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.total = data.page.totalResult
        this.hasButton()
      }).catch((e) => {
        this.listLoading = false
      })
    }, goKeyReset() {
      this.FIRE_POINT_NAME = ''
      this.FIRE_POINT_CODE = ''
      this.selectForm = {
        DEPARTMENT_ID: ''
      }
      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
        })
    },
    // 部门列表树
    getTreeData() {
      requestFN(
        '/department/listTreeV2',
        {}
      ).then((data) => {
        this.deptTreeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
      })
    },
    // 批量修改负责人
    handleEditUser(row) {
      this.editDataIds = []
      if (row.FIRE_POINT_ID) {
        this.editDataIds.push(row.FIRE_POINT_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_POINT_ID)
        })
      }
      const selection = this.$refs.multipleTable.selection
      const DEPARTMENT_ID = selection[0].DEPARTMENT_ID
      if (selection.length > 1) {
        let flag = false
        selection.forEach(item => {
          if (DEPARTMENT_ID !== item.DEPARTMENT_ID) {
            this.$message({
              type: 'warning',
              message: '只能选择同一部门下的数据'
            })
            flag = true
          }
        })
        if (flag) {
          return
        }
      }
      this.getUserList(DEPARTMENT_ID)
      this.dialogEditUserForm = {
        USER_ID: ''
      }
      this.dialogEditUser = true
    },
    getUserList(DEPARTMENT_ID) {
      requestFN(
        '/user/listAll',
        {
          DEPARTMENT_ID: DEPARTMENT_ID
        }
      ).then((data) => {
        this.userList = data.userList
      }).catch((e) => {
      })
    },
    dialogEditUserConfirm() {
      this.$refs.firefightingBatchEditDept.validate((valid) => {
        if (valid) {
          this.listLoading = true
          requestFN(
            '/firePoint/batchEditFirePointUser',
            {
              DATA_IDS: this.editDataIds.join(','),
              USER_ID: this.dialogEditUserForm.USER_ID
            }
          ).then(() => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.dialogEditUser = false
            this.getList()
          }).catch(() => {})
        }
      })
    },
    handleDelete(row) {
      const DATA_IDS = []
      if (row.FIRE_POINT_ID) {
        DATA_IDS.push(row.FIRE_POINT_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_POINT_ID)
        })
      }
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/firePoint/removeFirePointByIds',
          {
            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(this.FIRE_POINT_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
      })
    }
  }
}
</script>

<style scoped >
.returnBtn {
  float: right;
}
.app-container {
  display: flex; /**/
  align-items: baseline;
}
.table-qrcode{
  text-align: center;
  padding-top: 20px;
  width: 100%;
}

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