<template>
  <div>
    <p>Web.Cookies.Token: 【{{ cookieValue1 }}】</p>
    <p>Api.Cookies.Token: 【{{ cookieValue2 }}】</p>
    <el-select v-model="cameraId" size="mini" @change="chengeHandle">
      <el-option
        v-for="item in cameraList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
    <image-video :cameraData="cameraData" :size="{ height: 240, width: 360 }" :visible.sync="cameraVisible"></image-video>
  </div>
</template>
<script>
import { initData } from '@/api/data'
import ImageVideo from '@/components/ImageVideo'
import Cookies from 'js-cookie'

export default {
  name: 'Test',
  components: { ImageVideo },
  data() {
    return {
      cameraList: [
        {
          id: '436116532653727744',
          name: '测试101',
          ptzEnable: false,
          canPlayBack: true,
        },
        {
          id: '436116533320622080',
          name: '测试102',
          ptzEnable: false,
          canPlayBack: true,
        },
        {
          id: '436116533396119552',
          name: '测试201',
          ptzEnable: true,
          canPlayBack: true,
        },
        {
          id: '436116533459034112',
          name: '测试202',
          ptzEnable: true,
          canPlayBack: true,
        },
      ],
      cameraId: '',
      cameraData: {},
      cameraVisible: true,
      cookieValue1: '',
      cookieValue2: ''
    }
  },
  created() {
    this.cookieValue1 = Cookies.get("Token")
    initData('test/getToken').then(res => this.cookieValue2 = res.data )
  },
  methods: {
    chengeHandle(v){
      if (v) {
        this.cameraData = this.cameraList.find(a => a.id == v)
      }
    }
  },
}
</script>