<template>
  <div class="dialog" v-if="dialogForm">
      <div class="head_box">
          <span class="title">{{ title }}</span>
          <div>
              <el-button type="primary" size="small" :loading="loading" @click="submit" v-show="!disabledFoem">保存</el-button>
              <el-button size="small" @click="close">关闭</el-button>
          </div>
      </div>
      <el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" :disabled="disabledFoem" label-position="top">
          <el-form-item prop="mxmc" label="模型名称">
              <el-input v-model="listQuery.mxmc" placeholder="请填写姓名"></el-input>
          </el-form-item>
          <el-form-item label="所属部门">
            <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
          </el-form-item>
      </el-form>

      <div class="numBox">
        <dle class="numBox-left">勤务报备</dle>
        <dlv class="numBox-right">
          <div class="right-item">
            <div class="child childone">
              <span class="name">应报备</span>
              <el-input-number v-model="listQuery.ybb"></el-input-number>个
            </div>
            <div  class="child ">
              <span class="name">最少报备</span>
              <el-input-number v-model="listQuery.zsbb"></el-input-number>个
            </div>
            <div  class="child childone">
              <span class="name">报备总分</span>
              <el-input-number v-model="listQuery.bbf"></el-input-number>分
            </div>
            <div  class="child">
              <span class="name">报备扣分</span>
              <el-input-number v-model="listQuery.bbkf"></el-input-number>分
            </div>
          </div>
        </dlv>
      </div>

      <div class="numBox">
        <dle class="numBox-left">指令签收及巡逻情况</dle>
        <dlv class="numBox-right numBox-right-flex">
          <div class="right-item">
            <div class="child">
              <span class="name">应签收</span>
              <el-input-number v-model="listQuery.yqs"></el-input-number>个
            </div>
            <div class="child">
              <span class="name">最少签收</span>
              <el-input-number v-model="listQuery.zsqs"></el-input-number>个
            </div>
            <div  class="child">
              <span class="name">签收分</span>
              <el-input-number v-model="listQuery.qsf"></el-input-number>分
            </div>
            <div  class="child">
              <span class="name">签收扣分</span>
              <el-input-number v-model="listQuery.qskf"></el-input-number>分
            </div>
          </div>
          <div class="right-item">
            <div  class="child">
              <span class="name">应巡逻区域</span>
              <el-input-number v-model="listQuery.yxl"></el-input-number>个
            </div>
            <div  class="child">
              <span class="name">最少巡逻区域</span>
              <el-input-number v-model="listQuery.zsxl"></el-input-number>个
            </div>
            <div class="child">
              <span class="name">巡逻分</span>
              <el-input-number v-model="listQuery.xlf"></el-input-number>分
            </div>
            <div class="child">
              <span class="name">巡逻扣分</span>
              <el-input-number v-model="listQuery.xlkf"></el-input-number>分
            </div>
            
          </div>
        </dlv>
      </div>
      <div class="numBox">
        <dle class="numBox-left">巡逻时长及巡逻里程</dle>
        <dlv class="numBox-right numBox-right-flex">
          <div class="right-item">
            <div  class="child">
              <span class="name">应巡逻里程</span>
              <el-input-number v-model="listQuery.yxl"></el-input-number>公里
            </div>
            <div  class="child">
              <span class="name">最少巡逻里程</span>
              <el-input-number v-model="listQuery.zsxllc"></el-input-number>公里
            </div>
            <div  class="child">
              <span class="name">巡逻里程总分</span>
              <el-input-number v-model="listQuery.xlf"></el-input-number>分
            </div>
            <div  class="child">
              <span class="name">巡逻里程扣分</span>
              <el-input-number v-model="listQuery.xllckf"></el-input-number>分
            </div>
          </div>
          <div class="right-item">
            <div  class="child">
              <span class="name">应巡逻时长</span>
              <el-input-number v-model="listQuery.xlscf"></el-input-number>小时
            </div>
            <div  class="child">
              <span class="name">最少巡逻时长</span>
              <el-input-number v-model="listQuery.zsxlsc"></el-input-number>小时
            </div>
            <div  class="child">
              <span class="name">巡逻时长总分</span>
              <el-input-number v-model="listQuery.yxllc"></el-input-number>分
            </div>
            <div  class="child">
              <span class="name">巡逻时长扣分</span>
              <el-input-number v-model="listQuery.xlsckf"></el-input-number>分
            </div>
          </div>
        </dlv>
      </div>
      
      <div class="numBox">
        <dle class="numBox-left">人员 、车辆 、物品盘查</dle>
        <dlv class="numBox-right numBox-right-flex">
          <div class="right-item">
            <div class="child">
              <span class="name">应查人</span>
              <el-input-number v-model="listQuery.ycr"></el-input-number>人
            </div>
            <div class="child">
              <span class="name">最少查人</span>
              <el-input-number v-model="listQuery.zscr"></el-input-number>人
            </div>
            <div class="child">
              <span class="name">查人总分</span>
              <el-input-number v-model="listQuery.crf"></el-input-number>分
            </div>
            <div  class="child">
              <span class="name">查人扣分</span>
              <el-input-number v-model="listQuery.crkf"></el-input-number>分
            </div>
          </div>
          <div class="right-item">
            <div  class="child">
              <span class="name">应查车</span>
              <el-input-number v-model="listQuery.ycc"></el-input-number>辆
            </div>
            <div  class="child">
              <span class="name">最少查车</span>
              <el-input-number v-model="listQuery.zscc"></el-input-number>辆
            </div>
            <div  class="child">
              <span class="name">查车总分</span>
              <el-input-number v-model="listQuery.ccf"></el-input-number>分
            </div>
            <div  class="child">
              <span class="name">查车扣分</span>
              <el-input-number v-model="listQuery.cckf"></el-input-number>分
            </div>
          </div>
          <div class="right-item">
            <div  class="child">
              <span class="name">应查物</span>
              <el-input-number v-model="listQuery.ycw"></el-input-number>个
            </div>
            <div  class="child">
              <span class="name">最少查物</span>
              <el-input-number v-model="listQuery.zscw"></el-input-number>个
            </div>
            <div  class="child">
              <span class="name">查物总分</span>
              <el-input-number v-model="listQuery.cwf"></el-input-number>分
            </div>
            <div  class="child">
              <span class="name">查物扣分</span>
              <el-input-number v-model="listQuery.cwkf"></el-input-number>分
            </div>
          </div>
        </dlv>
      </div>

      

       <div class="numBox">
        <dle class="numBox-left">警情处置及巡防战果</dle>
        <dlv class="numBox-right numBox-right-flex">
          <div class="right-item">
            <div class="child">
              <span class="name">警情处置</span>
              <el-input-number v-model="listQuery.jqcz"></el-input-number>条
            </div>
            <div class="child">
              <span class="name">最少处置</span>
              <el-input-number v-model="listQuery.zscz"></el-input-number>条
            </div>
            <div class="child">
              <span class="name">处置分</span>
              <el-input-number v-model="listQuery.czf"></el-input-number>分
            </div>
            <div class="child">
              <span class="name">处置扣分</span>
              <el-input-number v-model="listQuery.czkf"></el-input-number>分
            </div>
          </div>
          <div class="right-item">
            <div  class="child">
              <span class="name">巡防战果</span>
              <el-input-number v-model="listQuery.xfzg"></el-input-number>个
            </div>
            <div  class="child">
              <span class="name">标签人员和车辆</span>
              <el-input-number v-model="listQuery.xfzg"></el-input-number>个
            </div>

            <div  class="child">
              <span class="name">巡防战果总分</span>
              <el-input-number v-model="listQuery.xfzgf"></el-input-number>分
            </div>
            <div  class="child">
              <span class="name">巡防战果扣分</span>
              <el-input-number v-model="listQuery.xfzgkf"></el-input-number>分
            </div>
          </div>
        </dlv>
      </div>

      <div class="numBox">
        <dle class="numBox-left">执行指令</dle>
        <dlv class="numBox-right numBox-right-flex">
          <div class="right-item">
            <div class="child">
              <span class="name">应执行指令</span>
              <el-input-number v-model="listQuery.yzxzl"></el-input-number>个
            </div>
            <div class="child">
              <span class="name">最少执行</span>
              <el-input-number v-model="listQuery.zszxzl"></el-input-number>个
            </div>
            <div  class="child">
              <span class="name">执行指令分</span>
              <el-input-number v-model="listQuery.zxzlf"></el-input-number>分
            </div>
            <div  class="child">
              <span class="name">执行指令扣分</span>
              <el-input-number v-model="listQuery.zxzlkf"></el-input-number>分
            </div>
          </div>
        </dlv>
      </div>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
import * as rule from "@/utils/rules.js";
import { IdCard } from "@/utils/validate.js";
import { ref,defineExpose, reactive,getCurrentInstance ,defineEmits} from 'vue';
const emits = defineEmits(['updateDate'])
const { proxy } = getCurrentInstance();
const title = ref('新增模型管理');
const disabledFoem = ref(false) //表单禁用
const dialogForm = ref(false) //弹窗
const listQuery = ref({ ybb:''}) //表单
const loading = ref(false)
const elform = ref()
const rules = reactive({
  mxmc: [{ required: true, message: "请输入姓名", trigger: "blur"}],
})

// 初始化数据
const init = (type,row)=> {
    dialogForm.value = true
    disabledFoem.value = type == 'detail' ? true :false
    if(row){
      title.value = type == 'edit'?'修改模型管理':'模型管理详情'
      listQuery.value = JSON.parse(JSON.stringify(row))
      // getDataById(row.id) //根据id查询详情
    }else{
      title.value = '新增模型管理'
    }
}
// 根据id查询详情
const getDataById = (id)=>{
  qcckGet({},'/mosty-jcgl/tbjcglKhmx/selectByid?id='+id).then(res=>{
    listQuery.value = JSON.parse(JSON.stringify(res))
  })
}
// 提交
const submit = ()=>{
    elform.value.validate((valid) => {
    if (!valid) return false;
    loading.value = true;
    if(title.value == '新增模型管理'){
      qcckPost(listQuery.value,'/mosty-jcgl/tbjcglKhmx/addKhmx').then(res=>{
        proxy.$message({type: "success", message: "新增成功"});
        close()
        emits('updateDate')
        loading.value = false;
      }).catch(()=>{ loading.value = false; })
    }else{
      qcckPost(listQuery.value,'/mosty-jcgl/tbjcglKhmx/updateKhmx').then(res=>{
        proxy.$message({type: "success", message: "编辑成功"});
        close()
        loading.value = false;
        emits('updateDate')
      }).catch(()=>{ loading.value = false; })
    }
  });
}
// 关闭
const close = ()=>{
  listQuery.value = { ybb:''}
  dialogForm.value = false
}
defineExpose({init});
</script>

<style lang='scss' scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.numBox{
  display: flex;
  margin: 2rem 12rem 0rem 12rem;
  border: 1px solid #006193;
  align-items: center;
  .numBox-left{
    width: 200px;
    text-align: center;
  }
  .numBox-right-flex{
    display: flex;
  }
  .numBox-right{
    flex: 1;
    margin-bottom: 2px;
    .right-item{
      flex: 1;
      border: 1px solid #006193;
      border-bottom: none;
      border-top: none;
      border-right: none;
      .child{
        border-bottom:1px solid #006193;
        padding: 10px;
        box-sizing: border-box;
        .name{
          display: inline-block;
          width: 100px;
        }
      }
      ::v-deep .el-input-number__decrease{
        display: none;
      }
      ::v-deep .el-input-number__increase{
        display: none;
      }
      ::v-deep .el-input-number{
        width: 90px;
        margin-left: 30px;
        margin-right: 10px;
      }
      ::v-deep .el-input-number .el-input__inner{
        padding: 0;
      }
    }
    .child:nth-last-child(1){
      border-bottom: none;
    }
    .childone{
      border-bottom: 1px solid #006193 !important;
    }
   
  }
}

</style>