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

import inProgressActive from '@/components/active/in-progress-active.vue';
-->

<template>
  <div class="in-progress-active border-box">
    <ul>
      <template v-for="(item, index) in inProgressData">
        <li :class="['border-box', selectItem == item.id && index != 0 ? 'li-border' : '']" @click.stop="selectLi(item)" :key="index + 'data'">
          <div class="in-progress-active-title flex flex-space-between border-box">
            <div class="active-title-left">
              <div class="active-title-name font-18 color-303133">活动名称活动名称活动名称活动名称活动名称活动名称</div>
              <div class="active-title-date font-14 color-909399 m-t-7">2019.10.01 12:00 - 2019.10.02 12:00</div>
            </div>
            <div class="active-title-right">
              <el-button type="primary" plain>活动配置</el-button>
              <el-button type="primary" plain @click="handleCopy(index, item)">复制路径</el-button>
              <el-button type="primary" plain>数据明细</el-button>
            </div>
          </div>
          <div class="in-progress-active-body">
            <out-date-active :barChartData="barChartData" :funnelData="funnelData"></out-date-active>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>
<script>
import outDateActive from '@/components/active/out-date-active.vue';
import Clipboard from 'clipboard';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
  name: 'in-progress-active',
  components: {
    outDateActive
  },
  data() {
    return {
      funnelData: [],
      barChartData: {
        columns: ['日期', '新增参与人数', '新增受邀人数', '传播系数'],
        rows: [{ 日期: '1', 新增参与人数: 1393, 新增受邀人数: 1093, 传播系数: 0.32 }, { 日期: '2', 新增参与人数: 3530, 新增受邀人数: 3230, 传播系数: 0.26 }, { 日期: '3', 新增参与人数: 2923, 新增受邀人数: 2623, 传播系数: 0.76 }, { 日期: '4', 新增参与人数: 1723, 新增受邀人数: 1423, 传播系数: 0.49 }, { 日期: '5', 新增参与人数: 3192, 新增受邀人数: 3192, 传播系数: 0.323 }, { 日期: '6', 新增参与人数: 3593, 新增受邀人数: 3293, 传播系数: 0.78 }]
      },
      selectItem: '',
      inProgressData: [
        {
          id: 1
        }
      ]
    };
  },
  methods: {
    /**
     * 选择 li
     */
    selectLi(item) {
      const that = this;
      that.selectItem = item.id;
    },
    /**
     * 复制路径
     */
    handleCopy(index, row) {
      let clipboard = new Clipboard('.copy-tag', {
        text: function() {
          return `${window.location.origin}/?articleId=${row.articleId}`;
        }
      });
      clipboard.on('success', e => {
        showMsg.showmsg('复制成功!', 'success');
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on('error', e => {
        // 不支持复制
        showMsg.showmsg('该浏览器不支持自动复制!', 'warning');
        // 释放内存
        clipboard.destroy();
      });
    },

    /**
     * 获取列表数据
     */
    getTableList() {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/page-activity', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.inProgressData = resData.result.result || [];
            that.totalCount = resData.result.totalCount;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  mounted() {
    const that = this;
    that.getTableList();
  }
};
</script>
<style lang="less" scoped>
.m-t-7 {
  margin-top: 7px;
}
.in-progress-active {
  width: 100%;
  padding: 0 20px 48px 20px;
  background: #fff;
  li {
    // height: 90px;
    padding: 0 20px;
    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 {
      padding: 27px 0 20px 0;
      border-bottom: 1px solid #dcdfe6;
    }
    .in-progress-active-body {
      padding: 20px 0;
    }
  }
}
</style>
