<script>
export default {
  name: "lemonMessageVideo",
  inheritAttrs: false,
  inject: ["IMUI"],
  data() {
    return {
         url:require('@/assets/image/video.png')
    };
  },
  created() {
    
  },
  render() {
    return (
      <lemon-message-basic
        class="lemon-message-video"
        props={{ ...this.$attrs }}
        scopedSlots={{
           content: props => {
              return  this.renderHtml(props);
          }
        }}
      />
    );
  },
   methods: {
      renderHtml(data){       
        return <div><img class="imgc" src={data.imageUrl} /><img class="btnPlay" src={this.url} /> </div>;  
        // return <span>{props.content}&nbsp;🔈</span>;
      }
  }
};
</script>
<style lang="stylus">
@import '../../styles/utils/index'
+b(lemon-message-video)
  +b(lemon-message)
    +e(content)
      padding 0
      cursor pointer
      overflow hidden
      max-width 20%
      min-width 100px
      background: rgba(0,0,0,0)
      .btnPlay
        width :40px
        height: 40px
        align-items: center
        justify-content: center
        z-index 10
        position: absolute
        left: calc(50% - 20px)
        top: calc(50% - 30px)
        background: rgba(0,0,0,0)
      .imgc
        width: 100%
        height: auto
        display block
        background: rgba(0,0,0,0)
</style>
