<style>
  .diy-user-label .el-form-item__label {
    width: 4.5rem !important;
  }

  .diy-user-label>.el-form-item__label {
    width: 6rem !important;
  }

  .diy-user-label .el-form-item__content {
    margin-left: 4.5rem !important;
  }

  .diy-user-label>.el-form-item__content {
    margin-left: 7rem !important;
  }

  .diy-del-btn.el-button--mini.is-circle {
    position: absolute;
    top: -16px;
    right: -16px;
    padding: 8px;
  }

  .diy-reset {
    position: absolute;
    top: 7px;
    left: 90px;
  }

  .diy-buy-user-info>div {
    position: relative;
    width: 750px;
    height: 120px;
    margin: 0 auto;
  }

  .diy-buy-user-info .buy-bg {
    height: 120px;
    width: 702px;
    margin: 0 24px;
    border-radius: 16px;
  }

  .diy-buy-user-info .buy-logo {
    width: 60px;
    height: 60px;
    position: absolute;
    z-index: 5;
    left: 42px;
    top: 30px;
  }

  .diy-buy-user-info .buy-big {
    position: absolute;
    z-index: 5;
    left: 120px;
    top: 26px;
    font-size: 26px;
    color: #D0B8A5;
  }

  .diy-buy-user-info .buy-small {
    position: absolute;
    z-index: 5;
    left: 120px;
    font-size: 16px;
    bottom: 24px;
    color: #C09878;
  }

  .diy-buy-user-info .buy-btn {
    position: absolute;
    right: 42px;
    top: 34px;
    width: 140px;
    height: 52px;
    line-height: 52px;
    border-radius: 26px;
    text-align: center;
    z-index: 5;
    font-size: 24px;
    color: #5A4D40;
  }

  .diy-buy-user-info .buy-btn.default {
    background: linear-gradient(to right, #fbdec7, #f3bf95);
  }

  .diy-color-picker {
    margin-left: 10px;
  }

  .VipApp-image {
    background-size: cover;
    background-position: center center;
    width: 80px;
    height: 80px;
    border-radius: 0%;
    border:1px solid #d1d1d1;
  }

</style>
<template>
  <div :class="{'active':vipData.isCked}">
    <div class="diy-component-options" v-if="vipData.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-vip-card">
      <div class="diy-component-preview" v-loading="!data">
        <div class="diy-buy-user-info"
          :style="{'background-color':background,'padding': top_bottom_padding + `px 0`,'height': top_bottom_padding*2 + 120 +'px'}">
          <div>
            <img class="buy-bg" :src="getIconLink(buy_bg)" alt="">
            <img class="buy-logo" src="../../../assets/img/storeDesign/logo.png" alt="" />
            <div class="buy-big" :style="{'color':data.buy_big_color}">{{data.buy_big}}</div>
            <div class="buy-small" :style="{'color':data.buy_small_color}">{{data.buy_small}}</div>
            <div :class="data.buy_btn_bg_color ? 'buy-btn' : 'buy-btn default'"
              :style="{'background-color': data.buy_btn_bg_color ? data.buy_btn_bg_color : '','color':data.buy_btn_color}">
              {{data.buy_btn_text}}</div>
          </div>
        </div>
      </div>
      <div class="diy-component-edit" v-if="vipData.isCked">
        <el-form v-loading="loading" @submit.native.prevent label-width="100px">
          <el-form-item label="背景色">
            <el-color-picker @change="chooseColor" class="diy-color-picker" size="small" v-model="background">
            </el-color-picker>
            <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="background"></el-input>
          </el-form-item>
          <el-form-item label="上下间距">
            <el-input @change="chooseHeight" size="small" v-model="top_bottom_padding" >
              <template slot="append">px</template>
            </el-input>
          </el-form-item>
          <el-form-item label="使用插件配置">
            <el-switch v-model="usePluginConfig"></el-switch>
          </el-form-item>
          <template v-if="!usePluginConfig">
            <el-form label-position="left">
              <el-form-item class="diy-user-label" label="未购买用户" prop="buy_user">
                <el-form-item label="背景图" prop="buy_bg">
                  <div style="position: relative">
                    <el-tooltip class="item" effect="dark" content="建议尺寸:702*120" placement="top">
                      <el-button size="mini" @click="comIndex=1,choicImg=true">选择文件</el-button>
                    </el-tooltip>
                    <div style="margin: 10px 0;position: relative;width: 80px;">
                      <div class="VipApp-image" :style="'background-image: url('+getIconLink(buy_bg)+')'"></div>
                      <el-button v-if="buy_bg != ''" class="diy-del-btn" @click="resetImg(1,'buy')" size="mini"
                        type="danger" icon="el-icon-close" circle></el-button>
                    </div>
                    <el-button size="mini" @click="resetImg(2,'buy')" class="diy-reset" type="primary">恢复默认</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="文字" prop="buy_text">
                  <div flex="dir:left cross:center">
                    <el-input maxlength="15" style="margin-left: 10px;width: 240px" size="small" v-model="data.buy_big"
                      placeholder="大标题（字符限制15）"></el-input>
                    <el-color-picker class="diy-color-picker" size="small" v-model="data.buy_big_color">
                    </el-color-picker>
                    <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.buy_big_color">
                    </el-input>
                  </div>
                  <div flex="dir:left cross:center">
                    <el-input maxlength="10" style="margin-left: 10px;width: 240px" size="small"
                      v-model="data.buy_small" placeholder="小标题（字符限制10）"></el-input>
                    <el-color-picker class="diy-color-picker" size="small" v-model="data.buy_small_color">
                    </el-color-picker>
                    <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.buy_small_color">
                    </el-input>
                  </div>
                </el-form-item>
                <el-form-item label="按钮颜色" prop="buy_btn_bg_color">
                  <el-color-picker class="diy-color-picker" size="small" v-model="data.buy_btn_bg_color">
                  </el-color-picker>
                  <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.buy_btn_bg_color">
                  </el-input>
                </el-form-item>
                <el-form-item label="按钮文字" prop="buy_btn_text">
                  <div flex="dir:left cross:center">
                    <el-input maxlength="4" style="margin-left: 10px;width: 240px" size="small"
                      v-model="data.buy_btn_text" placeholder="大标题（字符限制4）"></el-input>
                    <el-color-picker class="diy-color-picker" size="small" v-model="data.buy_btn_color">
                    </el-color-picker>
                    <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.buy_btn_color">
                    </el-input>
                  </div>
                </el-form-item>
              </el-form-item>
            </el-form>
            <el-form label-position="left">
              <el-form-item class="diy-user-label" label="已购买用户" prop="renew_user">
                <el-form-item label="背景图" prop="renew_bg">
                  <div style="position: relative">
                    <el-tooltip class="item" effect="dark" content="建议尺寸:702*120" placement="top">
                      <el-button size="mini" @click="comIndex=2,choicImg=true">选择文件</el-button>
                    </el-tooltip>
                    <div style="margin: 10px 0;position: relative;width: 80px;">
                      <div class="VipApp-image" :style="'background-image: url('+getIconLink(renew_bg)+')'"></div>
                      <el-button v-if="renew_bg != ''" class="diy-del-btn" @click="resetImg(1,'renew')" size="mini"
                        type="danger" icon="el-icon-close" circle></el-button>
                    </div>
                    <el-button size="mini" @click="resetImg(2,'renew')" class="diy-reset" type="primary">恢复默认
                    </el-button>
                  </div>
                </el-form-item>
                <el-form-item label="文字" prop="renew_text">
                  <div flex="dir:left cross:center">
                    <el-input maxlength="15" style="margin-left: 10px;width: 240px" size="small"
                      v-model="data.renew_text" placeholder="标题（字符限制15）"></el-input>
                    <el-color-picker class="diy-color-picker" size="small" v-model="data.renew_text_color">
                    </el-color-picker>
                    <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.renew_text_color">
                    </el-input>
                  </div>
                </el-form-item>
                <el-form-item label="按钮颜色" prop="renew_btn_bg_color">
                  <el-color-picker class="diy-color-picker" size="small" v-model="data.renew_btn_bg_color">
                  </el-color-picker>
                  <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.renew_btn_bg_color">
                  </el-input>
                </el-form-item>
              </el-form-item>
            </el-form>
          </template>
        </el-form>
      </div>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    props: ["vipData", "index", "dataLeng"],
    components: {
      ChooseImg
    },
    data() {
      return {
        choicImg: false,
        loading: false,
        usePluginConfig: false,
        data:this.vipData.data,
        comIndex: -1,
        default: {
          buy_bg: this.domainManager().ImageUrl+'/Static/buy_bg.png',
          renew_bg: this.domainManager().ImageUrl+'/Static/logo.png',
          buy_big_color: '#D0B8A5',
          buy_small_color: '#C09878',
          buy_btn_color: '#5A4D40',
          buy_btn_bg_color: '',
          buy_big: '开通超级会员，立省更多',
          buy_small: '超值全场8.8折！',
          buy_btn_text: '立即开通',
          renew_text_color: '#D0B8A5',
          renew_btn_bg_color: '',
          renew_text: 'SVIP会员优享9.5折，全场包邮',
        },
        form: {},
        background: '#FFFFFF',
        top_bottom_padding: 0,
        buy_bg: '',
        renew_bg: '',
        plugin: {
          buy_bg: this.domainManager().ImageUrl+'/Static/buy_bg.png',
          renew_bg: this.domainManager().ImageUrl+'/Static/logo.png',
          buy_big_color: '#D0B8A5',
          buy_small_color: '#C09878',
          buy_btn_color: '#5A4D40',
          buy_btn_bg_color: '',
          buy_big: '开通超级会员，立省更多',
          buy_small: '超值全场8.8折！',
          buy_btn_text: '立即开通',
          renew_text_color: '#D0B8A5',
          renew_btn_bg_color: '',
          renew_text: 'SVIP会员优享9.5折，全场包邮',
        },


      };
    },
    created() {
       this.reset();
    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        if (this.comIndex == 1) {
          this.data.buy_bg = msg.url;
          this.buy_bg = msg.url;
        } else if (this.comIndex == 2) {
          this.data.renew_bg = msg.url;
          this.renew_bg = msg.url;
        }
        this.choicImg = false;
      },
      chooseColor() {
        this.data.background = this.background;
      },
      chooseHeight() {
        this.data.top_bottom_padding = this.top_bottom_padding;
      },
      reset() {
        let that = this;
        if (that.usePluginConfig) {
          that.data = that.plugin;
          that.data.usePluginConfig = that.usePluginConfig;
          that.buy_bg = that.plugin.buy_bg;
          that.renew_bg = that.plugin.renew_bg;
          that.data.background = that.background;
          that.data.top_bottom_padding = that.top_bottom_padding;
        } else {
          that.data.usePluginConfig = that.usePluginConfig;
          that.buy_bg = this.domainManager().ImageUrl+'/Static/buy_bg.png';
          that.renew_bg = this.domainManager().ImageUrl+'/Static/buy_bg.png';
          that.data.background = that.background;
          that.data.top_bottom_padding = that.top_bottom_padding;
          that.data.background = that.background;
          that.data.top_bottom_padding = that.top_bottom_padding;
          that.data.buy_big_color=that.default.buy_big_color;
          that.data.buy_small_color=that.default.buy_small_color;
          that.data.buy_btn_color=that.default.buy_btn_color;
          that.data.buy_btn_bg_color=that.default.buy_btn_bg_color;
          that.data.buy_big=that.default.buy_big;
          that.data.buy_big=that.default.buy_big;
          that.data.buy_small=that.default.buy_small;
          that.data.buy_btn_text=that.default.buy_btn_text;
          that.data.renew_text_color=that.default.renew_text_color;
          that.data.renew_btn_bg_color=that.default.renew_btn_bg_color;
          that.data.renew_text=that.default.renew_text;
        }
      },
      resetImg(res, position) {
        switch (position) {
          case 'buy':
            if (res == 2) {
              this.buy_bg = this.domainManager().ImageUrl+'/Static/buy_bg.png';
              this.data.buy_bg = this.domainManager().ImageUrl+'/Static/buy_bg.png';
            } else {
              this.buy_bg = '';
              this.data.buy_bg = '';
            }
            break;
          case 'renew':
            if (res == 2) {
              this.renew_bg = this.domainManager().ImageUrl+'/Static/buy_bg.png';
              this.data.renew_bg = this.domainManager().ImageUrl+'/Static/buy_bg.png';
            } else {
              this.renew_bg = '';
              this.data.renew_bg = '';
            }
            break;
        }
      },

    },
    computed: {

    },
    mounted() {

    }
  };

</script>