<template>
  <div class="tableBox">
    <el-table :data="CameraTableData" border height="80vh" stripe style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="80"/>
      <el-table-column align="center" label="工位号">
        <template #default="scope">
          {{ scope.row.工位号 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="门禁名称">
        <template #default="scope">
          {{ scope.row.门禁名称 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="摄像头IP">
        <template #default="scope">
          {{ scope.row.摄像头IP }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="摄像头位置">
        <template #default="scope">
          {{ scope.row.摄像头位置 }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="是否启用" width="80">
        <template #default="scope">
          <el-checkbox v-model="scope.row.是否启用" :false-value="0" :true-value="1"
                       size="large" @click="setCameraPermission(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {inject, onMounted, reactive} from 'vue'
import {ElMessage} from "element-plus";

const CreateData = inject('CreateData')
const ExecDatabase = inject('ExecDatabase')

const CameraTableData = reactive([])

onMounted(() => {
  getCameraData()
});


const getCameraData = () => {
  var param = []
  var Data = CreateData('11', '基础表_工位门禁摄像头关联表_查询', param)
  ExecDatabase(Data).then(response => {
    CameraTableData.length = 0
    if (response.data.length > 0) {
      CameraTableData.push(...response.data)
    }
  })
}

const setCameraPermission = (row) => {
  var param = []
  param.push(['AID', row.AID])
  var Data = CreateData('11', '基础表_工位门禁摄像头关联表_是否启用_修改', param)
  ExecDatabase(Data).then(response => {
    if (response.data.length > 0) {
      if (response.data[0].result === 1) {
        ElMessage.success(response.data[0].msg)
        getCameraData()
      } else {
        ElMessage.error(response.data[0].msg)
      }
    } else {
      ElMessage.error('数据异常')
    }
  })
}
</script>

<style lang="scss" scoped>
.tableBox {
  width: 98vw;
  margin: 2vh auto 0 auto;
  border: 1px solid #9f9f9f;
  background-color: #ecf0f3;
  box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
  border-radius: 12px;
  overflow: hidden;

  .tableTop {
    width: 100%;
    margin: 1vh auto;
  }

  .block {
    margin-bottom: 1vh;
  }
}
</style>
