<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.gtNm" 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="60%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="120px" labelPosition="right" :rules="rules">
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="时间组名称" prop="gtNm">
                            <el-input maxlength="25" v-model.trim="form.gtNm"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="备注" prop="gtDesc" label-width="50px">
                            <el-input maxlength="120" v-model.trim="form.gtDesc"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="15">
                        <el-form-item label="起止日期" prop="effecTime">
                            <el-date-picker
                                    v-model="form.effecTime"
                                    type="datetimerange"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :default-time="['00:00:00', '23:59:59']"
                                    @change="dateChange"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="有效星期" prop="week" style="width: 400px">
                            <!--<el-checkbox-group >-->
                            <el-col :span="6">
                                <el-checkbox :checked="isChecked" v-model="isChecked" @change="allClick">全选</el-checkbox>
                            </el-col>
                            <el-col :span="6" v-for="(item,index) in checkList" :key="index">
                                <el-checkbox :checked="item.isChecked" v-model="item.isChecked" @change="checkClick">{{item.label}}</el-checkbox>
                            </el-col>
                            <!--</el-checkbox-group>-->
                        </el-form-item>
                    </el-col>
                </el-row>
                    <el-card class="box-card">
                        <el-row :gutter="15">
                    <el-col :span="24">
                        有效时段 <el-form-item prop="value1">
                        <div class="timeBox">
                            <!--通行时间段一：<el-input v-model.trim="form.allowIn1" style="width: 100px" prop="allowIn1"></el-input>至<el-input v-model.trim="form.allowOut1" style="width: 100px" class="timePay" prop="allowOut1"></el-input>-->
                            时间段一：<el-time-picker
                                is-range
                                v-model="form.value1"
                                value-format="HH:mm"
                                format="HH:mm"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围"
                                @change="timeChange1"
                        >
                        </el-time-picker>
                        </div>
                    </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="value2">
                            <div class="timeBox">
                                <!--通行时间段一：<el-input v-model.trim="form.allowIn1" style="width: 100px" prop="allowIn1"></el-input>至<el-input v-model.trim="form.allowOut1" style="width: 100px" class="timePay" prop="allowOut1"></el-input>-->
                                时间段二：<el-time-picker
                                    is-range
                                    v-model="form.value2"
                                    value-format="HH:mm"
                                    format="HH:mm"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    placeholder="选择时间范围"
                                    @change="timeChange2"
                            >
                            </el-time-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="value3">
                            <div class="timeBox">
                                <!--通行时间段一：<el-input v-model.trim="form.allowIn1" style="width: 100px" prop="allowIn1"></el-input>至<el-input v-model.trim="form.allowOut1" style="width: 100px" class="timePay" prop="allowOut1"></el-input>-->
                                时间段三：<el-time-picker
                                    is-range
                                    v-model="form.value3"
                                    value-format="HH:mm"
                                    format="HH:mm"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    placeholder="选择时间范围"
                                    @change="timeChange3"
                            >
                            </el-time-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="value4">
                            <div class="timeBox">
                                <!--通行时间段一：<el-input v-model.trim="form.allowIn1" style="width: 100px" prop="allowIn1"></el-input>至<el-input v-model.trim="form.allowOut1" style="width: 100px" class="timePay" prop="allowOut1"></el-input>-->
                                时间段四：<el-time-picker
                                    is-range
                                    v-model="form.value4"
                                    value-format="HH:mm"
                                    format="HH:mm"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    placeholder="选择时间范围"
                                    @change="timeChange4"
                            >
                            </el-time-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="value5">
                            <div class="timeBox">
                                <!--通行时间段一：<el-input v-model.trim="form.allowIn1" style="width: 100px" prop="allowIn1"></el-input>至<el-input v-model.trim="form.allowOut1" style="width: 100px" class="timePay" prop="allowOut1"></el-input>-->
                                时间段五：<el-time-picker
                                    is-range
                                    v-model="form.value5"
                                    value-format="HH:mm"
                                    format="HH:mm"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    placeholder="选择时间范围"
                                    @change="timeChange5"
                            >
                            </el-time-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="value6">
                            <div class="timeBox">
                                <!--通行时间段一：<el-input v-model.trim="form.allowIn1" style="width: 100px" prop="allowIn1"></el-input>至<el-input v-model.trim="form.allowOut1" style="width: 100px" class="timePay" prop="allowOut1"></el-input>-->
                                时间段六：<el-time-picker
                                    is-range
                                    v-model="form.value6"
                                    value-format="HH:mm"
                                    format="HH:mm"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    placeholder="选择时间范围"
                                    @change="timeChange6"
                            >
                            </el-time-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                </el-card>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <zl-button :loading="staLoading" @click="operInstance">保存</zl-button>
      </span>
        </el-dialog>
    </d2-container>
</template>
<script>
  import { tableOptions } from '@/assets/options'
  import {getThroughTimeList,onDeleteThroughTime,saveOrUpdateThroughTime,getThroughTimeById} from '@/api/accessControl/throughTime'
  export default {
    name: 'system-staff',
    components: {

    },
    data () {
      return {
        week:[],
        isSelected:[],
        isChecked:false,
        options:[],
        gtId:[],
        gtIds:"",
        isCreate:false,
        userId:"",
        checkList:[{label:"星期一",value:0,isChecked:false},{label:"星期二",value:0,isChecked:false},{label:"星期三",value:0,isChecked:false},{label:"星期四",value:0,isChecked:false},{label:"星期五",value:0,isChecked:false},{label:"星期六",value:0,isChecked:false},{label:"星期天",value:0,isChecked:false}],
        // classVisible:false,
        staLoading: false,
        multipleSelection:[],
        func: {
          add: false,
          delete: false,
          update: false,
          select: false
        },
        falg: true,
        isExpend: true,
        tableOptions,
        loading: false,
        operVisible: false,
        diaLogName: '新增',
        lanuchs: [],
        form: {
          value1:'',
          value2:'',
          value3:'',
          value4:'',
          value5:'',
          value6:'',
          effecTime:"",
          gtNm:"",
          bgTm:"",
          gtDesc:"",
          endTm:"",
          week:[],
          allowIn1:"",
          allowOut1:"",
          allowIn2:"",
          allowOut2:"",
          allowIn3:"",
          allowOut3:"",
          allowIn4:"",
          allowOut4:"",
          allowIn5:"",
          allowOut5:"",
          allowIn6:"",
          allowOut6:"",
        },
        filter: {
          pageSize: 10,
          pageNum: 1,
          gtNm: '',
        },
        pagination: {
          total: 0
        },
        currentPage: 1,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        columns: [
          {
            title: '时间组序号',
            key: 'index',
            minWidth: '90',
            formatter (row, column, cellValue, index) {
              return index+1
            }
          },
          {
            title: '时间组名称',
            key: 'gtNm',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '起始日期',
            key: 'bgTm',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '终止日期',
            key: 'endTm',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '有效星期',
            key: 'week',
            minWidth: '120',
            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: {
          gtNm:[{required: true, message: '时间组名称不能为空', trigger: 'blur'}],
          effecTime:[{required: true, message: '请选择有效时间', trigger: 'blur'}],
          value1:[{required: true, message: '请选择时间段一', trigger: 'blur'}],
          // value2:[{required: true, message: '请选择时间段二', trigger: 'blur'}],
          allowIn1:[{required: true, message: '请输入时间', trigger: 'blur'}],
          allowOut1:[{required: true, message: '请输入时间', trigger: 'blur'}],
          allowIn2:[{required: true, message: '请输入时间', trigger: 'blur'}],
          allowOut2:[{required: true, message: '请输入时间', trigger: 'blur'}],
        }
      }
    },

    methods: {
      checkClick(){
        if(this.isChecked){
          this.checkList.forEach((item,index)=>{
            item.isChecked=true;
            item.value=1
          })
        }else{
          this.isSelected=[]
          this.checkList.forEach((item,index)=>{
            if(item.isChecked){
              this.isSelected.push(item)
            }
          })
        }
      },
      allClick(){
        if(this.isChecked){
          this.checkList.forEach((item,index)=>{
            item.isChecked=true;
            item.value=1
          })
        }else{
          this.checkList.forEach((item,index)=>{
            item.isChecked=false;
            item.value=0
          })
        }
      },
      timeChange1(val){
        if(val == null){
          this.form.allowIn1 = '',
            this.form.allowOut1 = ''
        }else{
          this.form.allowIn1 = val[0],
            this.form.allowOut1 = val[1]
        }
      },
      timeChange2(val){
        if(val == null){
          this.form.allowIn2 = ''
          this.form.allowOut2 = ''
        }else{
          this.form.allowIn2 = val[0],
            this.form.allowOut2 = val[1]
        }
      },
      timeChange3(val){
        if(val == null){
          this.form.allowIn3 = ''
          this.form.allowOut3 = ''
        }else{
          this.form.allowIn3= val[0],
            this.form.allowOut3= val[1]
        }
      },
      timeChange4(val){
        if(val == null){
          this.form.allowIn4 = '',
            this.form.allowOut4 = ''
        }else{
          this.form.allowIn4 = val[0],
            this.form.allowOut4 = val[1]
        }
      },
      timeChange5(val){
        if(val == null){
          this.form.allowIn5 = ''
          this.form.allowOut5 = ''
        }else{
          this.form.allowIn5 = val[0],
            this.form.allowOut5 = val[1]
        }
      },
      timeChange6(val){
        if(val == null){
          this.form.allowIn6 = ''
          this.form.allowOut6 = ''
        }else{
          this.form.allowIn6= val[0],
            this.form.allowOut6= val[1]
        }
      },
      dateChange (val) {
        if(val == null){
          this.form.bgTm = ''
          this.form.endTm = ''
        }else{
          this.$set(this.form,'bgTm',val[0])
          this.$set(this.form,'endTm',val[1])
        }
      },
      onCreateClick(){
        this.operVisible=true
      },
      handleTreeNode () {
        this.handleList()
      },
      handleList (val) {
        if (val) {
          this.filter.pageNum = 1
          this.currentPage = 1
        }
        this.loading = true
        getThroughTimeList(this.filter)
          .then(res => {
            // console.log(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.isChecked){
              if(this.isSelected.length<1){
                this.$message({
                  message: '请选择有效星期',
                  type: 'warning'
                })
                return
              }
            }
            this.week=[]
            this.checkList.forEach((item, index) => {
              if (item.isChecked) {
                item.value = 1
              } else {
                item.value = 0
              }
              this.week.push(item.value)
            })
            this.staLoading = true
            this.form.week = this.week.join()
            this.form.bgTm=this.form.effecTime[0]
            this.form.endTm=this.form.effecTime[1]
            saveOrUpdateThroughTime(this.form).then(res => {
              this.staLoading = false
              this.operVisible = false
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.clearForm()
              this.handleTreeNode()
            }).catch(err => {
              this.staLoading = false
            })
          }
        })
      },
      handleRowEdit ({index, row}) {
        this.isSelected=[]
        this.diaLogName = '修改'
        getThroughTimeById({gtId:row.gtId}).then(res => {
          this.form = res.updateValue
          this.week=res.updateValue.week.split(",")
          this.week.forEach((item,index)=>{
            this.checkList[index].value=this.week[index]
            if(this.checkList[index].value==1){
              this.checkList[index].isChecked=true
              this.isSelected.push(item)
            }
          })
          this.$set(this.form,"effecTime",res.time)
          this.$set(this.form,"value1",res.value1)
          this.$set(this.form,"value2",res.value2)
          this.$set(this.form,"value3",res.value3)
          this.$set(this.form,"value4",res.value4)
          this.$set(this.form,"value5",res.value5)
          this.$set(this.form,"value6",res.value6)
        })
        this.operVisible = true
      },
      onMutilDelClick(){
        if(!this.multipleSelection.length){
          this.$message({
            message: '请选择记录',
            type: 'warning'
          })
        }else{
          this.$confirm(`确定要删除当前时间组吗?`, '确认操作', {
            confirmButtonText: '确定',
            cancelButtonText: '放弃',
            type: 'warning'
          }).then(() => {
            this.gtId=[]
            this.multipleSelection.forEach((item,index)=>{
              this.gtId.push(item.gtId)
            })
            this.gtIds=this.gtId.join(",")
            onDeleteThroughTime({gtId:this.gtIds}).then(res=>{
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.handleTreeNode()
            })
          })
        }
      },
      handleRowRemove ({index, row}) {
        this.$confirm(`确定要删除当前时间组吗?`, '确认操作', {
          confirmButtonText: '确定',
          cancelButtonText: '放弃',
          type: 'warning'
        }).then(() => {
          onDeleteThroughTime({gtId:row.gtId}).then(res=>{
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.handleTreeNode()
          })
        })
      },
      clearForm () {
        if (this.$refs['form']!==undefined) {
          this.$refs['form'].resetFields()
        }
        this.form= {
          value1:'',
            value2:'',
            value3:'',
            value4:'',
            value5:'',
            value6:'',
            effecTime:"",
            gtNm:"",
            bgTm:"",
            gtDesc:"",
            endTm:"",
            week:[],
            allowIn1:"",
            allowOut1:"",
            allowIn2:"",
            allowOut2:"",
            allowIn3:"",
            allowOut3:"",
            allowIn4:"",
            allowOut4:"",
            allowIn5:"",
            allowOut5:"",
            allowIn6:"",
            allowOut6:"",
        },
          this.week=[]
        this.isSelected=[]
        this.checkList.forEach((item,index)=> {
          item.isChecked=false;
          item.value=0
        })
        this.isChecked=false
        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>