<template>
    <d2-container>
        <div class="d2-table-view-full" style="overflow: hidden">
            <div class="d2-table-view-header">

                <el-form size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline" labelPosition="right">
                    <el-form-item label="规则名称">
                        <el-input v-model.trim="filter.paCode" placeholder="楼栋编号" clearable/>
                    </el-form-item>

                    <el-form-item label="所属年级" >
                        <el-input v-model.trim="filter.paCode" placeholder="楼栋名称" clearable/>
                    </el-form-item>
                    <el-form-item label="所属校区">
                        <el-input v-model.trim="filter.paCode" placeholder="楼栋编号" clearable/>
                    </el-form-item>

                    <el-form-item label="下发状态" >
                        <el-input v-model.trim="filter.paCode" 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="" size="small" type="success">导出</el-button>-->
                    <el-button @click="operVisible = !operVisible" size="small" icon="el-icon-plus">新增</el-button>
                </div>

                <d2-crud
                        title="就寝规则"
                        ref="d2Crud"
                        :options="tableOptions"
                        :loading="loading"
                        :columns="columns"
                        :data="data"
                        :rowHandle="rowHandle"
                        @edit="handleRowEdit"
                        @connect="handleConnnectClick"
                        @delete="handleRowRemove">
                </d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :current-page.sync="currentPage"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>

        <!-- 新增,编辑 -->
        <el-dialog
                :title="diaLogName"
                :visible.sync="operVisible"
                width="30%"
                @close="clearForm"
                :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="110px" labelPosition="right"  :rules="rules" >
                <el-row :gutter="20">

                    <el-col :span="24">
                        <el-form-item label="规则编号" prop="paCode" placeholder="系统自动生成">
                            <el-input v-model.trim="form.paCode" disabled/>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="规则名称" prop="paName">
                            <el-input v-model.trim="form.paName"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="所属校区" prop="paCode">
                            <el-input v-model.trim="form.paCode"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="所属年级" prop="paName">
                            <el-input v-model.trim="form.paName"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="起床时间" prop="paName">
                            <el-time-picker
                                    v-model="value1"
                                    value-format="HH:mm"
                                    format="HH:mm"
                                    style="width: 100%;"
                                    >
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="签到时间段" prop="paName">
                            <el-time-picker
                                    is-range
                                    v-model="value2"
                                    value-format="HH:mm"
                                    format="HH:mm"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    placeholder="选择时间范围"
                                    style="width: 100%;">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="paName">
                            <el-input v-model.trim="form.paName"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
	<zl-button @click="operInstance('form')"/>
</span>
        </el-dialog>
        <el-dialog
                :title="diaLogName1"
                :visible.sync="operVisible1"
                @close="clearForm1"
                width="70%"
                :close-on-click-modal="false">
            <div class="double-tree">
                <div>
                    <div>选择设备</div>
                    <el-tree :data="orgTree"
                             default-expand-all
                             :props="defaultProps"
                             node-key="id"
                             ref="orgTree"
                             :check-strictly="true"
                             style="height: 400px;overflow: auto;padding: 20px"
                             show-checkbox>
									<span class="icon-tree" slot-scope="{ node, data }">
										<div v-if="data.alias == 'top'">
											<i class="fa fa-university"></i>
											<span>&nbsp;{{node.label}}</span>
										</div>
										<div v-if="data.alias == 'JG001'">
											<i class="fa fa-building"></i>
											<span>&nbsp;{{node.label}}</span>
										</div>
										<div v-if="data.alias == 'JG002'">
											<i class="fa fa-users"></i>
											<span>&nbsp;{{node.label}}</span>
										</div>
										 <div v-if="data.alias == 'user'">
												<i class="fa fa-cogs"></i>
												<span>&nbsp;{{node.label}}</span>
										</div>
								</span>
                    </el-tree>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
    <zl-button @click="operInstance1()"/>
  </span>
        </el-dialog>
    </d2-container>
</template>

<script>

  import { tableOptions } from '../../../assets/options'
  import { getFacePassageList, getFacePassageAccessByList,getFaceTree,saveOrUpdata,getFacePassageAccessById,delFaceById } from '../../../api/face/tongXing'

  export default {
    name: '',
    data () {
      return {
        value1:"",
        value2:"",
        readerIdsArr:[],
        tableOptions,
        loading: false,
        operVisible: false,
        operVisible1: false,
        orgTree:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        currentPage:1,
        diaLogName: '新增就寝规则',
        diaLogName1: '下发设备',
        form: {
          paId:'',
          paName:'',
          paCode:'',
          readerIds:[],//树
          pdStarttime1:"",//时间段1
          pdEndtiem1:"",//时间段1
          pdStarttime2:"",//时间段2
          pdEndtiem2:"",//时间段2
          pdStarttime3:"",//时间段3
          pdEndtiem3:"",//时间段3
          value1:'',//时间段1
          value2:'',//时间段2
          value3:'',//时间段3
        },
        filter: {
          pageSize: 10,
          pageNum: 1,
          paCode:'',//权限组编号
          paName:'',//权限组名称
        },
        pagination: {
          total: 0
        },
        columns: [
          {
            title: '规则编号',
            key: 'paCode',
            minWidth: '120'
          },
          {
            title: '规则名称',
            key: 'paName',
            minWidth: '120'
          },
          {
            title: '所属校区',
            key: 'startTime1',
            minWidth: '120'
          },
          {
            title: '所属年级',
            key: 'startTime2',
            minWidth: '90'
          },
          {
            title: '起床时间',
            key: 'startTime3',
            minWidth: '180'
          },
          {
            title: '签到时间段',
            key: 'startTime2',
            minWidth: '90'
          },
          {
            title: '下发状态',
            key: 'startTime3',
            minWidth: '180'
          },
          {
            title: '备注',
            key: 'startTime3',
            minWidth: '180'
          }
        ],
        rowHandle: {
          columnHeader: '操作',
          minWidth: '150',
          align: 'center',
          custom: [
            {
              text: '修改',
              type: 'primary',
              size: 'small',
              emit: 'edit'
            },
            {
              text: '下发',
              type: 'primary',
              size: 'small',
              emit: 'connect'
            },
            {
              text: '删除',
              type: 'danger',
              size: 'small',
              emit: 'delete'
            }
          ],

        },
        rules: {
          paCode:[{required: true, message: '请输入权限组编号', trigger: 'blur'}],
          paName:[{required: true, message: '请输入权限名称', trigger: 'blur'}],
          value1:[{required: true, message: '请选择时间段一', trigger: 'blur'}],
        },
        data: [],
      }
    },
    methods: {
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },

      handleSizeChange (val) {
        this.filter.pageNum = 1
        this.filter.pageSize = val
        this.handleList()
      },


      clearForm(){
        this.diaLogName='新增'
        this.$refs.equTree.setCheckedKeys([])
        this.form={
          paId:'',
          paName:'',
          paCode:'',
          value1:'',
          value2:'',
          value3:'',
          readerIds:[],//树
          pdStarttime1:"",//时间段1
          pdEndtiem1:"",//时间段1
          pdStarttime2:"",//时间段2
          pdEndtiem2:"",//时间段2
          pdStarttime3:"",//时间段3
          pdEndtiem3:"",//时间段3
        }
      },
      clearForm1 () {
        if (this.$refs['form1']!==undefined) {
          this.$refs['form1'].resetFields()
        }
        this.form1={
          userIds:"",
          paIds:'',
          status:1
        }
        this.$refs.orgTree.setCheckedKeys([])
      },
      operInstance1 () {
        let temp = this.$refs.orgTree.getCheckedKeys()
        let arr = []
        temp.forEach((item,index)=>{
          arr.push(item)
        })
        this.form1.userIds = arr.map(item => item).join(',')
        if(this.form1.userIds === ''){
          this.$message({
            message: '请选择员工',
            type: 'warning'
          })
          return false
        }
        // giveRightsSave (this.form1).then(res=>{
        //   this.operVisible1=false
        //   this.$message({
        //     message: '批量授权成功',
        //     type: 'success'
        //   })
        //   this.clearForm1()
        //   setTimeout(()=>{
        //     this.handleTreeNode()
        //   },5000)
        // })
      },
      //弹框确定按钮
      operInstance(formEquName){
        this.$refs[formEquName].validate((valid) => {
          if (valid) {
            // 后一时间段必须晚于前一时间段
            if(this.form.pdStarttime2){
              let tm2=this.form.pdStarttime2.valueOf()
              let tm1=this.form.pdEndtiem1.valueOf()
              if(tm2<tm1){
                this.$message({
                  message: '时间段节点要大于前一时间段',
                  type: 'warning'
                })
                return false
              }
            }
            if(this.form.pdStarttime3){
              let tm1=this.form.pdEndtiem1.valueOf()
              let tm3=this.form.pdStarttime3.valueOf()
              let tm2=this.form.pdStarttime2?this.form.pdEndtiem2.valueOf():0
              if(tm3<tm1||tm3<tm2){
                this.$message({
                  message: '时间段节点要大于前一时间段',
                  type: 'warning'
                })
                return false
              }
            }
            let temp = this.$refs.equTree.getCheckedKeys()
            let arr = []
            temp.forEach((item,index)=>{
              arr.push(item)
            })

            this.form.readerIds = arr.map(item => item).join(',')
            if(this.form.readerIds === ''){
              this.$message({
                message: '请选择设备',
                type: 'warning'
              })
              return false
            }
            // saveOrUpdata(this.form).then(res => {
            //   this.operVisible = false
            //   this.$message({
            //     message:this.form.paId === '' ?'新增成功':'编辑成功',
            //     type: 'success'
            //   })
            //   this.handleList()
            // })
          }
        })
      },


      //编辑
      handleRowEdit ({index, row}) {
        this.diaLogName='编辑就寝规则'
        let paId = row.paId
        // getFacePassageAccessById({paId}).then(res => {
        //   this.form = res.facePassageAccess
        //   this.operVisible=true
        //   this.$set(this.form,"value1",res.time1)
        //   this.$set(this.form,"value2",res.time2)
        //   this.$set(this.form,"value3",res.time3)
        //   this.readerIdsArr = this.form.readerIds.split(",");
        // })

      },
      // 下发
      handleConnnectClick(){

      },
      //删除
      handleRowRemove ({index, row}) {
        let paId = row.paId
        this.$confirm('确认删除当前就寝规则?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          // delFaceById({
          //   paId
          // }).then(res=>{
          //   this.$message({
          //     message: '删除成功',
          //     type: 'success'
          //   })
          //   this.handleList()
          // })
        })
      },






      //列表
      handleList (val) {

        if(val){
          this.filter.pageNum=1
          this.currentPage = 1
        }
        this.loading = true

        // getFacePassageList(this.filter).then(res => {
        //   this.loading = false
        //   this.data = res.page.list
        //   this.pagination.total = res.page.total
        // }).catch(err => {
        //   this.loading = false
        // })

      },


    },
    mounted () {
      this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,45)
      this.handleList()
    }
  }
</script>
