<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" :src="scope.row.giftMainPic || defaultAvatar" width="60" height="60" />
             -->
            <img class="vertical-middle table__avatar" v-if="scope.row.giftMainPic" :src="scope.row.giftMainPic" width="60" height="60" />
            <img class="vertical-middle table__avatar" v-else src="../../../../static/img/head_default.png" width="60" height="60" />
            <div class="inline-block vertical-middle">
              <p class="table-name--ellipsis">{{ scope.row.giftName || '--' }}</p>
              <p class="fz13 gray" style="line-height:18px">{{ scope.row.giftCategoryName || '--' }}</p>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="兑换时间" align="left" prop="createTime">
        <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"></el-table-column>
      <el-table-column label="发货类型" align="left" prop="changeType">
        <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">
          <memberInfoCom :row="scope.row"></memberInfoCom>
        </template>
      </el-table-column>
      <el-table-column label="消耗积分" align="left" prop="status">
        <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">
        <template slot-scope="scope">
          <span>{{ scope.row.definedCode || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" 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-if="scope.row.status === -1">自动关闭</span>
            <span v-else>--</span>
          </p>
          <p>
            <!-- 0 取消订单 -->
            <el-button type="text" v-if="scope.row.status === 1" @click="cancelOrder(scope.row)">取消订单</el-button>
            <!-- 1 在线发货 已发货 详情 -->
            <el-button type="text" v-if="scope.row.status === 3 && scope.row.changeType !== 2" @click="queryOrderInfo(scope.row, 1)">查看详情</el-button>
            <!-- 2 在线发货 取消 详情 -->
            <el-button type="text" v-if="scope.row.status === 0 && scope.row.changeType !== 2" @click="queryOrderInfo(scope.row, 2)">查看详情</el-button>
            <!-- 3 快递发货 取消 详情 -->
            <el-button type="text" v-if="scope.row.status === 0 && scope.row.changeType === 2" @click="queryOrderInfo(scope.row, 3)">查看详情</el-button>
            <!-- 4 快递发货 已发货 查看物流 -->
            <el-button type="text" v-if="scope.row.status === 3 && scope.row.changeType === 2" @click="queryExpress(scope.row, false)">查看物流</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" :isInfo="isInfo"></express>
    <sendGoods :show.sync="sendGoodsShow" :id="expressId" @refresh="refresh"></sendGoods>
    <orderInfo :show.sync="orderInfoShow" :id="expressId" @refresh="refresh" :infoStatus="orderInfoStatus"></orderInfo>
    <vue-gic-export-excel :dataArr="tableList" :dialogVisible.sync="dialogVisible" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
  </section>
</template>
<script>
import { getPageUndeliverList, orderOptService } from '@/service/api/mallApi.js';
import { formateDateTimeByType } from '@/utils/index.js';
import express from '../common/express';
import sendGoods from './send-goods';
import orderInfo from './order-info';
import memberInfoCom from '../common/member-info';
export default {
  name: 'goods-list',
  components: {
    express,
    sendGoods,
    orderInfo,
    memberInfoCom
  },
  data() {
    return {
      formateDateTimeByType,
      // defaultAvatar: require('../../../assets/img/head_default.png'),
      defaultAvatar: ' ../../../../static/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,
      orderInfoShow: false,
      orderInfoStatus: 1,
      expressId: '',
      isInfo: false,
      dateTime: ['', ''],
      // 导出数据控件
      projectName: 'integral-mall', // 当前项目名
      dialogVisible: false,
      excelUrl: '/api-integral-mall/download-integral-online-excel', // 下载数据的地址
      params: {} // 传递的参数
    };
  },
  created() {
    this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }, { name: '待发货', path: '' }]);
    this.getPageUndeliverList();
  },
  methods: {
    // 列表的方法
    /* eslint-disable */
    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) {
            if (!value) {
              return false;
            } else if (value.replace(/[^\x00-\xff]/gi, '--').length > 100) {
              return '中文限制50字，数字字母限制100字符';
            } else {
              return true;
            }
          }
        }
      )
        .then(({ value }) => {
          orderOptService({ optType: 2, integralMallProExchangeId: row.integralMallProExchangeId, cancelReason: value }).then(res => {
            if (res.errorCode === 0) {
              this.$tips({ type: 'success', message: '取消订单成功' });
              this.getPageUndeliverList();
            } else {
              this.$tips({ type: 'error', message: '取消订单失败' });
            }
          });
        })
        .catch(err => {});
    },
    // 发货
    sendOrder(row) {
      if (row.changeType === 2) {
        this.sendOrderOutline(row);
      } else if (row.changeType === 3) {
        this.sendOrderOnline(row);
      }
    },
    // 在线发货
    sendOrderOnline(row) {
      this.$prompt('请输入发货内容', '在线发货', {
        dangerouslyUseHTMLString: true,
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputPlaceholder: '请输入发货内容',
        inputErrorMessage: '发货内容不能为空',
        inputValidator: function(value) {
          if (!value) {
            return false;
          } else if (value.replace(/[^\x00-\xff]/gi, '--').length > 200) {
            return '中文限制100字，数字字母限制200字符';
          } else {
            return true;
          }
        }
      })
        .then(({ value }) => {
          orderOptService({ optType: 1, integralMallProExchangeId: row.integralMallProExchangeId, deliveryContent: value }).then(res => {
            if (res.errorCode === 0) {
              this.$tips({ type: 'success', message: '发货成功' });
              this.getPageUndeliverList();
            } else {
              this.$tips({ type: 'error', message: '发货失败' });
            }
          });
        })
        .catch(err => {});
    },
    // 快递发货
    sendOrderOutline(row) {
      this.sendGoodsShow = true;
      this.expressId = row.integralMallProExchangeId;
    },

    // 查看快递
    queryExpress(row, flag) {
      this.expressShow = true;
      this.isInfo = flag;
      this.expressId = row.integralMallProExchangeId;
    },
    // 查看订单详情和取消详情
    /**
     * tag
     * 1 在线发货 已发货 详情
     * 2 在线发货 取消 详情
     * 3 快递发货 取消 详情
     */
    queryOrderInfo(row, tag) {
      this.orderInfoShow = true;
      this.orderInfoStatus = tag;
      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;
      }
      this.params = {
        orderStatus: this.listParams.orderStatus,
        changeType: this.listParams.changeType,
        searchParams: this.listParams.searchParams,
        beginTime: this.listParams.beginTime,
        endTime: this.listParams.endTime,
        requestProject: 'integral-mall'
      };
      this.dialogVisible = true;
      // 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>
