<template>
  <div class="componentSty">
    <el-row style="width: 100%;height: 100%">
      <el-col :span="24">
        <el-form :model="queryForm" ref="queryForm" :inline="true">
          <el-form-item label="设备编号:">
            <el-input v-model="queryForm.sbbh"  placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="设备名称:">
            <el-input v-model="queryForm.sbmc"  placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="设备位置:">
            <el-input v-model="queryForm.sbwz"  placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-if="rowData.fSsczid !==''" type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                       icon="el-icon-plus" @click=" hanleOpt('add')"> 新增
            </el-button>
            <el-button type="primary" icon="el-icon-refresh"
                       style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
                       @click="handleReset" plain>重置
            </el-button>
            <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                       icon="el-icon-search" @click="handleSearch"> 查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24" style="height: calc(100% - 95px);overflow: auto;">
        <el-table
          style="width: 100%"
          v-loading="loading"
          :data="tableData">
          <el-table-column
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="F_czmc"
            min-width="120"
            label="厂站名称">
          </el-table-column>
          <el-table-column
            prop="F_sbbh"
            min-width="120"
            label="设备编号">
          </el-table-column>
          <el-table-column
            prop="F_sbmc"
            min-width="120"
            label="设备名称">
          </el-table-column>
          <el-table-column
            prop="F_syzt"
            label="使用状态">
          </el-table-column>
          <el-table-column
            prop="F_sbpp"
            label="设备品牌">
          </el-table-column>
          <el-table-column
            prop="F_sbwz"
            min-width="120"
            label="设备位置">
          </el-table-column>
          <el-table-column
            prop="F_sbzt"
            label="设备状态">
          </el-table-column>
          <el-table-column
            prop="opt"
            width="100"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text"  @click="hanleOpt('edit',scope.row)">编辑</el-button>
              <el-button type="text" style="color: red;" @click="hanleOpt('delete',scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination
          style="float: right; margin-top: 10px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParam.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageParam.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParam.total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      v-if="dialogParams.showDialogVisible"
      :title="dialogParams.title"
      :visible.sync="dialogParams.dialogVisible"
      width="60%"
      @close="handleDialogClose">
      <el-row>
        <el-form :model="dialogParams"  :rules="dialogRules" ref="dialogParams" label-width="100px">
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="设备编号:" prop="sbbh">
                <el-input v-model="dialogParams.sbbh" disabled placeholder="请输入设备编号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备名称:" prop="sbmc">
                <el-input v-model="dialogParams.sbmc" placeholder="请输入设备名称" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="设备位置:" prop="sbwz">
                <el-input v-model="dialogParams.sbwz" placeholder="请输入设备位置" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备品牌:" prop="sbpp">
                <el-input v-model="dialogParams.sbpp" placeholder="请输入设备品牌" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="视频流地址:" prop="spldz">
                <el-input v-model="dialogParams.spldz" placeholder="请输入视频流地址" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="使用状态:" prop="syzt">
                <el-select v-model="dialogParams.syzt" style="width: 100%" clearable placeholder="请选择使用状态">
                  <el-option
                    v-for="item in syztOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="设备状态:" prop="sbzt">
                <el-select v-model="dialogParams.sbzt" style="width: 100%" clearable placeholder="请选择设备状态">
                  <el-option
                    v-for="item in sbztOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对接方式:" prop="djfs">
                <el-select v-model="dialogParams.djfs" style="width: 100%" clearable placeholder="请选择对接方式">
                  <el-option
                    v-for="item in djfsOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="排序号:" prop="pxh">
                <el-input v-model="dialogParams.pxh" placeholder="请输入排序号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注:" prop="bz">
                <el-input v-model="dialogParams.bz" type="textarea" :rows="2" placeholder="请输入备注" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogParams.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit('dialogParams')">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
import {videoTableDataPort, delVideoPort, equipmentNumPort, addEquipmentPort,editEquipmentPort} from '@/api/regionalManage'
export default {
  name: "videoManage",
  props:{
    rowData:{
      type:Object,
      default:()=>{}
    }
  },
  async mounted() {
    console.log('打印this.$store',this.$store.state.user);
    await this.getDataList();
  },
  data(){
    return {
      loading:false,
      queryForm:{
        sbbh:'',
        sbmc:'',
        sbwz:''
      },
      syztOptions:[
        {
          label:'使用中',
          value:'使用中'
        },
        {
          label:'停用',
          value:'停用'
        }
      ],//使用状态数值
      sbztOptions:[
        {
          label:'正常',
          value:'正常'
        },
        {
          label:'故障',
          value:'故障'
        }
      ],//设备状态数值
      djfsOptions:[
        {
          label:'RTSP',
          value:'RTSP'
        },
        {
          label:'MQTT',
          value:'MQTT'
        }
      ],//设备状态数值
      tableData:[],
      pageParam:{
        page:1,
        size:10,
        total:0
      },
      dialogParams:{
        showDialogVisible:false,
        cjr:'',
        cjsj:'',
        gxsj:'',
        gxr:'',
        title:'新增区域',
        id_:'',
        czID:'',
        czmc: '',
        qyID: '',
        qymc: '',
        dialogVisible:false,
        sbbh:'',
        sbmc:'',
        sbpp:'',
        sbwz:'',
        spldz:'',
        syzt:'',
        pxh:'',
        bz:'',
        sbzt:'',
        djfs:'RTSP',
        dialogType:'',
        form_data_rev_:''
      },
      dialogRules:{
        sbbh:[
          {required:true,message:'请输入设备编号',trigger:'blur'}
        ],
        sbmc:[
          {required:true,message:'请输入设备名称',trigger:'blur'}
        ],
        sbpp:[
          {required:true,message:'请输入设备品牌',trigger:'blur'}
        ],
        sbwz:[
          {required:true,message:'请输入设备位置',trigger:'blur'}
        ],
        spldz:[
          {required:true,message:'请输入视频流地址',trigger:'blur'}
        ],
        syzt:[
          {required:true,message:'请选择使用状态',trigger:'change'}
        ],
        sbzt:[
          {required:true,message:'请选择设备状态',trigger:'change'}
        ],
        djfs:[
          {required:true,message:'请选择对接方式',trigger:'change'}
        ],
        pxh:[
          { pattern:/^[0-9]{1,3}$/,message:'请输入大于等于0的正整数',trigger:'blur'}
        ]
      },
    }
  },
  methods:{
    //获取table表格数据
    async getDataList(){
      let params ={
        pageBean:{
          page:this.pageParam.page,
          pageSize:this.pageParam.size,
          showTotal:true
        },
        querys:[
          {
            group:'main',
            operation:'LIKE',
            property:'F_sblx',
            relation:'AND',
            value:'摄像头'
          }
        ],
        sorter:[
          {
            direction:'ASC',
            property:'F_pxh'
          }
        ]
      }
      if(this.queryForm.sbbh){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_sbbh',
          relation:'AND',
          value:this.queryForm.sbbh
        })
      }
      if(this.queryForm.sbmc){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_sbmc',
          relation:'AND',
          value:this.queryForm.sbmc
        })
      }
      if(this.queryForm.sbwz){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_sbwz',
          relation:'AND',
          value:this.queryForm.sbwz
        })
      }
      if(this.rowData.fSsczid){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_czid',
          relation:'AND',
          value:this.rowData.fSsczid
        })
      }
      if(!this.rowData.fSsczid&&this.rowData.qyID){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_qyid',
          relation:'AND',
          value:this.rowData.qyID
        })
      }
      this.loading = true;
      await videoTableDataPort(params).then((res)=>{
        const { rows,total } = res;
        this.tableData = rows;
        this.pageParam.total = total;
        setTimeout(()=>{
          this.loading = false;
        },500)

      })
    },
    //获取设备编号的数值
    async getEquipmentNum(){
      await equipmentNumPort().then((res)=>{
        const { value } = res;
        this.dialogParams.sbbh = value;
        console.log('打印获取设备编号res====》',res);
      })
    },
    //操作栏按钮
    async hanleOpt(type,row){
      console.log('打印row=====>',row);
      this.dialogParams.dialogType= type;
      switch (type){
        case 'add':
          this.dialogParams.czID = this.rowData.fSsczid;
          this.dialogParams.czmc = this.rowData.czmc;
          this.dialogParams.qyID = this.rowData.qyID;
          this.dialogParams.qymc = this.rowData.qymc;
          this.dialogParams.spldz = '';
          this.dialogParams.id_ = '';
          this.dialogParams.sbmc = '';
          this.dialogParams.sbwz = '';
          this.dialogParams.sbpp ='';
          this.dialogParams.sbzt = '';
          this.dialogParams.syzt = '';
          this.dialogParams.pxh = '';
          this.dialogParams.bz = '';
          this.dialogParams.cjr = this.$store.state.user.username?this.$store.state.user.username:'';
          this.dialogParams.cjsj = '';
          this.dialogParams.title='新增设备';
          await this.getEquipmentNum();
          break;
        case 'edit':
          this.dialogParams.id_ = row.ID_;
          this.dialogParams.title='编辑设备';
          this.dialogParams.sbbh = row.F_sbbh;
          this.dialogParams.sbmc = row.F_sbmc;
          this.dialogParams.sbwz = row.F_sbwz;
          this.dialogParams.sbpp = row.F_sbpp;
          this.dialogParams.spldz = row.F_rtspUrl;
          this.dialogParams.syzt = row.F_syzt;
          this.dialogParams.sbzt = row.F_sbzt;
          this.dialogParams.djfs = row.F_djfs;
          this.dialogParams.pxh = row.F_pxh;
          this.dialogParams.bz = row.F_bz;
          this.dialogParams.qymc = row.F_qymc;
          this.dialogParams.qyID = row.F_qyID;
          this.dialogParams.czmc = row.F_czmc;
          this.dialogParams.czID = row.F_czID;
          this.dialogParams.cjsj = row.F_cjsj;
          this.dialogParams.cjr = row.F_cjr;
          this.dialogParams.gxr = row.F_gxr;
          this.dialogParams.gxsj = row.F_gxsj;
          this.dialogParams.form_data_rev_ = row.F_form_data_rev_;
          break;
        case 'delete':
          this.$confirm('确定是否删除该设备？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(async() => {
            await delVideoPort({ids:row.id_}).then((res)=>{
              this.handleSearch();
            })
          })
          break;
      }
      if(!this.rowData.fSsczid && type == 'add'){
        this.$message.warning('请选择厂站!')
        return
      }
      if(type !== 'delete'){
        this.dialogParams.showDialogVisible = true;
        this.$nextTick(()=>{
          this.dialogParams.dialogVisible = true;
        })
      }
    },
    //重置按钮事件
    handleReset(){
      this.queryForm.sbbh ='';
      this.queryForm.sbmc ='';
      this.queryForm.sbwz = '';
      this.pageParam.page = 1;
      this.handleSearch();
    },
    //查询按钮事件
    handleSearch(){
      this.getDataList();
    },
    //分页功能的size改变事件
    handleSizeChange(val){
      this.pageParam.size = val;
      this.handleSearch();
    },
    //分页功能page改变事件
    handleCurrentChange(val){
      this.pageParam.page = val;
      this.handleSearch();
    },
    //提交事件
    async handleSubmit(formName){
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let params = {
            bfUrl:this.dialogParams.spldz?this.dialogParams.spldz:'',
            bz:this.dialogParams.bz?this.dialogParams.bz:'',
            czID:this.dialogParams.czID?this.dialogParams.czID:'',
            czmc:this.dialogParams.czmc?this.dialogParams.czmc:'',
            djfs:this.dialogParams.djfs?this.dialogParams.djfs:'',
            pxh:this.dialogParams.pxh?this.dialogParams.pxh:'',
            qymc:this.dialogParams.qymc?this.dialogParams.qymc:'',
            qyID:this.dialogParams.qyID?this.dialogParams.qyID:'',
            rtspUrl:this.dialogParams.spldz?this.dialogParams.spldz:'',
            sbbh:this.dialogParams.sbbh?this.dialogParams.sbbh:'',
            sblx:'摄像头',
            sbmc:this.dialogParams.sbmc?this.dialogParams.sbmc:'',
            sbpp:this.dialogParams.sbpp?this.dialogParams.sbpp:'',
            sbwz:this.dialogParams.sbwz?this.dialogParams.sbwz:'',
            sbzt:this.dialogParams.sbzt?this.dialogParams.sbzt:'',
            syzt:this.dialogParams.syzt?this.dialogParams.syzt:'',
            cjr:this.dialogParams.cjr?this.dialogParams.cjr:'',
            cjsj:this.dialogParams.cjsj?this.dialogParams.cjsj:'',
            gxr:'',
            gxsj:''
          }
          if(this.dialogParams.dialogType == 'edit'){
            this.dialogParams.gxsj  = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
            this.dialogParams.gxr = this.$store.state.user.username?this.$store.state.user.username:'';
            params = {
              ...params,
              id_:this.dialogParams.id_?this.dialogParams.id_:'',
              form_data_rev_:this.dialogParams.form_data_rev_?this.dialogParams.form_data_rev_:0,
              gxr: this.dialogParams.gxr?this.dialogParams.gxr:'',
              gxsj: this.dialogParams.gxsj?this.dialogParams.gxsj:'',
            }
            this.submitEditEquipment(params);
          }else{
            this.dialogParams.cjsj  = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
            this.dialogParams.gxr = this.$store.state.user.username?this.$store.state.user.username:'';
            params = {
              ...params,
              cjsj: this.dialogParams.cjsj?this.dialogParams.cjsj:'',
              cjr: this.dialogParams.cjr?this.dialogParams.cjr:'',
            }
            this.submitAddEquipment(params);
          }
        } else {
          return false;
        }
      });
    },
    //提交新增设备接口事件
    async submitAddEquipment(params){
      await addEquipmentPort(params).then((res)=>{
        console.log('打印新增编辑的res====>',res);
        const { code } = res;
        if(code == 200){
          this.dialogParams.dialogVisible = false;
          this.dialogParams.showDialogVisible = false;
          this.handleSearch();
        }
      })
    },
    //提交编辑设备接口事件
    async submitEditEquipment(params){
      await editEquipmentPort(params).then((res)=>{
        console.log('打印新增编辑的res====>',res);
        const { code } = res;
        if(code == 200){
          this.dialogParams.dialogVisible = false;
          this.dialogParams.showDialogVisible = false;
          this.handleSearch();
        }
      })
    },
    //弹窗关闭
    handleDialogClose(){
      this.$refs.dialogParams.resetFields();
      this.dialogParams.dialogVisible = false;
      this.dialogParams.showDialogVisible = false;
    },
  }
}
</script>

<style lang="scss" scoped>
.componentSty{
  width: 100%;
  height: 100%;
}
</style>