<script setup>
const mode = ['直播', '回放']
// const mode = [
//   { key: 'ZHIBO', value: '直播' },
//   { key: 'HUIFANG', value: '回放' }
// ]
const currMode = ref('直播')
const switchVideoMode = () => {
  currMode.value = mode[currMode.value === '直播' ? 1 : 0]
}
</script>

<template>
  <view class="running-status" bg-white>
    <view w-full mt-12 f-s-c px-30>
      <view text-32 font-500 mr-12>监控直播</view>
      <up-tag :text="currMode" shape="circle" @click="switchVideoMode" />
    </view>

    <view w-full bg-black>
      <view f-c-c mt-30 bg-black>
        <video
          w-full
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4"
        ></video>
      </view>

      <view px-24 py-30 flex justify-between bg-black>
        <view w-300 flex justify-between>
          <up-icon name="play-circle" :size="24" :color="`${'#FFFFFF'}`" />
          <up-icon name="volume" :size="24" :color="`${'#FFFFFF'}`" />
          <up-icon name="photo" :size="24" :color="`${'#FFFFFF'}`" />
          <up-icon name="mic" :size="24" :color="`${'#FFFFFF'}`" />
        </view>
      </view>
    </view>
  </view>
</template>
