<style>
  .customPoster .custom_Header {
    padding: 0 20px;
    height: 56px;
    line-height: 56px;
    background-color: #fff;
    margin-bottom: 15px;
  }

  .customPoster .custom_Main {
    display: flex;
  }

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

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

  .custom_bg_pic {

    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: center;
  }

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

  .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;
  }

  .custom_component {
    width: 100px;
    height: 100px;
    cursor: pointer;
    position: relative;
    padding: 10px 0;
    border: 1px solid #e2e2e2;
    margin: 15px 15PX 0 0;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .ccustom_itemremove {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 28px;
    height: 28px;
  }

  .custom_bottom {
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 4px;
    margin-top: 35px;
  }

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

  .customShareBtn .el-button--small {
    padding: 9px 25px;
  }

  .Custom_active {
    border: 1px solid #7BBDFC;
  }

  .custom_headerImg {
    background: url('../../assets/img/storeDesign/default_head.png') no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 50%;
    position: absolute;
  }
  .custom_cover {
    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1615198298000_523.jpg') no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
  }

  .poster_bg_box {
    position: relative;
    border: 2px solid #e2e3e3;
    width: 750px;
    height: 1334px;
    zoom: 0.5;
    overflow: hidden;
  }

  .customPoster .poster_User {
    margin-top: 96px;
    margin-bottom: 64px;
  }

  .poster_User img {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    margin-left: 24px;
    display: block;
  }

  .poster_User div {
    background: #f1f1f1;
    padding: 0 24px;
    height: 54px;
    color: #4b4b4b;
    margin-left: 24px;
    border-radius: 30px;
  }

  .poster_goodImg {
    margin: 0 auto;
    height: 702px;
    width: 702px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
  }

  .customPoster .goodsone_bg {
    height: 310px;
    margin: 0 auto;
    width: 702px;
    padding: 0 28px;
    background: #ffffff;
    border-radius: 0 0 16px 16px;
  }

  .goodsone_bg .goods-name {
    padding: 28px 0;
    font-size: 34px;
    color: #353535;
  }

  .customPoster .goods_price {
    padding-top: 50px;
    color: #ff4544;
  }

  .customPoster .goods_remark {
    margin-top: 28px;
    color: #999999;
    font-size: 28px;
  }

  .goodsone_bg img {
    height: 230px;
    width: 230px;
    margin-left: auto;
    display: block;
    border-radius: 50%;
  }

  .custom_Second {
    height: 750px;
    width: 750px;
    overflow: hidden;
  }

  .custom_SecondBG {
    background-image: url('../../assets/img/storeDesign/style-two-end.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 600px;
    width: 702px;
    position: relative;
    left: 24px;
    top: -40px;
    padding: 0 24px;
  }

  .cuSecond_goodsName {
    font-size: 34px;
    color: #353535;
    padding-top: 40px;
  }

  .customSecond_user {
    height: 96px;
    width: 96px;
    border-radius: 50%;
    margin-left: 24px;
    display: block;
  }

  .CusSecondRemark {
    height: 52px;
    width: 100%;
    padding: 0 24px;
    color: #353535;
    background-color: #f1f1f1;
    font-size: 24px;
    border-radius: 30px;
    margin-bottom: 70px;
  }

  .Second_qrcode {
    height: 230px;
    width: 230px;
    display: block;
    margin-left: auto;
  }

  .three_User img {
    height: 97px;
    width: 97px;
    border-radius: 50%;
    margin-left: 35px;
    display: block;
  }

  .app-style-three .three_User div:after {
    content: "";
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('../../assets/img/storeDesign/three-love.png');
    height: 24px;
    width: 24px;
    display: inline-block;
    margin-left: 8px;
  }


  .cusThree_name {
    font-size: 34px;
    padding-top: 28px;
    color: #353535;
  }

  .cusThree_price {
    padding-top: 28px;
    color: #ff4544;
  }

  .cusThree_qrcode {
    width: 702px;
    border-top: 1px solid #c9c9c9;
    height: 278px;
    margin: 0 auto;
    margin-top: 24px;
  }

  .cusThree_qrcode div {
    margin-top: 20px;
    margin-left: 24px;
    font-size: 28px;
    color: #353535;
  }

  .app-style-four .user {
    margin-top: 35px;
    margin-bottom: 35px;
  }

  .app-style-four .user img {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    margin-left: 24px;
    display: block;
  }

  .app-style-four .user div {
    background: #f1f1f1;
    padding: 0 24px;
    height: 54px;
    color: #4b4b4b;
    margin-left: 24px;
    border-radius: 30px;
  }

  .app-style-four .four-box {
    height: 1150px;
    background-color: #FFFFFF;
    margin: 0 auto;
    width: 702px;
    border-radius: 16px;
    padding: 0 24px;
  }

  .app-style-four .goods-name {
    font-size: 34px;
    padding-top: 26px;
    color: #353535;
  }

  .app-style-four .price {
    padding-top: 60px;
    color: #ff4544;
  }

  .app-style-four .goods-image {
    height: 650px;
    width: 650px;
    margin-top: 60px;
  }

  .app-style-four .qrcode img {
    height: 150px;
    width: 150px;
    margin-top: 25px;
  }

  .app-style-four .qrcode div {
    margin-top: 22px;
    margin-bottom: 26px;
    font-size: 24px;
    color: #999999;
  }

  .poster-style-box {
    cursor: pointer;
    display: inline-block;
    border: 1px solid #E2E2E2;
    border-radius: 3px;
    height: 255px;
    width: 160px;
    margin: 5px;
    padding: 0 5px;
  }
  .activeCustomer {
    border: 1px solid #409eff!important;
  }
  .custom_rightCheck .el-radio {
    height: 32px;
    line-height: 32px;
  }

  .custom_grid {
    flex-wrap: wrap;
    height: 100px;
    width: 100%;
    background: #E6F4FF;
    border: 1px solid #b8b8b8;
  }

  .poster-pic-box {
    cursor: pointer;
    display: inline-block;
    border: 1px solid #E2E2E2;
    border-radius: 3px;
    height: 155px;
    width: 112px;
    margin: 5px;
    padding: 0 5px;
  }

  .customSecond_btmdiv {
    border-top: 1px solid #E3E3E3;
    position: absolute;
    bottom: 0;
    background-color: #ffffff;
    z-index: 999;
    padding: 10px;
    width: 100%;
  }
  .customPoster .title-style{
    position:absolute;display:inline-block;border:1px solid #111;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow : hidden;
    text-overflow: ellipsis;
  }

</style>
<template>
  <div class="customPoster">
    <div class="custom_Header">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="分销海报" name="1"></el-tab-pane>
<!--        <el-tab-pane label="商品海报" name="2"></el-tab-pane>-->
        <!-- <el-tab-pane label="专题海报" name="3"></el-tab-pane> -->
      </el-tabs>
    </div>
    <template v-if="checkIndex==1">
      <div class="custom_Main">
        <div class="custom_mobile_box">
          <div class="custom_bg_box">
            <div class="custom_bg_pic" :style="{ backgroundImage:'url('+ShareMsg.PosterBgImg+')'}">
              <div class="custom_headerImg" v-if="ShareMsg.IsShowHead==0"
                   :style="{left:ShareMsg.HeadPaddingLeft+'px',
                            width:ShareMsg.HeadSize+'px',height:ShareMsg.HeadSize+'px',top:ShareMsg.HeadPaddingTop+'px'}">
              </div>
            </div>
            <span ref="nameSpan" style="position:absolute;display:inline-block;" v-if="ShareMsg.IsShowNick==0"
                  :style="{left:ShareMsg.NickPaddingLeft+'px',
                            fontSize:ShareMsg.NickSize+'px',top:ShareMsg.NickPaddingTop+'px',color:ShareMsg.NickColor}">用户昵称</span>
            <div class="custom_AppImage" v-if="ShareMsg.IsShowQrCode==0" :style="{left:ShareMsg.QrCodePaddingLeft+'px',
                            width:ShareMsg.QrCodeSize+'px',height:ShareMsg.QrCodeSize+'px',top:ShareMsg.QrCodePaddingTop+'px',
                            'borderRadius':ShareMsg.QrCodeType==0?'50%':'0%'}"></div>

            <div class="custom_cover" v-if="ShareMsg.IsShowCover==0"
                 :style="{left:ShareMsg.CoverPaddingLeft+'px',
                            width:ShareMsg.CoverWidth+'px',height:ShareMsg.CoverHeight+'px',top:ShareMsg.CoverPaddingTop+'px'}">
            </div>
            <div ref="nameSpan" class="title-style"  v-if="ShareMsg.IsShowTitle==0"
                  :style="{left:ShareMsg.TitlePaddingLeft+'px',
                            fontSize:ShareMsg.TitleSize+'px',top:ShareMsg.TitlePaddingTop+'px',
                            color:ShareMsg.TitleColor,width:ShareMsg.TitleWidth+'px','-webkit-line-clamp':ShareMsg.TitleRow}">
              这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。
            </div>
          </div>
        </div>
        <div class="custom_formBody">
          <div style="margin-bottom:15px;">
            <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 1334" placement="top">
              <el-button size="mini" @click="choicImg=true">更换背景图</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="恢复默认图" placement="top">
              <el-button size="mini" @click="ShareMsg.PosterBgImg=sharePosterDefaultImg">恢复默认背景</el-button>
            </el-tooltip>

          </div>
          <div flex="wrap:wrap">
            <div class="custom_component" v-for="(item,index) in ShareTabs" :key="index"
                 :class="{'Custom_active':item.isActive==1}" @click="getChecked(item,index)">
              <img v-if="index==0" src="../../assets/img/storeDesign/icon_head.png" alt="" />
              <img v-else-if="index==1" src="../../assets/img/storeDesign/icon_name.png" alt="" />
              <img v-else src="../../assets/img/storeDesign/icon_qr_code.png" alt="" />
              <div>{{item.name}}</div>
              <img class="ccustom_itemremove" v-if="item.isShow==0"
                   @click.stop="deleteItem(item,index),isShowShareIndex=0"
                   src="../../assets/img/storeDesign/icon_delete.png" alt="" />
            </div>
          </div>
          <div class="custom_bottom">
            <template v-if="isShowShareIndex==1">
              <div class="el-card__header">头像设置</div>
              <el-form label-width="20%" style="padding:20px;">
                <el-form-item label="大小" size="small">
                  <el-slider v-model="ShareMsg.HeadSize" @change="getCodeMax(ShareMsg.HeadSize,0)" :max="300"
                             show-input>
                  </el-slider>
                </el-form-item>
                <el-form-item label="上边距" size="small">
                  <el-slider v-model="ShareMsg.HeadPaddingTop" :max="headerMaxTop" show-input></el-slider>
                </el-form-item>
                <el-form-item label="左边距" size="small">
                  <el-slider v-model="ShareMsg.HeadPaddingLeft" :max="headerMaxLeft" show-input></el-slider>
                </el-form-item>
              </el-form>
            </template>
            <template v-if="isShowShareIndex==2">
              <div class="el-card__header">昵称设置</div>
              <el-form label-width="20%" style="padding:20px;">
                <el-form-item label="大小" size="small">
                  <el-slider v-model="ShareMsg.NickSize" @change="getCodeMax(ShareMsg.NickSize,1)" :max="80" show-input>
                  </el-slider>
                </el-form-item>
                <el-form-item label="上边距" size="small">
                  <el-slider v-model="ShareMsg.NickPaddingTop" :max="nickNameTop" show-input></el-slider>
                </el-form-item>
                <el-form-item label="左边距" size="small">
                  <el-slider v-model="ShareMsg.NickPaddingLeft" :max="nickNameLeft" show-input></el-slider>
                </el-form-item>
                <el-form-item label="颜色" size="small">
                  <el-color-picker v-model="ShareMsg.NickColor"></el-color-picker>
                </el-form-item>
              </el-form>
            </template>
            <template v-if="isShowShareIndex==3">
              <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.QrCodeType">
                    <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.QrCodeSize" @change="getCodeMax(ShareMsg.QrCodeSize,2)" :max="300"
                             show-input>
                  </el-slider>
                </el-form-item>
                <el-form-item label="上边距" size="small">
                  <el-slider v-model="ShareMsg.QrCodePaddingTop" :max="maxTwocodeTop" show-input></el-slider>
                </el-form-item>
                <el-form-item label="左边距" size="small">
                  <el-slider v-model="ShareMsg.QrCodePaddingLeft" :max="maxTwocodeLeft" show-input></el-slider>
                </el-form-item>
              </el-form>
            </template>
            <template v-if="isShowShareIndex==4">
              <div class="el-card__header">封面图</div>
              <el-form label-width="20%" style="padding:20px;">
                <el-form-item label="高度" size="small">
                  <el-slider v-model="ShareMsg.CoverHeight" @change="getCodeMax(ShareMsg.CoverHeight,3,1)" :max="1334"
                             show-input>
                  </el-slider>
                </el-form-item>
                <el-form-item label="宽度" size="small">
                  <el-slider v-model="ShareMsg.CoverWidth" @change="getCodeMax(ShareMsg.CoverWidth,3,2)" :max="750"
                             show-input>
                  </el-slider>
                </el-form-item>
                <el-form-item label="上边距" size="small">
                  <el-slider v-model="ShareMsg.CoverPaddingTop" :max="CoverMapMaxTop" show-input></el-slider>
                </el-form-item>
                <el-form-item label="左边距" size="small">
                  <el-slider v-model="ShareMsg.CoverPaddingLeft" :max="CoverMapMaxLeft" show-input></el-slider>
                </el-form-item>
              </el-form>
            </template>
            <template v-if="isShowShareIndex==5">
              <div class="el-card__header">标题</div>
              <el-form label-width="20%" style="padding:20px;">
                <el-form-item label="大小" size="small">
                  <el-slider v-model="ShareMsg.TitleSize" @change="getCodeMax(ShareMsg.TitleSize,4,1)" :max="80" show-input>
                  </el-slider>
                </el-form-item>
                <el-form-item label="宽度" size="small">
                  <el-slider v-model="ShareMsg.TitleWidth" @change="getCodeMax(ShareMsg.TitleWidth,4,2)" :max="750"
                             show-input>
                  </el-slider>
                </el-form-item>
                <el-form-item label="上边距" size="small">
                  <el-slider v-model="ShareMsg.TitlePaddingTop" :max="TitleMaxTop" show-input></el-slider>
                </el-form-item>
                <el-form-item label="左边距" size="small">
                  <el-slider v-model="ShareMsg.TitlePaddingLeft" :max="TitleMaxLeft" show-input></el-slider>
                </el-form-item>
                <el-form-item label="行数" size="small">
                  <el-slider v-model="ShareMsg.TitleRow" :min="1" :max="5" show-input @change="getCodeMax(ShareMsg.TitleSize,4,1)"></el-slider>
                </el-form-item>
                <el-form-item label="颜色" size="small">
                  <el-color-picker v-model="ShareMsg.TitleColor"></el-color-picker>
                </el-form-item>

              </el-form>
            </template>
          </div>
          <div class="customShareBtn">
            <el-button size="small" type="primary" @click="SetFenXiaoPoster()">保存</el-button>
          </div>
        </div>
      </div>
    </template>

    <template v-else>
      <thematicPosters></thematicPosters>
    </template>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import PictureCheck from "../common/PictureCheck.vue"
  import thematicPosters from "../StoreDesign/thematicPosters.vue"
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    data() {
      return {
        //选择背景图
        choicImg:false,
        activeName: '1',
        checkIndex: 1,
        //二维码最大上边距
        maxTwocodeTop: 0,
        //二维码最大左边距
        maxTwocodeLeft: 0,
        //昵称最大上边距
        nickNameTop: 0,
        //昵称最大左边距
        nickNameLeft: 0,
        //头像最大上边距
        headerMaxTop: 0,
        //头像最大左边距
        headerMaxLeft: 0,
        //封面图最大上边距
        CoverMapMaxTop: 0,
        //封面图最大左边距
        CoverMapMaxLeft: 0,
        //标题最大上边距
        TitleMaxTop: 0,
        //标题最大左边距
        TitleMaxLeft: 0,
        //分销海报判断显示那一坨
        isShowShareIndex: 1,
        //分销默认背景图
        sharePosterDefaultImg: this.domainManager().ImageUrl + '/Static/shareposterdefault.jpg',
        ShareTabs: [{
          isActive: 1,
          isShow: 1,
          name: '头像',
        }, {
          isActive: 0,
          isShow: 1,
          name: '昵称',
        }, {
          isActive: 0,
          isShow: 0,
          name: '二维码',
        }, {
          isActive: 0,
          isShow: 0,
          name: '封面图',
        }, {
          isActive: 0,
          isShow: 0,
          name: '标题',
        }],
        //分销海报
        ShareMsg: {
          Id: 0,
          TenantId: 0,
          MallBaseId: 0,
          PosterBgImg: "", //海报背景图
          IsShowHead: 0, //是否显示头像(0-显示，1-不显示)
          HeadSize: 0, //头像大小
          HeadPaddingTop: 0, //头像上间距
          HeadPaddingLeft: 0, //头像左间距
          IsShowNick: 0, //是否显示昵称(0-显示,1-不显示)
          NickSize: 0, //昵称大小
          NickPaddingTop: 0, //昵称上间距
          NickColor: "", //昵称颜色
          NickPaddingLeft: 0, //昵称左间距
          IsShowQrCode: 0, //是否显示二维码(0-显示,1-不显示)
          QrCodeSize: 0, //二维码大小
          QrCodePaddingTop: 0, //二维码上间距
          QrCodePaddingLeft: 0, //二维码左间距
          QrCodeType: 0, //二维码形状(0-圆形，1-方形)
          IsOpenSchool: 2, //商城海报


          IsShowCover:0,//是否显示封面图 (0-显示,1-不显示)
          CoverHeight:0,//封面图高度
          CoverWidth:0,//封面图宽度 (等于-1 全屏)
          CoverPaddingTop:0,//封面图上边距
          CoverPaddingLeft:0,//封面图左边距
          TitleWidth:500,//宽度

          IsShowTitle:0,//是否显示标题(0-显示,1-不显示)
          TitleSize:0,//标题大小
          TitleColor:0,//标题颜色
          TitlePaddingTop:0,//标题上边距
          TitlePaddingLeft:0,//标题左边距
          TitleRow:0,//标题行数

        },
        //商品海报msg
        goodsPostersMsg: {
          Id: 0,
          PosterStyle: '', //海报样式
          GoodsImgCount: 1,
          PosterStyleList:[],
          GoodsImgCountList:[],
          IsOpenSchool: 0, //商城海报
        },
        //显示哪一个海报
        myPostStyle:0,
        //显示图片张数
        myImgStyle:0
      };
    },
    created() {},
    components: {
      PictureCheck,
      thematicPosters,
      ChooseImg
    },
    methods: {
      //切换
      handleClick(tab) {
        this.checkIndex = tab.name;
      },
      getClass(type,num){
        if(type==0){
          if(this.goodsPostersMsg.PosterStyleList.indexOf(num)!=-1){
            return true
          }else{
            return false
          }
        }else{
          if(this.goodsPostersMsg.GoodsImgCountList.indexOf(num)!=-1){
            return true
          }else{
            return false
          }
        }
      },
      getPost(type,num){
        if(type==0){
          this.myPostStyle=num;
          if(this.goodsPostersMsg.PosterStyleList.indexOf(num)!=-1){
            let index1=this.goodsPostersMsg.PosterStyleList.indexOf(num);
            this.goodsPostersMsg.PosterStyleList.splice(index1,1);
          }else{
            this.goodsPostersMsg.PosterStyleList.push(num);
          }
        }else{
          this.myImgStyle=num;
          if(this.goodsPostersMsg.GoodsImgCountList.indexOf(num)!=-1){
            let index1=this.goodsPostersMsg.GoodsImgCountList.indexOf(num);
            this.goodsPostersMsg.GoodsImgCountList.splice(index1,1);
          }else{
            this.goodsPostersMsg.GoodsImgCountList.push(num);
          }
        }
      },
      //点击切换
      getChecked(item, index) {
        this.ShareTabs.forEach(x => {
          x.isActive = 0;
        })
        item.isActive = 1;
        item.isShow = 0;
        switch (index) {
          case 0:
            this.ShareMsg.IsShowHead = item.isShow;
            break;
          case 1:
            this.ShareMsg.IsShowNick = item.isShow;
            break;
          case 2:
            this.ShareMsg.IsShowQrCode = item.isShow;
            break;
          case 3:
            this.ShareMsg.IsShowCover = item.isShow;
            break;
          case 4:
            this.ShareMsg.IsShowTitle = item.isShow;
            break;
        }
        this.isShowShareIndex = index + 1;
      },
      //删除选项
      deleteItem(item, index) {
        item.isShow = 1;
        switch (index) {
          case 0:
            this.ShareMsg.IsShowHead = item.isShow;
            break;
          case 1:
            this.ShareMsg.IsShowNick = item.isShow;
            break;
          case 2:
            this.ShareMsg.IsShowQrCode = item.isShow;
            break;
          case 3:
            this.ShareMsg.IsShowCover = item.isShow;
            break;
          case 4:
            this.ShareMsg.IsShowTitle = item.isShow;
            break;
        }
      },
      //拉伸二维码尺寸动态设置最大值
      getCodeMax(chicun, num, type=0) {//type!=0的时候高宽分开算 1为高度 2位宽度
        if (num == 0) {
          this.headerMaxTop = 1334 - chicun;
          this.headerMaxLeft = 750 - chicun;
        } else if (num == 1) {
          this.nickNameTop = 1334 - chicun;
          this.nickNameLeft = 750 - chicun;
        } else if(num == 2){
          this.maxTwocodeTop = 1334 - chicun;
          this.maxTwocodeLeft = 750 - chicun;
        } else if(num == 3){
          if(type==1){
            this.CoverMapMaxTop = 1334 - chicun;
          }else  if(type == 2){
            this.CoverMapMaxLeft = 750 - chicun
          }
        } else if(num == 4){
          if(type==1){
            this.TitleMaxTop = 1334 - (chicun*this.ShareMsg.TitleRow);
          }
          if(type==2){
            this.TitleMaxLeft = 750 - chicun;
          }


        }
      },
      //获取分销海报
      GetFenXiaoPoster() {
        this.apipost("/api/Tenant/GetFenXiaoPoster", { IsOpenSchool: 2}, res => {
          if (res.data.resultCode == 1) {
            var jsonData = res.data.data;

            if (jsonData) {
              this.ShareMsg.Id = jsonData.Id;
              this.ShareMsg.PosterBgImg = jsonData.PosterBgImg;
              this.ShareMsg.IsShowHead = jsonData.IsShowHead;
              this.ShareMsg.HeadSize = jsonData.HeadSize;
              this.ShareMsg.HeadPaddingTop = jsonData.HeadPaddingTop;
              this.ShareMsg.HeadPaddingLeft = jsonData.HeadPaddingLeft;
              this.ShareTabs[0].isShow = this.ShareMsg.IsShowHead;

              this.ShareMsg.IsShowNick = jsonData.IsShowNick;
              this.ShareMsg.NickSize = jsonData.NickSize;
              this.ShareMsg.NickPaddingTop = jsonData.NickPaddingTop;
              this.ShareMsg.NickPaddingLeft = jsonData.NickPaddingLeft;
              this.ShareMsg.NickColor = jsonData.NickColor;
              this.ShareTabs[1].isShow = this.ShareMsg.IsShowNick;

              this.ShareMsg.IsShowQrCode = jsonData.IsShowQrCode;
              this.ShareMsg.QrCodeSize = jsonData.QrCodeSize;
              this.ShareMsg.QrCodePaddingTop = jsonData.QrCodePaddingTop;
              this.ShareMsg.QrCodePaddingLeft = jsonData.QrCodePaddingLeft;
              this.ShareMsg.QrCodeSize = jsonData.QrCodeSize;
              this.ShareMsg.QrCodeType = jsonData.QrCodeType;
              this.ShareTabs[2].isShow = this.ShareMsg.IsShowQrCode;


              this.ShareMsg.IsShowCover = jsonData.IsShowCover;
              this.ShareMsg.CoverHeight = jsonData.CoverHeight;
              this.ShareMsg.CoverWidth = jsonData.CoverWidth;
              this.ShareMsg.CoverPaddingTop = jsonData.CoverPaddingTop;
              this.ShareMsg.CoverPaddingLeft = jsonData.CoverPaddingLeft;
              this.ShareMsg.TitleWidth = jsonData.TitleWidth;
              this.ShareTabs[3].isShow = this.ShareMsg.IsShowCover;


              this.ShareMsg.IsShowTitle = jsonData.IsShowTitle;
              this.ShareMsg.TitleSize = jsonData.TitleSize;
              this.ShareMsg.TitleColor = jsonData.TitleColor;
              this.ShareMsg.TitlePaddingTop = jsonData.TitlePaddingTop;
              this.ShareMsg.TitlePaddingLeft = jsonData.TitlePaddingLeft;
              this.ShareMsg.TitleRow = jsonData.TitleRow;
              this.ShareTabs[4].isShow = this.ShareMsg.IsShowTitle;


            } else {


              this.ShareMsg.PosterBgImg = this.sharePosterDefaultImg;
              this.ShareMsg.IsShowHead = 1;
              this.ShareMsg.HeadSize = 120;
              this.ShareMsg.HeadPaddingTop = 20;
              this.ShareMsg.HeadPaddingLeft = 20;

              this.ShareMsg.IsShowNick = 1;
              this.ShareMsg.NickSize = 40;
              this.ShareMsg.NickPaddingTop = 60;
              this.ShareMsg.NickPaddingLeft = 160;
              this.ShareMsg.NickColor = "rgb(0, 0, 0)";

              this.ShareMsg.IsShowQrCode = 0;
              this.ShareMsg.QrCodeSize = 162;
              this.ShareMsg.QrCodePaddingTop = 1022;
              this.ShareMsg.QrCodePaddingLeft = 76;
              this.ShareMsg.QrCodeSize = 162;
              this.ShareMsg.QrCodeType = 0;


              this.ShareMsg.IsShowCover = 0;
              this.ShareMsg.CoverHeight = 258;
              this.ShareMsg.CoverWidth = 518;
              this.ShareMsg.CoverPaddingTop = 337;
              this.ShareMsg.CoverPaddingLeft = 103;

              this.ShareMsg.IsShowTitle = 0;
              this.ShareMsg.TitleSize = 30;
              this.ShareMsg.TitleWidth = 500;
              this.ShareMsg.TitleColor = "rgb(0, 0, 0)";
              this.ShareMsg.TitlePaddingTop = 0;
              this.ShareMsg.TitlePaddingLeft = 0;
              this.ShareMsg.TitleRow = 1;

            }
            //没有情况计算宽高
            this.getCodeMax(this.ShareMsg.CoverHeight,3,1)
            this.getCodeMax(this.ShareMsg.CoverWidth,3,2)
            this.getCodeMax(this.ShareMsg.TitleSize,4,1)
            this.getCodeMax(this.ShareMsg.TitleWidth,4,2)
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //添加修改分销海报
      SetFenXiaoPoster() {
        this.apipost("/api/Tenant/SetFenXiaoPoster", this.ShareMsg, res => {
          if (res.data.resultCode == 1) {
            this.GetFenXiaoPoster();
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //获取商品海报
      GetGoodPoster() {
        this.apipost("/api/Tenant/GetGoodPoster", { IsOpenSchool: 0}, res => {
          if (res.data.resultCode == 1) {
            var jsonData = res.data.data;
            if (jsonData) {
              this.goodsPostersMsg.Id = jsonData.Id;
              this.goodsPostersMsg.PosterStyleList = jsonData.PosterStyleList;
              this.goodsPostersMsg.GoodsImgCountList = jsonData.GoodsImgCountList;
              if(jsonData.PosterStyleList.length>0){
                this.myPostStyle = jsonData.PosterStyleList[jsonData.PosterStyleList.length-1];
              }
              if(this.goodsPostersMsg.GoodsImgCountList.length>0){
                this.myImgStyle = jsonData.GoodsImgCountList[jsonData.GoodsImgCountList.length-1];
              }
            } else {
              this.goodsPostersMsg.PosterStyle = '';
              this.goodsPostersMsg.GoodsImgCount = '';
            }
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //添加修改商品海报
      SetGoodPosterModule() {
        this.goodsPostersMsg.PosterStyle=this.goodsPostersMsg.PosterStyleList.join(',');
        this.goodsPostersMsg.GoodsImgCount=this.goodsPostersMsg.GoodsImgCountList.join(',');
        this.apipost("/api/Tenant/SetGoodPosterModule", this.goodsPostersMsg, res => {
          if (res.data.resultCode == 1) {
            this.GetGoodPoster();
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //选择图片
      SelectId(msg) {
        this.ShareMsg.PosterBgImg = this.getIconLink(msg.url);
        this.choicImg = false;
      },

    },
    mounted() {
      this.maxTwocodeTop = 1334 - this.ShareMsg.QrCodeSize;
      this.maxTwocodeLeft = 750 - this.ShareMsg.QrCodeSize;
      this.nickNameTop = 1334 - this.ShareMsg.NickSize;
      this.nickNameLeft = 750 - this.ShareMsg.NickSize;
      this.headerMaxTop = 1334 - this.ShareMsg.HeadSize;
      this.headerMaxLeft = 750 - this.ShareMsg.HeadSize;
      this.GetFenXiaoPoster();
      this.GetGoodPoster();
    }
  };

</script>
