<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-13 16:37:02
 * @LastEditors  : 无尘
 * @LastEditTime : 2019-12-23 14:12:40
 -->
<!--
<in-progress-active></in-progress-active>

import inProgressActive from '@/components/active/in-progress-active.vue';
-->
<template>
  <div v-if="inProgressData.length" style="margin-top:-9px;">
    <div class="flex-top-wrap" >
      <div class="separator-space">- 当前有计划中的活动，无法创建新的活动 -</div>
    </div>
    <div class="in-progress-active border-box">
      <ul>
        <template v-for="(item, index) in inProgressData">
          <li
            :class="['border-box', selectItem == item.activityId && index != 0 ? 'li-border' : '']"
            :key="index + 'data'"
          >
            <div class="in-progress-active-title flex flex-space-between border-box">
              <div
                class="active-title-left"
                @click="selectLi(item)"
              >
                <div class="active-title-name font-18 color-303133 font-w-700">{{ item.activityName }} <el-tag
                    v-if="item.status == 2"
                    type="danger"
                  >待完善</el-tag>
                  <el-tag
                    v-if="item.status == 1 && item.startDate > new Date().getTime()"
                    type="danger"
                  >未开始</el-tag>
                  <el-tag
                    v-if="item.status == 1 && item.startDate <= new Date().getTime()"
                    type="success"
                  >已开始</el-tag>
                </div>
                <div class="active-title-date font-14 color-909399 m-t-7">{{ item.startDate | formatTimeYmdHms }} - {{ item.endDate | formatTimeYmdHms }}</div>
              </div>
              <div class="active-title-right">
                <el-button
                  v-if="$getButtonLimit($buttonCode.marketingAddShare)"
                  :limit-code="$buttonCode.marketingAddShare"
                  type="primary"
                  plain
                  @click.stop="toEdit(index, item)"
                >活动配置</el-button>
                <el-button
                  data-clipboard-action="copy"
                  :data-clipboard-text="item.activityUrl"
                  class="copy-tag"
                  type="primary"
                  plain
                  @click="handleCopy(index, item)"
                >复制路径</el-button>
                <el-button
                  v-if="$getButtonLimit($buttonCode.marketingShareData)"
                  :limit-code="$buttonCode.marketingShareData"
                  type="primary"
                  plain
                  @click.stop="toDataList(index, item)"
                >数据明细</el-button>
                <el-button
                  v-if="item.status == 2"
                  type="danger"
                  plain
                  @click.stop="toDelList(index, item)"
                >删除</el-button>
              </div>
            </div>
            <div
              v-if="item.startDate <= new Date().getTime()"
              class="in-progress-active-body"
            >
              <out-date-active
                :barChartData="barChartData"
                :funnelData="funnelData"
                :activityId="item.activityId"
              ></out-date-active>
            </div>
          </li>
        </template>
        <!--  <li :class="['border-box', selectItem == inProgressData[0].activityId && index != 0 ? 'li-border' : '']">
          <div
            class="in-progress-active-title flex flex-space-between border-box"
            @click="selectLi(inProgressData[0])"
          >
            <div class="active-title-left">
              <div class="active-title-name font-18 color-303133 font-w-700">{{ inProgressData[0].activityName }} <el-tag
                  v-if="inProgressData[0].status == 2"
                  type="danger"
                >待完善</el-tag>
                <el-tag
                  v-if="inProgressData[0].status == 1 && inProgressData[0].startDate > new Date().getTime()"
                  type="danger"
                >未开始</el-tag>
                <el-tag
                  v-if="inProgressData[0].status == 1 && inProgressData[0].startDate <= new Date().getTime()"
                  type="success"
                >已开始</el-tag>
              </div>
              <div class="active-title-date font-14 color-909399 m-t-7">{{ inProgressData[0].startDate | formatTimeYmdHms }} - {{ inProgressData[0].endDate | formatTimeYmdHms }}</div>
            </div>
            <div class="active-title-right">
              <el-button
                type="primary"
                plain
                @click.stop="toEdit(index, inProgressData[0])"
              >活动配置</el-button>
              <el-button
                data-clipboard-action="copy"
                :data-clipboard-text="inProgressData[0].activityUrl"
                class="copy-tag"
                type="primary"
                plain
                @click="handleCopy(index, inProgressData[0])"
              >复制路径</el-button>
              <el-button
                type="primary"
                plain
                @click.stop="toDataList(index, inProgressData[0])"
              >数据明细</el-button>
              <el-button
                v-if="inProgressData[0].status == 2"
                type="danger"
                plain
                @click.stop="toDelList(index, inProgressData[0])"
              >删除</el-button>
            </div>
          </div>
          <div
            v-if="inProgressData[0].startDate <= new Date().getTime()"
            class="in-progress-active-body"
          >
            <out-date-active
              :barChartData="barChartData"
              :funnelData="funnelData"
              :activityId="inProgressData[0].activityId"
            ></out-date-active>
          </div>
        </li> -->
      </ul>
    </div>
  </div>
</template>
<script>
import outDateActive from '@/components/active/out-date-active.vue';
import Clipboard from 'clipboard';
import { _debounce } from '@/common/js/public';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
import moment from 'moment'
export default {
  name: 'in-progress-active',
  components: {
    outDateActive
  },
  props: {
    dueData: {
      type: Object,
      default: ()=>{
        return  {
          dueDay: 0, // 即将到期天数
          endDate: new Date().getTime(), // 到期时间
          isOverdue: 0, // 是否过期，0:未过期，1:已过期
          overdueDay: 0 // 过期天数
        }
      }
    }
  },
  data() {
    return {
      funnelData: {},
      barChartData: {
        columns: ['日期', '新增参与人数', '新增受邀人数'],
        rows: []
      },
      index: '',
      selectItem: '',
      inProgressData: [

      ]
    };
  },
  methods: {
    /**
     * 选择 li
     */
    selectLi: _debounce(function(item) {
      const that = this;
      that.selectItem = item.activityId;
      that.getActivityData(item.activityId);
    },100),
    /**
     * 获取单个活动数据信息
     * /sharing-core-web/get-activity-data-summary
     */
    getActivityData(activityId) {
      const that = this;
      let para = {
        activityId: activityId
      };
      getRequest('/sharing-core-web/get-activity-data-summary', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.funnelData = resData.result || {};
            if (!!resData.result.trend && !!resData.result.trend.length) {
              resData.result.trend.forEach(ele => {
                ele['日期'] = ele.date.split('-')[2];
                ele['新增参与人数'] = ele.inviteCount;
                ele['新增受邀人数'] = ele.invitedCount;
              });
            }
            that.barChartData = {
              columns: ['日期', '新增参与人数', '新增受邀人数'],
              rows: resData.result.trend || []
            };
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 2500,
            message: error.message
          });
        });
    },
    /**
     * 活动配置
     */
    toEdit(index, row) {
      const that = this;
      that.$router.push(`/editActive?activityId=${row.activityId}`);
    },
    /**
     * 数据明细
     */
    toDataList(index, row) {
      const that = this;
      that.$router.push(`/dataDetail?activityId=${row.activityId}`);
    },
    /**
     * 复制路径
     */
    /* eslint-disable */
    handleCopy(index, row) {
      const that = this;
      let clipboard = new Clipboard('.copy-tag', {
        text: function() {
          return row.activityUrl || '您复制的数据是空的！';
        }
      });
      clipboard.on('success', e => {
        showMsg.showmsg('复制成功!', 'success');
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on('error', e => {
        // 不支持复制
        showMsg.showmsg('该浏览器不支持自动复制!', 'warning');
        // 释放内存
        clipboard.destroy();
      });
    },
    /**
     * 删除
     */
    toDelList(index, item) {
      const that = this;
      this.$confirm('是否要删除该活动?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          that.delData(item.activityId);
        })
        .catch(() => {});
    },
    delData(activityId) {
      const that = this;
      let para = {
        activityId: activityId
      };
      getRequest('/sharing-core-web/delete-activity', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('删除成功', 'success');
            that.currentPage = 1;
            window.location.reload();
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 2500,
            message: error.message
          });
        });
    },
    /**
     * 获取列表数据
     */
    getTableList() {
      const that = this;
      let para = { type: 4 };
      getRequest('/sharing-core-web/page-activity', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            /*const nowDate = new Date().getTime();
             let arr = [];
            if (resData.result.result && resData.result.result.length) {
              resData.result.result.forEach(ele => {
                if (ele.endDate > nowDate) {
                  arr.push(ele);
                }
              });
            } */
            that.inProgressData = resData.result.result || [];
            if (resData.result.result.length) {
              that.getActivityData(resData.result.result[0].activityId);
            }
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 2500,
            message: error.message
          });
        });
    }
  },
  mounted() {
    const that = this;
    that.getTableList();
  },
  filters:{
    dateFilter(v){
      return moment(v).format('YYYY年MM月DD日')
    }
  }
};
</script>
<style lang="less" scoped>
.m-t-7 {
  margin-top: 7px;
}
.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;
    }
  }
}
.in-progress-active {
  width: 100%;
  padding: 20px;
  background: #fff;
  .el-tag {
    /* background-color: transparent;
    border-color: transparent;
    color: #f56c6c; */
    height: 25px;
    line-height: 25px;
    padding: 0 5px;
  }
  li {
    // height: 90px;
    cursor: pointer;
    &.li-border {
      padding: 0 20px;
      box-shadow: 0px 0px 8px 3px rgba(154, 170, 201, 0.11);
      border-radius: 4px;
      border: 1px solid rgba(220, 223, 230, 1);
      margin-top: -1px;
    }
    .in-progress-active-title {
      width: 100%;
      padding-bottom: 20px;
      border-bottom: 1px solid #dcdfe6;
      .active-title-left {
        width: calc(100% - 380px);
      }
    }
    .in-progress-active-body {
      padding: 20px 0;
    }
  }
}
</style>
