<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-select @change="handleCurrentChange(1)" v-model="search.status" clearable class="search-select">
        <el-option v-for="(item, key) in statusMap" :key="key" :value="key" :label="item"></el-option>
      </el-select>
    </div>
    <el-table :data="tableData" v-loading="loading" tooltipEffect="light">
      <el-table-column label="活动名称" prop="activityName" min-width="273px" show-overflow-tooltip></el-table-column>
      <el-table-column label="营销人数" prop="totalCount" min-width="116px" :formatter="(row, col, val) => val || 0"></el-table-column>
      <el-table-column label="已外呼数" prop="successCount" min-width="116px" :formatter="(row, col, val) => val || 0"></el-table-column>
      <el-table-column label="接通数" prop="backSuccessCount" min-width="102px" :formatter="(row, col, val) => val || 0"></el-table-column>
      <el-table-column label="接通率" prop="connectionRate" min-width="102px" :formatter="(row, col, val) => val || '0.00%'"></el-table-column>
      <el-table-column label="接通意向率" prop="connectionPurposeRate" min-width="130px" :formatter="(row, col, val) => val || '0.00%'"></el-table-column>
      <el-table-column label="执行状态" prop="execStatus" min-width="116px">
        <template slot-scope="{ row }">
          <span>
            <i
              :class="{
                'dm-status--info': row.status == 1,
                'dm-status--primary--flash': row.status == 2,
                'dm-status--error': row.status == 3,
                'dm-status--success': row.status == 4,
                'dm-status--warning': row.status == 5
              }"
            ></i>
            {{ statusMap[row.status] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="批次时间" prop="createTime" min-width="190px" :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>
  </div>
</template>

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

export default {
  name: 'LogsRuned',
  data() {
    return {
      formatDateTimeByType,
      statusMap: {
        1: '未开始执行',
        2: '执行中',
        3: '已终止',
        4: '已完成',
        5: '欠费暂停'
      },
      search: {
        activityId: '', // 活动ID
        dateRange: [],
        status: '', // 状态1未开始执行2执行中3已终止4已完成5欠费暂停
        type: 1, // 1：提交执行 2：未执行
        pageNum: 1,
        pageSize: 20
      },
      loading: false,
      total: 0,
      tableData: []
    };
  },
  created() {
    const { 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.getData();
  },
  methods: {
    getData() {
      const { activityId, dateRange, status, type, pageNum, pageSize } = this.search;
      const params = { activityId, status, 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);
    }
  }
};
</script>

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