<template>
  <el-dialog :visible.sync="dialogFormVisible" :title="textMap[dialogStatus]" width="1000px" append-to-body @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-form-item class="selectForm-container-item" label="门禁选择">
          <area-select-tree v-model="listQuery.areaId" :need-top="false" :dept-show="true" size="small" placeholder="区域"/>
        </el-form-item>
        <el-button style="margin-top: 3px" class="filter-item" type="primary" icon="el-icon-search" size="small" @click="fetchData" >搜索</el-button>
      </el-row>
      <!--员工多选框-->
      <div class="edit_dev" style="margin-top: 10px">
        <el-transfer v-loading="transLoading" v-model="doorlist" :data="doorList" :titles="['待选门禁', '已选门禁']" />
      </div>
    </el-form>
    <!--描述-->
    <el-form label-width="60px" label-position="left" style="margin-top: 10px">
      <el-row :gutter="20">
        <el-col :span="22" 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, doorGroupAdd, doorGroupUpdate } from '@/api/door'
import { getDoorList } from '@/api/door'
import AreaSelectTree from '@/components/AreaSelect/areaSelectTree'

export default {
  name: 'EditGroup',
  components: { AreaSelectTree },
  data() {
    return {
      textMap: {
        update: '编辑',
        create: '新增',
        detail: '详情'
      }, // 表头显示标题
      dialogStatus: '',
      dialogFormVisible: false, // 对话框是否显示
      row: {
        id: '',
        groupName: '',
        description: ''
      },
      transLoading: false,
      transLoading1: false,
      rules: {
        groupName: [{ required: true, message: '分组名称必填', trigger: ['blur', 'change'] }]
      },
      listQuery: {
        areaId: ''
      },
      list: [], // 搜索结果
      sexList: [], // 性别列表
      doorlist: [],
      doorList: [],
      timeRange: [], // 时间范围
      updateTimeRange: [], // 时间范围
      timeRange1: [], // 时间范围
      updateTimeRange1: [], // 时间范围
      personForm: {
        id: '',
        personList: []
        // strategyId: ''
      }, // 提交表单
      multipleSelection: [], // 多选选中项
      strategyList: [], // 策略列表
      listLoading: true,
      total: 0, // 数据总数
      canEdit: true
    }
  },
  mounted() {
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
      this.listQuery = {
        areaId: ''
      }
      this.doorlist = []
      this.doorList = []
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = true
      this.row = {
        id: '',
        groupName: '',
        description: ''
      }
      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()
      }
    },
    // 保存数据
    saveData: function() {
      if (this.doorlist.length === 0) {
        this.$message.warning('已选门禁不能为空')
        return
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.canEdit = false
          const arr = this.doorlist
          if (this.dialogStatus === 'create') {
            doorGroupAdd(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') {
            doorGroupUpdate(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
      var listQuery = {
        groupId: this.row.id
      }
      groupList(listQuery).then(response => {
        this.doorlist = response.data.map(function(item) { return item.id })
        getDoorList(this.listQuery).then(response => {
          this.doorList = response.data.map(function(item) { return { key: item.id, label: item.doorName } })
          this.transLoading = false
        })
      })
    },
    fetchData() {
      this.transLoading = true
      let arr = [] // arr:已选
      if (this.doorlist.length !== 0) {
        arr = this.doorList.filter(item => this.doorlist.indexOf(item.key) > -1)
      }
      getDoorList(this.listQuery).then(response => {
        this.doorList = response.data.map(function(item) { return { key: item.id, label: item.doorName } })
        const tmp = this.doorList.filter(item => this.doorlist.indexOf(item.key) === -1)
        this.doorList = tmp.concat(arr)
        this.transLoading = 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>