<template>
<section class="dm-wrap">
  <!-- <el-input type="textarea" rows="4"></el-input> -->
  <div class="pb22 clearfix">
    <el-date-picker class="w250" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getPageUndeliverList"></el-date-picker>
    <el-select class="vertical-middle w150" v-model="listParams.changeType" placeholder="选择发货类型" @change="getPageUndeliverList">
        <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.orderStatus" placeholder="选择订单状态" @change="getPageUndeliverList">
      <el-option v-for="v in orderStatusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
    </el-select>
    <el-input v-model="listParams.searchParams" class="w300" placeholder="请输入流水号/会员姓名/会员卡号" clearable @change="getPageUndeliverList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
    <el-button class="fr" type="primary"  @click="exportExcel">导出列表</el-button>
  </div>
  <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
    <el-table-column label="礼品信息" align="left" prop="giftName" min-width="140">
      <template slot-scope="scope">
        <div class="ellipsis-100" >
            <img class="vertical-middle table__avatar--40" :src="scope.row.giftMainPic || defaultAvatar" width="60" height="60" />
            <div class="inline-block vertical-middle">
                <p class="table-name--ellipsis">{{scope.row.giftName || '--'}}</p>
                <p class="fz13 gray">{{scope.row.giftCategoryName || '--'}}</p>
            </div>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="兑换时间" align="left" prop="createTime" width="170px">
      <template slot-scope="scope" >
        <span>{{formateDateTimeByType(scope.row.createTime,'yyyy-MM-dd-HH-mm-ss')}}</span>
      </template>
    </el-table-column>
    <el-table-column label="流水号" align="left" prop="definedCode" width="150px"></el-table-column>
    <el-table-column label="发货类型" align="left" prop="changeType" width="80">
      <template slot-scope="scope" >
        <span v-if="scope.row.changeType == 2">快递发货</span>
        <span v-else-if="scope.row.changeType == 3">在线发货</span>
        <span v-else>--</span>
      </template>
    </el-table-column>
    <el-table-column label="会员信息" align="left" prop="changeType" min-width="180">
      <template slot-scope="scope" >
        <a :href="'/member/#/wechatmemberDetail?memberId='+scope.row.memberId" target="_blank">
          <img class="vertical-middle table__avatar--40" :src="scope.row.memberImgUrl || defaultAvatar" width="60" height="60" alt="" srcset="">
          <div class="inline-block vertical-middle">
            <p class="table-name--ellipsis">{{scope.row.memberName || '--'}}</p>
            <p class="table-name--ellipsis fz13">{{scope.row.cardNum || '--'}}</p>
          </div>
        </a>
      </template>
    </el-table-column>
    <el-table-column label="消耗积分" align="left" prop="status" width="100px">
      <template slot-scope="scope" >
        <p>{{scope.row.unitCostIntegral}}</p>
        <p>{{scope.row.payCost}}</p>
      </template>
    </el-table-column>
    <el-table-column label="微信支付流水号" align="left" prop="proShowStatus" width="150">
      <template slot-scope="scope" >
        <span>{{scope.row.definedCode || '--'}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="left" width="140px" fixed="right">
        <template slot-scope="scope">
          <p>
            <el-button type="text" v-if="scope.row.status === 1" @click="sendOrder(scope.row)">发货</el-button>
            <span v-else-if="scope.row.status === 3">已发货</span>
            <span v-else-if="scope.row.status === 0">已取消</span>
            <span v-else-if="scope.row.status === 11">待付款</span>
            <span v-else>--</span>
          </p>
          <p>
            <el-button type="text" v-if="scope.row.status === 1" @click="cancelOrder(scope.row)">取消订单</el-button>
            <el-button type="text" v-if="scope.row.status === 3" @click="queryExpress(scope.row)">查看物流</el-button>
            <el-button type="text" v-if="scope.row.status === 0">查看详情</el-button>
          </p>
        </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>
  <express :show.sync="expressShow" :id="expressId"></express>
  <sendGoods :show.sync="sendGoodsShow" :id="expressId" @refresh="refresh"></sendGoods>
</section>
</template>
<script>
import { getPageUndeliverList,orderOptService,exportOnlineListExcel } from '@/service/api/mallApi.js';
import {formateDateTimeByType} from '@/utils/index.js';
import express from '../common/express';
import sendGoods from './send-goods';
export default {
    name: 'goods-list',
    components: {
      express,
      sendGoods
    },
    data () {
      return {
        formateDateTimeByType,
        defaultAvatar:require('../../../assets/img/head_default.png'),
        loading:false,
        tableList:[],
        listParams:{
            currentPage:1,
            pageSize:20,
            changeType:-1,
            orderStatus:-1,
            searchParams:'',
            beginTime:'',
            endTime:'',
        },
        total:0,
        changeTypeOptions:[{label:'所有发货类型',value:-1},{label:'快递发货',value:2},{label:'在线发货',value:3}],
        orderStatusOptions:[{label:'所有订单状态',value:-1},{label:'待发货',value:1},{label:'已发货',value:3},{label:'已取消',value:0},{label:'待付款',value:11}],
        textareaValue:'',
        expressShow:false,
        sendGoodsShow:false,
        expressId:'',
        dateTime:['','']
      }
    },
    created() {
      this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'待发货',path:''}]);
      this.getPageUndeliverList();
    },
    methods: {
      // 列表的方法
      refresh() {
        $bus.$emit('refresh-not-send-count');
        this.getPageUndeliverList();
      },
      search() {
        this.listParams.currentPage = 1;
        this.getPageUndeliverList();
      },
      handleSizeChange(val) {
          this.listParams.pageSize = val;
          this.getPageUndeliverList();
      },
      handleCurrentChange(val) {
          this.listParams.currentPage = val;
          this.getPageUndeliverList();
      },
      async getPageUndeliverList() {
        if (this.dateTime) {
          this.listParams.beginTime = formateDateTimeByType(this.dateTime[0],'yyyy-MM-dd');
          this.listParams.endTime = formateDateTimeByType(this.dateTime[1],'yyyy-MM-dd');
        } else {
          this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
        }
        this.loading = true;
        let res = await getPageUndeliverList(this.listParams);
        this.tableList =  res.result.rows || [];
        this.total = res.result.total || 0;
        this.loading = false;
      },

      // 删除
      delData(row) {
        deleteProService({proId:row.integralMallProId}).then(res => {
          this.$tips({type: 'success',message: '删除成功!'});
          this.getPageUndeliverList();
        }).catch(err => {
          this.$tips({type: 'error',message: '删除失败!'});
        })
      },
      // 取消订单
      cancelOrder(row) {
        this.$prompt(`
        <p>确认取消订单吗？</p><p>积分将会实时返回给会员。相应礼品的库存会归还</p>
        `, '取消订单', {
          dangerouslyUseHTMLString: true,
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType:'textarea',
          inputPlaceholder:'请输入取消原因',
          inputErrorMessage:'原因不能为空',
          inputValidator:function(value) {
            return !!value;
          }
        }).then(({ value }) => {
          orderOptService({optType:2,integralMallProExchangeId:row.integralMallProExchangeId,cancelReason:value}).then(res => {
            if (res.errorCode === 0) {
              this.$tips({type:'success',message:'取消订单成功'});
            } else {
              this.$tips({type:'error',message:'取消订单失败'});
            }
          })
        }).catch(err => {
          console.log(err);
        });
      },
      // 发货
      sendOrder(row) {
        this.sendGoodsShow = true;
        this.expressId = row.integralMallProExchangeId;
      },
      // 查看快递
      queryExpress(row) {
        this.expressShow = true;
        this.expressId = row.integralMallProExchangeId;
      },
      // 导出列表
      exportExcel(){
        if (this.dateTime) {
          this.listParams.beginTime = formateDateTimeByType(this.dateTime[0],'yyyy-MM-dd');
          this.listParams.endTime = formateDateTimeByType(this.dateTime[1],'yyyy-MM-dd');
        } else {
          this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
        }
        if (!this.listParams.beginTime || !this.listParams.endTime) {
          this.$tips({type: 'warning',message: '时间不能为空'});
          return;
        }
        window.location = `${exportOnlineListExcel}?orderStatus=${this.listParams.orderStatus}&changeType=${this.listParams.changeType}&searchParams=${this.listParams.searchParams}&beginTime=${this.listParams.beginTime}&endTime=${this.listParams.endTime}&requestProject=marketing`;
      },
      statusFilter(val) {
        let result = '--';
        this.releaseTypeOptions.map(v => {
          if (v.value ===  val) {
            result = v.label;
          }
        });
        return result;
      },
    },
}
</script>


