<template>
  <div style="padding-left: 20px">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain :icon="Refresh" size="small" @click="getList"
          >刷新</el-button
        >
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="channelList" size="small">
      <el-table-column :label="t('sip.channel998532-0')" align="center" prop="deviceSipId" />
      <el-table-column :label="t('sip.channel998532-1')" align="center" prop="channelSipId" />
      <el-table-column :label="t('sip.channel998532-2')" min-width="120">
        <template #default="scope">
          <el-image
            v-if="isVideoChannel(scope.row)"
            :src="getSnap(scope.row)"
            :preview-src-list="getBigSnap(scope.row)"
            fit="contain"
            style="width: 60px"
          >
            <template #error>
              <div class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column :label="t('sip.channel998532-3')" align="center" prop="channelName" />
      <el-table-column :label="t('sip.channel998532-4')" align="center" prop="model" />
      <el-table-column :label="t('sip.channel998532-9')" align="center" prop="streamPush">
        <template #default="scope">
          <el-tag type="warning" v-if="scope.row.streamPush === 0">{{
            t('sip.channel998532-10')
          }}</el-tag>
          <el-tag type="success" v-if="scope.row.streamPush === 1">{{
            t('sip.channel998532-11')
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="t('sip.channel998532-12')" align="center" prop="streamRecord">
        <template #default="scope">
          <el-tag type="warning" v-if="scope.row.streamRecord === 0">{{
            t('sip.channel998532-13')
          }}</el-tag>
          <el-tag type="success" v-if="scope.row.streamRecord === 1">{{
            t('sip.channel998532-14')
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="t('sip.channel998532-15')" align="center" prop="videoRecord">
        <template #default="scope">
          <el-tag type="warning" v-if="scope.row.videoRecord === 0">{{
            t('sip.channel998532-16')
          }}</el-tag>
          <el-tag type="success" v-if="scope.row.videoRecord === 1">{{
            t('sip.channel998532-17')
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="t('sip.channel998532-5')" align="center" prop="status" width="80">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.VIDEO_DEVICE_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="120"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            size="small"
            type="success"
            :icon="VideoPlay"
            style="padding: 5px"
            :disabled="scope.row.status !== 3"
            @click="sendDevicePush(scope.row)"
          >
            {{ t('sip.channel998532-6') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { Refresh, VideoPlay } from '@element-plus/icons-vue'
import { listChannel, getChannel, delChannel } from '@/api/pms/video/channel'
import { ElMessage, ElMessageBox } from 'element-plus'
import { DICT_TYPE, getDictLabel, getStrDictOptions } from '@/utils/dict'

const { t } = useI18n() // 国际化

// 定义 props
const props = defineProps({
  device: {
    type: Object,
    default: null
  }
})

// 定义 emits
const emit = defineEmits(['playerEvent'])

const iot_device_status = ref([])

// 响应式数据
const loadSnap = ref({})
const deviceInfo = ref({})
const loading = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const showSearch = ref(true)
const total = ref(0)
const channelList = ref([])
const title = ref('')
const open = ref(false)

// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  deviceSipId: null
})

// 表单参数
const form = reactive({
  channelId: null,
  channelSipId: null,
  deviceSipId: null,
  channelName: null,
  manufacture: null,
  model: null,
  owner: null,
  civilcode: null,
  block: null,
  address: null,
  parentid: null,
  ipaddress: null,
  port: null,
  password: null,
  ptztype: null,
  ptztypetext: null,
  status: 0,
  longitude: null,
  latitude: null,
  streamid: null,
  subcount: null,
  parental: 1,
  hasaudio: 1
})

// 监听 device prop 变化
watch(
  () => props.device,
  (newVal, oldVal) => {
    deviceInfo.value = newVal
    if (deviceInfo.value && deviceInfo.value.deviceId != 0) {
      queryParams.deviceSipId = deviceInfo.value.serialNumber
    }
  }
)

// 通知设备上传媒体流
const sendDevicePush = (itemData) => {
  var data = { tabName: 'sipPlayer', channelId: itemData.channelSipId }
  emit('playerEvent', data)
  console.log('通知设备推流：' + itemData.deviceSipId + ' : ' + itemData.channelSipId)
}

// 查询监控设备通道信息列表
const getList = () => {
  loading.value = true
  listChannel(queryParams).then((response) => {
    channelList.value = response.list
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
const cancel = () => {
  open.value = false
  reset()
}

// 表单重置
const reset = () => {
  Object.assign(form, {
    channelId: null,
    channelSipId: null,
    deviceSipId: null,
    channelName: null,
    manufacture: null,
    model: null,
    owner: null,
    civilcode: null,
    block: null,
    address: null,
    parentid: null,
    ipaddress: null,
    port: null,
    password: null,
    ptztype: null,
    ptztypetext: null,
    status: 0,
    longitude: null,
    latitude: null,
    streamid: null,
    subcount: null,
    parental: 1,
    hasaudio: 1
  })
  // 如果有 resetForm 方法需要根据实际情况实现
  resetForm('form')
}

// 搜索按钮操作
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 修改按钮操作
const handleUpdate = (row) => {
  reset()
  const channelId = row.channelId || ids.value
  getChannel(channelId).then((response) => {
    Object.assign(form, response.data)
    open.value = true
    title.value = t('sip.channel998532-7')
  })
}

// 删除按钮操作
const handleDelete = (row) => {
  const channelIds = row.channelId || ids.value

  ElMessageBox.confirm(t('sip.channel998532-8', [channelIds]))
    .then(function () {
      return delChannel(channelIds)
    })
    .then(() => {
      getList()
      ElMessage.success(t('sip.channel998532-18'))
    })
    .catch(() => {})
}

// 获取快照URL
const getSnap = (row) => {
  return (
    import.meta.env.VITE_APP_BASE_URL +
    '/profile/snap/' +
    row.deviceSipId +
    '_' +
    row.channelSipId +
    '.jpg'
  )
}

// 获取大图URL
const getBigSnap = (row) => {
  return [getSnap(row)]
}

// 判断是否为视频通道
const isVideoChannel = (row) => {
  let channelType = row.channelSipId.substring(10, 13)
  // 111-DVR编码;112-视频服务器编码;118-网络视频录像机(NVR)编码;131-摄像机编码;132-网络摄像机(IPC)编码
  return !(
    channelType !== '111' &&
    channelType !== '112' &&
    channelType !== '118' &&
    channelType !== '131' &&
    channelType !== '132'
  )
}

// 生命周期钩子
onMounted(() => {
  if (props.device && props.device.serialNumber) {
    queryParams.deviceSipId = props.device.serialNumber
  }

  getList()
})

defineExpose({
  getList
})
</script>

<style scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
</style>
