<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.aftersaleSn" clearable class="filter-item" style="width: 200px;" placeholder="请输入售后编号" />
      <el-input v-model="listQuery.orderSn" clearable class="filter-item" style="width: 200px;" placeholder="请输入订单编号" />
      <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 200px;" placeholder="请输入会员手机号码" />
      <el-button v-permission="['GET /admin/aftersale/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
    </div>

    <div class="operator-container">
      <el-button v-permission="['GET /admin/aftersaleSn/batch-recept']" class="filter-item" type="success" icon="el-icon-info" @click="handleBatchReceptConfirm">批量通过</el-button>
      <el-button v-permission="['GET /admin/aftersale/batch-reject']" class="filter-item" type="danger" icon="el-icon-delete" @click="handleBatchReject">批量拒绝</el-button>
    </div>

    <el-tabs v-model="tab" @tab-click="handleClick">
      <el-tab-pane label="全部 22" name="all" />
      <el-tab-pane label="我的待办工单 1" name="uncheck" />
      <el-tab-pane label="超24小时未完结工单 2" name="unrefund" />
      <el-tab-pane label="已办结工单 100" name="unrefund" />
    </el-tabs>

    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" label="售后编号" prop="aftersaleSn" />
      <el-table-column align="center" label="订单编号" prop="order.orderSn" />
      <el-table-column align="center" label="下单时间" prop="order.addTime" />
      <el-table-column align="center" label="订单类型" prop="order.isCr">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.order.isCr | orderTypeFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="售后类型" prop="type">
        <template slot-scope="scope">
          <el-tag :type="typeTag[scope.row.type]">{{ typeDesc[scope.row.type] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="退款原因" prop="reason">
        <template slot-scope="scope">
          <el-tag type="warning">{{ scope.row.reason }} </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="退款价格" prop="amount" />
      <el-table-column align="center" label="申请时间" prop="addTime" />
      <el-table-column align="center" label="处理结果" prop="status">
        <template slot-scope="scope">
          <el-tag type="success">{{ statusDesc[scope.row.status] }} </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" min-width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['POST /admin/aftersale/detail']" type="primary" size="mini" @click="handleRead(scope.row)">详情</el-button>
          <el-button v-if="scope.row.status === 1" v-permission="['POST /admin/aftersale/recept']" type="success" size="mini" @click="handleRecept(scope.row)">通过</el-button>
          <el-button v-if="scope.row.status === 1" v-permission="['POST /admin/aftersale/reject']" type="danger" size="mini" @click="handleReject(scope.row)">拒绝</el-button>
          <el-button v-if="scope.row.status === 2" v-permission="['POST /admin/aftersale/refund']" type="warning" size="mini" @click="handleRefundConfirm(scope.row)">退款</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <!-- 订单详情对话框 -->
    <el-dialog :visible.sync="orderDialogVisible" title="订单详情" width="800">
      <div>
        <el-steps :active="formatStepStatus(orderDetail.order.orderStatus,orderDetail.order.commentTime)" finish-status="success" align-center>
          <el-step title="提交订单" :description="formatTime(orderDetail.order.addTime)" />
          <el-step title="支付订单" :description="formatTime(orderDetail.order.payTime)" />
          <el-step title="平台发货" :description="formatTime(orderDetail.order.shipTime)" />
          <el-step title="确认收货" :description="formatTime(orderDetail.order.confirmTime)" />
          <el-step title="完成评价" :description="formatTime(orderDetail.order.commentTime)" />
        </el-steps>
      </div>
      <el-card shadow="never" style="margin-top: 15px">
        <div class="operate-container">
          <i class="el-icon-warning color-danger" style="margin-left: 20px" />
          <span class="color-danger">当前订单状态：{{ orderDetail.order.orderStatus | orderStatusFilter }}</span>
        </div>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">基本信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">支付方式</el-col>
            <el-col :span="6" class="table-cell-title">订单编号</el-col>
            <el-col :span="6" class="table-cell-title">支付编号</el-col>
            <el-col :span="6" class="table-cell-title">用户备注</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">微信</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.orderSn }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.payId }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.message }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">订单类型</el-col>
            <el-col :span="6" class="table-cell-title">物流公司</el-col>
            <el-col :span="6" class="table-cell-title">快递单号</el-col>
            <el-col :span="6" class="table-cell-title">发货时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.isCr| orderTypeFilter }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.shipChannel }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.shipSn }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.shipTime }}</el-col>
          </el-row>
        </div>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">收货人信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">收货人</el-col>
            <el-col :span="6" class="table-cell-title">手机号码</el-col>
            <el-col :span="6" class="table-cell-title">区号</el-col>
            <el-col :span="6" class="table-cell-title">收货地址</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.consignee }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.order.mobile }}</el-col>
            <el-col :span="6" class="table-cell" />
            <el-col :span="6" class="table-cell">{{ orderDetail.order.address }}</el-col>
          </el-row>
        </div>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">商品信息</span>
        </div>
        <el-table
          :data="orderDetail.orderGoods"
          style="width: 100%;margin-top: 20px"
          border
        >
          <el-table-column label="商品图片" width="120" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.picUrl" style="height: 80px">
            </template>
          </el-table-column>

          <el-table-column label="商品名称" width="150" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.goodsName }}</p>
              <p>品牌：{{ scope.row.productBrand }}</p>
            </template>
          </el-table-column>

          <el-table-column label="价格/货号" align="center">
            <template slot-scope="scope">
              <p>价格：￥{{ scope.row.price }}</p>
              <p>货号：{{ scope.row.goodsSn }}</p>
            </template>
          </el-table-column>

          <el-table-column label="商品规格" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.specifications }}</p>
            </template>
          </el-table-column>

          <el-table-column label="数量" align="center">
            <template slot-scope="scope">
              {{ scope.row.number }}
            </template>
          </el-table-column>
          <el-table-column style="border-right: 0px" label="小计" align="center">
            <template slot-scope="scope">
              ￥{{ scope.row.price*scope.row.number }}
            </template>
          </el-table-column>
        </el-table>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">费用信息</span>
        </div>

        <div class="table-layout">
          <el-row>
            <el-col :span="4" class="table-cell-title">实际费用</el-col>
            <el-col :span="4" class="table-cell-title">商品总价</el-col>
            <el-col :span="4" class="table-cell-title">快递费用</el-col>
            <el-col :span="4" class="table-cell-title">优惠减免</el-col>
            <el-col :span="4" class="table-cell-title">积分减免</el-col>
            <el-col :span="4" class="table-cell-title">支付时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell">{{ orderDetail.order.actualPrice }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.order.goodsPrice }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.order.freightPrice }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.order.couponPrice }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.order.integralPrice }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.order.payTime }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell-title">退款金额</el-col>
            <el-col :span="4" class="table-cell-title">退款类型</el-col>
            <el-col :span="4" class="table-cell-title">退款备注</el-col>
            <el-col :span="4" class="table-cell-title">退款时间</el-col>
            <el-col :span="8" class="table-cell-title">确认收货时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell">{{ orderDetail.order.refundAmount }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.order.refundType }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.order.refundContent }}</el-col>
            <el-col :span="4" class="table-cell">{{ orderDetail.order.refundTime }} </el-col>
            <el-col :span="8" class="table-cell">{{ orderDetail.order.confirmTime }} </el-col>
          </el-row>
        </div>

        <div style="float: right;padding-top:10px;padding-bottom: 10px ">
          <el-button type="primary" @click="orderDialogVisible = false">确 认</el-button>
          <!--<el-button type="primary" @click="printOrder">打 印</el-button>-->
        </div>

      </el-card>
    </el-dialog>

    <el-tooltip placement="top" content="返回顶部">
      <back-to-top :visibility-height="100" />
    </el-tooltip>

  </div>
</template>

<script>
import { listAftersale, receptAftersale, batchReceptAftersale, rejectAftersale, batchRejectAftersale, refundAftersale } from '@/api/aftersale'
import { detailOrder } from '@/api/order'
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { formatDate } from '@/utils/date'
import _ from 'lodash'

const statusMap = {
  101: '未付款',
  102: '用户取消',
  103: '系统取消',
  201: '已付款',
  202: '申请退款',
  203: '已退款',
  301: '已发货',
  401: '用户收货',
  402: '系统收货'
}

export default {
  name: 'Aftersale',
  components: { BackToTop, Pagination },
  filters: {
    orderStatusFilter(status) {
      return statusMap[status]
    },
    orderTypeFilter(type) {
      if (type) { return '跨境订单' } else return '大贸订单'
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      tab: 'all',
      listQuery: {
        page: 1,
        limit: 20,
        aftersaleSn: undefined,
        orderId: undefined,
        orderSn: '',
        status: '',
        sort: 'add_time',
        order: 'desc'
      },
      typeTag: [
        '',
        'success',
        'warning'
      ],
      typeDesc: ['7天无理由退货', '个人原因 不喜欢', '价格问题', '发票问题', '物流问题', '质量问题', '未收货退款', '不退货退款', '退货退款'],
      statusDesc: ['待审核', '待审核', '待退款', '已退款', '拒绝', '取消'],
      multipleSelection: [],
      contentDetail: '',
      contentDialogVisible: false,
      downloadLoading: false,
      orderDialogVisible: false,
      orderDetail: {
        order: {},
        user: {},
        orderGoods: []
      }

    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      listAftersale(this.listQuery)
        .then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    formatTime(time) {
      if (time == null || time === '') {
        return ''
      }
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    formatStepStatus(value, time) {
      if (value === 201) {
        // 待发货
        return 2
      } else if (value === 301) {
        // 已发货
        return 3
      } else if (value === 401 || value === 402) {
        // 已完成
        if (time != null && time != 'undefined') {
          return 5
        } else {
          return 4
        }
      } else {
        // 待付款、已关闭、无限订单
        return 1
      }
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClick() {
      if (this.tab === 'all') {
        this.listQuery.status = ''
      } else if (this.tab === 'uncheck') {
        this.listQuery.status = '1'
      } else if (this.tab === 'unrefund') {
        this.listQuery.status = '2'
      }
      this.getList()
    },
    handleRecept(row) {
      receptAftersale(row)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '审核通过操作成功'
          })
          this.getList()
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    handleRead(row) {
      detailOrder(row.orderId).then(response => {
        this.orderDetail = response.data.data
      })
      this.orderDialogVisible = true
    },
    handleBatchReceptConfirm() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('请选择至少一条记录')
        return
      }
      const ids = []
      _.forEach(this.multipleSelection, function(item) {
        ids.push(item.id)
      })

      this.$confirm('确定批量接受售后订单吗?跨境商品 不建议退单！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleBatchRecept(ids)
      })
    },
    handleBatchRecept(ids) {
      batchReceptAftersale({ ids: ids })
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '批量通过操作成功'
          })
          this.getList()
        }).catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    handleReject(row) {
      rejectAftersale(row)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '审核拒绝操作成功'
          })
          this.getList()
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    handleBatchReject() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('请选择至少一条记录')
        return
      }
      const ids = []
      _.forEach(this.multipleSelection, function(item) {
        ids.push(item.id)
      })
      batchRejectAftersale({ ids: ids })
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '批量拒绝操作成功'
          })
          this.getList()
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    handleRefundConfirm(row) {
      this.$confirm('确定为编号' + row.orderSn + '的订单退款吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleRefund(row)
      })
    },
    handleRefund(row) {
      refundAftersale(row)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '退款操作成功'
          })
          this.getList()
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          '售后编号',
          '订单ID',
          '用户ID',
          '售后类型',
          '退款原因',
          '退款价格',
          '申请时间'
        ]
        const filterVal = [
          'aftersaleSn',
          'orderId',
          'userId',
          'type',
          'reason',
          'amount',
          'addTime'
        ]
        excel.export_json_to_excel2(tHeader, this.list, filterVal, '售后信息')
        this.downloadLoading = false
      })
    }
  }
}
</script>

<style>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
  .el-table th.gutter{
    display: table-cell!important;
  }
  .color-danger {
    color: #F56C6C;
    font-size: 18px;
  }
</style>
