<template>
  <el-dialog :visible.sync="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body width="1000px" @close="cancel">
    <!--查询结果Table显示-->
    <el-form ref="dataForm" :rules="rules" :model="row" label-width="110px" label-position="left">
      <el-row :gutter="20" style="height: 40px">
        <el-col :span="20" style="height: 40px">
          <el-form-item label="人员组别名称" prop="groupName">
            <el-input v-model.trim="row.groupName" type="text" maxlength="20" show-word-limit placeholder="人员组别名称" size="small"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
      <!--员工筛选-->
      <el-row style="height: 40px;margin-top: 20px">
        <el-col :span="8" style="height: 40px">
          <el-form-item class="selectForm-container-item" label="员工选择">
<!--            <el-input v-model.trim="listQuery.keywords" size="small" placeholder="姓名/员工编号关键字" clearable/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="6" style="height: 40px">-->
<!--          <el-form-item class="selectForm-container-item">-->
            <dept-select v-model="listQuery.deptId" :need-top="false" :dept-show="true" size="small" placeholder="单位/部门"/>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="height: 40px">
          <el-form-item class="selectForm-container-item">
            <el-select v-model="listQuery.cardType" placeholder="卡类型" size="small" clearable>
              <el-option label="A" value="A"/>
              <el-option label="B" value="B"/>
              <el-option label="C" value="C"/>
              <el-option label="D" value="D"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2" style="height: 40px">
          <el-button style="margin-top: 3px" class="filter-item" type="primary" icon="el-icon-search" size="small" @click="fetchData" >搜索</el-button>
        </el-col>
      </el-row>
      <!--时间筛选-->
      <el-row style="height: 40px">
        <el-col :span="10" style="height: 40px">
          <el-form-item class="selectForm-container-item" >
            <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-form-item></el-col>
        <el-col :span="10" style="height: 40px">
          <el-form-item class="selectForm-container-item">
            <el-date-picker
              v-model="updateTimeRange"
              size="small"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="建卡开始时间"
              end-placeholder="建卡结束时间"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--员工多选框-->
      <div class="edit_dev">
        <transfer
          ref="staffTransfer"
          filterable
          :filter-method="filterMethod"
          filter-placeholder="姓名/员工编号关键字"
          v-loading="transLoading"
          v-model="stafflist"
          :data="staffList"
          :titles="['待选员工', '已选员工']" />
      </div>
      <!--访客筛选-->
      <el-row style="height: 40px;margin-top: 10px">
        <el-col :span="12" style="height: 40px">
          <el-form-item class="selectForm-container-item" label="访客选择">
            <!--            <el-input v-model.trim="listQuery1.keywords" size="small" placeholder="姓名/访客编号关键字" clearable/>-->
            <!--          </el-form-item>-->
            <!--        </el-col>-->
            <!--            <el-col :span="6" style="height: 40px">-->
            <!--            <el-form-item class="selectForm-container-item">-->
            <!--            <el-select v-model="listQuery1.sex" placeholder="性别" size="small" clearable>-->
            <!--            <el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"/>-->
            <!--            </el-select>-->
            <!--            </el-form-item>-->
            <!--            </el-col>-->
            <!--      </el-row>-->
            <!--      <el-row style="height: 40px">-->
            <!--        <el-col :span="10" style="height: 40px">-->
            <!--          <el-form-item class="selectForm-container-item" >-->
            <el-date-picker
              v-model="timeRange1"
              size="small"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="创建开始时间"
              end-placeholder="创建结束时间"/>
          </el-form-item>
        </el-col>
        <el-col :span="10" style="height: 40px">
          <el-form-item class="selectForm-container-item">
            <el-date-picker
              v-model="updateTimeRange1"
              size="small"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="建卡开始时间"
              end-placeholder="建卡结束时间"/>
          </el-form-item>
        </el-col>
        <el-col :span="2" style="height: 40px">
          <el-button style="margin-top: 3px" class="filter-item" type="primary" icon="el-icon-search" size="small" @click="fetchData1" >搜索</el-button>
        </el-col>
      </el-row>
      <!--访客多选框-->
      <div class="edit_dev">
        <transfer
          ref="visitorTransfer"
          filterable
          :filter-method="filterMethod"
          filter-placeholder="姓名/访客编号关键字"
          v-loading="transLoading1"
          v-model="visitorlist"
          :data="visitorList"
          :titles="['待选访客', '已选访客']" />
      </div>
    </el-form>
    <!--描述-->
    <el-form label-width="60px" label-position="left" style="margin-top: 10px">
      <el-row :gutter="20">
        <el-col :span="20" style="height: 40px">
          <el-form-item label="描述">
            <el-input v-model.trim="row.description" type="text" placeholder="描述" maxlength="500" show-word-limit size="small"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <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 { groupList, getSexType, personGroupAdd, personGroupUpdate } from '@/api/person'
import DeptSelect from '../../components/DeptSelect/index'
import { getPerson } from '@/api/person'
import Transfer from '../../components/transfer/src/main'
export default {
  name: 'EditGroup',
  components: { DeptSelect, Transfer },
  data() {
    return {
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1 || item.code.indexOf(query) > -1
      },
      textMap: {
        update: '编辑',
        create: '新增',
        detail: '详情'
      }, // 表头显示标题
      dialogStatus: '',
      dialogFormVisible: false, // 对话框是否显示
      row: {
        id: '',
        groupName: '',
        description: ''
      },
      transLoading: false,
      transLoading1: false,
      rules: {
        groupName: [{ required: true, message: '分组名称必填', trigger: ['blur', 'change'] }]
      },
      listQuery: {
        keywords: '', // 关键字（姓名/身份证号)
        deptId: '', // 部门
        sex: '', // 性别
        personType: '1',
        startTime: '',
        endTime: '',
        updateStartTime: '',
        updateEndTime: ''
      }, // 员工查询条件
      listQuery1: {
        keywords: '', // 关键字（姓名/身份证号)
        deptId: '', // 部门
        sex: '', // 性别
        personType: '0',
        startTime: '',
        endTime: '',
        updateStartTime: '',
        updateEndTime: ''
      }, // 员工查询条件
      list: [], // 搜索结果
      sexList: [], // 性别列表
      personlist: [], // 搜索结果
      stafflist: [],
      visitorlist: [],
      staffList: [],
      visitorList: [],
      timeRange: [], // 时间范围
      updateTimeRange: [], // 时间范围
      timeRange1: [], // 时间范围
      updateTimeRange1: [], // 时间范围
      personForm: {
        id: '',
        personList: []
        // strategyId: ''
      }, // 提交表单
      multipleSelection: [], // 多选选中项
      strategyList: [], // 策略列表
      listLoading: true,
      total: 0, // 数据总数
      canEdit: true
    }
  },
  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 = ''
      }
    },
    updateTimeRange(val) {
      if (val && val.length > 0) {
        this.listQuery.updateStartTime = val[0]
        this.listQuery.updateEndTime = val[1]
      } else {
        this.listQuery.updateStartTime = ''
        this.listQuery.updateEndTime = ''
      }
    },
    timeRange1(val) {
      if (val && val.length > 0) {
        this.listQuery1.startTime = val[0]
        this.listQuery1.endTime = val[1]
      } else {
        this.listQuery1.startTime = ''
        this.listQuery1.endTime = ''
      }
    },
    updateTimeRange1(val) {
      if (val && val.length > 0) {
        this.listQuery1.updateStartTime = val[0]
        this.listQuery1.updateEndTime = val[1]
      } else {
        this.listQuery1.updateStartTime = ''
        this.listQuery1.updateEndTime = ''
      }
    }
  },
  mounted() {
    getSexType().then(response => {
      this.sexList = response.data
    })
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
      this.$nextTick(() => {
        this.$refs.staffTransfer.clearQuery('left')
        this.$refs.staffTransfer.clearQuery('right')
        this.$refs.visitorTransfer.clearQuery('left')
        this.$refs.visitorTransfer.clearQuery('right')
      })
      this.stafflist = []
      this.staffList = []
      this.visitorlist = []
      this.visitorList = []
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = true
      this.row = {
        id: '',
        groupName: '',
        description: ''
      }
      this.listQuery = {
        keywords: '', // 关键字（姓名/身份证号)
        deptId: '', // 部门
        sex: '', // 性别
        personType: '1',
        startTime: '',
        endTime: '',
        updateStartTime: '',
        updateEndTime: ''
      } // 员工查询条件
      this.listQuery1 = {
        keywords: '', // 关键字（姓名/身份证号)
        deptId: '', // 部门
        sex: '', // 性别
        personType: '0',
        startTime: '',
        endTime: '',
        updateStartTime: '',
        updateEndTime: ''
      } // 员工查询条件
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      if (dialogStatus === 'update') {
        this.row = row
        this.canEdit = true
        this.fetchPersonData()
      } else if (dialogStatus === 'create') {
        this.canEdit = true
        this.fetchData()
        this.fetchData1()
      }
    },
    // 保存数据
    saveData: function() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.canEdit = false
          const arr = this.stafflist.concat(this.visitorlist)
          if (this.dialogStatus === 'create') {
            personGroupAdd(this.row.groupName, this.row.description, arr).then(response => {
              if (response.code === 200) {
                this.$message.success('新增人员分组成功')
                this.canEdit = true
                this.cancel()
              } else {
                this.canEdit = true
              }
            }).catch(() => {
              this.$emit('watchChild')
              this.canEdit = true
            })
          } else if (this.dialogStatus === 'update') {
            personGroupUpdate(this.row.id, this.row.groupName, this.row.description, arr).then(response => {
              if (response.code === 200) {
                this.$message.success('编辑人员分组成功')
                this.canEdit = true
                this.cancel()
              } else {
                this.canEdit = true
              }
            }).catch(() => {
              this.$emit('watchChild')
              this.canEdit = true
            })
          }
        }
      })
    },
    // 验证表单
    validateForm(personForm) {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请选中人员再进行授权')
        return false
      }
      return true
    },
    // 获取查询数据
    fetchPersonData() {
      this.transLoading = true
      this.transLoading1 = true
      var listQuery = {
        groupId: this.row.id
      }
      groupList(listQuery).then(response => {
        this.personlist = response.data
        this.stafflist = response.data.filter(item => item.personType === '1')
          .map(function(item) { return item.id })
        this.visitorlist = response.data.filter(item => item.personType === '0')
          .map(function(item) { return item.id })
        getPerson(this.listQuery).then(response => {
          this.staffList = response.data.map(function(item) { return { key: item.id, label: item.name, code: item.personCode } })
          this.transLoading = false
        })
        getPerson(this.listQuery1).then(response => {
          this.visitorList = response.data.map(function(item) { return { key: item.id, label: item.name, code: item.personCode } })
          this.transLoading1 = false
        })
      })
    },
    fetchData() {
      this.transLoading = true
      let arr = []
      if (this.stafflist.length !== 0) {
        arr = this.staffList.filter(item => this.stafflist.indexOf(item.key) > -1)
      }
      getPerson(this.listQuery).then(response => {
        this.staffList = response.data.map(function(item) { return { key: item.id, label: item.name, code: item.personCode } })
        const tmp = this.staffList.filter(item => this.stafflist.indexOf(item.key) === -1)
        this.staffList = tmp.concat(arr)
        this.transLoading = false
      })
    },
    fetchData1() {
      this.transLoading1 = true
      let arr = []
      if (this.visitorlist.length !== 0) {
        arr = this.visitorList.filter(item => this.visitorlist.indexOf(item.key) > -1)
      }
      getPerson(this.listQuery1).then(response => {
        this.visitorList = response.data.map(function(item) { return { key: item.id, label: item.name, code: item.personCode } })
        const tmp = this.visitorList.filter(item => this.visitorlist.indexOf(item.key) === -1)
        this.visitorList = tmp.concat(arr)
        this.transLoading1 = false
      })
    },
    // 取消
    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;
  /deep/ .edit_dev .el-transfer-panel {
    width:350px !important;
  }
  .menu-content{
    margin:10px 0px;overflow-y: scroll;height: 150px;border: 1px solid #eee;padding: 10px; border-radius: 10px;
  }
  .tablediv{
    margin-bottom: 20px;
  }
  .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;
  }
  .el-table td {
    padding: 2px 0px !important;
  }
  /deep/ .el-dialog__body {
    padding: 0px 20px !important;
  }
</style>