<template>
<section class="dm-wrap">
    <div class="pb22 clearfix">
      <el-input v-model="listParams.giftName" class="w300" placeholder="请输入礼品名称" clearable @change="getPageGiftList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-button class="fr" type="primary"  @click="$router.push('/mall/gift/info')">新增礼品</el-button>
    </div>
    <div class="filter--box">
      <el-select class="vertical-middle w150 pl10" v-model="listParams.category" placeholder="选择分类" @change="getPageGiftList">
        <el-option v-for="v in categoryOptions" :key="v.integralMallCategoryId" :label="v.categoryName" :value="v.integralMallCategoryId"></el-option>
      </el-select>
      <el-select class="vertical-middle w150" v-model="listParams.changeType" placeholder="选择兑换方式" @change="getPageGiftList">
        <el-option v-for="v in changeTypeOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-select class="vertical-middle w150" v-model="listParams.releaseType" placeholder="选择兑换状态" @change="getPageGiftList">
        <el-option v-for="v in releaseTypeOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-select class="vertical-middle w150" v-model="listParams.showStatus" placeholder="选择显示状态" @change="getPageGiftList">
        <el-option v-for="v in showStatusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-checkbox class="vertical-middle" size="small" border  :true-label="1" :false-label="0" v-model="listParams.proHot" @change="getPageGiftList">只看热门推荐</el-checkbox>
    </div>
  <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading" @sort-change="sortList">
    <el-table-column :show-overflow-tooltip="false" width="90" align="left"  prop="proHot" fixed="left" label="热门推荐">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.proHot"
          :active-value="1"
          :inactive-value="0" @change="changeHotFun(scope.row)">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column label="礼品信息" align="left" prop="proName" min-width="140">
      <template slot-scope="scope">
          <div class="ellipsis-100" >
              <img class="vertical-middle table__avatar--40" :src="scope.row.mainImageUrl || defaultAvatar" width="60" height="60" />
              <div class="inline-block vertical-middle">
                  <p class="table-name--ellipsis">{{scope.row.proName || '--'}}</p>
                  <p class="fz13 gray">{{scope.row.giftCategoryName || '--'}}</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="getPageGiftList"></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="getPageGiftList"></updateCount>
      </template>
    </el-table-column>
    <el-table-column label="库存" align="left" prop="sortCost" width="180" sortable="custom">
      <template slot-scope="scope">
          <updateCount :model="scope.row" theType="virtualStock" @refresh="getPageGiftList"></updateCount>
      </template>
    </el-table-column>
    <el-table-column label="兑换次数" align="left" prop="sortTimes" width="100" sortable="custom">
      <template slot-scope="scope">
        <span v-if="scope.row.changeType == 1" @click="$router.push('/mall/gift/wxexchange/'+scope.row.integralMallProId)" class="blue">{{scope.row.allExchangeNumber}}</span>
        <span v-else @click="$router.push('/mall/gift/exchange/'+scope.row.integralMallProId)" class="blue">{{scope.row.allExchangeNumber}}</span>
      </template>
    </el-table-column>
    <el-table-column label="兑换方式" align="left" prop="changeType" width="80">
      <template slot-scope="scope" >
        <span v-if="scope.row.changeType == 1">微信兑换</span>
        <span v-if="scope.row.changeType == 2">快递发货</span>
        <span v-if="scope.row.changeType == 3">在线发货</span>
      </template>
    </el-table-column>
    <el-table-column label="兑换状态" align="left" prop="status" width="100px">
      <template slot-scope="scope" >
        <span>{{statusFilter(scope.row.status)}}</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" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="$router.push('/mall/gift/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 { getPageGiftList, getCategoryList, deleteProService ,setHotStatusService} from '@/service/api/mallApi.js';
import updateCount from '../common/update-count';
import {formateDateTimeByType} from '@/utils/index.js';
export default {
    name: 'coupon-list',
    components: {
      updateCount
    },
    computed:{

    },
    data () {
      return {
        defaultAvatar:require('../../../assets/img/head_default.png'),
        loading:false,
        tableList:[],
        listParams:{
            currentPage:1,
            pageSize:20,
            category:'',
            changeType:-1,
            releaseType:-1,
            showStatus:-1,
            proHot:'-1',
            giftName:'',
            sortType:'',
            sortColumn:'',
        },
        total:0,
        categoryOptions:[],
        releaseTypeOptions:[{label:'所有兑换状态',value:-1},{label:'不可兑换',value:0},{label:'兑换',value:1},{label:'已发货',value:3},{label:'待付款',value:11}],
        changeTypeOptions:[{label:'所有兑换方式',value:-1},{label:'微信兑换',value:1},{label:'快递发货',value:2},{label:'在线发货',value:3}],
        showStatusOptions:[{label:'所有显示状态',value:-1},{label:'显示',value:1},{label:'不显示',value:2}],
      }
    },
    created() {
      this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'礼品',path:''}]);
      this.getPageGiftList();
      this.getCategoryList();
    },
    methods: {
      // 获取分类列表
      async getCategoryList() {
        let res = await getCategoryList();
        if (res.errorCode === 0) {
          this.categoryOptions = res.result || [];
          this.categoryOptions.unshift({categoryName:'所有分类',integralMallCategoryId:''})
        }
      },
      // 列表的方法
      search() {
        this.listParams.currentPage = 1;
        this.getPageGiftList();
      },
      handleSizeChange(val) {
          this.listParams.pageSize = val;
          this.getPageGiftList();
      },
      handleCurrentChange(val) {
          this.listParams.currentPage = val;
          this.getPageGiftList();
      },
      async getPageGiftList() {
        this.loading = true;
        let res = await getPageGiftList(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 => {
          if (res.errorCode === 0) {
            this.$tips({type: 'success',message: '删除成功!'});
            this.getPageGiftList();
          } else {
            this.$tips({type: 'error',message: '删除失败!'});
          }
        }).catch(err => {
          this.$tips({type: 'error',message: '删除失败!'});
        })
      },
      // 热门推荐
      changeHotFun(row) {
        setHotStatusService({status:Number(row.proHot),integralMallProId:row.integralMallProId}).then(res => {
          if (res.errorCode === 0) {
            this.$tips({type: 'success',message: '设置成功!'});
            this.getPageGiftList();
          } else {
            this.$tips({type: 'error',message: '设置失败!'});
          }
        }).catch(err => {
          this.$tips({type: 'error',message: '删除失败!'});
        })
      },
      statusFilter(val) {
        let result = '--';
        this.releaseTypeOptions.map(v => {
          if (v.value ===  val) {
            result = v.label;
          }
        });
        return result;
      },
      //列表 排序
      sortList(obj) {
        this.listParams.sortColumn =  obj.prop;
        this.listParams.sortType = obj.order ? (obj.order === 'descending' ? 'desc' : 'asc') : '';
        this.getPageGiftList();
      }
    }
}
</script>


