<template>
  <el-descriptions :column="2">
    <el-descriptions-item label="玩法名称">{{ playInfo.gameplayName }}</el-descriptions-item>
    <el-descriptions-item label="玩法类型">{{ getDictLabel(dict.type[DictType.toy_gameplay_type], playInfo.gameplayType) }}</el-descriptions-item>
    <el-descriptions-item label="玩法水平" :span="2">{{ getDictLabel(dict.type[DictType.toy_gameplay_level], playInfo.gameplayLevel) }}</el-descriptions-item>
    <el-descriptions-item :span="2" label="玩法视频">
      <span>
        <video v-for="video in fileList" :key="video.id" class="video-wrapper" :src="video.url" controls="controls">
          您的浏览器不支持该格式的视频
        </video>
      </span>

    </el-descriptions-item>
    <!--    <el-descriptions-item :span="2" label="玩法要点">-->
    <!--      -->
    <!--    </el-descriptions-item>-->
    <el-descriptions-item :span="2" label="玩法说明">
      <span v-html="playInfo.description || ''" />
    </el-descriptions-item>
  </el-descriptions>

</template>
<script>
import { getDictLabel } from '@/utils/dict/config'
import DictType from '@/utils/dict/DictType'
import { fetchFileUrl } from '@/utils'

export default {
  name: 'PlayInfoItem',
  dicts: [DictType.toy_gameplay_type, DictType.toy_gameplay_level],
  props: {
    playInfo: {
      type: Object,
      default: () => ({
        gameplayName: '',
        gameplayLevel: '',
        gameplayType: '',
        gameplayUrl: ''
      })
    }
  },
  data() {
    return {
      DictType,
      fileList: []
    }
  },
  watch: {
    'playInfo': {
      handler(val) {
        if (val) {
          fetchFileUrl(val.fileId, val.gameplayUrl).then(data => {
            this.fileList = data
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    getDictLabel
  }
}
</script>

<style scoped lang="scss">

</style>
