<template>
    <d2-container style="font-size: 16px;">
        <div class="d2-table-view-header">
            <h4>规则设置</h4>
        </div>
        <el-form ref="form" :model="form" label-width="80px" labelPosition="right" style="padding: 15px" :rules="rules" :disabled="isDisable">
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="进出配置" style="margin-left: 80px" prop="ioTyp">
                        <!--<el-radio-group v-model="form.ioTyp" @change="changeClick">-->
                            <el-radio v-model="form.ioTyp" label="0" @change="changeClick">一进一出</el-radio>
                            <el-radio v-model="form.ioTyp" label="1" @change="changeClick">二进二出</el-radio>
                            <el-radio v-model="form.ioTyp" label="2" @change="changeClick">三进三出</el-radio>
                            <el-radio v-model="form.ioTyp" label="3" @change="changeClick">自定义</el-radio>
                        <!--</el-radio-group>-->
                        <el-input v-model="form.ioCustom" style="width: 110px;height: 30px;" placeholder="例:三进三出" :disabled="isEdit"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                   <span style="margin-left: 80px">联网模式下对车辆数据效验功能:</span>
                    <el-form-item>
                        <el-checkbox-group v-model="form.parkChk">
                            <el-checkbox label=1>固定卡重复入场</el-checkbox>
                            <el-checkbox label=2 >固定卡重复出场</el-checkbox>
                            <el-checkbox label=3>固定卡过期入场</el-checkbox>
                            <el-checkbox label=4>临时卡重复入场</el-checkbox>
                            <el-checkbox label=5>临时卡重复出场</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item prop="unrecFee">
                        非固定车无入场记录收费(元/次)<el-input v-model.trim="form.unrecFee" type="number" placeholder="0" min="0"></el-input>
                    </el-form-item>
                    <el-form-item prop="unrecTm">
                        非固定车无入场记录默认时数(时)<el-input v-model.trim="form.unrecTm" type="number" placeholder="0" min="0"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item>
                        非登记车辆默认停车卡类型
                        <custom-select :value="form.parkTyp" v-model="form.parkTyp" typeName="非登记车辆默认停车卡类型" style="width: 100%"></custom-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item>
                        车牌号码头字<custom-select :value="form.plateTop" v-model="form.plateTop" typeName="车牌号码头字" style="width: 100%"></custom-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item>
                        使用辅助门禁停车卡类型
                        <custom-select :value="form.doorTyp" v-model="form.doorTyp" typeName="使用辅助门禁停车卡类型" style="width: 100%"></custom-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item prop="closeTyp">
                        进出场询问弹出框自动关闭时间(秒)<el-input v-model.trim="form.closeTyp" style="width: 100px" type="number" placeholder="0" min="0"></el-input>(0为自动关闭)
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item>
                        <el-checkbox v-model="form.zeroOpen">出场时费用为0元自动开闸</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item>
                        <el-checkbox v-model="form.samGrpMulCtl">同一区域可分组控制(只适合一个区域的情况)</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item>
                        <el-checkbox v-model="form.freeIn">临时车可免费入场</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item>
                        <el-checkbox v-model="form.busAsAttend">本校校职工车辆进出可当考勤使用</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item >
                        <el-checkbox v-model="form.vistorIo">进出口关联访客登记后授权临时通行</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="外接LED显示屏" label-width="110px" style="margin-left: 80px">
                        <el-checkbox v-model="form.isLed">使用LED显示屏</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item>
                        <el-checkbox v-model="form.noticeOverTime">使用车辆超时提醒功能</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                <el-form-item prop="ledPlate">
                    LED屏显示车牌列数<el-input v-model="form.ledPlate" style="width: 80px" type="number" placeholder="0" min="0"></el-input>
                </el-form-item>
            </el-col>
                <el-col :span="10">
                    <el-form-item >
                        <el-checkbox v-model="form.isEntrance">LED显示余位(入口)</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item >
                        <el-checkbox v-model="form.isExit">LED显示余位(出口)</el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row style="margin-left:480px">
              <!--<el-button type="primary" :loading="staLoading" @click="operInstance()">{{saveOrContain}}</el-button>-->
            <zl-button :loading="staLoading" @click="operInstance()">保存</zl-button>
        </el-row>
    </d2-container>
</template>

<script>
  import {getRulesList,saveClick} from '@/api/parking/setRules'
  export default {
    name: 'index.vue',
    components: {

    },
    data(){
      let checkNumber = (rule, value, callback) => {
        let reg = /^[0-9]*$/
        if (!reg.test(value)) {
          return callback(new Error('请输入数字'))
        } else {
          callback ()
        }
      }
      return{
        isEdit:true,
        staLoading:false,
        // saveOrContain:"修改",
        isDisable:false,
        form:{
          ioCustom:"",
          ioTyp:"1",
          parkChk:[],
          unrecFee:"",
          unrecTm:"",
          parkTypz:"",
          doorTyp:"",
          plateTop:"",
          closeTyp:"",
          zeroOpen:"",
          samGrpMulCtl:"",
          freeIn:"",
          busAsAttend:"",
          noticeOverTime:"",
          vistorIo:"",
          isLed:"",
          ledPlate:"",
          resCnt:"",
          isEntrance:"",
          isExit:"",
          parkId:""
        },
        rules: {
          ioTyp:[{required: true,message: '请选择进出配置', trigger: 'blur'}],
          freeMin:[{required: true, message: '免费分钟不能为空', trigger: 'blur'}],
          parkCardTyp:[{required: true, message: '请选择停车卡类', trigger: 'blur'}],
          areaCode:[{required: true, message: '请选择区域名称', trigger: 'blur'}],
          feeTyp:[{required: true, message: '请选择收费类型', trigger: 'blur'}],
        }
      }
    },
    methods:{
      changeClick(){
        if(this.form.ioTyp=="0"){
         this.form.ioCustom=""
          this.isEdit=true
        }else if(this.form.ioTyp=="1"){
          this.form.ioCustom=""
          this.isEdit=true
        }else if(this.form.ioTyp=="2"){
          this.form.ioCustom=""
          this.isEdit=true
        }else{
          this.isEdit=false
        }
      },
      operInstance(){
        // if(this.saveOrContain==="保存"){
          this.$refs['form'].validate(valid => {
            if (valid) {
if(this.form.ioTyp==="3"){
  if(!this.form.ioCustom){
    this.$message({
      message: '请输入进出配置',
      type: 'warning'
    })
    return
  }
}
              if(this.form.zeroOpen===false){
                this.form.zeroOpen=0
              }else{
                this.form.zeroOpen=1
              }
              if(this.form.samGrpMulCtl===false){
                this.form.samGrpMulCtl=0
              }else{
                this.form.samGrpMulCtl=1
              }
              if(this.form.freeIn===false){
                this.form.freeIn=0
              }else{
                this.form.freeIn=1
              }
              if(this.form.busAsAttend===false){
                this.form.busAsAttend=0
              }else{
                this.form.busAsAttend=1
              }
              if(this.form.vistorIo===false){
                this.form.vistorIo=0
              }else{
                this.form.vistorIo=1
              }
              if(this.form.isLed===false){
                this.form.isLed=0
              }else{
                this.form.isLed=1
              }
              if(this.form.noticeOverTime===false){
                this.form.noticeOverTime=0
              }else{
                this.form.noticeOverTime=1
              }
              if(this.form.isEntrance===false){
                this.form.isEntrance="0"
              }else{
                this.form.isEntrance="1"
              }
              if(this.form.isExit===false){
                this.form.isExit="0"
              }else{
                this.form.isExit="1"
              }
              this.form.parkChk=this.form.parkChk.join(",")
saveClick(this.form).then(res=>{
  this.operVisible = false
  this.$message({
    message: '操作成功',
    type: 'success'
  })
  this.handList()
  // this.saveOrContain="修改"

})
            }
          })
        // }
// this.saveOrContain="保存"
//         this.isDisable=false

      },
    clearForm(){
        this.form={}
      // this.saveOrContain="修改"
    },
    handList(){
      getRulesList().then(res=>{
        if(!res.parkRule){
          return
        }
        this.form=res.parkRule
        this.changeClick()
        // if(res.parkRule.ioTyp=="一进一出"){
        //   this.$set(this.form,"freeSet","")
        // }else if(res.parkRule.ioTyp=="二进二出"){
        //   this.$set(this.form,"freeSet","")
        // }else if(res.parkRule.ioTyp=="三进三出"){
        //   this.$set(this.form,"freeSet","")
        // }else{
        //   this.$set(this.form,"freeSet",res.parkRule.ioTyp)
        // }
        this.form.parkChk=res.parkRule.parkChk.split(",")
        this.form.parkId=res.parkRule.parkId
        if(res.parkRule.zeroOpen==1){
          this.form.zeroOpen=true
        }else{
          this.form.zeroOpen=false
        }
        if(this.form.samGrpMulCtl===0){
          this.form.samGrpMulCtl=false
        }else{
          this.form.samGrpMulCtl=true
        }
        if(this.form.freeIn===0){
          this.form.freeIn=false
        }else{
          this.form.freeIn=true
        }
        if(this.form.busAsAttend===0){
          this.form.busAsAttend=false
        }else{
          this.form.busAsAttend=true
        }
        if(this.form.vistorIo===0){
          this.form.vistorIo=false
        }else{
          this.form.vistorIo=true
        }
        if(this.form.isLed===0){
          this.form.isLed=false
        }else{
          this.form.isLed=true
        }
        if(this.form.noticeOverTime===0){
          this.form.noticeOverTime=false
        }else{
          this.form.noticeOverTime=true
        }
        if(this.form.isEntrance==="0"){
          this.form.isEntrance=false
        }else{
          this.form.isEntrance=true
        }
        if(this.form.isExit==="0"){
          this.form.isExit=false
        }else{
          this.form.isExit=true
        }
      })
    }
    },
    mounted(){
   this.handList()
      if(this.form.ioTyp===""){
     this.isEdit=false
      }
    }
  }
</script>

<style scoped>
    h4{
        margin-left: 50px;
    }
    .d2-container-full__footer{
        text-align: center!important;
    }
</style>