<template>
<section>
    <div class="pb22">
      <el-input class="w300" v-model="listParams.search"  placeholder="输入卡券名称/备注名/活动名" @change="search"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
    </div>
    <el-table tooltipEffect="light" :data="recordList" style="width: 100%" v-loading="loading">
        <el-table-column width="160" align="left" prop="putonTime" label="投放时间"  fixed="left">
          <template slot-scope="scope">
              {{formateDateTimeByType(scope.row.putonTime,'yyyy-MM-dd-HH-mm')}}
          </template>
        </el-table-column>
        <el-table-column width="150" align="left" prop="cardName" label="卡券名称">
          <template slot-scope="scope">
            <p style="line-height:22px;">{{scope.row.cardName}}</p>
            <p class="fz13 gray" style="line-height:20px;">{{scope.row.subName}}</p>
          </template>
        </el-table-column>
        <el-table-column v-for="(v,i) in recordHeader" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter"></el-table-column>
        <el-table-column width="150" align="left" prop="cardName" label="状态">
          <template slot-scope="scope">
            <span :class="'dm-status--' + filterStatus(scope.row.putonStatus).type">{{filterStatus(scope.row.putonStatus).label}}</span>
            <div v-if="scope.row.putonStatus === 1">
              <time-counts class="primary-color fz12" :defaultVal="scope.row.putonTime" :autoStart="true"></time-counts>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="150px" fixed="right">
            <template slot-scope="scope" >
              <el-button type="text" v-if="scope.row.putonStatus === 2 || scope.row.putonStatus === 3"  @click="queryData(scope.row)">详情</el-button>
              <el-button type="text" v-if="scope.row.putonStatus !== 2 && scope.row.putonStatus !== 3"  @click="editData(scope.row)">编辑</el-button>
              <dm-delete v-if="scope.row.putonStatus !== 2" @confirm="delData(scope.row)" tips="是否删除该投放记录?">
                <el-button type="text">删除</el-button>
              </dm-delete>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-show="recordList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
</section>
</template>
<script>
import {cardRecordPage,deleteCardPuton} from '@/service/api/cardApi.js';
import {formateDateTimeByType} from '@/utils/index.js'
import  timeCounts from '@/components/timeCount/index.vue'
export default {
  name: 'record-send',
  components:{
    timeCounts
  },
  data () {
      return {
        formateDateTimeByType,
        loading:false,
        recordList:[],
        recordHeader:[
            {label:'活动名称',prop:'putonName',minWidth:'150', tooltip:true,align:'left'},
            {label:'投放人数',prop:'issuingQuantity',width:'80',align:'left'},
            {label:'领取数量',prop:'getedQuantity',width:'80',align:'left'},
            {label:'领取率',prop:'getedQuantity',width:'80',align:'left', formatter(row) {
              return ((row.getedQuantity) * 100/ (row.issuingQuantity === 0 ? 1 : row.issuingQuantity)).toFixed(2) + '%'
            }},
            {label:'使用数量',prop:'usageQuantity',width:'80',align:'left'},
            {label:'核销率',prop:'usageQuantity',width:'80',align:'left', formatter(row) {
              return ((row.usageQuantity) * 100/ (row.getedQuantity === 0 ? 1 : row.getedQuantity)).toFixed(2) + '%'
            }},
            {label:'销售额',prop:'saleAmount',width:'80',align:'left'}
        ],
        listParams:{
            beginTime:'',
            endTime:'',
            cardStatus:'',
            recordType:0,
            search:'',
            currentPage:1,
            pageSize:20
        },
        total:0,
      }
  },
  created() {
    this.cardRecordPage();
    this.$store.commit('mutations_breadcrumb',[{name:'营销管理',path:''},{name:'卡券营销',path:'/card'},{name:'卡券记录',path:'/card/record'},{name:'投放记录',path:''}])
  },
  methods: {
    // 列表方法
    search() {
      this.listParams.currentPage = 1;
      this.cardRecordPage();
    },
    handleSizeChange(val) {
        this.listParams.pageSize = val;
        this.cardRecordPage();
    },
    handleCurrentChange(val) {
        this.listParams.currentPage = val;
        this.cardRecordPage();
    },
    //获取列表
    async cardRecordPage() {
        this.loading = true;
        let res = await cardRecordPage(this.listParams);
        console.log(res)
        this.recordList = res.result.result;
        this.total = res.result.totalCount;
        this.loading = false;
    },
    //发送记录操作--查看数据
    queryData(row){
      this.$router.push('/card/groupinfo/'+row.putonId)
    },
    //发送记录操作: 删除
    delData(row) {
      deleteCardPuton({putonId:row.putonId}).then(res => {
        this.$tips({type: 'success',message: '删除成功!'});
        this.cardRecordPage();
      }).catch(err => {
        this.$tips({type: 'error',message: '删除失败!'});
      })
    },
    //发送记录操作: 编辑
    editData(row) {
      this.$router.push('/card/groupsend/'+row.putonId)
    },
    filterStatus(val) {
      let result = {label:'执行错误',type:'danger'};
      switch(val) {
        case 1:
          result = {label:'待发送',type:'warning'};
        break;
        case 2:
          result = {label:'正在发送',type:'primary--flash'};
        break;
        case 3:
          result = {label:'已发送',type:'success'};
        break;
        case 4:
          result = {label:'无接收人',type:'info'};
        break;
        case 5:
          result = {label:'库存不足',type:'info'};
        break;
        default:
          result = {label:'投放错误',type:'danger'};
        break;
      }
      return result;
    }
  },
}
</script>


