<template>
  <div class="p_all_20">
    <div class="title">视频说明</div>
    <div class="txt" v-if="list.length>0">
      <div class="itemclass" v-for="(item,index) in list" :key="index">
        <video controls :src="item.path"></video>
        <div class="des">{{item.title}}</div>
      </div>
    </div>
    <div v-else class="txt" style="text-align:center;color:#999">暂无数据</div>
  </div>
</template>

<script>
export default {
  name: 'exvideo',
  data () {
    return {
      list:[
        // {path:'https://img.edsmall.com/etao/brandvideos/brand_video_1afc2b77-98e4-49ee-84ca-f3c8a3cf74a720191203000204.mp4',
        // title:'组件设置 show-text 属性会在右侧显示辅助文字。通过设字。texts 为一个数组，长度应等于最大值 ma'},
        // {path:'https://img.edsmall.com/etao/brandvideos/brand_video_1afc2b77-98e4-49ee-84ca-f3c8a3cf74a720191203000204.mp4',
        // title:'组件过设置 texts 可以为每一个分值指定对应的辅助文字。texts 为一个数组，长度应等于最大值 ma'},
        // {path:'https://img.edsmall.com/etao/brandvideos/brand_video_1afc2b77-98e4-49ee-84ca-f3c8a3cf74a720191203000204.mp4',
        // title:'组件设置 show-t在右侧显示辅助文字。通过设置 texts 可以为每一个分值指定对应的辅助文字。texts 为一个数组，长度应等于最大值 ma'},
        // {path:'https://img.edsmall.com/etao/brandvideos/brand_video_1afc2b77-98e4-49ee-84ca-f3c8a3cf74a720191203000204.mp4',
        // title:'组件设置 ma'},
        // {path:'https://img.edsmall.com/etao/brandvideos/brand_video_1afc2b77-98e4-49ee-84ca-f3c8a3cf74a720191203000204.mp4',
        // title:'组件设置 ma'},
      ]
    }
  },
  mounted() {
    // 时间钩子
    this.getData();
  },
  methods:{
    // 执行方法
    getData(){
      this.$axios
        .get("/public/helpCenterVideos")
        .then(res => {
          let { code, data, message } = res.data;

          if (code == 200) {
            this.list = data.videos;
          } else {
            this.$message.error(message);
          }
        })
        .catch(res => {
          console.log(res);
        });
    }
  },
  components:{
    // 传入组件

  }
}
</script>

<style lang="scss" scoped>
.title{
  font-size: 20px;
}
.txt{
  line-height: 24px;
  padding: 20px 0;
}
.itemclass{
  width: 230px;
  display: inline-block;
  margin: 5px;
  border: 1px solid #eee;
  video{
    width: 100%;
    height: 130.5px;
  }
  .des{
    height: 50px;
    padding: 0 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
</style>
