<template>
  <a-card>
    <a-row  align="middle" justify="space-between" style="width: 100%; height: 68px" class="title">
      <a-col :span="12" >
        视频流地址: {{state.deviceDetail.rtsPlayUrl}}
      </a-col>
      <a-col :span="12">
        <a-space>
          <a-button @click="openModal('custom')" >自定义视频流</a-button>
          <a-button type="primary" @click="openModal('control')" >视频流通道控制</a-button>
          <a-button @click="getDeviceById" >获取视频流</a-button>
        </a-space>
      </a-col>
    </a-row>
    <video-player-tsx
      style="width: 100%;"
      :video-url="state.deviceDetail.rtsPlayUrl"
    />
  </a-card>

<modal-pro
  :label="modalTitle"
  :open="state.visible"
  @cancel="state.visible = false"
  @ok="ok"
>
<a-form  :labelCol="{span: 6}" :wrapperCol="{span: 14}" >
  <a-form-item label="视频流通道" v-bind="validateInfos.channel" >
    <a-input-number v-model:value="formState.channel" ></a-input-number>
  </a-form-item>
  <a-form-item label="视频流地址" v-bind="validateInfos.rtsUrl" >
    <a-input  v-model:value="formState.rtsUrl" ></a-input>
  </a-form-item>
</a-form>
</modal-pro>
</template>

<script lang="ts" setup >
import { VideoPlayerTsx } from '@/components/VideoPlayer/index'
import { DeviceContriller } from '@/controller'
import { onMounted, reactive, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Form } from 'ant-design-vue'

const route = useRoute()

const deviceId = route.query.id as string

const modalTitle = computed(() => state.modalType === 'control' ? '填写通道' : ' 填写视频流')

const state = reactive<{
  deviceDetail: Partial<IOT.API.DEVICE.Device>,
  modalType: 'custom' | 'control'
  visible: boolean
  playUrl: string
}>({
  deviceDetail: {},
  modalType: 'custom',
  visible: false,
  playUrl: ''
})

const formState = reactive({
  channel: '',
  rtsUrl: ''
})

const useForm = Form.useForm

const { resetFields, validate, validateInfos } = useForm(formState, reactive({
  channel: [{ required: true, message: '请填写通道数' }],
  rtsUrl: [{ required: true, message: '请填写视频流地址' }]
}))

const ok = async () => {
  state.modalType === 'custom' ? await DeviceContriller.liveCustomRtsUrl({ id: '', rtsUrl: formState.rtsUrl }) : await DeviceContriller.liveControlRts(deviceId, formState.channel as unknown as number)
  getLive()
  state.visible = false
}

const openModal = (modalType: 'custom' | 'control') => {
  state.modalType = modalType
  state.visible = true
}

const getLive = async () => {
  const { data } = await DeviceContriller.liveById(deviceId)
  state.playUrl = data
}

const getDeviceById = async () => {
  state.deviceDetail = await DeviceContriller.byId(deviceId)
}

onMounted(() => {
  getDeviceById()
  getLive()
})

</script>

<style lang="less" scoped >
@import '~@/styles/theme.less';

.title {
  background-color: @bg-color-1;
  padding-left: 40px;
}
</style>
