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

import baseConfig from '@/components/active-config/base-config.vue';
-->
<template>
  <div class="base-config-content">
    <div class="config-title font-14 color-303133">基本信息</div>
    <el-form
      label-width="114px"
      :model="activeInfoData"
      ref="baseForm"
      :rules="rules"
    >
      <el-form-item
        v-if="$route.query.activityId"
        label="活动目的："
        prop=""
      >
        {{activeInfoData.parentGoalName}} - {{activeInfoData.goalName}}
      </el-form-item>
      <el-form-item
        v-if="$route.query.activityId"
        label="转化路径："
        prop=""
      >
        <div>{{activeInfoData.router&&activeInfoData.router.length ? activeInfoData.router.map(ele=>ele.transName).join('→') : ''}}</div>
      </el-form-item>
      <el-form-item
        v-if="$route.query.activityId && activeInfoData.activityMarketPageName"
        label="活动营销页："
        prop=""
      > </el-form-item>
      <el-form-item
        v-if="$route.query.activityId && activeInfoData.gamePlanName"
        label="游戏计划："
        prop=""
      > </el-form-item>
      <el-form-item
        v-if="$route.query.activityId && activeInfoData.cardCoupName"
        label="卡券："
        prop=""
      > </el-form-item>
      <el-form-item
        label="活动名称："
        prop="activityName"
      >
        <limitInput
          :inputWidth="350"
          :disflag="$route.query.interfaceId ? true : false"
          :inputValue.sync="activeInfoData.activityName"
          :holder="'请输入活动名称'"
          :getByType="'word'"
          :maxLength="30"
        > </limitInput>
      </el-form-item>
      <el-form-item
        label="活动有效期："
        prop="dateRange"
      >
        <el-date-picker
          class="m-l-10"
          prefix-icon="el-icon-time"
          :picker-options="pickerOptions"
          v-model="activeInfoData.dateRange"
          @change="changeDate"
          :editable="false"
          :value-format="'yyyy-MM-dd HH:mm:ss'"
          :default-time="['00:00:00', '23:59:59']"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        > </el-date-picker>
      </el-form-item>
      <el-form-item class="m-t-50">
        <el-button
          type="primary"
          @click="returnBack"
        >返回</el-button>
        <el-button
          type="primary"
          @click="submitForm('baseForm')"
        >下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import { getRequest,postRequest } from '@/api/api';
// import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import timeFormat from '@/common/js/timeFormat';
export default {
  name: 'base-config',
  props: {},
  components: {
    limitInput
  },
  data() {
    return {
      activeInfoData: {
        activityId: '',
        parentGoalId: '',
        parentGoalName: '',
        goalName: '',
        goalId: '',
        activityMarketPageId: '',
        gamePlanId: '',
        cardCoupId: '',
        activityMarketPageName: '',
        gamePlanName: '',
        cardCoupName: '',
        router: '',
        activityName: '',
        dateRange: []
      },
      rules: {
        activityName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        dateRange: [{ required: true, message: '请选择活动有效期', trigger: 'blur' }]
      },
      choiceDateCopy: [],
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDateCopy = [minDate.getTime()];
          if (maxDate) {
            this.choiceDateCopy = [];
          }
        },
        disabledDate: time => {
          if (this.choiceDateCopy.length) {
            const one = 365 * 24 * 3600 * 1000;
            const minTime = this.choiceDateCopy[0] - one;
            const maxTime = this.choiceDateCopy[0] + one;
            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() < Date.now() - 8.64e6;
          }
          return time.getTime() < Date.now() - 8.64e6;
        }
      },
    };
  },
  methods: {
    /**
     * 日期
     */
    changeDate(e) {
      const that = this;
      if (!e) {
        that.choiceDateCopy = [];
        that.activeInfoData.dateRange = [];
      }
    },
    /**
     * 返回
     */
    returnBack() {
      this.$router.go(-1);
    },
    /**
     * 下一步
     */
    submitForm(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.$store.dispatch('clearIndexData'); // 清空首页暂存数据
          that.postSave();
        } else {
          return false;
        }
      });
    },
    postSave() {
      const that = this;
      if (!that.activeInfoData.dateRange) {
        that.activeInfoData.dateRange = [];
      }
      let para = {
        activityId: that.activeInfoData.activityId,
        activityName: that.activeInfoData.activityName,
        startDate: that.activeInfoData.dateRange[0],
        endDate: that.activeInfoData.dateRange[1],
        parentGoalId: that.activeInfoData.parentGoalId,
        goalId: that.activeInfoData.goalId,
        activityMarketPageId: that.activeInfoData.activityMarketPageId,
        gamePlanId: that.activeInfoData.gamePlanId,
        cardCoupId: that.activeInfoData.cardCoupId,
        router: JSON.stringify(that.activeInfoData.router)
      };
      postRequest('/sharing-core-web/edit-activity-base-info', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.activeInfoData.activityId = resData.result;
            that.$emit('submitNext', that.activeInfoData);
            that.$store.dispatch('saveBaseInfo', that.activeInfoData);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取基础信息
     * /sharing-core-web/get-activity-base-info
     */
    getBaseData() {
      const that = this;
      let para = {
        activityId: that.$route.query.activityId
      };
      getRequest('/sharing-core-web/get-activity-base-info', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (resData.result && resData.result.router) {
              resData.result.router = JSON.parse(resData.result.router);
            }
            resData.result.startDate = timeFormat.timeToDateTime(resData.result.startDate);
            resData.result.endDate = timeFormat.timeToDateTime(resData.result.endDate);
            resData.result.dateRange = [resData.result.startDate,resData.result.endDate];
            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.getBaseData();
    }
    if (Object.keys(that.$store.state.activeInfo).length) {
      const info = JSON.parse(JSON.stringify(that.$store.state.activeInfo));
      that.activeInfoData.parentGoalId = info.firstGoal.goalId;
      that.activeInfoData.goalId = info.secondGoal.goalId;
      that.activeInfoData.activityMarketPageId = info.markingValue;
      that.activeInfoData.activityMarketPageName = info.activityMarketPageName;
      that.activeInfoData.gamePlanId = info.gameValue[1];
      that.activeInfoData.gamePlanName = info.gamePlanName;
      that.activeInfoData.cardCoupId = info.cardValue;
      that.activeInfoData.cardCoupName = info.cardCoupName;
      that.activeInfoData.router = info.pathArr
    }
    // 上一步获取状态内数据
    if (Object.keys(that.$store.state.baseInfo).length) {
      that.$nextTick(()=> {
        that.activeInfoData = JSON.parse(JSON.stringify(that.$store.state.baseInfo));
      })
    }
  },
};
</script>
<style lang="less" scoped>
.base-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;
    }
  }
}
</style>
