<template>
  <el-dialog :title="data.name" :visible.sync="dialogFormVisible" custom-class="dict-dialog" append-to-body>
    <video v-bind:src="data.video" class="avatar video-avatar" controls="controls" style="width: 100%;height: 100%"/>
    <div class="text">{{data.text}}</div>
  </el-dialog>
</template>

<script>
export default {
  name: 'Video',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      data:{
        name:'',
        img:'',
        text:'',
        video:''
      }
    }
  },
  methods: {
    // 初始化对话框
    initDialog: function(val) {
      this.data = val
      this.dialogFormVisible = true
      console.log(this.data)
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" >
  .el-dialog__body {
    padding: 20px;
    padding-top: 10px;
  }
  .dict-dialog{
    width:600px;
    .divider{
      height: 5px;
      border-bottom: 1px dashed #e7eaec;
      margin-bottom: 15px;
    }
  }
  .text{
    margin-top: 10px;
    font-weight: bold;
  }
</style>