<style>
  .diy-coupon {
    width: 100%;
    padding: 16px;
    min-height: 150px;
    overflow-x: auto;
    padding-left: 24px;
  }

  .diy-coupon .diy-coupon-one {
    width: 256px;
    height: 130px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-right: 24px;
    flex: none;
  }

  .diy-coupon .diy-coupon-one .right {
    width: 1.6rem;
    font-size: 26px;
    line-height: 1.25;
    text-align: center;
    margin-right: 2px;
  }

</style>
<template>
  <div :class="{'active':couponData.isCked}">
    <div class="diy-component-options" v-if="couponData.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">
      <div class="diy-coupon" flex="dir:left" :style="cListStyle">
        <div class="diy-coupon-one" flex="dir:left" :style="cStyle1" v-for="(item,index) in 2" :key="index+'s'">
          <div style="text-align: center;width: 215px">
            <div style="height: 80px;line-height: 80px;font-size: 28px">￥1000</div>
            <div style="height: 50px;line-height: 50px;font-size: 24px">满200元可用</div>
          </div>
          <div class="right" flex="main:center cross:center">立即领取</div>
        </div>
        <div class="diy-coupon-one" flex="dir:left" :style="cStyle2" v-for="(item,sindex) in 2" :key="sindex+'d'">
          <div style="text-align: center;width: 215px">
            <div style="height: 80px;line-height: 80px;font-size: 28px">￥1000</div>
            <div style="height: 50px;line-height: 50px;font-size: 24px">满200元可用</div>
          </div>
          <div class="right" flex="main:center cross:center">已领取</div>
        </div>
      </div>
    </div>
    <div class="diy-component-edit" v-if="couponData.isCked">
      <el-form label-width="100px" @submit.native.prevent>
        <el-form-item label="字体颜色">
          <el-color-picker size="small" v-model="data.textColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="不可领取">
          <el-tooltip class="item" effect="dark" content="建议尺寸256*130" placement="top">
            <el-button @click="choicImg=true,ckedIndex=1" size="mini">选择图片</el-button>
          </el-tooltip>
          <div class="zk_pic_box" style="width:100px;height:100px;" flex="main:center cross:center"
            :style="{backgroundImage:'url(' + getIconLink(data.receiveBg) + ')'}">
            <el-button type="danger"
              v-if="data.receiveBg!='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-coupon-no.png'"
              class="image-delete" size="mini" icon="el-icon-close"
              @click.stop="data.receiveBg='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-coupon-no.png'"
              circle></el-button>
          </div>
        </el-form-item>
        <el-form-item label="可领取">
          <el-tooltip class="item" effect="dark" content="建议尺寸256*130" placement="top">
            <el-button size="mini" @click="choicImg=true,ckedIndex=2">选择图片</el-button>
          </el-tooltip>
          <div class="zk_pic_box" style="width:100px;height:100px;" flex="main:center cross:center"
            :style="{backgroundImage:'url(' + getIconLink(data.unclaimedBg) + ')'}">
            <el-button type="danger"
              v-if="data.unclaimedBg!='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-coupon-index.png'"
              class="image-delete" size="mini" icon="el-icon-close"
              @click.stop="data.unclaimedBg='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-coupon-index.png'"
              circle></el-button>
          </div>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker v-model="data.backgroundColor" size="small"></el-color-picker>
          <el-input type="text" v-model="data.backgroundColor" size="small" style="width: 80px; margin-right: 25px;">
          </el-input>
        </el-form-item>
      </el-form>
    </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: ["couponData", "index", "dataLeng"],
    components: {
      ChooseImg
    },
    data() {
      return {
        choicImg: false,
        data: this.couponData.data,
        ckedIndex: -1,
        position: 'center center',
        repeat: 'no-repeat'
      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        if (this.ckedIndex == 1) {
          this.data.receiveBg = msg.url;
        } else if (this.ckedIndex == 2) {
          this.data.unclaimedBg = msg.url;
        }
        this.choicImg = false;
      },
    },
    computed: {
      cListStyle() {
        if (this.data.backgroundColor) {
          return `background-color:${this.data.backgroundColor};background-image:url(${this.getIconLink(this.data.backgroundPicUrl)});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
        } else {
          return `background-image:url(${this.getIconLink(this.data.backgroundPicUrl)});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
        }
      },
      cStyle1() {
        return `background-image: url('${this.getIconLink(this.data.unclaimedBg)}');` +
          `color: ${this.data.textColor}`;
      },
      cStyle2() {
        return `background-image: url('${this.getIconLink(this.data.receiveBg)}');` +
          `color: ${this.data.textColor}`;
      },
    },
    mounted() {

    }
  };

</script>
