<style>
  .liveConfig .custom_Main {
    display: flex;
  }

  .liveConfig .custom_mobile_box {
    width: 400px;
    height: 740px;
    padding: 35px 11px;
    background-color: #fff;
    border-radius: 30px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
  }

  .liveConfig .custom_bg_box {
    position: relative;
    border: 1px solid #e2e3e3;
    width: 750px;
    height: 1334px;
    zoom: 0.5;
  }

  .liveConfig .custom_bg_pic {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: center;
  }

  .liveConfig .custom_AppImage {
    background: url('../../assets/img/default_qr_code.png') no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
  }

  .liveConfig .custom_formBody {
    padding: 20px 35% 20px 20px;
    background-color: #fff;
    margin-bottom: 20px;
    width: 100%;
    height: 100%;
    position: relative;
    min-width: 640px;
    display: flex;
    flex-direction: column;
  }
  .liveConfig .custom_bottom {
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 4px;
    margin-top: 35px;
  }

  .liveConfig .customShareBtn {
    position: absolute !important;
    bottom: -52px;
    left: 0;
  }

  .customShareBtn .el-button--small {
    padding: 9px 25px;
  }
</style>
<template>
  <div class="liveConfig">
    <template>
      <div class="custom_Main">
        <div class="custom_mobile_box">
          <div class="custom_bg_box">
            <div class="custom_bg_pic" :style="{ backgroundImage:'url('+LiveBgImg+')'}">
            </div>
            <div class="custom_AppImage" :style="{left:ShareMsg.LiveQrCodePaddingLeft+'px',
                            width:ShareMsg.LiveQrCodeSize+'px',height:ShareMsg.LiveQrCodeSize+'px',top:ShareMsg.LiveQrCodePaddingTop+'px',
                            'borderRadius':ShareMsg.LiveQrCodeType==0?'50%':'0%'}"></div>
          </div>
        </div>
        <div class="custom_formBody">
          <div class="custom_bottom">
            <template>
              <div class="el-card__header">二维码设置</div>
              <el-form label-width="20%" style="padding:20px;">
                <el-form-item label="样式" size="small">
                  <el-radio-group v-model="ShareMsg.LiveQrCodeType">
                    <el-radio :label="0">圆形</el-radio>
                    <el-radio :label="1">方形</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="大小" size="small">
                  <el-slider v-model="ShareMsg.LiveQrCodeSize" @change="getCodeMax(ShareMsg.LiveQrCodeSize)" :max="300"
                    show-input>
                  </el-slider>
                </el-form-item>
                <el-form-item label="上边距" size="small">
                  <el-slider v-model="ShareMsg.LiveQrCodePaddingTop" :max="maxTwocodeTop" show-input></el-slider>
                </el-form-item>
                <el-form-item label="左边距" size="small">
                  <el-slider v-model="ShareMsg.LiveQrCodePaddingLeft" :max="maxTwocodeLeft" show-input></el-slider>
                </el-form-item>
              </el-form>
            </template>
          </div>
          <div class="customShareBtn">
            <el-button size="small" type="primary" @click="SetLiveConfig()">保存</el-button>
          </div>
        </div>
      </div>
    </template>
  
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //二维码最大上边距
        maxTwocodeTop: 0,
        //二维码最大左边距
        maxTwocodeLeft: 0,
        //分销默认背景图
        sharePosterDefaultImg: this.domainManager().ImageUrl + '/Static/livedefault.jpg',
        LiveBgImg: "", //海报背景图
        //分销海报
        ShareMsg: {
          ID: 0,
          LiveQrCodeSize: 0, //二维码大小
          LiveQrCodePaddingTop: 0, //二维码上间距
          LiveQrCodePaddingLeft: 0, //二维码左间距
          LiveQrCodeType: 0, //二维码形状(0-圆形，1-方形)
        },
        msg:{
            ID:0,
            PageIndex:1,
            PageSize:1       
        }
      };
    },
    created() {},
    methods: {
      //拉伸二维码尺寸动态设置最大值
      getCodeMax(chicun) {
        this.maxTwocodeTop = 1334 - chicun;
        this.maxTwocodeLeft = 750 - chicun;
      },
      //获取分销海报
      GetLiveConfig() {
        this.apipost("/api/Publish/GetLiveHousePageList", this.msg, res => {
          if (res.data.resultCode == 1) {
            var jsonData = res.data.data.pageData[0];
            if (jsonData) {
              this.ShareMsg.ID = jsonData.ID;
              this.LiveBgImg = jsonData.ExtensionImg;
              this.ShareMsg.LiveQrCodePaddingTop = jsonData.LiveQrCodePaddingTop;
              this.ShareMsg.LiveQrCodePaddingLeft = jsonData.LiveQrCodePaddingLeft;
              this.ShareMsg.LiveQrCodeSize = jsonData.LiveQrCodeSize;
              this.ShareMsg.LiveQrCodeType = jsonData.LiveQrCodeType;
            } else {
              this.LiveBgImg = this.sharePosterDefaultImg;
              this.ShareMsg.LiveQrCodePaddingTop = 1182;
              this.ShareMsg.LiveQrCodePaddingLeft = 585;
              this.ShareMsg.LiveQrCodeSize = 140;
              this.ShareMsg.LiveQrCodeType = 0;
            }
          } else {
            this.Error(res.data.message);
          }
        })
      },
      //添加修改分销海报
      SetLiveConfig() {
        this.apipost("/api/Publish/SetLiveQrCode", this.ShareMsg, res => {
          if (res.data.resultCode == 1) {
            this.GetLiveConfig();
            this.Success(res.data.message);
          } else {
            this.Error(res.data.message);
          }
        })
      }
    },
    mounted() {
      this.maxTwocodeTop = 1334 - this.ShareMsg.LiveQrCodeSize;
      this.maxTwocodeLeft = 750 - this.ShareMsg.LiveQrCodeSize;
      this.msg.ID = this.$route.query.Id;
      this.GetLiveConfig();
    }
  };

</script>
