<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-12 10:59:45
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-18 18:23:39
 -->
<template>
  <div class="share-index common-wrap">
    <div class="right-content border-box">
      <div class="right-box border-box">
        <data-statistics-child :barChartData="barChartData"></data-statistics-child>
        <funnel-chart :funnelData="funnelData"></funnel-chart>
        <bar-chart
          :barChartData="barChartData"
          :charHeight="charHeight"
        ></bar-chart>
        <data-statistics
          :barChartData="barChartData"
          :funnelData="funnelData"
        ></data-statistics>
        <out-date-active
          :barChartData="barChartData"
          :funnelData="funnelData"
        ></out-date-active>
        <div class="separator-space">- 以下为已结束活动 - </div>
        <div class="finished-active border-box">
          <ul>
            <template v-for="(item, index) in finishedData">
              <li
                :class="[selectItem]"
                @click.stop="selectLi(item)"
                :key="index+'data'"
              >
                <div class="finished-active-title flex flex-space-between">
                  <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-5">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
                  v-if="selectItem == item.id"
                  class="finished-active-body"
                >
                  <out-date-active
                    :barChartData="barChartData"
                    :funnelData="funnelData"
                  ></out-date-active>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import outDateActive from '@/components/active/out-date-active.vue';
import dataStatisticsChild from '@/components/active/data-statistics-child.vue';
import dataStatistics from '@/components/active/data-statistics.vue';
import barChart from '@/components/active/bar-chart.vue';
import funnelChart from '@/components/active/funnel-chart.vue';
import Clipboard from 'clipboard';
import showMsg from '@/common/js/showmsg';
export default {
  name: 'share-index',
  components: {
    outDateActive,
    funnelChart,
    barChart,
    dataStatistics,
    dataStatisticsChild
  },
  data() {
    return {
      charHeight: '239px',
      funnelData: [],
      barChartData: {
        columns: ['日期', '访问用户', '下单用户', '传播系数'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '传播系数': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '传播系数': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '传播系数': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '传播系数': 0.49 },
          { '日期': '1/5', '访问用户': 3192, '下单用户': 3192, '传播系数': 0.323 },
          { '日期': '1/6', '访问用户': 3593, '下单用户': 3293, '传播系数': 0.78 }
        ]
      },
      selectItem: '',
      finishedData: [
        {
          id: 1,

        },
        {
          id: 2,

        }
      ]
    }
  },
  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();
      });
    },
  },
}
</script>
<style lang="less" scoped>
.share-index {
  .separator-space {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 14px;
    color: #909399;
  }
  // 结束活动
  .finished-active {
    width: 100%;
    padding: 0 42px 48px 46px;
    background: #fff;
    li {
      &.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);
      }
    }
    .finished-active-title {
      padding: 27px 0 20px 0;
      border-bottom: 1px solid #dcdfe6;
    }
    .finished-active-body {
      padding: 20px 0;
    }
  }
}
</style>
