<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-18 10:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-06 11:26:58
 -->
<!--
<poster-config @submitBack="submitBack" @submitNext="submitNext"></poster-config>

import posterConfig from '@/components/active-config/poster-config.vue';
-->
<template>
  <div class="poster-config-content">
    <div class="config-title font-14 color-303133">分享海报配置</div>
    <div
      role="alert"
      class="el-alert el-alert--info"
    >
      <i class="el-alert__icon el-icon-info font-12 color-1890ff"></i>
      <div class="el-alert__content">
        <span class="el-alert__title color-606266 font-14 font-w-400">1. 当前活动的转化路径以小程序作为受邀人入口，邀请人可在活动中心一键保存小程序带二维码海报以实现朋友圈转发。 <br />
          2. 请对分享海报进行配置，一张生动而有感染力的活动海报，是活动成败的关键！</span>
      </div>
    </div>
    <div class="form-wrap flex">
      <el-form
        label-width="114px"
        :model="activeInfoData"
        ref="posterForm"
        :rules="rules"
      >
        <el-form-item
          label="模板选择："
          prop=""
        >
          <div class="template-body">
            <ul class="flex">
              <li
                :class="['border-box ', activeInfoData.templateType == 1 ? 'select-li' : '']"
                @click="selectTemplate(1)"
              >
                <img
                  src="../../assets/images/templete-null.png"
                  alt=""
                />
                <div class="common-cell-check">
                  <div class="common-cell-triangle">
                    <div class="common-cell-outer">
                      <i class="el-icon-upload-success el-icon-check"></i>
                    </div>
                  </div>
                </div>
              </li>
              <li
                :class="['m-l-10 border-box flex flex-align-center', activeInfoData.templateType == 2 ? 'select-li' : '']"
                @click="selectTemplate(2)"
              >
                <img
                  src="../../assets/images/templete-null.png"
                  alt=""
                />
                <div class="common-cell-check">
                  <div class="common-cell-triangle">
                    <div class="common-cell-outer">
                      <i class="el-icon-upload-success el-icon-check"></i>
                    </div>
                  </div>
                </div>
              </li>
              <li
                :class="['m-l-10 border-box flex flex-align-end', activeInfoData.templateType == 3 ? 'select-li' : '']"
                @click="selectTemplate(3)"
              >
                <img
                  src="../../assets/images/templete-null.png"
                  alt=""
                />
                <div class="common-cell-check">
                  <div class="common-cell-triangle">
                    <div class="common-cell-outer">
                      <i class="el-icon-upload-success el-icon-check"></i>
                    </div>
                  </div>
                </div>
              </li>
              <li
                :class="['m-l-10 border-box  flex flex-align-end flex-pack-end', activeInfoData.templateType == 4 ? 'select-li' : '']"
                @click="selectTemplate(4)"
              >
                <img
                  class="w-24"
                  src="../../assets/images/templete-null.png"
                  alt=""
                />
                <div class="common-cell-check">
                  <div class="common-cell-triangle">
                    <div class="common-cell-outer">
                      <i class="el-icon-upload-success el-icon-check"></i>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </el-form-item>
        <el-form-item
          label="海报上传："
          prop="playBillUrl"
        >
          <post-upload
            :disabled="$route.query.editFlag"
            v-model="activeInfoData.playBillUrl"
            :limitFlag="2"
            :width="750"
            :height="1300"
          > </post-upload>
        </el-form-item>
        <el-form-item
          label="二维码配置："
          prop=""
        >
          <div class="item-bg border-box">
            <div class="flex">
              <span class="color-wrap flex flex-pack-center flex-space-between border-box">前景色<el-color-picker
                  v-model="activeInfoData.qrcodeFrontColor"
                  :disabled="$route.query.editFlag"
                  @change="changeFront"
                ></el-color-picker></span><span class="color-wrap flex flex-space-between flex-pack-center border-box">背景色<el-color-picker
                  v-model="activeInfoData.qrcodeBackColor"
                  :disabled="$route.query.editFlag"
                  @change="changeBg"
                ></el-color-picker></span>
              <span class="font-14 color-606266 p-l-20">内边距</span>
              <el-input-number
                :disabled="$route.query.editFlag"
                class="w-90 m-l-20"
                v-model="activeInfoData.qrcodePadding"
                controls-position="right"
                @change="changePadding"
                :min="1"
                :max="60"
              ></el-input-number>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="m-t-50">
          <el-button
            type="primary"
            @click="submitBack"
          >上一步</el-button>
          <el-button
            type="primary"
            @click="submitForm('posterForm')"
          >下一步</el-button>
        </el-form-item>
      </el-form>
      <div class="form-preview">
        <div class="form-preview-top font-14 color-303133">效果预览</div>
        <div
          class="form-preview-body"
          :style="{ backgroundImage: `url(${activeInfoData.playBillUrl})`, backgroundSize: '100%' }"
        >
          <ul>
            <li :class="['border-box', activeInfoData.templateType == 2 ? 'flex flex-align-center' : activeInfoData.templateType == 3 ? 'flex flex-align-end' : activeInfoData.templateType == 4 ? 'flex flex-align-end flex-pack-end li-50' : '']">
              <!-- <img src="../../assets/images/templete-null.png" alt="" /> -->
              <vue-qr
                text="123456"
                :margin="activeInfoData.qrcodePadding"
                :correctLevel="3"
                :colorLight="activeInfoData.qrcodeBackColor"
                :colorDark="activeInfoData.qrcodeFrontColor"
                :backgroundColor="activeInfoData.qrcodeBackColor"
                :logoSrc="''"
                :size="100"
              ></vue-qr>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import postUpload from '@/components/post-upload.vue';
import VueQr from 'vue-qr';
// import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
import { getRequest, postRequest } from '@/api/api';
export default {
  name: 'poster-config',
  props: {},
  components: {
    postUpload,
    VueQr
  },
  data() {
    return {
      activeInfoData: {
        playBillUrl: '',
        templateType: '1',
        qrcodeBackColor: '#ffffff',
        qrcodeFrontColor: '#000000',
        qrcodePadding: '1',
        activityId: ''
      },
      rules: {
        playBillUrl: [{ required: true, message: '请上传海报图片', trigger: 'blur' }]
      }
    };
  },
  methods: {
    /**
     * 选择模板
     */
    selectTemplate(num) {
      const that = this;
      that.activeInfoData.templateType = num;
    },
    /**
     * 上一步
     */
    submitBack() {
      const that = this;
      that.$store.dispatch('savePosterInfo', that.activeInfoData);
      that.$emit('submitBack');
    },
    /**
     * 下一步
     */
    submitForm: _debounce(function(formName) {
      const that = this;

      that.$refs[formName].validate(valid => {
        if (valid) {
          if (that.$route.query.hasOwnProperty('editFlag')) {
            that.$emit('submitNext', that.activeInfoData);
            that.$store.dispatch('savePosterInfo', that.activeInfoData);
          }else {
            that.postSave();
          }
        } else {
          return false;
        }
      });
    },500),
    postSave() {
      const that = this;
      let para = {
        activityId: that.activeInfoData.activityId,
        playBillUrl: that.activeInfoData.playBillUrl,
        templateType: that.activeInfoData.templateType,
        qrcodeBackColor: that.activeInfoData.qrcodeBackColor,
        qrcodeFrontColor: that.activeInfoData.qrcodeFrontColor,
        qrcodePadding: that.activeInfoData.qrcodePadding
      };
      postRequest('/sharing-core-web/edit-activity-share', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.$emit('submitNext', that.activeInfoData);
            that.$store.dispatch('savePosterInfo', that.activeInfoData);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取活动中心数据
     */
    getData(activityId) {
      const that = this;
      let para = {
        activityId: activityId || that.$route.query.activityId
      };
      getRequest('/sharing-core-web/get-activity-share', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!resData.result) {
              return false;
            }
            that.activeInfoData = resData.result;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  mounted() {
    const that = this;
    if (that.$route.query.hasOwnProperty('activityId')) {
      that.getData();
    }
    if (Object.keys(that.$store.state.baseInfo).length) {
      that.activeInfoData.activityId = JSON.parse(JSON.stringify(that.$store.state.baseInfo)).activityId;
    }
    if (Object.keys(that.$store.state.posterInfo).length) {
      that.$nextTick(() => {
        that.activeInfoData = JSON.parse(JSON.stringify(that.$store.state.posterInfo));
      });
    }
  }
};
</script>
<style lang="less" scoped>
.w-90 {
  width: 90px;
}
.m-l-20 {
  margin-left: 20px;
}
.p-l-20 {
  padding-left: 20px;
}
.poster-config-content {
  padding: 48px 0 0 0;
  .config-title {
    font-weight: 600;
    margin-bottom: 30px;
  }
  .m-t-50 {
    margin-top: 50px;
  }
  .el-form-item {
    /deep/ .el-form-item__label {
      color: #606266;
    }
  }
  .el-alert--info {
    width: 1130px;
    margin-bottom: 17px;
    background: #e6f7ff;
    border: 1px solid #91d5ff;
    .el-alert__icon {
      padding-top: 5px;
      align-self: flex-start;
    }
    .el-alert__content {
      line-height: 22px;
      padding-right: 0;
    }
  }
  .form-wrap {
    .el-form {
      width: 640px;
      max-width: 640px;
      .color-wrap {
        width: 91px;
        height: 32px;
        padding-left: 10px;
        border-radius: 2px;
        border: 1px solid rgba(196, 198, 207, 1);
        font-size: 12px;
        & + .color-wrap {
          margin-left: 20px;
        }
        .el-color-picker {
          /deep/ .el-color-picker__trigger {
            border: none;
          }
        }
      }
      .template-body {
        .m-l-10 {
          margin-left: 10px;
        }
        li {
          position: relative;
          width: 65px;
          height: 116px;
          padding: 12px;
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          border: 1px solid rgba(220, 223, 230, 1);
          cursor: pointer;
          img {
            width: 40px;
            &.w-24 {
              width: 24px;
            }
          }
          .common-cell-check {
            display: none;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 22px;
            height: 22px;
            z-index: 1;
            .common-cell-triangle {
              position: relative;
              width: 100%;
              height: 100%;
              overflow: hidden;
              .common-cell-outer {
                position: absolute;
                right: -16px;
                bottom: -6px;
                width: 32px;
                height: 20px;
                background: #1890ff;
                text-align: center;
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                transform: rotate(-45deg);

                i {
                  position: absolute;
                  top: 0px;
                  left: 7px;
                  font-size: 12px;
                  color: #fff;
                  -webkit-transform: rotate(45deg);
                  -moz-transform: rotate(45deg);
                  transform: rotate(45deg);
                }
              }
            }
          }

          &.select-li {
            border: 1px solid rgba(24, 144, 255, 1);
            .common-cell-check {
              display: block;
              .common-cell-triangle {
                border-bottom-right-radius: 4px;
              }
            }
          }
        }
      }
      .item-bg {
        width: 421px;
        height: 73px;
        padding: 20px;
        background: rgba(243, 246, 249, 1);
      }
    }
    .form-preview {
      position: relative;
      width: 350px;
      .form-preview-top {
        line-height: 20px;
        margin-bottom: 18px;
        font-weight: 600;
      }
      .form-preview-body {
        position: relative;
        width: 180px;
        height: 322px;
        background: rgba(245, 247, 250, 1);
        border-radius: 4px;
        border: 1px solid rgba(220, 223, 230, 1);
        background-repeat: no-repeat;
        background-size: 100%;
        ul {
          width: 100%;
          height: 100%;
        }
        li {
          width: 100%;
          height: 100%;
          padding: 30px 33px;
          img {
            width: 110px;
          }
          &.li-50 {
            img {
              width: 50px;
            }
          }
        }
      }
    }
  }
}
</style>
