<style>
  .diy-video {
    width: 100%;
    height: 100%;
    background: #353535;
    overflow: hidden;
  }

  .diy-video .el-input-group__append {
    background-color: #fff
  }

  .video-gallery-item {
    width: 100px;
    height: 100px;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
  }
  .video_preview{
    height:400px;
  }
</style>
<template>
  <div :class="{'active':videoData.isCked}">
    <div class="diy-component-options" v-if="videoData.isCked">
      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
        style="right: -25px; top: 0;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
        style="right: -25px; top: 30px;"></el-button>
    </div>
    <div class="diy-component-preview video_preview" :style="{paddingTop:videoData.data.top+'px',paddingRight:videoData.data.right+'px',paddingBottom:videoData.data.bottom+'px',
        paddingLeft:videoData.data.left+'px',backgroundImage:'url(' +data.backgroundimage + ')'}">
      <div class="diy-video" :style="{borderRadius:videoData.data.radius+'px'}">
        <img :src="getIconLink(data.pic_url)" style="width: 100%;height:100%;" v-if="data.pic_url">
      </div>
    </div>
    <div class="diy-component-edit" v-if="videoData.isCked">
      <el-form label-width="100px" @submit.native.prevent>
        <el-row>
          <el-col :span="12">
            <el-form-item label="封面图片">
              <el-tooltip class="item" effect="dark" content="建议尺寸750*400" placement="top">
                <el-button size="mini" @click="isChoice=1,choicImg=true">选择图片</el-button>
              </el-tooltip>
              <div flex="main:center cross:center" class="video-gallery-item">
                <img v-if="data.pic_url!=''" style="max-width:100%;max-height: 100%;"
                  :src="getIconLink(data.pic_url)" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="背景图片">
              <el-tooltip class="item" effect="dark" content="建议尺寸750*400" placement="top">
                <el-button size="mini" @click="isChoice=2,choicImg=true">选择图片</el-button>
              </el-tooltip>
              <div flex="main:center cross:center" class="video-gallery-item">
                <img v-if="data.backgroundimage!=''" style="max-width:100%;max-height: 100%;"
                  :src="getIconLink(data.backgroundimage)" />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="视频链接">
          <label slot="label">视频链接
            <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </label>
          <el-input size="small" v-model="data.url" placeholder="请输入视频原地址或选择上传视频">
            <template slot="append">
              <el-button size="mini" @click="changeState1=true">选择文件</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="上边距">
          <el-input type="text" size="small" @keyup.native="checkInteger(videoData.data,'top','-')"
            v-model="videoData.data.top" @change="getminNum()">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="下边距">
          <el-input type="text" size="small" @keyup.native="checkInteger(videoData.data,'bottom','-')"
            v-model="videoData.data.bottom" @change="getminNum()">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="左边距">
          <el-input type="text" size="small" @keyup.native="checkInteger(videoData.data,'left','-')"
            v-model="videoData.data.left" @change="getminNum()">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="右边距">
          <el-input type="text" size="small" @keyup.native="checkInteger(videoData.data,'right','-')"
            v-model="videoData.data.right" @change="getminNum()">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="视频圆角">
          <el-input type="text" size="small" @keyup.native="checkInteger(videoData.data,'radius')" v-model="videoData.data.radius" @change="getminNum()">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否全屏">
          <el-switch v-model="videoData.data.isfullscreen"></el-switch>
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <!-- 选择视频 -->
    <el-dialog title="选择文件" :visible.sync="changeState1" width="1240px">
      <Choosevideo @Selectvideo="Selectvideo"></Choosevideo>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import Choosevideo from "@/components/global/Choosevideo.vue";

  export default {
    props: ["videoData", "index", "dataLeng"],
    components: {
      ChooseImg,
      Choosevideo
    },
    data() {
      return {
        choicImg: false,
        changeState1: false,
        data: this.videoData.data,
        isChoice:-1, //是否选择背景或者封面
      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        if(this.isChoice==1){
          this.data.pic_url = this.getIconLink(msg.url);
        }else{
          this.data.backgroundimage = this.getIconLink(msg.url);
        }
        this.choicImg = false;
      },
      //选择视频
      Selectvideo(val) {
        this.data.url = val.Path;
        this.changeState1 = false;
      },
      getminNum() {
        if (this.videoData.data.top == '') {
          this.videoData.data.top = 0;
        }
        if (this.videoData.data.right == '') {
          this.videoData.data.right = 0;
        }
        if (this.videoData.data.bottom == '') {
          this.videoData.data.bottom = 0;
        }
        if (this.videoData.data.left == '') {
          this.videoData.data.left = 0;
        }
        if (this.videoData.data.radius == '') {
          this.videoData.data.radius = 0;
        }
      }
    },
    computed: {

    },
    mounted() {

    }
  };

</script>
