<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">

      <el-input v-model="listQuery.jzOrderSn" clearable class="filter-item" style="width: 160px;" placeholder="请输入鲸致订单号" />
      <el-input v-model="listQuery.outOrderSn" clearable class="filter-item" style="width: 160px;" placeholder="请输入抖音订单号" />

      <el-date-picker v-model="listQuery.timeArray" type="datetimerange" class="filter-item" range-separator="至" start-placeholder="下单开始日期" end-placeholder="下单下单结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" />

      <el-button v-permission="['GET /admin/dyOrderVerify/getList']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
    </div>

    <!-- 查询结果 -->

    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <!-- <el-table-column align="center" label="客户手机" prop="customerTel" fixed="left" width="135" /> -->
      <!-- <el-table-column align="center" label="服务订单编号" width="135" prop="orderId" /> -->
      <el-table-column align="center" label="鲸致订单号"  prop="jzOrderSn" />
      <el-table-column align="center" label="抖音订单号"  prop="outOrderSn" />
      <el-table-column align="center" label="订单金额"  prop="price" />
      <el-table-column align="center" label="核销状态" >
        <template slot-scope="scope">
          {{ statusMap[scope.row.isVerify] }}
        </template>
      </el-table-column>

           <el-table-column align="center" label="核销时间"  prop="verifyTime" />
     <el-table-column align="center" label="退款单号"  prop="refundNo" />
     <el-table-column align="center" label="退款金额"  prop="refundMoney" >
        <template slot-scope="scope">
         {{scope.row.refundMoney==undefined?'':(scope.row.refundMoney/100).toFixed(0)}}
        </template>
     </el-table-column>
     <el-table-column align="center" label="抖音退款编号"  prop="outRefundNo" />
     <el-table-column align="center" label="退款申请时间"  prop="refundSubmitTime" />
    <el-table-column align="center" label="退款状态" >
        <template slot-scope="scope">
          {{ auditMap[scope.row.refundStatus] }}
        </template>
      </el-table-column>
     <el-table-column align="center" label="退款审核时间"  prop="refundAuditTime" />
     <el-table-column align="center" label="审核人id"  prop="refundAuditUserId" />

      <el-table-column align="center" label="下单时间" min-width="90" prop="createTime" />


      <el-table-column align="center" label="操作" class-name="small-padding fixed-width" fixed="right" width="140">
        <template slot-scope="scope">
<!--          <el-button v-permission="['GET /admin/dyOrderVerify/douyinVerifyOrder']" type="primary" size="mini" @click="verifyOrder(scope.row)" v-if="scope.row.isVerify==0">核销</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" />



  </div>
</template>

<script>
import axios from "axios";
import {
  getDyOrderList,
  douyinVerifyOrder,


} from "@/api/order";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { formatDate } from "@/utils/date";
import checkPermission from "@/utils/permission"; // 权限判断函数
import { getToken } from "@/utils/auth";

let vm;

export default {
  name: "Order",
  components: { Pagination },
  filters: {

  },
  data() {
    return {
       statusMap:[
        '未核销',
        '已核销',
        '退款',
        '取消支付'
      ],
       auditMap:{
         1:'待审核',
         2:'审核通过',
         3:'审核拒绝'

       },
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        jzOrderSn: "",
        outOrderSn:'',
        timeArray: [],
        sort: "create_time",
        order: "desc",
      },

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      headers: { "Content-Type": "multipart/form-data" },
    };
  },
  computed: {},
  beforeCreate() {
    vm = this;
  },
  created() {
    this.getList();

  },
  methods: {
    checkPermission,

    getList() {
      this.listLoading = true;
      if (this.listQuery.timeArray && this.listQuery.timeArray.length === 2) {
        this.listQuery.start = this.listQuery.timeArray[0];
        this.listQuery.end = this.listQuery.timeArray[1];
      } else {
        this.listQuery.start = null;
        this.listQuery.end = null;
      }

      getDyOrderList(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();
    },

     verifyOrder(row){
       this.$confirm("确定要核销吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        douyinVerifyOrder({orderId:row.jzOrderId}).then((response) => {
          this.$notify.success({
            title: "成功",
            message: "核销成功",
          });
          this.getList();
        })
        .catch((response) => {
          this.$notify.error({
            title: "失败",
            message: response.data.errmsg,
          });
        });;
      });
     },

    formetdate(date) {
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return [year, month, day].map(this.formatNumber).join("-");
    },
    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : "0" + n;
    },

  },
};
</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: 20px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  white-space: pre-wrap;
  /* 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;
}
.is-appointment {
  color: #1989fa;
}
.el-cascader--medium {
  width: 360px;
}
</style>
