<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-13 16:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-17 10:37:46
 -->
<!--
<will-start-active></will-start-active>

import willStartActive from '@/components/active/will-start-active.vue';
-->

<template>
  <div class="start-active border-box">
    <ul>
      <template v-for="(item, index) in startData">
        <li :class="['border-box', selectItem == item.activityId && index != 0 ? 'li-border' : '']" :key="index + 'data'">
          <div class="start-active-title flex flex-space-between border-box" @click.stop="selectLi(item)">
            <div class="active-title-left">
              <div class="active-title-name font-18 color-303133 font-w-700">{{ item.activityName }}</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 type="primary" plain @click="toEdit(index, item)">活动配置</el-button>
              <!-- <el-button
                type="primary"
                plain
                @click="handleCopy(index, item)"
              >复制路径</el-button> -->
              <el-button type="primary" plain @click="toDataList(index, item)">数据明细</el-button>
              <el-button type="primary" plain @click="toDelList(index, item)">删除</el-button>
            </div>
          </div>
          <div v-if="selectItem == item.activityId" class="start-active-body">
            <out-date-active :barChartData="barChartData" :funnelData="funnelData"></out-date-active>
          </div>
        </li>
      </template>
    </ul>
    <div class="pagination text-right m-t-14" v-if="startData.length">
      <dm-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </dm-pagination>
    </div>
  </div>
</template>
<script>
import outDateActive from '@/components/active/out-date-active.vue';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
  name: 'start-active',
  components: {
    outDateActive
  },
  data() {
    return {
      funnelData: [],
      barChartData: {
        columns: ['日期', '访问用户', '下单用户'],
        rows: [{ 日期: '1/1', 访问用户: 1393, 下单用户: 1093 }, { 日期: '1/2', 访问用户: 3530, 下单用户: 3230 }, { 日期: '1/3', 访问用户: 2923, 下单用户: 2623 }, { 日期: '1/4', 访问用户: 1723, 下单用户: 1423 }, { 日期: '1/5', 访问用户: 3192, 下单用户: 3192 }, { 日期: '1/6', 访问用户: 3593, 下单用户: 3293 }]
      },
      selectItem: '',
      startData: [
        /* {
          activityId: 1,
          activityName: '1',
          startDate: 1574300553953,
          endDate: 1574300553953
        } */
      ],
      // 分页
      pageSize: 20,
      currentPage: 1,
      total: 1
    };
  },
  methods: {
    /**
     * 选择 li
     */
    selectLi(item) {
      const that = this;
      that.selectItem = item.activityId;
      that.getActivityData(item.activityId);
    },
    /**
     * 获取单个活动数据信息
     * /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: 1000,
            message: error.message
          });
        });
    },
    /**
     * 活动配置
     */
    toEdit(index, row) {
      const that = this;
      that.$router.push(`/createActive?activityId=${row.activityId}`);
    },
    /**
     * 数据明细
     */
    toDataList(index, row) {
      const that = this;
      that.$router.push(`/dataDetail?activityId=${row.activityId}`);
    },
    /**
     *  分页
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableList();
    },

    /**
     * 删除
     */
    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;
            that.getTableList();
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取列表数据
     */
    getTableList() {
      const that = this;
      let para = {
        pageNum: that.currentPage,
        pageSize: that.pageSize,
        type: 2
      };
      getRequest('/sharing-core-web/page-activity', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.startData = resData.result.result || [];
            that.total = 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;
}
.start-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;
    }
    .start-active-title {
      padding: 20px 0;
      border-bottom: 1px solid #dcdfe6;
    }
    .start-active-body {
      padding: 20px 0;
    }
  }
}
</style>
