<style>
  .diy-live .room-box {
    display: flex;
    flex-direction: column;
  }

  .diy-live .room-box .label {
    color: #999999;
  }

  /*样式一*/
  .diy-live .style-box-1 {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  }

  .diy-live .style-box-1 .item {
    height: 360px;
    background: #999999;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
  }

  .diy-live .style-box-1 .label-box {
    border-top-left-radius: 16px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
  }

  .diy-live .style-box-1 .text-time {
    color: #ffffff;
    font-size: 24px;
    margin: 0 20px;
  }

  .diy-live .style-box-1 .label-box-item {
    background: #22ac38;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    display: flex;
    align-items: center;
    padding: 12px 20px;
  }

  .diy-live .style-box-1 .icon {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
  }

  .diy-live .style-box-1 .text {
    color: #ffffff;
    font-size: 24px;
    margin-left: 12px;
  }

  .diy-live .style-box-1 .user-info-box {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    margin: 20px;
  }

  .diy-live .style-box-1 .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
  }

  .diy-live .style-box-1 .nickname {
    width: 578px;
    margin-left: 12px;
    font-size: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
  }

  .diy-live .style-box-1 .title {
    width: 645px;
    font-size: 32px;
    color: #353535;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 28px 0 20px;
  }

  .diy-live .style-box-1 .goods-box {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #f7f7f7;
    border-radius: 16px;
  }

  .diy-live .style-box-1 .goods-cover {
    border-radius: 8px;
    width: 80px;
    height: 80px;
    background: #999999;
  }

  .diy-live .style-box-1 .goods-item {
    display: flex;
    flex-direction: column;
    margin-left: 16px;
  }

  .diy-live .style-box-1 .goods-name {
    width: 540px;
    font-size: 26px;
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .diy-live .style-box-1 .goods-price {
    margin-top: 16px;
  }

  /*样式二*/

  .diy-live .style-box-2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .diy-live .style-box-2 .item {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  }

  .diy-live .style-box-2 .live-img-box {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }

  .diy-live .style-box-2 .live-img {
    width: 346px;
    height: 346px;
    background: #999999;
  }

  .diy-live .style-box-2 .label-box-item {
    width: 100%;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .diy-live .style-box-2 .label-box {
    padding: 12px 20px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    background: #777777;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
  }

  .diy-live .style-box-2 .icon {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
  }

  .diy-live .style-box-2 .text {
    color: #ffffff;
    font-size: 24px;
    margin-left: 12px;
  }

  .diy-live .style-box-2 .user-info {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 20px;
    display: flex;
    justify-content: center;
  }

  .diy-live .style-box-2 .avatar {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border-radius: 50%;
  }

  .diy-live .style-box-2 .nickname {
    margin-left: 12px;
    font-size: 24px;
    width: 194px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
  }

  .diy-live .style-box-2 .title {
    font-size: 28px;
    color: #353535;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 28px;
    width: 290px;
  }

  .diy-live .style-box-2 .goods-box {
    display: flex;
    margin: 0 28px 28px;
    align-items: center;
  }

  .diy-live .style-box-2 .goods-cover {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: #999999;
  }

  .diy-live .style-box-2 .goods-item {
    display: flex;
    flex-direction: column;
    margin-left: 16px;
  }

  .diy-live .style-box-2 .goods-name {
    font-size: 26px;
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 194px;
  }

  .diy-live .style-box-2 .goods-price {
    font-size: 26px;
    color: #353535;
    margin-top: 16px;
  }

  /*样式三*/
  .diy-live .style-box-3 {
    display: flex;
    flex-direction: row;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
  }

  .diy-live .style-box-3 .live-item {
    position: relative;
  }

  .diy-live .style-box-3 .live-img {
    width: 360px;
    height: 360px;
    background: #999999;
    border-radius: 16px;
  }

  .diy-live .style-box-3 .label-box {
    position: absolute;
    top: 0;
    left: 0;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    display: flex;
    align-items: center;
  }

  .diy-live .style-box-3 .label-box-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    background: #22ac38;
  }

  .diy-live .style-box-3 .icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
  }

  .diy-live .style-box-3 .text {
    color: #ffffff;
    margin-left: 12px;
  }

  .diy-live .style-box-3 .text-time {
    color: #ffffff;
    margin-left: 12px;
  }

  .diy-live .style-box-3 .item {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
  }

  .diy-live .style-box-3 .title {
    width: 310px;
    height: 100px;
    font-size: 36px;
    color: #353535;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .diy-live .style-box-3 .user-info-box {
    display: flex;
    margin: 20px 0;
    align-items: center;
  }

  .diy-live .style-box-3 .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f7f7f7;
  }

  .diy-live .style-box-3 .nickname {
    color: #000;
    : #f7f7f7;
    margin-left: 12px;
    width: 258px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .diy-live .style-box-3 .goods-box {
    display: flex;
    justify-content: space-between;
  }

  .diy-live .style-box-3 .goods-box {
    display: flex;
    justify-content: space-between;
  }

  .diy-live .style-box-3 .goods-cover {
    width: 148px;
    height: 148px;
    border-radius: 16px;
    background: #999999;
    padding: 10px;
    display: flex;
    align-items: flex-end;
  }

  .diy-live .style-box-3 .goods-price {
    font-size: 24px;
    color: #ffffff;
  }

  .diy-live .style-box-3 .goods-cover-2 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }

</style>
<template>
  <div :class="{'active':advData.isCked}">
    <div class="diy-component-options" v-if="advData.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-live">
      <div class="diy-component-preview" v-loading="!data">
        <div style="padding: 50px 0;text-align: center;background: #fff;">这是一个流量主广告位</div>
      </div>
      <div class="diy-component-edit" v-if="advData.isCked">
        <el-form label-width="100px" @submit.native.prevent>
          <el-form-item>
            <el-alert style="line-height: normal;" :closable="false" type="warning" title="流量主广告需要申请开通流量主功能。">
            </el-alert>
          </el-form-item>
          <el-form-item label="广告位类型" prop="type">
            <el-radio-group v-model="data.type" style="line-height: 35px">
              <el-radio label="">Banner</el-radio>
              <el-radio label="rewarded-video">激励式视频</el-radio>
              <el-radio label="interstitial">插屏</el-radio>
              <el-radio label="video">视频广告</el-radio>
              <el-radio label="before-video">前贴视频</el-radio>
              <el-radio label="grid" v-if="false">格子广告</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="广告位ID" prop="id">
            <el-input size="small" v-model="data.id"></el-input>
          </el-form-item>

          <el-form-item v-if="data.type === 'before-video'" label="视频播放链接" prop="video_url">
            <el-input v-model="data.video_url" placeholder="请输入视频原地址或选择上传视频">
              <template slot="append">
                <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB" placement="top">
                  <el-button size="mini" @click="changeState1=true">添加视频</el-button>
                </el-tooltip>
              </template>
            </el-input>
            <el-link class="box-grow-0" type="primary" style="font-size:12px" v-if='data.video_url' :underline="false"
              target="_blank" :href="data.video_url">视频链接
            </el-link>
          </el-form-item>
          <el-form-item v-if="['interstitial', 'rewarded-video', 'before-video'].includes(data.type)" prop="pic_url"
            label="广告封面">
            <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 287" placement="top">
                <el-button size="mini" @click="choicImg=true">选择图片</el-button>
            </el-tooltip>
            <div class="customize-share-title">
                <div class="zk_pic_box"  flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(data.pic_url) + ')'}">
                    <i v-if="data.pic_url==''" class="el-icon-picture-outline"></i>
                </div>
            </div>
          </el-form-item>
          <el-form-item label="广告奖励" prop="award_type" v-if="data.type == 'rewarded-video'">
            <el-radio-group v-model="data.award_type">
              <el-radio label="0">无</el-radio>
              <el-radio label="1">积分</el-radio>
              <el-radio label="2">优惠券</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="积分数量" prop="num" v-if="data.award_type == 1 && data.type == 'rewarded-video'">
            <el-input style="max-width: 180px" v-model="data.award_num" size="small" type="number" autocomplete="off">
            </el-input>
          </el-form-item>
          <el-form-item label="优惠券" prop="award_coupons" v-if="data.award_type == 2 && data.type == 'rewarded-video'">
            <el-tag style="margin:5px" v-for="(tag,i) in data.award_coupons" :key="i" closable
              @close="couponClose(data,i)">
              {{tag.send_num}}张 | {{tag.name}}
            </el-tag>
            <!-- <app-select-coupon v-model="data.award_coupons"> -->
              <el-button class="button-new-tag" size="small">新增优惠券</el-button>
            <!-- </app-select-coupon> -->
          </el-form-item>

          <el-form-item label="奖励发放限制" prop="award_limit_type" v-if="data.type == 'rewarded-video'">
            <el-radio-group v-model="data.award_limit_type">
              <el-radio label="0">无限制</el-radio>
              <el-radio label="1">每人{{data.award_limit}}次</el-radio>
              <el-radio label="2">每天{{data.award_limit}}次</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="限制次数" prop="award_limit"
            v-if="data.type == 'rewarded-video' && data.award_limit_type !=0">
            <el-input style="max-width: 180px" v-model="data.award_limit" size="small" type="number" min="0"
              oninput="this.value = this.value.replace(/[^0-9]/g, '')" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
      </div>
    </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: ["advData", "index", "dataLeng"],
    components: {
      ChooseImg,
      Choosevideo
    },
    data() {
      return {
        loading: false,
        choicImg:false,
        changeState1:false,
        data: this.advData.data,

      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      couponClose(row, index) {
        row.award_coupons.splice(index, 1);
      },
      //选择图片
      SelectId(msg) {
        this.data.pic_url = msg.url;
        this.choicImg = false;
      },
      //选择视频
      Selectvideo(val){
        this.data.video_url=val.Path;
        this.changeState1=false; 
      }
    },
    computed: {

    },
    mounted() {

    }
  };

</script>
