<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-12 10:59:45
 * @LastEditors  : 无尘
 * @LastEditTime : 2020-01-09 09:57:52
 -->
<template>
  <div class="share-index common-wrap">
    <div class="right-content border-box">
      <div v-if="canCreate">
        <div class="flex-top-wrap" v-if="dueData.isOverdue===0">
          <div class="separator-space">- 当前无进行中的活动，请创建活动，别让业绩白白流失！ -</div>
          <div class="alert-wrap" v-if="dueData.dueDay<=90"
            ><i class="el-icon-warning" ></i>您的分享有礼功能将在 <span class="red">{{dueData.dueDay}}</span>  天后过期，为不影响使用，请及时联系达摩运营经理购买（<span class="red">过期截止时间{{dueData.endDate|dateFilter}}</span>）</div>
        </div>
        <active-select :isOverdue="dueData.isOverdue"></active-select>
      </div>
      <div>
        <!-- v-if="!canCreate" -->

        <in-progress-active  v-if="!canCreate" :dueData="dueData"></in-progress-active>


        <!-- <div class="separator-space">- 当前有未开始的活动 -</div>
        <will-start-active></will-start-active> -->

        <finished-active></finished-active>
      </div>
    </div>
    <!-- <vue-gic-footer></vue-gic-footer> -->
  </div>
</template>
<script>
import activeSelect from '@/components/active/active-select.vue';
import inProgressActive from '@/components/active/in-progress-active.vue';
import finishedActive from '@/components/active/finished-active.vue';
// import willStartActive from '@/components/active/will-start-active.vue';
// import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
import moment from 'moment'
export default {
  name: 'share-index',
  components: {
    activeSelect,
    inProgressActive,
    finishedActive,
    // willStartActive
  },
  data() {
    return {
      canCreate: true,
      dueData: {
        dueDay: 0, // 即将到期天数
        endDate: new Date().getTime(), // 到期时间
        isOverdue: 0, // 是否过期，0:未过期，1:已过期
        overdueDay: 0 // 过期天数
      }
    };
  },
  methods: {
    /**
     *   是否过期
     */
    judgeDue() {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/isOverdue', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if(resData.result===null)that.$router.push('/leaflets');
            that.dueData=Object.assign({},that.dueData,resData.result)
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 2500,
            message: error.message
          });
        });
    },
    /**
     *   是否可以创建活动
     */
    judgeCreate() {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/can-create', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.canCreate = resData.result;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 2500,
            message: error.message
          });
        });
    }
  },
  mounted() {
    const that = this;
    that.judgeDue();
    that.judgeCreate();
  },
  filters: {
    dateFilter(v){
      return moment(v).format('YYYY年MM月DD日')
    }
  }
};
</script>
<style lang="less" scoped>
.red{
  color:red;
}
.flex-top-wrap{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-bottom: 9px;
  .separator-space {
    margin-right: 19px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #909399;
    font-weight: 600;
    &.no-active {
      height: 40px;
      line-height: 20px;
    }
  }
  .alert-wrap{
    // width:774px;
    height:40px;
    padding:0 7px 0 17px;
    line-height:40px;
    background:#FFFBE6;
    border-radius:4px;
    border:1pxsolid#FFE58F;
    color:#606266;
    font-size:14px;
    .el-icon-warning{
      margin-right:9px;
      color:#FAAD14;
    }
  }
}
</style>
