<template>
    <d2-container>
        <div class="d2-table-view-full" style="overflow: hidden">
            <div class="d2-table-view-header">
                <el-form label-width="100px" labelPosition="right" size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline">
                    <el-form-item label="名称">
                        <el-input style="width: 192px" v-model.trim="filter.combineName" placeholder="名称" clearable/>
                    </el-form-item>
                    <el-form-item>
                        <el-button   type="primary" @click="handleList('1')">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="d2-table-view-content">
                <div class="d2-table-view-handle">
                    <el-button @click="onCreateClick" size="small" icon="el-icon-plus">新增</el-button>
                    <el-button size="small" @click="onMutilDelClick">批量删除</el-button>
                    <el-button  size="small">下发设备</el-button>
                </div>
                <d2-crud
                        title="多卡开门"
                        ref="d2Crud"
                        :options="tableOptions"
                        :loading="loading"
                        :columns="columns"
                        :data="data"
                        :rowHandle="rowHandle"
                        @edit="handleRowEdit"
                        @delete="handleRowRemove"
                        selection-row
                        @selection-change="handleSelectionChange"
                >
                </d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total"
                ></el-pagination>
            </div>
        </div>
        <el-dialog
                :title="diaLogName"
                :visible.sync="operVisible"
                @close="clearForm"
                width="40%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="80px" labelPosition="right" :rules="rules">
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-form-item label="组合名称" prop="combineName">
                            <el-input v-model.trim="form.combineName"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡片1" prop="card1">
                            <staffcard-tree  ref="saffTree1" :depType="type" :strr="form.card1" v-model="form.card1"></staffcard-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡片2">
                            <staffcard-tree  ref="saffTree2" :depType="type" :strr="form.card2" v-model="form.card2"></staffcard-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡片3">
                            <staffcard-tree  ref="saffTree3" :depType="type" :strr="form.card3" v-model="form.card3"></staffcard-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡片4">
                            <staffcard-tree  ref="saffTree4" :depType="type" :strr="form.card4" v-model="form.card4"></staffcard-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡片5">
                            <staffcard-tree  ref="saffTree5" :depType="type" :strr="form.card5" v-model="form.card5"></staffcard-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡片6">
                            <staffcard-tree  ref="saffTree6" :depType="type" :strr="form.card6" v-model="form.card6"></staffcard-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡片7">
                            <staffcard-tree  ref="saffTree7" :depType="type" :strr="form.card7" v-model="form.card7"></staffcard-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡片8">
                            <staffcard-tree  ref="saffTree8" :depType="type" :strr="form.card8" v-model="form.card8"></staffcard-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡片9">
                            <staffcard-tree  ref="saffTree9" :depType="type" :strr="form.card9" v-model="form.card9"></staffcard-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡片10">
                            <staffcard-tree  ref="saffTree10" :depType="type" :strr="form.card10" v-model="form.card10"></staffcard-tree>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <zl-button :loading="staLoading" @click="operInstance(2)">完成</zl-button>
      </span>
        </el-dialog>
    </d2-container>
</template>
<script>
  import { tableOptions } from '@/assets/options'
  import {getOpenDoorList,saveOrUpdateOpenDoor,getOpenDoorById,onDeleteOpenDoor} from '@/api/accessControl/openDoor'
  export default {
    name: 'system-staff',
    components: {

    },
    data () {
      return {
        clearCard1:true,
        type:'teacher',
        options:[],
        areaIds:[],
        areaIdss:"",
        isCreate:false,
        userId:"",
        checkList:[],
        // classVisible:false,
        staLoading: false,
        multipleSelection:[],
        falg: true,
        isExpend: true,
        tableOptions,
        loading: false,
        operVisible: false,
        diaLogName: '新增',
        lanuchs: [],
        form: {
          combineName:null,
          card1:null,
          card2:null,
          card3:null,
          card4:null,
          card5:null,
          card6:null,
          card7:null,
          card8:null,
          card9:null,
          card10:null,
        },
        filter: {
          pageSize: 10,
          pageNum: 1,
          combineName:""
        },
        pagination: {
          total: 0
        },
        currentPage: 1,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        columns: [
          {
            title: '序号',
            key: 'index',
            minWidth: '50',
            formatter (row, column, cellValue, index) {
              return index+1
            }
          },
          {
            title: '名称',
            key: 'combineName',
            minWidth: '100',
            showOverflowTooltip: true
          },
          {
            title: '组合配置',
            key: 'cardCount',
            minWidth: '480',
            showOverflowTooltip: true
          }
        ],
        rowHandle: {
          columnHeader: '操作',
          minWidth: '180',
          align: 'center',
          custom: [
            {
              text: '编辑',
              type: 'primary',
              size: 'small',
              emit: 'edit'
            },
            {
              text: '删除',
              type: 'danger',
              size: 'small',
              emit: 'delete'
            }
          ]
        },
        data: [],
        rules: {
          combineName:[{required: true, message: '组合名称不能为空', trigger: 'blur'}],
          card1:[{required: true, message: '请选择人员卡号', trigger: 'blur'}],
        }
      }
    },
//     watch:{
// 'form.card1'(val){
//   if(val){
//     for(let key in this.form){
//         if(val==this.form[key]&&key!=='card1'){
//           this.$message({
//             message: '卡号重复，请重新选择',
//             type: 'warning'
//           })
//           this.$nextTick(()=>{
//             this.$refs.saffTree1.cleanName()
//           })
//           return
//         }
//       }
//   }
// },
//       'form.card2'(val){
//         if(val){
//           for(let key in this.form){
//             if(val==this.form[key]&&key!=='card2'){
//               this.$message({
//                 message: '卡号重复，请重新选择',
//                 type: 'warning'
//               })
//               this.$nextTick(()=>{
//                 this.$refs.saffTree2.cleanName()
//                 // console.log(this.form.card1)
//               })
//               return
//             }
//           }
//         }
//       },
//       'form.card3'(val){
//         if(val){
//           for(let key in this.form){
//             if(val==this.form[key]&&key!=='card3'){
//               this.$message({
//                 message: '卡号重复，请重新选择',
//                 type: 'warning'
//               })
//               this.$nextTick(()=>{
//                 this.$refs.saffTree3.cleanName()
//               })
//               return
//             }
//           }
//         }
//       },
//       'form.card4'(val){
//         if(val){
//           for(let key in this.form){
//             if(val==this.form[key]&&key!=='card4'){
//               this.$message({
//                 message: '卡号重复，请重新选择',
//                 type: 'warning'
//               })
//               this.$nextTick(()=>{
//                 this.$refs.saffTree4.cleanName()
//               })
//               return
//             }
//           }
//         }
//       },
//       'form.card5'(val){
//         if(val){
//           for(let key in this.form){
//             if(val==this.form[key]&&key!=='card5'){
//               this.$message({
//                 message: '卡号重复，请重新选择',
//                 type: 'warning'
//               })
//               this.$nextTick(()=>{
//                 this.$refs.saffTree5.cleanName()
//               })
//               return
//             }
//           }
//         }
//       },
//       'form.card6'(val){
//         if(val){
//           for(let key in this.form){
//             if(val==this.form[key]&&key!=='card6'){
//               this.$message({
//                 message: '卡号重复，请重新选择',
//                 type: 'warning'
//               })
//               this.$nextTick(()=>{
//                 this.$refs.saffTree6.cleanName()
//               })
//               return
//             }
//           }
//         }
//       },
//       'form.card7'(val){
//         if(val){
//           for(let key in this.form){
//             if(val==this.form[key]&&key!=='card7'){
//               this.$message({
//                 message: '卡号重复，请重新选择',
//                 type: 'warning'
//               })
//               this.$nextTick(()=>{
//                 this.$refs.saffTree7.cleanName()
//               })
//               return
//             }
//           }
//         }
//       },
//       'form.card8'(val){
//         if(val){
//           for(let key in this.form){
//             if(val==this.form[key]&&key!=='card8'){
//               this.$message({
//                 message: '卡号重复，请重新选择',
//                 type: 'warning'
//               })
//               this.$nextTick(()=>{
//                 this.$refs.saffTree8.cleanName()
//               })
//               return
//             }
//           }
//         }
//       },
//       'form.card9'(val){
//         if(val){
//           for(let key in this.form){
//             if(val==this.form[key]&&key!=='card9'){
//               this.$message({
//                 message: '卡号重复，请重新选择',
//                 type: 'warning'
//               })
//               this.$nextTick(()=>{
//                 this.$refs.saffTree9.cleanName()
//               })
//               return
//             }
//           }
//         }
//       },
//       'form.card10'(val){
//         if(val){
//           for(let key in this.form){
//             if(val==this.form[key]&&key!=='card10'){
//               this.$message({
//                 message: '卡号重复，请重新选择',
//                 type: 'warning'
//               })
//               this.$nextTick(()=>{
//                 this.$refs.saffTree10.cleanName()
//               })
//               return
//             }
//           }
//         }
//       },
//     },
    methods: {
      clear(){
       this.form.card1=''
      },
      dateChange (val) {
        if(val == null){
          this.filter.bgTm = ''
          this.filter.endTm = ''
        }else{
          this.filter.bgTm = val[0]
          this.filter.endTm = val[1]
        }
      },
      onCreateClick(){
        // this.$nextTick(()=>{
        //   this.$refs.saffTree.cleanName()
        // })
        this.operVisible=true
      },
      handleTreeNode () {
        this.handleList()
      },
      handleList (val) {
        if (val) {
          this.filter.pageNum = 1
          this.currentPage = 1
        }
        this.loading = true
        getOpenDoorList(this.filter)
          .then(res => {
            this.loading = false
            this.data = res.page.list
            this.pagination.total = res.page.total
          })
          .catch(err => {
            this.loading = false
          })
      },
      handleSelectionChange(val) {
        this.isCreate=false
        this.multipleSelection = val;
      },
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },
      handleSizeChange (val) {
        this.filter.pageNum = 1
        this.filter.pageSize = val
        this.handleList()
      },
      operInstance (val) {
        this.$refs['form'].validate(valid => {
          if (valid) {
           let ary=[]
            for(var key in this.form){
              if(this.form[key]){
                ary.push(this.form[key])
              }
            }
            // console.log(ary)
            let nary=ary.sort(); //用到了排序
            for(var i=0;i<ary.length;i++){
              if (nary[i]==nary[i+1]){
                this.$message({
                  message: '卡号重复，请重新选择',
                  type: 'warning'
                })
return
              }

            }
            this.staLoading = true
            saveOrUpdateOpenDoor(this.form).then(res => {
              this.staLoading = false
                this.operVisible = false
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.handleTreeNode()
                this.clearForm()
            }).catch(err => {
              this.staLoading = false
            })
          }
        })
      },
      handleRowEdit ({index, row}) {
        this.diaLogName = '修改'
        // this.form.stationId=row.stationId
        getOpenDoorById({combinId:row.combinId}).then(res => {
          this.form = res.doorDocaOpen
        })
        this.operVisible = true
      },
      onMutilDelClick(){
        if(!this.multipleSelection.length){
          this.$message({
            message: '请选择记录',
            type: 'warning'
          })
        }else{
          this.$confirm(`确认删除当前组合?`, '确认操作', {
            confirmButtonText: '确定',
            cancelButtonText: '放弃',
            type: 'warning'
          }).then(() => {
            this.areaIds=[]
            this.multipleSelection.forEach((item,index)=>{
              this.areaIds.push(item.combinId)
            })
            this.areaIdss=this.areaIds.join(",")
            onDeleteOpenDoor({combinId:this.areaIdss}).then(res=>{
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.handleTreeNode()
            })
          })
        }
      },
      handleRowRemove ({index, row}) {
        // console.log(row)
        this.$confirm(`确认删除当前组合?`, '确认操作', {
          confirmButtonText: '确定',
          cancelButtonText: '放弃',
          type: 'warning'
        }).then(() => {
          onDeleteOpenDoor({combinId:row.combinId}).then(res=>{
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.handleTreeNode()
          })
        })
      },
      clearForm () {
        if (this.$refs['form']!==undefined) {
          this.$refs['form'].resetFields()
        }
        this.$nextTick(()=>{
          this.$refs.saffTree1.cleanName()
          this.$refs.saffTree2.cleanName()
          this.$refs.saffTree3.cleanName()
          this.$refs.saffTree4.cleanName()
          this.$refs.saffTree5.cleanName()
          this.$refs.saffTree6.cleanName()
          this.$refs.saffTree7.cleanName()
          this.$refs.saffTree8.cleanName()
          this.$refs.saffTree9.cleanName()
          this.$refs.saffTree10.cleanName()
        })

        this.form= {
          combineName:null,
            card1:null,
            card2:null,
            card3:null,
            card4:null,
            card5:null,
            card6:null,
            card7:null,
            card8:null,
            card9:null,
            card10:null,
        },
        this.diaLogName = '新增'
      },
    },
    mounted () {
      this.handleTreeNode()
      this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions, 40)
    }
  }
</script>
<style>
    /*.d2-table-view-full{*/
        /*height: 100%;*/
    /*}*/
    /*.timeBox{*/
        /*margin-top: 10px;*/
    /*}*/
    /*.timePay{*/
        /*margin-left: 8px;*/
    /*}*/
    /*.avatar-uploader .el-upload {*/
        /*border: 1px dashed #d9d9d9;*/
        /*border-radius: 6px;*/
        /*cursor: pointer;*/
        /*position: relative;*/
        /*overflow: hidden;*/
    /*}*/

    /*.avatar-uploader .el-upload:hover {*/
        /*border-color: #409eff;*/
    /*}*/

    /*.avatar-uploader-icon {*/
        /*font-size: 28px;*/
        /*color: #8c939d;*/
        /*width: 178px;*/
        /*height: 178px;*/
        /*line-height: 178px;*/
        /*text-align: center;*/
    /*}*/

    /*.avatar {*/
        /*width: 178px;*/
        /*height: 178px;*/
        /*display: block;*/
    /*}*/
    /*.timeLabel label{*/
        /*width: 110px !important;*/
    /*}*/
    /*.bankLabel label{*/
        /*font-size: 13px;*/
    /*}*/
    /*.el-form-item__label {*/
        /*text-align: left !important;*/
    /*}*/
    /*.d2-table-view{*/
        /*overflow: hidden;*/
    /*}*/
    /*.d2-table-view-content{*/
        /*height: 100%;*/
    /*}*/
    /*.el-table{*/
        /*height: 450px !important;*/
    /*}*/
</style>