<template>
  <el-dialog :visible.sync="dialogFormVisible" title="新增人员授权" append-to-body width="1000px" @close="cancel">
    <!--策略名称-->
    <el-row :gutter="20">
      <el-col :span="5">
        <dept-select v-model="listQuery.deptId" :need-top="false" :dept-show="true" size="small" placeholder="选择部门"/>
      </el-col>
      <el-col :span="5">
        <el-input v-model.trim="listQuery.keyword" type="text" size="small" placeholder="姓名/人员编号"/>
      </el-col>
      <el-col :span="5">
        <el-select v-model="listQuery.groupId" placeholder="人员组别" size="small" clearable>
          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select v-model="listQuery.personType" placeholder="人员类型" size="small" clearable @change="listQuery.cardType=''">
          <el-option label="员工" value="1"/>
          <el-option label="访客" value="0"/>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="listQuery.cardType" placeholder="卡类型" size="small" clearable>
          <el-option v-for="item in cardList" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 10px">
      <!--<el-col :span="5">-->
        <!--<el-input v-model.trim="listQuery.personCode" size="small" placeholder="人员编号" clearable/>-->
      <!--</el-col>-->
      <el-col :span="12">
        <el-date-picker
          v-model="timeRange"
          size="small"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="创建开始时间"
          end-placeholder="创建结束时间"/>
      </el-col>
      <el-col :span="4">
        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="fetchData">搜索</el-button>
      </el-col>
    </el-row>
    <!--查询结果Table显示-->
    <div class="tablediv">
      <el-row class="table-title">
        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>搜索结果({{ list.length }})</div></el-col>
      </el-row>
      <!--size="small"-->
      <!--:data="list"-->
      <!--max-height="300"-->
      <!--class="table"-->
      <!--border-->
      <!--row-key="getRowKey"-->
      <!--@selection-change="handleSelectionChange">-->
      <el-table
        v-loading="listLoading"
        v-loadmore="handelLoadmore"
        v-if="renderinit"
        ref="mytable"
        :data="filteredData"
        :data-size="list.length"
        size="small"
        border
        max-height="340"
        @select="onTableSelect"
        @select-all="selectAll">
        <el-table-column align="center" type="selection" width="45"/>
        <el-table-column align="center" type="index" label="序号" width="55">
          <template slot-scope="scope">
            <span >{{ scope.row.index }}</span>
          </template>
        </el-table-column>
        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="column.value === 'idCard'">{{ encrypIdCardNo(scope.row[column.value]) }}</span>
            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row :gutter="20">
      <el-col :span="24" justify="center">
        <div class="strategy-title">授权时段：</div>
        <el-radio-group v-model="permissionForm.strategyId" class="strategy-body">
          <el-radio v-for="item in strategyList" :key="'strategy_'+item.id" :label="item.id">{{ item.name }}</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button :disabled="!canEdit" type="primary" @click="saveData">授权</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addPermission } from '@/api/access'
import { getStaffList } from '@/api/card'
import { getStrategyListNo } from '@/api/strategy'
import DeptSelect from '../../components/DeptSelect/index'
import { getPersonGroupList } from '@/api/person'
let multipleSelection = []// 多选选中项
export default {
  name: 'AddStaffPerm',
  components: { DeptSelect },
  directives: {
    loadmore: {
      // componentUpdated updated
      componentUpdated: function(el, binding, vnode, oldVnode) {
        // 设置默认溢出显示数量
        var spillDataNum = 20
        // 设置隐藏函数
        var timeout = false
        const setRowDisableNone = function(topNum, showRowNum, binding) {
          if (timeout) {
            clearTimeout(timeout)
          }
          timeout = setTimeout(() => {
            binding.value.call(
              null,
              topNum,
              topNum + showRowNum + spillDataNum
            )
          })
        }
        setTimeout(() => {
          const dataSize = vnode.data.attrs['data-size']
          const oldDataSize = oldVnode.data.attrs['data-size']
          if (dataSize === oldDataSize) return
          const selectWrap = el.querySelector('.el-table__body-wrapper')
          const selectTbody = selectWrap.querySelector('table tbody')
          const selectRow = selectWrap.querySelector('table tr')
          if (!selectRow) {
            return
          }
          const rowHeight = selectRow.clientHeight
          const showRowNum = Math.round(selectWrap.clientHeight / rowHeight)
          const old = document.getElementById('tbb')
          if (old) {
            selectTbody.removeChild(old)
          }
          const createElementTR = document.createElement('tr')
          createElementTR.id = 'tbb'
          const createElementTRHeight = (dataSize - showRowNum - spillDataNum) * rowHeight
          // 下面撑着的
          createElementTR.setAttribute(
            'style',
            `height: ${createElementTRHeight}px;`
          )
          selectTbody.append(createElementTR)
          selectTbody.setAttribute(
            'style',
            `transform: translateY(0px)`
          )

          let topPx = selectWrap.scrollTop - spillDataNum * rowHeight
          let topNum = Math.round(topPx / rowHeight)
          const minTopNum = dataSize - spillDataNum - showRowNum
          if (topNum > minTopNum) {
            topNum = minTopNum
          }
          if (topNum < 0) {
            topNum = 0
            topPx = 0
          }
          selectTbody.setAttribute(
            'style',
            `transform: translateY(${topPx}px)`
          )
          createElementTR.setAttribute(
            'style',
            `height: ${
              createElementTRHeight - topPx > 0
                ? createElementTRHeight - topPx
                : 0
            }px;`
          )
          setRowDisableNone(topNum, showRowNum, binding)

          // setRowDisableNone(0, showRowNum, binding)
          debugger
          // 监听滚动后事件
          selectWrap.addEventListener('scroll', function() {
            let topPx = this.scrollTop - spillDataNum * rowHeight
            let topNum = Math.round(topPx / rowHeight)
            const minTopNum = dataSize - spillDataNum - showRowNum
            if (topNum > minTopNum) {
              topNum = minTopNum
            }
            if (topNum < 0) {
              topNum = 0
              topPx = 0
            }
            selectTbody.setAttribute(
              'style',
              `transform: translateY(${topPx}px)`
            )
            createElementTR.setAttribute(
              'style',
              `height: ${
                createElementTRHeight - topPx > 0
                  ? createElementTRHeight - topPx
                  : 0
              }px;`
            )
            setRowDisableNone(topNum, showRowNum, binding)
          })
        })
      }
    }
  },
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      currentStartIndex: 0,
      currentEndIndex: 20,
      renderinit: true,
      timeRange: [], // 时间范围
      listQuery: {
        personType: '',
        // personCode: '',
        doorCodes: '',
        cardType: '',
        groupId: '',
        keyword: '',
        startTime: '',
        endTime: '',
        deptId: ''
      }, // 员工查询条件
      list: [], // 搜索结果
      columns: [
        {
          text: '人员编号',
          value: 'personCode',
          align: 'center',
          width: 90
        },
        {
          text: '人员类型',
          value: 'personType',
          align: 'center',
          width: 70
        },
        {
          text: '姓名',
          value: 'NAME',
          align: 'center',
          width: 70
        },
        {
          text: '卡编号',
          value: 'cardold',
          align: 'center'
        },
        {
          text: '卡类型',
          value: 'cardType',
          align: 'center',
          width: 60
        },
        {
          text: '身份证号',
          value: 'idCard',
          align: 'center',
          width: 170
        },
        {
          text: '单位/部门',
          value: 'deptName',
          align: 'center',
          width: 140
        }
      ],
      permissionForm: {
        doorCodes: '',
        personList: [],
        strategyId: ''
      }, // 提交表单
      cardList: ['A', 'B', 'C', 'D', '访客'],
      groupList: [],
      strategyList: [], // 策略列表
      listLoading: true,
      canEdit: true
    }
  },
  computed: {
    filteredData() {
      const list = this.list.filter((item, index) => {
        if (index < this.currentStartIndex) {
          return false
        } else if (index > this.currentEndIndex) {
          return false
        } else {
          return true
        }
      })
      return list
    }
  },
  watch: {
    timeRange(val) {
      if (val && val.length > 0) {
        this.listQuery.startTime = val[0]
        this.listQuery.endTime = val[1]
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
    },
    'listQuery.personType'(val) {
      if (val === '1') {
        this.cardList = ['A', 'B', 'C', 'D']
      } else if (val === '0') {
        this.cardList = ['访客']
      } else {
        this.cardList = ['A', 'B', 'C', 'D', '访客']
      }
    },
    filteredData(rows) {
      this.$nextTick(() => {
        console.log('watch 表: ', rows)
        console.log('watch 选中: ', multipleSelection.map(item => item.NAME))
        for (const row of rows) {
          this.$refs.mytable.toggleRowSelection(row, multipleSelection.indexOf(row) !== -1)
        }
      })
    }
  },
  mounted() {
    getPersonGroupList().then(response => {
      this.groupList = response.data
    })
    this.fetchStrategyList()
  },
  methods: {
    // 点击全选
    selectAll(rows) {
      if (this.getIsAllChecked()) {
        multipleSelection = []
        for (const item of this.list) {
          multipleSelection.push(item)
        }
      } else {
        multipleSelection = []
      }
    },
    // 获取table组件中的全选checkbox的勾选状态
    getIsAllChecked() {
      return this.$refs.mytable.store.states.isAllSelected
    },
    // 单行选中
    onTableSelect(rows, row) {
      const selected = rows.length && rows.indexOf(row) !== -1
      if (selected) {
        if (multipleSelection.indexOf(row) === -1) {
          multipleSelection.push(row)
        }
      } else {
        multipleSelection.splice(multipleSelection.indexOf(row), 1)
      }
    },
    getRowKey(row) {
      return row.id
    },
    handelLoadmore(currentStartIndex, currentEndIndex) {
      this.currentStartIndex = currentStartIndex
      this.currentEndIndex = currentEndIndex
    },
    // 初始化对话框
    initDialog: function(doorCodes) {
      this.renderinit = false
      this.$nextTick(() => {
        this.renderinit = true
      })
      this.listQuery = {
        personType: '',
        doorCodes: '',
        cardType: '',
        groupId: '',
        keyword: '',
        deptId: ''
      }
      this.dialogFormVisible = true
      this.listQuery.doorCodes = doorCodes
      this.permissionForm.doorCodes = doorCodes
      this.permissionForm.personList = []
      multipleSelection = []
      this.list = []
      this.permissionForm.strategyId = ''
      this.canEdit = true
      this.fetchData()
    },
    // 保存数据
    saveData: function() {
      if (this.validateForm(this.permissionForm)) {
        this.canEdit = false
        const permissionForm = this.permissionForm
        permissionForm.personList = []
        multipleSelection.forEach((item) => {
          permissionForm.personList.push(item.cardCode)
        })
        addPermission(permissionForm).then(response => {
          if (response.code === 200) {
            this.$confirm(`${response.message}，是否继续新增?`, '提示', {
              confirmButtonText: '是',
              cancelButtonText: '否',
              type: 'info'
            }).then(() => {
              this.canEdit = true
              this.initDialog(this.permissionForm.doorCodes)
            }).catch(() => {
              this.canEdit = true
              this.cancel()
            })
          } else {
            this.$message.error('新增门禁授权失败')
            this.canEdit = true
          }
        }).catch(() => {
          this.$message.error('新增门禁授权失败')
          this.canEdit = true
        })
      }
    },
    // 验证表单
    validateForm(permissionForm) {
      if (multipleSelection.length <= 0) {
        this.$message.warning('请选中人员再进行授权')
        return false
      }
      // if (permissionForm.strategyId === '') {
      //   this.$message.warning('门禁策略必选')
      //   return false
      // }
      return true
    },
    // 获取策略类型
    fetchStrategyList() {
      getStrategyListNo().then(response => {
        this.strategyList = response.data
      })
    },
    // 获取查询数据
    fetchData() {
      this.listLoading = true
      getStaffList(this.listQuery).then(response => {
        this.listLoading = false
        this.list = response.data
        for (let i = 0; i < this.list.length; i++) {
          this.list[i].index = i + 1
        }
        multipleSelection = []
      })
    },
    // 多选触发方法
    handleSelectionChange(val) {
      multipleSelection = val
    },
    // 取消
    cancel: function() {
      console.log('cancel')
      this.dialogFormVisible = false
      this.$emit('watchChild')
    },
    // 身份证号加密
    encrypIdCardNo(idCardNo) {
      if (idCardNo) {
        return idCardNo.substr(0, 6) + '********' + idCardNo.substr(14, 18)
      } else {
        return ''
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $tableTitleHeight:42px;
  .tablediv{
    margin-top: 20px;
    margin-bottom: 10px;
    /deep/ .el-table td {
      padding: 2px 0px !important;
    }
  }
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    .title-header{
      line-height:$tableTitleHeight;
      color: #606266;
      font-size: 14px;
      i{
        margin-left: 5px;
        margin-right: 5px;
      }
    }
    .edit_btns{
      .edit_btn{
        float:right;
        margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
      }
    }
  }
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
  .strategy-title{
    line-height: 30px;
  }
  .strategy-body{
    line-height:30px !important;
  }
</style>