<template>
  <div class="content-box">
    <div class="container">
      <p class="title">全局设置</p>
      <!-- <div class="test-div">
      <i class="el-icon-edit"></i>
      <i class="el-icon-share"></i>
      <i class="el-icon-delete"></i>
    </div> -->
      <el-form label-position="left" label-width="180px">
        <el-form-item label="视频接入上限：">
          <el-input-number v-model="videoNumber" @change="handleChangeVideoNumber" :min="1" size="mini"
            :max="8"></el-input-number>
          <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>范围1-8、默认6
        </el-form-item>

        <el-form-item label="跳帧设置：">
          <el-input-number v-model="FPS" @change="handleChange" size="mini"></el-input-number>
        </el-form-item>

        <el-form-item label="默认取值：">
        </el-form-item>
        <!-- <el-button type="primary" @click="commit()">保存</el-button> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import {getQuanjszData} from "../../api/index";
import  serverUrl from "../../config/apiurl.js"
import axios from 'axios'

export default {
  data() {
    return {
      videoNumber: 6,
      FPS: 0,
      id:''
    }
  },
    mounted() {
    this.getShipjkDatalist()
  },
  methods: {
    handleChangeVideoNumber(value){
        console.log("videoNumber",value)
        this.videoNumber=value
        let formData = new FormData();
        formData.append("F_NB_SHIPJRSX",value);
        formData.append("F_NB_TIAOZSZ",this.FPS);
        formData.append("F_VC_ID",this.id);
        axios({
                method: "post",
                url: serverUrl.postSetQuanjsz,
                data:formData
              }).then((res) => {
                    console.log("res",res)
                     if(res.data.code==200){
                 this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
               }else{
                 this.$message({
                  message: res.data.msg,
                  type: 'warning'
                });
               }
              })
    },
    handleChange(value) {
         console.log("FPS",value)
          this.FPS=value
           let formData = new FormData();
        formData.append("F_NB_SHIPJRSX",this.videoNumber);
        formData.append("F_NB_TIAOZSZ",value);
        formData.append("F_VC_ID",this.id);
        axios({
                method: "post",
                url: serverUrl.postSetQuanjsz,
                data:formData
              }).then((res) => {
                    console.log("res",res)
                    if(res.data.code==200){
                 this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
               }else{
                 this.$message({
                  message: res.data.msg,
                  type: 'warning'
                });
               }
              })
    },
    //获取全局设置数据
   getShipjkDatalist(){
        getQuanjszData().then(res=>{
         console.log("res",res)
        if(res.data.code==200){
            this.videoNumber=res.data.data.f_NB_SHIPJRSX
             this.FPS=res.data.data.f_NB_TIAOZSZ
             this.id = res.data.data.f_VC_ID
        }
        })
   },
    //点击确认
    commit(){
         let formData = new FormData();
        formData.append("F_NB_SHIPJRSX",this.videoNumber);
        formData.append("F_NB_TIAOZSZ",this.FPS);
        formData.append("F_VC_ID",this.id);
        axios({
                method: "post",
                url: serverUrl.postSetQuanjsz,
                data:formData
              }).then((res) => {
                     console.log("res",res)
                    if(res.data.code==200){
                 this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
               }else{
                 this.$message({
                  message: res.data.msg,
                  type: 'warning'
                });
               }
              })
    }
  }
}
</script>

<style scoped>
.title {
        width: 95%;
        font-size: 25px;
        text-align: left;
        border-bottom: 1px solid black;
        margin-bottom: 20px;
    }
.test-div i {
  font-size: 25px;
}
</style>