<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-18 10:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-28 14:32:27
 -->
<!--
<center-config @submitBack="submitBack" @submitNext="submitNext"></center-config>

import centerConfig from '@/components/active-config/center-config.vue';
-->
<template>
  <div class="center-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="144px" :model="activeInfoData" ref="centerForm" :rules="rules">
        <el-form-item label="头图上传：" prop="headUrl">
          <single-upload v-model="activeInfoData.headUrl"> </single-upload>
        </el-form-item>
        <el-form-item label="分享按钮：" prop="">
          <div class="flex">
            <span class="color-wrap flex flex-pack-center flex-space-between border-box">背景色<el-color-picker v-model="activeInfoData.shareBackColor"></el-color-picker></span><span class="color-wrap flex flex-space-between flex-pack-center border-box">文字色<el-color-picker v-model="activeInfoData.shareFontColor"></el-color-picker></span>
          </div>
        </el-form-item>
        <el-form-item label="分享按钮文案：" prop="shareButtonFont">
          <limitInput :inputWidth="394" :disflag="$route.query.editFlag ? true : false" :inputValue.sync="activeInfoData.shareButtonFont" :holder="'请输入分享按钮文案'" :getByType="'word'" :maxLength="20"> </limitInput>
        </el-form-item>
        <el-form-item label="活动介绍展现模式：" prop="activityIntroduceMode">
          <el-radio-group v-model="activeInfoData.activityIntroduceMode" @change="changeMode">
            <el-radio label="1">文字模式</el-radio>
            <el-radio label="2">图文模式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="activeInfoData.activityIntroduceMode == 1" label="活动介绍文案：" prop="activityIntroduceDetail">
          <div class="w-400">
            <tinymce-edit :disabledEdit="$route.query.editFlag ? true : false" ref="tinymceWrap" :bodyHtml="activeInfoData.activityIntroduceDetail" @changeEditor="changeEditor"></tinymce-edit>
          </div>
        </el-form-item>
        <el-form-item v-if="activeInfoData.activityIntroduceMode == 2" label="选择图文模板：" prop="activityIntroduceId">
          <el-select size="large" v-model="activeInfoData.activityIntroduceId" @change="changePage" placeholder="请选择自定义页面">
            <el-option v-for="item in markingList" :key="item.pageId" :label="item.name" :value="item.pageId"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="m-t-50">
          <el-button type="primary" @click="submitBack">上一步</el-button>
          <el-button type="primary" @click="submitForm('centerForm')">下一步</el-button>
        </el-form-item>
      </el-form>
      <div class="form-preview">
        <div class="form-preview-wrap">
          <div class="form-preview-inner">
            <div class="form-preview-body">
              <div class="form-preview-body_top">
                <img :src="activeInfoData.headUrl" alt="" />
              </div>
              <div class="form-preview-body_middle border-box">
                <div class="form-preview-body_content">
                  <div class="form-preview-btn" :style="{ background: activeInfoData.shareBackColor, color: activeInfoData.shareFontColor }">{{ activeInfoData.shareButtonFont }}</div>
                </div>
              </div>
              <div class="form-preview-body_rules border-box">
                <div class="rules-title">活动规则</div>
                <div v-if="activeInfoData.activityIntroduceMode == 1" class="rules-body" v-html="activeInfoData.activityIntroduceDetail"></div>
                <!-- v-if="activeInfoData.activityIntroduceMode == 2" -->
                <app-template v-if="activeInfoData.activityIntroduceMode == 2" :templateData="templateData"></app-template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import singleUpload from '@/components/single-upload.vue';
import tinymceEdit from '@/components/tinymce-edit';

import appTemplate from '@/components/active-config/app-template.vue';
// import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';

import { getRequest, postRequest } from '@/api/api';
export default {
  name: 'center-config',
  props: {},
  components: {
    singleUpload,
    limitInput,
    tinymceEdit,
    appTemplate
  },
  data() {
    const validateTemp = (rule, value, callback) => {
      if (value === '' && this.activeInfoData.activityIntroduceMode == 2) {
        callback(new Error('选择图文模板'));
      } else {
        callback();
      }
    };
    return {
      activeInfoData: {
        headUrl: '',
        shareBackColor: '#1890ff',
        shareFontColor: '#ffffff',
        shareButtonFont: '',
        activityIntroduceMode: '1',
        activityIntroduceId: '',
        activityIntroduceDetail: ''
      },
      markingList: [],
      rules: {
        headUrl: [{ required: true, message: '请上传头图上', trigger: 'blur' }],
        shareButtonFont: [{ required: true, message: '请输入分享按钮文案', trigger: 'blur' }],
        activityIntroduceDetail: [{ required: true, message: '请完善活动介绍文案', trigger: 'blur' }],
        activityIntroduceId: [{ validator: validateTemp, trigger: 'blur' }]
      },
      templateData: []
    };
  },
  methods: {
    /**
     * 展现模式
     */
    changeMode(e) {
      const that = this;
      that.activeInfoData.activityIntroduceDetail = '';
      that.activeInfoData.activityIntroduceId = '';
      if (e == 2) {
        // 获取自定义页面
        that.activeInfoData.activityIntroduceDetail = [];
        that.getMarkingList();
      }
    },
    /**
     * 选择自定义页面
     */
    changePage(e) {
      const that = this;
      let para = { pageId: e };
      getRequest('/api-admin/page-detail', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 0) {
            if (resData.result.value && resData.result.value.length) {
              resData.result.value.forEach(ele => {
                if (ele.key == 'A3') {
                  ele.lineSetting = JSON.parse(ele.lineSetting);
                }
              });
            }
            that.templateData = JSON.parse(JSON.stringify(resData.result.value)) || [];
            if (that.activeInfoData.activityIntroduceMode == 2) {
              that.activeInfoData.activityIntroduceDetail = JSON.parse(JSON.stringify(resData.result.value));
            }
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 富文本输入回调
     *
     */
    changeEditor(value) {
      const that = this;
      that.activeInfoData.activityIntroduceDetail = value;
    },
    /**
     * 获取活动营销页
     */
    getMarkingList() {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/list-marking-page', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.markingList = resData.result || [];
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 上一步
     */
    submitBack() {
      const that = this;
      that.$store.dispatch('saveCenterInfo', that.activeInfoData);
      that.$emit('submitBack');
    },
    /**
     * 下一步
     */
    submitForm(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postSave();
        } else {
          return false;
        }
      });
    },
    postSave() {
      const that = this;
      let para = {
        activityId: that.activeInfoData.activityId,
        headUrl: that.activeInfoData.headUrl,
        shareBackColor: that.activeInfoData.shareBackColor,
        shareFontColor: that.activeInfoData.shareFontColor,
        shareButtonFont: that.activeInfoData.shareButtonFont,
        activityIntroduceMode: that.activeInfoData.activityIntroduceMode,
        activityIntroduceDetail: that.activeInfoData.activityIntroduceMode == 2 ? JSON.stringify(that.activeInfoData.activityIntroduceDetail) : that.activeInfoData.activityIntroduceDetail,
        activityIntroduceId: that.activeInfoData.activityIntroduceId
      };
      postRequest('/sharing-core-web/edit-activity-center', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.$emit('submitNext', that.activeInfoData);
            that.$store.dispatch('saveCenterInfo', that.activeInfoData);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取活动中心数据
     */
    getData() {
      const that = this;
      let para = {
        activityId: that.$route.query.activityId
      };
      getRequest('/sharing-core-web/get-activity-center', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!resData.result) {
              return false;
            }
            resData.result.activityIntroduceMode = String(resData.result.activityIntroduceMode);
            that.activeInfoData = resData.result;
            that.getMarkingList();
            that.changePage(that.activeInfoData.activityIntroduceId);
            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.centerInfo).length) {
      that.$nextTick(() => {
        that.activeInfoData = JSON.parse(JSON.stringify(that.$store.state.centerInfo));

        if (that.$store.state.centerInfo.activityIntroduceMode == 2) {
          that.getMarkingList();
          that.changePage(that.activeInfoData.activityIntroduceId);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.center-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: 799px;
    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;
    }
  }
  .color-wrap {
    width: 91px;
    height: 32px;
    padding-left: 10px;
    border-radius: 2px;
    border: 1px solid rgba(196, 198, 207, 1);
    & + .color-wrap {
      margin-left: 20px;
    }
    .el-color-picker {
      /deep/ .el-color-picker__trigger {
        border: none;
      }
    }
  }
  .form-wrap {
    .el-form {
      width: 600px;
      max-width: 600px;
    }
    .form-preview {
      .form-preview-wrap {
        position: relative;
        width: 246px;
        height: 488px;
        background: url(../../assets/images/center-bg.png) no-repeat left center;
        .form-preview-inner {
          position: absolute;
          top: 67px;
          left: 14px;
          width: 219px;
          height: 405px;
          overflow-y: auto;
          border-radius: 0 0 26px 26px;
          background: linear-gradient(180deg, rgba(247, 248, 249, 1) 0%, rgba(227, 231, 235, 1) 6%, rgba(232, 236, 239, 1) 18%, rgba(215, 220, 226, 1) 49%, rgba(236, 239, 242, 1) 87%, rgba(209, 214, 221, 1) 100%);
        }
        .form-preview-body {
          position: relative;
          width: 100%;
          &_top {
            width: 100%;
            height: 90px;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
          &_middle {
            position: relative;
            width: 100%;
            padding: 0 6px;
            height: 301px;
            margin-top: -30px;
            background: url(../../assets/images/center-img.png) no-repeat center center;
            background-size: 94% 100%;
            .form-preview-body_content {
              position: relative;
              width: 85%;
              height: 100%;
              margin: 0 auto;
            }
            .form-preview-btn {
              position: absolute;
              bottom: 7px;
              width: 100%;
              height: 32px;
              line-height: 32px;
              font-size: 14px;
              border-radius: 15px;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
            }
          }
          &_rules {
            width: 94%;
            margin: 6px auto 0 auto;
            min-height: 50px;
            background: #fff;
            padding: 15px 12px;
            .rules-title {
              font-size: 12px;
              color: #303133;
              font-weight: 600;
              border-left: 3px solid #303133;
              padding-left: 8px;
              margin-bottom: 10px;
            }
            .rules-body {
              padding: 5px 0;
              // line-height: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
