<template>
  <div class="app-container">
    <div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="摄像头名称" prop="cameraName">
          <el-input
            v-model="queryParams.cameraName"
            placeholder="请输入摄像头名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
          <el-button icon="el-icon-plus" size="mini" @click="addVideoCamera">添加摄像头</el-button>
        </el-form-item>
      </el-form>
      <template>
        <el-table ref="table" :data="imageList" v-loading="labelLoading">
          <el-table-column label="摄像头名称" align="center" prop="sbName"></el-table-column>
          <el-table-column label="摄像头类型" align="center" prop="cameraType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.camera_type" :value="scope.row.cameraType"/>
            </template>
          </el-table-column>
          <el-table-column label="预置点名称" align="center" prop="presetPointName"></el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="150"
          >
            <template slot-scope="scope">
              <el-button @click="handleChoose(scope.row)" type="text" size="small">选择预置点</el-button>
              <el-button @click="handleRemove(scope.row)" type="text" size="small">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div>
      <el-dialog append-to-body title="添加摄像头" :visible.sync="cameraVisible" width="850px" @close="closeCameraForm">
        <el-form :model="queryCameraParams" ref="queryyCameraForm" size="small" :inline="true">
          <el-form-item label="摄像头名称" prop="cameraName">
            <el-input
              v-model="queryCameraParams.cameraName"
              placeholder="请输入设备名称"
              clearable
              @keyup.enter.native="handleCameraQuery"
            />
          </el-form-item>
          <el-form-item label="摄像头IP" prop="cameraIp">
            <el-input
              v-model="queryCameraParams.cameraIp"
              placeholder="请输入摄像头IP"
              clearable
              @keyup.enter.native="handleCameraQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleCameraQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetCamera">重置</el-button>
          </el-form-item>
        </el-form>
        <template>
          <el-table ref="multipleTable" v-loading="cameraLoading" :data="cameraList"
                    @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
            <el-table-column width="300" label="摄像头名称" align="center" prop="sbName"></el-table-column>
            <el-table-column label="摄像头厂家" align="center" prop="cameraFactory">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.camera_factory" :value="scope.row.cameraFactory"/>
              </template>
            </el-table-column>
            <el-table-column label="摄像头用途" align="center" prop="cameraUse">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.camera_use" :value="scope.row.cameraUse"/>
              </template>
            </el-table-column>
            <el-table-column label="摄像头IP" align="center" prop="cameraIp"></el-table-column>
          </el-table>
        </template>
        <pagination
          v-show="cameraTotal>0"
          :total="cameraTotal"
          :page.sync="queryCameraParams.pageNum"
          :limit.sync="queryCameraParams.pageSize"
          @pagination="getCameraList"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="cameraVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAdd">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog append-to-body title="选择预置点" :visible.sync="pointsVisible" width="420px" @close="closePointsForm">
        <template>
          <el-select style="width:350px" v-model="form.presetPointCode" placeholder="请选择预置点" @change="onChange">
            <el-option
              v-for="item in pointsList"
              :key="item.presetPointCode"
              :label="item.presetPointName"
              :value="item.presetPointCode"
            >
            </el-option>
          </el-select>
        </template>
        <span slot="footer" class="dialog-footer">
          <el-button @click="pointsVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlePointsAdd">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  addCamera,
  listdevice,
  getCameraByLabelId,
  removeCameraByLabelId, getPresetPoints, updatePresetPoint, getCameraByIdAndDeviceId
} from '@/api/centerMonitor/LabelManagement/setLabel'

export default {
  name: 'configurationTab',
  dicts: ['camera_factory', 'camera_use', 'camera_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      labelLoading: true,
      cameraLoading: true,
      pointsList: [
        // {
        //   presetPointCode: '1',
        //   channelId: '1006405$1$0$1',
        //   presetPointName: '预置点1'
        // },
        // {
        //   presetPointCode: '2',
        //   channelId: '1006405$1$0$1',
        //   presetPointName: '预置点2'
        // }
      ],
      cameraList: [],
      imageList: [],
      // 总条数
      total: 0,
      // 摄像头总条数
      cameraTotal: 0,
      // 弹出层标题
      title: '',
      // 查询参数
      queryParams: {
        sbId: null,
        cameraName: null,
        pageNum: 1,
        pageSize: 10,
        labelId: null
      },
      // 查询参数
      queryCameraParams: {
        sbId: null,
        cameraFactory: null,
        cameraUse: null,
        cameraName: null,
        cameraIp: null,
        pageNum: 1,
        pageSize: 10,
        labelId: null
      },
      // 表单参数
      form: {
        presetPointCode: '',
        channelId: '',
        presetPointName: ''
      },
      //添加摄像头表单
      cameraVisible: false,
      multipleSelection: [],
      pointsVisible: false,
      cameraObject: {}
    }
  },
  computed: {},
  props: {
    labelId: null
  },
  created() {
    this.getList()
  },
  mounted() {
  },
  methods: {
    handleSelectionChange(rows) {
      this.multipleSelection = rows
    },
    /**
     * 查询摄像头
     */
    addVideoCamera() {
      this.multipleSelection = []
      this.getCameraList()
      this.cameraVisible = true
    },
    onChange(val) {
      this.$forceUpdate()
      this.pointsList.forEach((item) => {
          if (item.presetPointCode == val) {
            this.form.presetPointName = item.presetPointName
            this.form.channelId = item.channelId
          }
        }
      )
    },
    /**
     * 选择预置点
     */
    handleChoose(val) {
      this.cameraObject = val
      this.form = {}
      this.getPresetPoints(val.channelId)
      this.pointsVisible = true
    },
    closePointsForm() {
      this.pointsVisible = false
    },
    getCameraByIdAndDeviceId() {
      let params = {
        id: this.cameraObject.id,
        deviceId: this.cameraObject.sbId
      }
      getCameraByIdAndDeviceId(params).then(res => {
        this.form.presetPointCode = res.data.presetPointCode
        if (this.form.presetPointCode == null && this.pointsList.length > 0) {
          this.form.presetPointCode = this.pointsList[0].presetPointCode
          this.form.presetPointName = this.pointsList[0].presetPointName
        }
        this.$forceUpdate()
      })
    },
    //选择预置点保存
    handlePointsAdd() {
      let params = {
        id: this.cameraObject.id,
        deviceId: this.cameraObject.sbId,
        presetPointName: this.form.presetPointName,
        presetPointCode: this.form.presetPointCode
      }
      updatePresetPoint(params).then(res => {
        this.getList()
        this.$modal.msgSuccess('操作成功')
      })
      this.pointsVisible = false
    },
    /**
     * 查询预置点
     */
    getPresetPoints(val) {
      this.pointsList = []
      getPresetPoints(val).then(response => {
        this.$nextTick(() => {
          if (response.data.code == 1000) {
            this.pointsList = response.data.data.presetPoints
            this.getCameraByIdAndDeviceId()
          }
        })
      })
    },
    /**
     * 移除摄像头
     */
    handleRemove(val) {
      let params = {
        labelId: this.labelId,
        deviceId: val.sbId
      }
      removeCameraByLabelId(params).then(response => {
        this.getList()
        this.$modal.msgSuccess('移除成功')
      })
    },
    /**
     * 添加摄像头
     */
    handleAdd() {
      let that = this
      if (that.multipleSelection.length > 0) {
        let params = {
          labelId: that.labelId,
          centermonitorCameraDTOList: that.multipleSelection
        }
        addCamera(params).then(res => {
          that.$refs.multipleTable.clearSelection()
          that.multipleSelection = []
          that.getList()
          that.resetCamera()
          that.$modal.msgSuccess('添加成功')
        })
        that.cameraVisible = false
      }
    },
    /**
     * 查询摄像头
     */
    getCameraList() {
      this.cameraLoading = true
      this.queryCameraParams.labelId = this.labelId
      listdevice(this.queryCameraParams).then(response => {
        this.$nextTick(() => {
          this.cameraList = response.rows
          this.cameraTotal = response.total
          this.cameraLoading = false
        })
      })
    },
    /**
     * 关闭摄像头表单
     */
    closeCameraForm() {
      this.resetCamera()
      this.cameraVisible = false
    },
    /** 查询摄像头绑定列表 */
    getList() {
      this.labelLoading = true
      this.queryParams.labelId = this.labelId
      getCameraByLabelId(this.queryParams).then(response => {
        this.$nextTick(() => {
          this.imageList = response.rows
          this.total = response.total
          this.labelLoading = false
        })
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    //重置按钮
    handleQuerys() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    reset() {
      this.resetForm('queryForm')
      this.handleQuerys()
    },
    /** 添加摄像头搜索按钮操作 */
    handleCameraQuery() {
      this.getCameraList()
    },
    /** 添加摄像头重置按钮操作 */
    resetCamera() {
      this.resetForm('queryCameraForm')
      this.handleCameraQuerys()
    },
    //重置按钮
    handleCameraQuerys() {
      this.queryCameraParams.pageNum = 1
      this.getCameraList()
    }
  }
}

</script>
