<template>
<section class="dm-wrap">
    <div class="pb22 clearfix">
        <el-button class="fr" type="primary"  @click="$router.push('/mall/coupon/info')">新增优惠券</el-button>
    </div>
  <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
    <el-table-column label="商品" align="left" prop="timesStatus" min-width="140">
      <template slot-scope="scope">
        <div class="ellipsis-100" >
          <img class="vertical-middle table__avatar--40" :src="filterAvatar(scope.row.cardType)" width="60" height="60" />
          <div class="inline-block vertical-middle">
              <p class="table-name--ellipsis">{{scope.row.proTitle || '--'}}</p>
              <p class="fz13 gray">{{scope.row.proSubTitle || '--'}}</p>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="积分费用" align="left" prop="integralCost" width="180">
      <template slot-scope="scope">
        <updateCount :model="scope.row" theType="integralCost" typeName="积分" @refresh="getPageCardsList"></updateCount>
      </template>
    </el-table-column>
    <el-table-column label="现金费用" align="left" prop="cashCost" width="180">
      <template slot-scope="scope">
          <updateCount :model="scope.row" theType="cashCost" typeName="元" @refresh="getPageCardsList"></updateCount>
      </template>
    </el-table-column>
    <el-table-column label="库存" align="left" prop="virtualStock" width="180">
      <template slot-scope="scope">
          <updateCount :model="scope.row" theType="virtualStock" @refresh="getPageCardsList"></updateCount>
      </template>
    </el-table-column>
    <el-table-column label="兑换次数" align="left" prop="allExchangeNumber" width="80">
      <template slot-scope="scope">
        <span @click="$router.push('/mall/coupon/exchange/'+scope.row.integralMallProId)" class="blue">{{scope.row.allExchangeNumber}}</span>
      </template>
    </el-table-column>
    <el-table-column label="状态" align="left" prop="status" width="80px">
      <template slot-scope="scope" >
        <span v-if="scope.row.status == 0" class="dm-status--error">删除</span>
        <span v-if="scope.row.status == 1" class="dm-status--primary">正常</span>
        <span v-if="scope.row.status == 2" class="dm-status--warning">上架</span>
      </template>
    </el-table-column>
    <el-table-column label="显示状态" align="left" prop="proShowStatus" width="120">
      <template slot-scope="scope" >
        <span v-if="scope.row.proShowStatus == 1">上架状态就显示</span>
        <span v-if="scope.row.proShowStatus == 2">兑换状态下显示</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="left" width="140px">
        <template slot-scope="scope">
          <el-button type="text" @click="$router.push('/mall/coupon/info/'+scope.row.integralMallProId)">编辑</el-button>
          <dm-delete @confirm="delData(scope.row)" tips="是否删除该优惠券?">
            <el-button type="text">删除</el-button>
          </dm-delete>
        </template>
    </el-table-column>
  </el-table>
  <el-pagination v-show="tableList.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 { getPageCardsList, deleteProService } from '@/service/api/mallApi.js';
import updateCount from '../common/update-count';
import {formateDateTimeByType} from '@/utils/index.js';
export default {
    name: 'coupon-list',
    components: {
      updateCount
    },
    data () {
      return {
        defaultAvatar:require('../../../assets/img/head_default.png'),
        daijinAvatar:require('../../../assets/img/credit_daijin_icon.png'),
        zhekouAvatar:require('../../../assets/img/credit_zhekou_icon.png'),
        duihuanAvatar:require('../../../assets/img/head_default.png'),
        loading:false,
        tableList:[],
        listParams:{
            currentPage:1,
            pageSize:20
        },
        total:0
      }
    },
    created() {
      this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'优惠券',path:''}]);
      this.getPageCardsList();
    },
    methods: {
      filterAvatar(val){
        return (val === 0 ? this.daijinAvatar : (val === 1 ? this.zhekouAvatar: this.duihuanAvatar));
      },
      search() {
        this.listParams.currentPage = 1;
        this.getPageCardsList();
      },
      handleSizeChange(val) {
          this.listParams.pageSize = val;
          this.getPageCardsList();
      },
      handleCurrentChange(val) {
          this.listParams.currentPage = val;
          this.getPageCardsList();
      },
      async getPageCardsList() {
        this.loading = true;
        let res = await getPageCardsList(this.listParams);
        this.tableList = [];
        let result =  res.result.rows || [];
        result.map(v => {
          v.integralCostFlag = false;
          v.cashCostFlag = false;
          v.virtualStockFlag = false;
          v.allExchangeNumberFlag = false;
          this.tableList.push(v);
        })
        this.total = res.result.total;
        this.loading = false;
      },
      // 删除
      delData(row) {
        deleteProService({proId:row.integralMallProId}).then(res => {
          this.$tips({type: 'success',message: '删除成功!'});
          this.getPageCardsList();
        }).catch(err => {
          this.$tips({type: 'error',message: '删除失败!'});
        })
      }
    }
}
</script>


