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

import cardConfig from '@/components/active-config/card-config.vue';
-->
<template>
  <div class="card-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="cardForm"
        :rules="rules"
      >
        <el-form-item
          label="页面标题："
          prop="appletTitle"
        >
          <limitInput
            :inputWidth="503"
            :disflag="$route.query.editFlag"
            :inputValue.sync="activeInfoData.appletTitle"
            :holder="'请输入页面标题'"
            :getByType="'char'"
            :maxLength="40"
          > </limitInput>
        </el-form-item>
        <el-form-item
          label="海报上传："
          prop="playBillUrl"
        >
          <single-upload
            :width="600"
            :disabled="$route.query.editFlag"
            :limitRate="'5/4'"
            :limitFlag="3"
            v-model="activeInfoData.playBillUrl"
            @returnName="returnName"
          > </single-upload>
        </el-form-item>
        <el-form-item class="m-t-50">
          <el-button
            type="primary"
            @click="submitBack"
          >上一步</el-button>
          <el-button
            type="primary"
            @click="submitForm('cardForm')"
          >下一步</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">
          <div class="form-preview-inner">
            <div class="form-preview-title">{{ activeInfoData.appletTitle }}</div>
            <div class="form-preview-img flex flex-pack-center flex-align-center">
              <img
                :src="activeInfoData.playBillUrl"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import singleUpload from '@/components/single-upload.vue';
// 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: 'card-config',
  props: {},
  components: {
    limitInput,
    singleUpload
  },
  data() {
    return {
      activeInfoData: {
        appletTitle: '',
        playBillUrl: '',
        fileName: '',

      },
      rules: {
        appletTitle: [{ required: true, message: '请输入页面标题', trigger: 'blur' }],
        playBillUrl: [{ required: true, message: '请上传海报图片', trigger: 'blur' }]
      }
    };
  },
  methods: {
    /**
     *  返回文件名
     */
    returnName(name) {
      const that = this;
      that.activeInfoData.fileName= name;
    },
    /**
     * 上一步
     */
    submitBack() {
      const that = this;
      that.$store.dispatch('saveCardInfo', 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('saveCardInfo', that.activeInfoData);
          }else {
            that.postSave();
          }
        } else {
          return false;
        }
      });
    },500),
    postSave() {
      const that = this;
      let para = {
        activityId: that.activeInfoData.activityId,
        playBillUrl: that.activeInfoData.playBillUrl,
        appletTitle: that.activeInfoData.appletTitle,
        fileName: !!that.activeInfoData.fileName? that.activeInfoData.fileName: ''
      };
      postRequest('/sharing-core-web/edit-activity-applet', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.$emit('submitNext', that.activeInfoData);
            that.$store.dispatch('saveCardInfo', 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-applet', 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.cardInfo).length) {
      that.$nextTick(() => {
        that.activeInfoData = JSON.parse(JSON.stringify(that.$store.state.cardInfo));
      });
    }
  }
};
</script>
<style lang="less" scoped>
.card-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;
    }
    .form-preview {
      position: relative;
      width: 350px;
      .form-preview-top {
        line-height: 20px;
        margin-bottom: 18px;
        font-weight: 600;
      }
      .form-preview-body {
        position: relative;
        width: 350px;
        height: 374px;
        padding: 50px 26px;
        background: url(../../assets/images/app-card.png) no-repeat left center;
        background-size: 100%;
        .form-preview-inner {
          width: 100%;
          height: 100%;
          .form-preview-title {
            height: 22px;
            font-size: 16px;
            font-weight: 600;
            color: rgba(48, 49, 51, 1);
            line-height: 22px;
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .form-preview-img {
            width: 298px;
            height: 244px;
            max-width: 298px;
            max-height: 244px;
            img {
              max-width: 298px;
              max-height: 244px;
            }
          }
        }
      }
    }
  }
}
</style>
