<template>
  <div class="logs">
    <div class="search-bar">
      <el-date-picker @change="handleCurrentChange(1)" class="search-date" v-model="search.dateRange" value-format="yyyy-MM-dd" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      <el-button type="primary" :disabled="total == 0" @click="handleExportData"><i class="iconfont icon-xiazai" style="margin-right: 10px"></i>批量导出</el-button>
    </div>
    <el-table :data="tableData" v-loading="loading" tooltipEffect="light" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="活动名称" prop="activityName" min-width="330px" show-overflow-tooltip></el-table-column>
      <el-table-column label="未执行人" prop="totalCount" min-width="240px" :formatter="(row, col, val) => val || 0"></el-table-column>
      <el-table-column label="未执行原因" prop="execRemark" min-width="260px" show-overflow-tooltip :formatter="(row, col, val) => val || '--'"></el-table-column>
      <el-table-column label="批次时间" prop="createTime" min-width="240px" :formatter="(row, col, val) => (val ? formatDateTimeByType(val) : '--')"></el-table-column>
    </el-table>
    <dm-pagination v-show="total > 0" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="search.pageNum" :page-size="search.pageSize" :total="total" :page-sizes="[20, 40, 60, 80]" layout="total, sizes, prev, pager, next"> </dm-pagination>
    <vue-gic-export-excel :dialogVisible.sync="dialogVisible" :dataArr="tableData" :params="exportData" type="2" excelUrl="/api-marketing/export-ai-member-log" projectName="marketing"></vue-gic-export-excel>
  </div>
</template>

<script>
import { getLogs } from '@/service/api/aiApi.js';
import { formatDateTimeByType } from '@/utils/index.js';

export default {
  name: 'LogsUnrun',
  data() {
    return {
      formatDateTimeByType,
      search: {
        activityId: '', // 活动ID
        dateRange: [],
        type: 2, // 1：提交执行 2：未执行
        pageNum: 1,
        pageSize: 20
      },
      loading: false,
      total: 0,
      tableData: [],
      dialogVisible: false,
      exportData: {
        activityName: '', // 营销活动名称
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        dataType: '', // 1:脱敏 2：完整
        logIdList: []
      }
    };
  },
  created() {
    const { activityName, startTime, endTime } = this.$route.query;
    this.search.activityId = this.$route.params.id;
    this.search.dateRange = [this.formatDateTimeByType(Number(startTime), 'yyyy-MM-dd'), this.formatDateTimeByType(Number(endTime), 'yyyy-MM-dd')];
    this.exportData.activityName = activityName;

    this.getData();
  },
  methods: {
    getData() {
      const { activityId, dateRange, type, pageNum, pageSize } = this.search;
      const params = { activityId, type, pageNum, pageSize };
      params.startTime = '';
      params.endTime = '';
      if (Array.isArray(dateRange)) {
        params.startTime = dateRange[0] || '';
        params.endTime = dateRange[1] || '';
      }
      this.loading = true;
      getLogs(params)
        .then(res => {
          const { result, totalCount } = res.result || {};
          this.tableData = result;
          this.total = totalCount;
        })
        .finally(() => (this.loading = false));
    },
    handleCurrentChange(currentPage) {
      this.search.pageNum = currentPage;
      this.getData();
    },
    handleSizeChange(pageSize) {
      this.search.pageSize = pageSize;
      this.handleCurrentChange(1);
    },
    handleExportData() {
      if (this.exportData.logIdList.length == 0) {
        return this.$message.warning('请选择要导出的数据');
      }
      this.dialogVisible = true;
      if (Array.isArray(this.search.dateRange)) {
        this.exportData.startTime = this.search.dateRange[0];
        this.exportData.endTime = this.search.dateRange[1];
      }
    },
    handleSelectionChange(val) {
      this.exportData.logIdList = val.map(v => v.planId).join(',');
    }
  }
};
</script>

<style lang="scss" scoped>
.logs {
  padding: 0 20px 20px;
}
.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .search-date {
    width: 256px;
  }
}
</style>
