<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.userNo" placeholder="工号/学号" clearable/>
                    </el-form-item>
                    <el-form-item label="部门/班级" prop="depId">
                        <department-tree @clearInput="clearDepartment1" v-model="filter.depId" :isClear="isClear1"/>
                    </el-form-item>
                    <el-form-item label="门" prop="eqpId" label-width="50px">
                        <equi-tree @clearInput="clearDepartment" v-model="filter.eqpId" :isClear="isClear"/>
                    </el-form-item>
                    <el-form-item label="通行时间">
                        <el-date-picker
                                v-model="creTm"
                                type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @change="dateChange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间">
                        </el-date-picker>
                    </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(1)" size="small">申请开门</el-button>-->
                    <!--<el-button size="small" @click="onCreateClick(2)">审核开门</el-button>-->
                </div>
                <d2-crud
                        title="通行记录"
                        ref="d2Crud"
                        :options="tableOptions"
                        :loading="loading"
                        :columns="columns"
                        :data="data"
                        :rowHandle="rowHandle"
                        @edit="handleRowEdit"
                        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="140px" labelPosition="right" :rules="rules" disabled>
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-form-item label="申请人工号/学号" prop="userNo">
                            <el-input v-model.trim="form.userNo"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="申请进入门号" prop="doorCode">
                            <el-input v-model.trim="form.doorCode"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="申请进入时间" prop="creTm">
                            <el-input v-model.trim="form.creTm"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button :loading="staLoading" @click="operInstance(2)">{{butLabel}}</el-button>
      </span>
        </el-dialog>
    </d2-container>
</template>
<script>
  import { tableOptions } from '@/assets/options'
  import {getInlineCheckList,getInlineCheckById,saveApplyDoor,saveChktorDoor} from '@/api/accessControl/inlineCheck'
  export default {
    name: 'system-staff',
    components: {

    },
    data () {
      let checkNumber = (rule, value, callback) => {
        if(!value&&value!==0){
          return callback(new Error('不能为空'))
        }
        let reg = /^[0-9]*$/
        if (!reg.test(value)) {
          return callback(new Error('请输入数字'))
        } else {
          callback ()
        }
      }
      return {
        creTm:"",
        options:[],
        areaIds:[],
        areaIdss:"",
        isCreate:false,
        userId:"",
        checkList:[],
        // classVisible:false,
        staLoading: false,
        multipleSelection:[],
        func: {
          add: false,
          delete: false,
          update: false,
          select: false
        },
        falg: true,
        isExpend: true,
        tableOptions,
        loading: false,
        operVisible: false,
        diaLogName: '',
        butLabel:"",
        lanuchs: [],
        isClear:'123',
        isClear1:'123',
        form: {
          creTm:"",
          doorCode:"",
          userNo:""
        },
        filter: {
          pageSize: 10,
          pageNum: 1,
          depId:"",
          userNo:"",
          eqpId:"",
          startTime:"",
          endTime:"",
        },
        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: 'cardCode',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '工号/学号',
            key: 'userNo',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '姓名',
            key: 'userNm',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '部门/班级',
            key: 'depNm',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '通行时间',
            key: 'creTm',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            title: '机号',
            key: 'eqpNo',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '门名称',
            key: 'doorNm',
            minWidth: '120',
            showOverflowTooltip: true
          }, {
            title: '门号',
            key: 'doorCode',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '事件类型',
            key: 'paramData',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '读卡类型',
            key: 'readTyp',
            minWidth: '90',
            formatter (row, column, cellValue, index) {
              if (cellValue === "1") {
                return '物理'
              } else if (cellValue === "2") {
                return '逻辑'
              }
            }
          },
          {
            title: '状态',
            key: 'sts',
            minWidth: '120',
            formatter (row, column, cellValue, index) {
              if (cellValue === "1") {
                return '审核中'
              } else if (cellValue === "2") {
                return '已开门'
              }else if (cellValue === "0") {
                return '申请中'
              }
            }
          },
          {
            title: '申请人',
            key: 'apply',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '审核人',
            key: 'chktor',
            minWidth: '90',
            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: {
          areaNm:[{required: true, message: '区域名称不能为空', trigger: 'blur'}],
          vehicleCount:[{validator: checkNumber,required: true, trigger: 'blur'}],
          fixCount:[{validator: checkNumber,required: true, trigger: 'blur'}],
          tempCount:[{validator: checkNumber,required: true,  trigger: 'blur'}],
          showCountMode:[{required: true, message: '请选择剩余车位显示模式', trigger: 'blur'}],
          fullInMode:[{required: true, message: '请选择满位入场模式', trigger: 'blur'}],
          forbidinAction:[{required: true, message: '请选择未登记车辆执行动作', trigger: 'blur'}],
          timeMode:[{required: true, message: '请选择入场时间模式', trigger: 'blur'}],
        }
      }
    },

    methods: {
      clearDepartment1(){
        this.filter.depId=''
      },
      clearDepartment(){
        this.filter.eqpId=''
      },
      dateChange (val) {
        if(val == null){
          this.filter.startTime = ''
          this.filter.endTime = ''
        }else{
          this.filter.startTime= val[0]
          this.filter.endTime = val[1]
        }
      },
      // onCreateClick(val){
      //   if(val===2){
      //     this.diaLogName="审核开门"
      //     this.butLabel="审核确认开门"
      //   }
      //   this.operVisible=true
      // },
      handleTreeNode () {
        this.handleList()
      },
      handleList (val) {
        if (val) {
          this.filter.pageNum = 1
          this.currentPage = 1
        }
        this.loading = true
        getInlineCheckList(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) {
           if(this.diaLogName==="申请开门"){
             this.staLoading = true
             saveApplyDoor(this.form).then(res => {
               this.staLoading = false
               this.operVisible = false
               this.$message({
                 message: '操作成功',
                 type: 'success'
               })
               this.handleTreeNode()
               this.clearForm()
             }).catch(err => {
               this.staLoading = false
             })
           }else{
             this.staLoading = true
             saveChktorDoor(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}) {
        if(row.sts==="2"){
          this.$message({
            message: '状态为已开门',
            type: 'warning'
          })
          return
        }
        if(row.sts==="1"){
          this.diaLogName="审核开门"
          this.butLabel="审核确认开门"
        }else{
          this.diaLogName="申请开门"
          this.butLabel="申请开门"
        }
        getInlineCheckById({chkId:row.chkId}).then(res => {
          this.form = res.doorUpdate
        })
        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.areaId)
      //       })
      //       this.areaIdss=this.areaIds.join(",")
      //       onDeleteArea({split:this.areaIdss}).then(res=>{
      //         this.$message({
      //           message: '删除成功',
      //           type: 'success'
      //         })
      //         this.handleTreeNode()
      //       })
      //     })
      //   }
      // },
      // handleRowRemove ({index, row}) {
      //   // console.log(row)
      //   this.$confirm(`确定要删除当前区域吗?`, '确认操作', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '放弃',
      //     type: 'warning'
      //   }).then(() => {
      //     onDeleteArea({split:row.areaId}).then(res=>{
      //       this.$message({
      //         message: '删除成功',
      //         type: 'success'
      //       })
      //       this.handleTreeNode()
      //     })
      //   })
      // },
      clearForm () {
        if (this.$refs['form']!==undefined) {
          this.$refs['form'].resetFields()
        }
        this.form = {}
        this.diaLogName = ''
      },
    },
    mounted () {
      this.clearForm()
      this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions, 70)
      this.handleTreeNode()
    }
  }
</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>