<template>
  <div class="divBox">

    <el-card class="box-card">
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="mini"
        class="table"
        highlight-current-row
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品总价：">
                <span>{{ props.row.total_price | filterEmpty }}</span>
              </el-form-item>
              <el-form-item label="下单时间：">
                <span>{{ props.row.create_time | filterEmpty }}</span>
              </el-form-item>
              <el-form-item label="用户备注：">
                <span>{{ props.row.mark | filterEmpty }}</span>
              </el-form-item>
              <el-form-item label="商家备注：">
                <span>{{ props.row.remark | filterEmpty }}</span>
              </el-form-item>
              <el-form-item label="总单号：">
                <span>{{ props.row.groupOrder ? props.row.groupOrder.group_order_sn : '' }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" min-width="170">
          <template slot-scope="scope">
            <span style="display: block;" v-text="scope.row.order_sn" />
            <span v-show="scope.row.is_del > 0" style="color: #ED4014;display: block;">用户已删除</span>
          </template>
        </el-table-column>
        <el-table-column label="订单类型" min-width="90">
          <template slot-scope="scope">
            <span v-if="">{{ scope.row.is_virtual == 1 ? "虚拟订单" : scope.row.order_type == 0 ? "普通订单" : "核销订单" }}</span>
          </template>
        </el-table-column>
       <!-- <el-table-column label="活动类型" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.activity_type != 4">{{ scope.row.activity_type === 1 ? "秒杀" : scope.row.activity_type === 2 ? "预售" : scope.row.activity_type === 3 ? "助力" : "--"}}</span>
            <span v-else>拼团订单 <span v-if="scope.row.groupUser && scope.row.groupUser.groupBuying">-{{scope.row.groupUser.groupBuying.status | activityOrderStatus}}</span></span>
          </template>
        </el-table-column> -->
        <el-table-column prop="real_name" label="收货人/订购人" min-width="120" />
        <el-table-column prop="user_phone" label="联系电话" min-width="120" />
        <el-table-column prop="user_address" label="收货地址" min-width="200" />
        <el-table-column label="审核状态" min-width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.examine_status == -1" style="color: #ED4014;">审核不通过</span>
            <span v-if="scope.row.examine_status == 1" style="color: #18aeff;">审核通过</span>
            <template v-if="scope.row.examine_status == 0">
              <span v-if="scope.row.is_examine == 0">采购审核中</span>
              <span v-if="scope.row.is_examine == 1">技术审核中</span>
              <span v-if="scope.row.is_examine == 2">会计审核中</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="reviewed" label="审核人" min-width="200" />
        <el-table-column label="商户名称" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.merchant ? scope.row.merchant.mer_name :'' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="mer_name" label="商户类别" min-width="90">
          <template slot-scope="scope">
            <span v-if="scope.row.merchant" class="spBlock">{{ scope.row.merchant.is_trader ? '自营' : '非自营' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" min-width="330">
          <template slot-scope="scope">
            <div
              v-for="(val, i) in scope.row.orderProduct"
              :key="i"
              class="tabBox acea-row row-middle"
            >
              <div class="demo-image__preview">
                <el-image
                  :src="val.cart_info.product.image"
                  :preview-src-list="[val.cart_info.product.image]"
                />
              </div>
              <span
                class="tabBox_tit"
              >{{ val.cart_info.product.store_name + ' | ' }}{{ val.cart_info.productAttr.sku }}</span>
              <span class="tabBox_pice">
                {{ '￥'+ val.cart_info.productAttr.price + ' x '+ val.product_num }}
                <em
                  v-if="val.refund_num < val.product_num && val.refund_num  > 0"
                  style="color: red;font-style: normal;"
                >(-{{ val.product_num - val.refund_num }})</em>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实际支付" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.pay_price }}</span>
            <p v-if="scope.row.finalOrder">尾款：{{ scope.row.finalOrder.pay_price }}</p>
          </template>
        </el-table-column>
        <el-table-column label="订单佣金" min-width="100">
          <template slot-scope="scope">
            <span>{{ (parseFloat(scope.row.extension_one) + parseFloat(scope.row.extension_two) + parseFloat(scope.row.refund_extension_one) + parseFloat(scope.row.refund_extension_two)).toFixed(2) }}</span>
            <em v-if="(scope.row.refund_extension_one > 0) || (scope.row.refund_extension_two > 0)" style="color: red;font-style: normal;">(-{{ (parseFloat(scope.row.refund_extension_one)+parseFloat(scope.row.refund_extension_two)).toFixed(2) }})</em>
          </template>
        </el-table-column>
        <el-table-column label="支付类型" min-width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.paid === 1">{{ scope.row.pay_type | orderPayType }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="支付状态" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.paid == 0 ? "未支付" : "已支付" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.is_del === 0">
              <span v-if="scope.row.paid === 0">待付款</span>
              <span v-else>
                <span v-if="scope.row.order_type === 0 || scope.row.order_type === 2">{{ scope.row.status | orderStatusFilter }}</span>
                <span v-else>{{ scope.row.status | takeOrderStatusFilter }}</span>
              </span>
            </span>
            <span v-else>已删除</span>
          </template>
        </el-table-column>
        <el-table-column prop="serviceScore" label="下单时间" min-width="130">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="推广人" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.spread && scope.row.spread.nickname || '无' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上级推广人" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.TopSpread && scope.row.TopSpread.nickname || '无' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200" fixed="right" align="center">
          <template slot-scope="scope">
              <el-button type="text" size="small" v-if="scope.row.is_examine != 1">已审核</el-button>
              <el-button type="text" size="small" v-if="scope.row.is_examine == 1 && scope.row.examine_status == -1" style="color: #ED4014;">已拒绝</el-button>
              <el-button type="danger" icon="el-icon-close" size="mini" @click="onExamine(scope.row.order_id)" v-if="scope.row.examine_status == 0 && scope.row.is_examine == 1">未通过</el-button>
              <el-button type="primary" icon="el-icon-check" size="mini" @click="ok(scope.row.order_id)" v-if="scope.row.examine_status == 0 && scope.row.is_examine == 1">通过</el-button>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
    <!--导出订单列表-->
    <file-list ref="exportList" />
  </div>
</template>

<script>
  // +----------------------------------------------------------------------
  // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
  // +----------------------------------------------------------------------
  // | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
  // +----------------------------------------------------------------------
  // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
  // +----------------------------------------------------------------------
  // | Author: CRMEB Team <admin@crmeb.com>
  // +----------------------------------------------------------------------
  import {
    refundorderListApi,
    orderUpdateApi,
    orderDeliveryApi,
    exportRefundOrderApi,
    releaseorderListApi,
    technologyListApi,
    orderExamine,
    orderFail
  } from "@/api/order";
  import {
    fromList
  } from "@/libs/constants.js";
  import fileList from '@/components/exportFile/fileList'
  export default {
    components: {
      fileList
    },
    name: "OrderRefund",
    data() {
      return {
        orderId: 0,
        tableData: {
          data: [],
          total: 0,
        },
        listLoading: true,
        tableFrom: {
          refund_order_sn: this.$route.query.refund_order_sn ? this.$route.query.refund_order_sn : "",
          order_sn: "",
          status: "",
          date: "",
          page: 1,
          limit: 20,
          is_trader: '',
          order_id: '',
          uid: ''
        },
        orderChartType: {},
        timeVal: [],
        fromList: fromList,
        selectionList: [],
        ids: "",
        tableFromLog: {
          page: 1,
          limit: 10,
        },
        tableDataLog: {
          data: [],
          total: 0,
        },
        LogLoading: false,
        dialogVisible: false,
        cardLists: [],
        orderDatalist: null,
      };
    },
    mounted() {
      if (this.$route.query.hasOwnProperty("sn")) {
        this.tableFrom.order_sn = this.$route.query.sn;
      } else {
        this.tableFrom.order_sn = "";
      }
      this.getList('');
    },
    // 被缓存接收参数
    activated() {
      if (this.$route.query.hasOwnProperty("sn")) {
        this.tableFrom.order_sn = this.$route.query.sn;
      } else {
        this.tableFrom.order_sn = "";
      }
      this.getList('');
    },
    methods: {
      // 订单详情
      onOrderDetail(order_sn) {
        this.$router.push({
          name: "OrderList",
          query: {
            order_sn: order_sn,
          },
        });
      },
      // 导出
      exportRecord() {
        exportRefundOrderApi(this.tableFrom)
          .then((res) => {
            const h = this.$createElement;
            this.$msgbox({
              title: '提示',
              message: h('p', null, [
                h('span', null, '文件正在生成中，请稍后点击"'),
                h('span', {
                  style: 'color: teal'
                }, '导出记录'),
                h('span', null, '"查看~ '),
              ]),
              confirmButtonText: '我知道了',
            }).then(action => {

            });
          })
          .catch((res) => {
            this.$message.error(res.message)
          })
      },
      // 导出列表
      getExportFileList() {
        this.$refs.exportList.exportFileList()
      },
      getTotal(row) {
        let sum = 0;
        for (let i = 0; i < row.length; i++) {
          sum += row[i].product.cart_info.productAttr.price * row[i].refund_num;
        }
        return sum;
      },
      pageChangeLog(page) {
        this.tableFromLog.page = page;
        this.getList('');
      },
      handleSizeChangeLog(val) {
        this.tableFromLog.limit = val;
        this.getList(1);
      },
      // 选择时间
      selectChange(tab) {
        this.tableFrom.date = tab;
        this.tableFrom.page = 1;
        this.timeVal = [];
        this.getList('');
      },
      // 具体日期
      onchangeTime(e) {
        this.timeVal = e;
        this.tableFrom.date = e ? this.timeVal.join("-") : "";
        this.tableFrom.page = 1;
        this.getList('');
      },
      // 编辑
      edit(id) {
        this.$modalForm(orderUpdateApi(id)).then(() => this.getList(''));
      },
      // 发货
      send(id) {
        this.$modalForm(orderDeliveryApi(id)).then(() => this.getList(''));
      },
      // 列表
      getList(num) {
        this.listLoading = true;
        this.tableFrom.page = num ? num : this.tableFrom.page;
        technologyListApi(this.tableFrom)
          .then((res) => {
            console.log(res, 'shif+++++++++')
            this.tableData.data = res.data.list;
            this.tableData.total = res.data.count;
            this.orderChartType = res.data.stat;
            this.cardLists = res.data.stat;
            this.listLoading = false;
          })
          .catch((res) => {
            this.$message.error(res.message);
            this.listLoading = false;
          });
      },
      pageChange(page) {
        this.tableFrom.page = page;
        this.getList('');
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val;
        this.getList(1);
      },
      // 审核通过
      ok(id) {
          this.$modalSure('审核通过吗').then(() => {
              orderExamine(id).then(({
                  message
              }) => {
                  this.$message.success(message)
                  this.getList()
              }).catch(({
                  message
              }) => {
                  this.$message.error(message)
              })
          })
      },
      //审核不通过
      onExamine(id) {
          this.$modalSure('审核不通过吗').then(() => {
            console.log('进入')
              orderFail(id).then(res => {
                  this.$message({
                      type: 'success',
                      message: '提交成功'
                  })
                  this.getList()
              }).catch((res) => {
                  this.$message.error(res.message)
              })
          }).catch((err) => {
              this.$message({
                  type: 'info',
                  message: '取消'
              })
          })
      },
    },
  };
</script>

<style lang="scss" scoped>
  .demo-table-expands {
    /deep/ label {
      width: 110px !important;
      color: #99a9bf;
    }
  }

  .selWidth {
    width: 300px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    font-size: 12px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .tabBox_tit {
    width: 60%;
    font-size: 12px !important;
    margin: 0 2px 0 10px;
    letter-spacing: 1px;
    padding: 5px 0;
    box-sizing: border-box;
  }
</style>
