<template>
  <div class="app-container">
    <div class="head-container">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="" prop="orderId">
              <el-input
                v-model="queryParams.orderId"
                placeholder="订单ID"
                clearable
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item label="" prop="productName">
              <el-input
                v-model="queryParams.productName"
                placeholder="产品名称"
                clearable
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item label="" prop="customAccount" label-width="110px">
              <el-input
                v-model="queryParams.customCode"
                placeholder="客户资金账户"
                clearable
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item label="" prop="channel">
              <el-select
                v-model="queryParams.channel"
                placeholder="订单渠道"
                clearable
                :fit-input-width="true"
                style="width: 100px"
              >
                <el-option label="后台" :value="0" />
                <el-option label="APP" :value="1" />
                <el-option label="PC" :value="2" />
                <el-option label="web" :value="3" />
              </el-select>
            </el-form-item>

            <el-form-item label="" prop="customRiskLevel">
              <el-select
                v-model="queryParams.customRiskLevel"
                placeholder="客户风险等级"
                clearable
                :fit-input-width="true"
                style="width: 150px"
              >
                <el-option label="低风险" :value="1" />
                <el-option label="中低风险" :value="2" />
                <el-option label="中风险" :value="3" />
                <el-option label="中高风险" :value="4" />
                <el-option label="高风险" :value="5" />
              </el-select>
            </el-form-item>

            <el-form-item label="" prop="isRenewal">
              <el-select
                v-model="queryParams.isRenewal"
                placeholder="是否续订"
                clearable
                :fit-input-width="true"
                style="width: 100px"
              >
                <el-option label="首订" :value="0" />
                <el-option label="续订" :value="1" />
                <el-option label="复购" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="matching" label-width="110px">
              <el-select
                v-model="queryParams.matching"
                placeholder="适当性是否匹配"
                clearable
                :fit-input-width="true"
                style="width: 100px"
              >
                <el-option label="否" :value="0" />
                <el-option label="是" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="payType">
              <el-select
                v-model="queryParams.payType"
                placeholder="支付方式"
                clearable
                :fit-input-width="true"
                style="width: 150px"
              >
                <el-option label="微信支付" :value="1" />
                <el-option label="支付宝支付" :value="2" />
                <el-option label="整体提佣" :value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="platform">
              <el-select
                v-model="queryParams.platform"
                placeholder="订单开通方式"
                clearable
                :fit-input-width="true"
                style="width: 150px"
              >
                <el-option label="支付购买" :value="1" />
                <el-option label="免费订单" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="productPeriod">
              <el-select
                v-model="queryParams.productPeriod"
                placeholder="服务时长"
                clearable
                :fit-input-width="true"
                style="width: 100px"
              >
                <el-option label="长期" :value="0" />
                <el-option label="1个月" :value="2" />
                <el-option label="3个月" :value="3" />
                <el-option label="6个月" :value="4" />
                <el-option label="12个月" :value="5" />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="productType">
              <el-select
                v-model="queryParams.productType"
                placeholder="产品类型"
                clearable
                :fit-input-width="true"
                style="width: 150px"
              >
                <el-option label="基础产品" :value="1" />
                <!-- <el-option label="套餐产品	" :value="2" /> -->
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="status">
              <el-select
                v-model="queryParams.status"
                placeholder="订单状态"
                clearable
                :fit-input-width="true"
                style="width: 150px"
              >
                <el-option label="待支付" :value="1" />
                <el-option label="支付成功	" :value="2" />
                <el-option label="退款申请中" :value="3" />
                <el-option label="已退款	" :value="4" />
                <el-option label="已过期" :value="6" />
                <el-option label="已关闭	" :value="7" />
                <el-option label="退款失败" :value="5" />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="isLive">
              <el-select
                v-model="queryParams.isLive"
                placeholder="是否是直播带货订单"
                clearable
                :fit-input-width="true"
                style="width: 150px"
              >
                <el-option label="否" :value="0" />
                <el-option label="是" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="liveName">
              <el-input
                v-model="queryParams.liveName"
                placeholder="请输入带货直播名称"
                clearable
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item label="" prop="timeType" class="datepicker">
              <el-select
                v-model="queryParams.timeType"
                placeholder="时间筛选"
                clearable
                class="selectbox"
                :fit-input-width="true"
                style="width: 150px"
              >
                <el-option label="下单时间" :value="1" />
                <el-option label="支付时间	" :value="2" />
                <el-option label="生效时间" :value="3" />
                <el-option label="到期时间	" :value="4" />
                <el-option label="申请退款时间" :value="5" />
                <el-option label="退款成功时间" :value="6" />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="" class="datepicker">
              <el-date-picker
                v-model="dateVale"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
              />
            </el-form-item>
            <el-form-item style="margin-left: 10px">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-search"
                @click="handleSearch(1)"
              >查询</el-button>
              <el-button
                size="mini"
                icon="el-icon-refresh-right"
                @click="handleReset('queryFormRef')"
              >重置</el-button>
              <el-button
                type="success"
                size="mini"
                :loading="downloadLoading"
                @click="toExport"
              >导出</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" style="width: 100%">
      <el-table-column
        align="center"
        type="index"
        width="60"
        label="序号"
        fixed="left"
      />
      <el-table-column prop="orderId" label="订单ID" fixed="left" width="180px" />
      <el-table-column
        prop="customCode"
        label="用户名"
        fixed="left"
        width="120px"
      >
        <template #default="scope">
          {{ scope.row.customCode | formatPhone }}
        </template>
      </el-table-column>
      <el-table-column prop="customMobile" label="手机号" width="120px">
        <template #default="scope">
          {{ scope.row.customMobile | formatPhone }}
        </template>
      </el-table-column>
      <el-table-column prop="customAccount" label="客户资金账户" width="110px">
        <template #default="scope">
          {{ scope.row.customAccount | formatPhone }}
        </template>
      </el-table-column>
      <el-table-column prop="customName" label="客户姓名" width="130px" />
      <el-table-column prop="productType" label="产品类型" width="110px">
        <template #default="scope">
          <span v-if="scope.row.productType == 1">基础产品</span>
          <span v-else-if="scope.row.productType == 2">套餐产品</span>
          <span v-else />
        </template>
      </el-table-column>
      <el-table-column prop="productId" label="产品ID" width="100px" />
      <el-table-column prop="productName" label="产品名称" width="100px" />
      <el-table-column prop="categoryName" label="产品分类名称" width="110px" />
      <el-table-column prop="moduleStart" label="生效时间" width="180px" />
      <el-table-column prop="moduleEnd" label="到期时间" width="180px" />
      <el-table-column prop="payType" label="支付方式" width="100px">
        <template #default="scope">
          <span>{{ pay_type_words[scope.row.payType] || "" }} </span>
        </template>
      </el-table-column>

      <el-table-column prop="payId" label="微信/支付订单号" width="260px" />
      <el-table-column prop="payTime" label="支付时间" width="180px" />
      <el-table-column prop="totalPrice" label="总价(元)">
        <template #default="scope">
          {{ (scope.row.totalPrice / 100).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="payPrice" label="支付价(元)" width="100px">
        <template #default="scope">
          {{ (scope.row.payPrice / 100).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="rate" label="费率" width="100px">
        <template #default="scope">
          {{ scope.row.rate ? `${scope.row.rate * 1000}‰` : "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="couponId" label="优惠券" width="180px" />
      <el-table-column prop="couponType" label="优惠券类型" width="180px">
        <template #default="scope">
          <span>{{ coupon_type_map[scope.row.couponType] || "" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="couponValue"
        label="优惠券赠送天数/月份"
        width="180px"
      >
        <template #default="scope">
          <span>{{
            scope.row.couponType == 1
              ? `${scope.row.couponValue}${
                scope.row.couponFreeType == 1 ? "天" : "月"
              }`
              : ""
          }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="couponIdOne" label="优惠金额/折扣率" width="180px">
        <template #default="scope">
          <span>{{
            [2, 3].includes(scope.row.couponType)
              ? `${(scope.row.couponValue / 100).toFixed(2)}`
              : ""
          }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="isRenewal" label="是否续费订单" width="110px">
        <template #default="scope">
          <span>{{ renewal_map[scope.row.isRenewal] || "" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="customRiskLevel"
        label="客户风险等级"
        width="110px"
      >
        <template #default="scope">
          <span>{{ risk_levels[scope.row.customRiskLevel] || "" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="productRiskLevel"
        label="产品风险等级"
        width="110px"
      >
        <template #default="scope">
          <span>{{ risk_levels[scope.row.productRiskLevel] || "" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="productPeriod" label="产品周期" width="100px">
        <template #default="scope">
          <span v-if="scope.row.productPeriod != 6">{{
            pay_cycle[scope.row.productPeriod] || ""
          }}</span>
          <span
            v-else-if="scope.row.productPeriod == 6"
          >{{ scope.row.productPeriodDay }}天</span>
        </template>
      </el-table-column>
      <el-table-column prop="refereeName" label="推荐人姓名" width="100px" />
      <el-table-column prop="platform" label="订单开通方式" width="110px">
        <template #default="scope">
          {{ scope.row.platform == 1 ? "支付购买" : "免费开通" }}
        </template>
      </el-table-column>

      <el-table-column prop="tgName" label="创建者" width="120px" />
      <!-- <el-table-column prop="tgComName" label="所属分公司" width="120px" /> -->
      <el-table-column prop="tgExchangeName" label="所属营业部" width="120px" />
      <!-- <el-table-column prop="categoryId" label="产品分类ID" width="100px" /> -->
      <el-table-column
        prop="liveProductId"
        label="是否是直播带货订单"
        width="150px"
      >
        <template #default="scope">
          <span>{{ scope.row.liveProductId ? "是" : "否" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="liveName" label="带货直播名称" width="120px">
        <template #default="scope">
          <span>{{ scope.row.liveName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="channel" label="订单渠道" width="90px">
        <template #default="scope">
          <span>{{ channel_map[scope.row.channel] || "" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="campaign" label="免费订单来源" width="110px">
        <template #default="scope">
          <span>{{ free_order_campaign_map[scope.row.campaign] || "" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="订单状态" width="100px">
        <template #default="scope">
          <span>{{
            [3, 4].includes(scope.row.payType)
              ? pay_status_words_ty[scope.row.status]
              : pay_status_words[scope.row.status] || ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="180px" />
      <el-table-column prop="updateTime" label="订单更新时间" width="180px" />
      <el-table-column prop="refundApply" label="退款申请人" width="100px" />
      <el-table-column prop="refundAmount" label="退款金额(元)" width="110px">
        <template #default="scope">
          <span>{{ scope.row.refundAmount / 100 || "" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="refundReason" label="退款理由" width="100px" />
      <el-table-column
        prop="refundApplyTime"
        label="退款申请时间"
        width="180px"
      />
      <el-table-column prop="operator" label="退款审核人" width="110px" />
      <el-table-column prop="checkStatus" label="退款审核状态" width="110px">
        <template #default="scope">
          <span
            v-if="scope.row.checkStatus == 0 && scope.row.refundCheckTime"
          >驳回</span>
          <span
            v-else-if="scope.row.checkStatus == 1 && scope.row.refundCheckTime"
          >申请中</span>
          <span
            v-else-if="scope.row.checkStatus == 2 && scope.row.refundCheckTime"
          >通过</span>
          <span v-else />
        </template>
      </el-table-column>
      <el-table-column prop="checkReason" label="审核意见" width="100px" />
      <el-table-column
        prop="refundCheckTime"
        label="退款审核时间"
        width="180px"
      />
      <el-table-column
        prop="refundEndTime"
        label="退款成功时间"
        width="180px"
      />
      <el-table-column align="center" label="操作" fixed="right" width="180px">
        <template #default="scope">
          <div
            v-if="[1, 2, 5].includes(scope.row.payType)"
            style="display: flex; justify-content: center"
          >
            <el-button
              v-if="scope.row.status == 2 || scope.row.status == 7"
              link
              type="primary"
              size="small"
              @click="showEdit(scope.row, '申请退款')"
            >申请退款</el-button>
            <el-button
              v-if="scope.row.status == 3"
              link
              type="primary"
              size="small"
              @click="showCheck(scope.row, '审核退款')"
            >审核退款</el-button>
            <el-button
              v-if="scope.row.status != 4 && scope.row.status != 1"
              link
              type="primary"
              size="small"
              @click="showEdit(scope.row, '强制退款')"
            >强制退款</el-button>
          </div>
          <div
            v-if="[3, 4].includes(scope.row.payType)"
            style="display: flex; justify-content: center"
          >
            <el-button
              v-if="scope.row.status == 2 || scope.row.status == 7"
              link
              type="primary"
              size="small"
              @click="unSubscribeFn(scope.row.orderId)"
            >立即解约</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="queryParams.current"
      :page-size="queryParams.size"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      :visible.sync="refundDialog.visible"
      :title="refundDialog.title"
      :modal-append-to-body="false"
      width="50%"
      @close="resetRefundForm('refundFormRef')"
    >
      <el-form
        ref="refundFormRef"
        :model="refundParams"
        :rules="refundRules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="订单ID" prop="orderId">
          <el-col :span="22">{{ refundParams.orderId }}</el-col>
        </el-form-item>
        <el-form-item label="订单金额" prop="amount">
          <el-col :span="22">{{ refundParams.amount / 100 }}元</el-col>
        </el-form-item>
        <el-form-item label="退款金额" prop="refundAmount">
          <el-col
            :span="10"
          ><el-input
            v-model="refundParams.refundAmount"
            placeholder="请输入退款金额"
          /></el-col><el-col :span="2">元</el-col>
        </el-form-item>
        <el-form-item label="退款原因" prop="refundReason">
          <el-col
            :span="22"
          ><el-input
            v-model="refundParams.refundReason"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入退款原因"
          /></el-col>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetRefundForm('refundFormRef')">取消</el-button>
          <el-button type="primary" @click="submitRefundForm('refundFormRef')">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      :visible.sync="checkRefundDialog.visible"
      :title="checkRefundDialog.title"
      :modal-append-to-body="false"
      width="50%"
      @close="resetCheckRefundForm('checkRefundFormRef')"
    >
      <el-form
        ref="checkRefundFormRef"
        :model="checkRefundParams"
        :rules="checkRefundRules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="订单ID" prop="orderId">
          <el-col :span="22">{{ checkRefundParams.orderId }}</el-col>
        </el-form-item>
        <el-form-item label="退款金额" prop="refundAmount">
          <el-col
            :span="22"
          >{{ checkRefundParams.refundAmount / 100 }}元</el-col>
        </el-form-item>
        <el-form-item label="审核状态" prop="checkStatus">
          <el-col
            :span="22"
          ><el-radio-group v-model="checkRefundParams.checkStatus">
            <el-radio label="0">驳回</el-radio>
            <el-radio label="2">通过</el-radio>
          </el-radio-group></el-col>
        </el-form-item>
        <el-form-item label="审核意见" prop="checkReason">
          <el-col
            :span="22"
          ><el-input
            v-model="checkRefundParams.checkReason"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入审核意见"
          /></el-col>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="resetCheckRefundForm('checkRefundFormRef')"
          >取消</el-button>
          <el-button
            type="primary"
            @click="submitCheckRefundForm('checkRefundFormRef')"
          >
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import dayjs from "dayjs";
import {
  queryOrderList,
  toRefundApplyCheck,
  toRefundApply,
  toRefundForce,
  unSubscribe
} from "@/api/order";
import {
  PAY_TYPE_WORDS,
  RENEWAL_MAP,
  RISK_LEVELS,
  CHANNEL_MAP,
  FREE_ORDER_CAMPAIGN_MAP,
  PAY_STATUS_WORDS,
  PAY_STATUS_WORDS_TY,
  PAY_CYCLE,
  COUPON_TYPE_MAP
} from "@/utils/options";

export default {
  name: "OrderList",
  data() {
    const checkAmount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入退款金额"));
      } else if (value > this.refundParams.amount / 100 || value < 0) {
        callback(
          new Error(`请输入大于0小于${this.refundParams.amount / 100}的数字`)
        );
      } else {
        callback();
      }
    };
    return {
      total: 1,
      loading: false,
      data: [],
      pay_type_words: PAY_TYPE_WORDS,
      renewal_map: RENEWAL_MAP,
      risk_levels: RISK_LEVELS,
      channel_map: CHANNEL_MAP,
      free_order_campaign_map: FREE_ORDER_CAMPAIGN_MAP,
      pay_status_words: PAY_STATUS_WORDS,
      pay_status_words_ty: PAY_STATUS_WORDS_TY,
      pay_cycle: PAY_CYCLE,
      coupon_type_map: COUPON_TYPE_MAP,
      queryParams: {
        productName: "",
        categoryId: undefined,
        channel: undefined,
        current: 1,
        customAccount: "",
        customRiskLevel: undefined,
        endTime: "2023-03-08 17:20:24",
        isRenewal: undefined,
        matching: undefined,
        moduleStatus: undefined,
        orderId: "",
        payType: undefined,
        platform: undefined,
        productPeriod: undefined,
        productType: undefined,
        refereeId: "",
        size: 10,
        startTime: "2021-03-08 17:20:24",
        status: undefined,
        timeType: undefined
      },
      dateVale: "",
      refundDialog: {
        title: "",
        visible: false
      },
      checkRefundDialog: {
        title: "",
        visible: false
      },
      checkRefundParams: {
        orderId: "", // 订单ID
        refundAmount: 0, // 退款金额，
        checkStatus: "", // 审核状态 0：驳回 1：申请中 2：通过
        checkReason: "" // 审核意见
      },
      refundParams: {
        orderId: "", // 订单ID
        amount: 0, // 订单金额
        refundAmount: 0, // 退款金额，
        refundReason: "" // 申请退款原因
      },
      refundRules: {
        refundAmount: [
          {
            validator: checkAmount,
            type: "number",
            min: 0,
            required: true,
            trigger: "change"
          }
        ]
      },
      checkRefundRules: {
        checkStatus: [
          {
            required: true,
            message: "请选择审核状态",
            trigger: "change"
          }
        ]
      },
      downloadLoading: false
    };
  },
  computed: {
    ...mapGetters(["user"])
  },
  watch: {},
  created() {
    this.dateVale = [
      dayjs()
        .subtract(1, "months")
        .format("YYYY-MM-DD"),
      dayjs().format("YYYY-MM-DD")
    ];
  },
  mounted() {
    this.queryOrderList();
  },

  methods: {
    async toExport() {
      this.downloadLoading = true;
      if (this.dateVale) {
        this.queryParams.startTime = dayjs(this.dateVale[0]).format(
          "YYYY-MM-DD 00:00:00"
        );
        this.queryParams.endTime = dayjs(this.dateVale[1]).format(
          "YYYY-MM-DD 23:59:59"
        );
      } else {
        this.queryParams.startTime = "";
        this.queryParams.endTime = "";
      }
      // this.queryParams.size = 999;
      const params = JSON.parse(JSON.stringify(this.queryParams));
      params.size = 999;
      const { data, code, message } = await queryOrderList(params);
      if (code === 0) {
        import("@/utils/export2Excel").then(excel => {
          const tHeader = [
            "订单ID",
            "用户名",
            "手机号",
            "客户资金账户",
            "客户姓名",
            "产品类型",
            "产品ID",
            "产品名称",
            "产品分类名称",
            "生效时间",
            "到期时间",
            "支付方式",
            "微信/支付订单号",
            "支付时间",
            "总价(元)",
            "支付价(元)",
            "费率",
            "优惠券",
            "优惠券类型",
            "优惠券赠送天数/月份",
            "优惠金额/折扣率",
            "是否续费订单",
            "客户风险等级",
            "产品风险等级",
            "产品周期",
            "推荐人姓名",
            "订单开通方式",
            "创建者",
            // "所属分公司",
            "所属营业部",
            "是否是直播带货订单",
            "带货直播名称",
            "订单渠道",
            "免费订单来源",
            "订单状态",
            "下单时间",
            "订单更新时间",
            "退款申请人",
            "退款金额(元)",
            "退款理由",
            "退款审核人",
            "退款审核状态",
            "审核意见",
            "退款审核时间",
            "退款成功时间"
          ];
          const filterVal = [
            "orderId",
            "customCode",
            "customMobile",
            "customAccount",
            "customName",
            "productType",
            "productId",
            "productName",
            "categoryName",
            "moduleStart",
            "moduleEnd",
            "payType",
            "payId",
            "payTime",
            "totalPrice",
            "payPrice",
            "rate",
            "couponId",
            "couponType",
            "couponValue",
            "couponIdOne",
            "isRenewal",
            "customRiskLevel",
            "productRiskLevel",
            "productPeriod",
            "refereeName",
            "platform",
            "tgName",
            // "tgComName",
            "tgExchangeName",
            "liveProductId",
            "liveName",
            "channel",
            "campaign",
            "status",
            "orderTime",
            "updateTime",
            "refundApply",
            "refundAmount",
            "refundReason",
            "operator",
            "checkStatus",
            "checkReason",
            "refundCheckTime",
            "refundEndTime"
          ];
          const excelData = this.formatJson(filterVal, data.list);
          excel.export_json_to_excel({
            header: tHeader,
            data: excelData,
            filename: "订单统计"
          });
          console.log("list=>", data.list);
        });
      } else {
        this.$message.error(message);
      }
      this.downloadLoading = false;
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "productType") {
            return v[j] == 1 ? "基础产品" : "套餐产品";
          } else if (j === "payType") {
            return this.pay_type_words[v[j]];
          } else if (
            j === "totalPrice" ||
            j === "payPrice" ||
            j === "refundAmount"
          ) {
            return (v[j] / 100).toFixed(2);
          } else if (j === "rate") {
            return v[j] ? `${v[j] * 1000}‰` : "-";
          } else if (j === "couponType") {
            return this.coupon_type_map[v[j]] || "";
          } else if (j === "couponValue") {
            return v["couponType"] == 1
              ? `${v["couponValue"]}${v["couponFreeType"] == 1 ? "天" : "月"}`
              : "";
          } else if (j === "couponIdOne") {
            return [2, 3].includes(v["couponType"])
              ? `${(v["couponValue"] / 100).toFixed(2)}`
              : "";
          } else if (j === "isRenewal") {
            return this.renewal_map[v[j]];
          } else if (j === "customRiskLevel") {
            return v[j] ? this.risk_levels[v[j]] : "";
          } else if (j === "productRiskLevel") {
            return this.risk_levels[v[j] || ""];
          } else if (j === "productPeriod") {
            return v[j] != 6 ? this.pay_cycle[v[j]] : v["productPeriodDay"];
          } else if (j === "platform") {
            return v[j] == 1 ? "支付购买" : "免费开通";
          } else if (j === "liveProductId") {
            return v[j] ? "是" : "否";
          } else if (j === "channel") {
            return this.channel_map[v[j] || ""];
          } else if (j === "campaign") {
            return v[j] ? this.free_order_campaign_map[v[j]] : "";
          } else if (j === "status") {
            return [3, 4].includes(v["payType"])
              ? this.pay_status_words_ty[v[j]]
              : this.pay_status_words[v[j]] || "";
          } else if (j === "checkStatus") {
            return this.checkStatusChange(v);
          } else {
            return v[j] ? v[j] : "--";
          }
        })
      );
    },
    checkStatusChange(val) {
      if (val.checkStatus == 0 && val.refundCheckTime) {
        return "驳回";
      } else if (val.checkStatus == 1 && val.refundCheckTime) {
        return "申请中";
      } else if (val.checkStatus == 2 && val.refundCheckTime) {
        return "通过";
      }
    },
    // 查询订单
    queryOrderList() {
      this.loading = true;
      // this.$set(
      //   this.queryParams,
      //   'startTime',
      //   moment(this.queryParams.startTime).format('YYYY-MM-DD HH:mm:ss')
      // )
      // const isEndTime = new Date(this.queryParams.endTime)
      // isEndTime.setHours(23)
      // isEndTime.setMinutes(59)
      // isEndTime.setSeconds(59)
      // this.$set(
      //   this.queryParams,
      //   'endTime',
      //   moment(isEndTime).format('YYYY-MM-DD HH:mm:ss')
      // )
      if (this.dateVale) {
        this.queryParams.startTime = dayjs(this.dateVale[0]).format(
          "YYYY-MM-DD 00:00:00"
        );
        this.queryParams.endTime = dayjs(this.dateVale[1]).format(
          "YYYY-MM-DD 23:59:59"
        );
      } else {
        this.queryParams.startTime = "";
        this.queryParams.endTime = "";
      }

      queryOrderList(this.queryParams).then(data => {
        this.data = data.data.list;
        this.total = data.data.total;
        this.loading = false;
      });
    },
    handleSearch(current) {
      this.$set(
        this.queryParams,
        "current",
        current || this.queryParams.current
      );
      this.queryOrderList();
    },
    handleReset(formName) {
      this.$refs[formName].resetFields();
      this.queryOrderList();
    },
    submitRefundForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.toRefundApplyMethod();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    resetRefundForm(formName) {
      this.$refs[formName].resetFields();
      this.$set(this.refundDialog, "visible", false);
    },

    resetCheckRefundForm(formName) {
      this.$refs[formName].resetFields();
      this.$set(this.checkRefundDialog, "visible", false);
    },

    // 审核退款提交
    submitCheckRefundForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.toRefundApplyCheckMethod();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async toRefundApplyCheckMethod() {
      const { code } = await toRefundApplyCheck(this.checkRefundParams);
      if (code === 0) {
        this.$message({
          message: "审核退款成功",
          type: "success"
        });
        this.resetCheckRefundForm("checkRefundFormRef");
        this.queryOrderList();
      } else {
        this.$message({
          message: "审核退款失败",
          type: "error"
        });
      }
    },
    // 申请退款提交
    async toRefundApplyMethod() {
      if (Number(this.refundParams.refundAmount) < 0.01) {
        return this.$message({
          message: "退款金额需大于0.01元",
          type: "error"
        });
      }
      const params = {
        orderId: this.refundParams.orderId,
        refundAmount: this.refundParams.refundAmount * 100,
        refundReason: this.refundParams.refundReason
      };
      if (this.refundDialog.title === "申请退款") {
        const { code } = await toRefundApply(params);
        if (code === 0) {
          this.$message({
            message: "申请退款成功",
            type: "success"
          });
          this.resetRefundForm("refundFormRef");
          this.queryOrderList();
        } else {
          this.$message({
            message: "申请退款失败",
            type: "error"
          });
        }
      } else if (this.refundDialog.title === "强制退款") {
        const { code } = await toRefundForce(params);
        if (code === 0) {
          this.$message({
            message: "强制退款成功",
            type: "success"
          });
          this.resetRefundForm("refundFormRef");
          this.queryOrderList();
        } else {
          this.$message({
            message: "强制退款失败",
            type: "error"
          });
        }
      }
    },

    // 退款弹窗
    showEdit(row, title) {
      this.$set(this.refundDialog, "title", title);
      this.$set(this.refundDialog, "visible", true);
      this.$set(this.refundParams, "orderId", row.orderId);
      this.$set(this.refundParams, "amount", row.payPrice);
    },
    // 审核窗口
    showCheck(row, title) {
      this.$set(this.checkRefundDialog, "title", title);
      this.$set(this.checkRefundDialog, "visible", true);
      this.$set(this.checkRefundParams, "orderId", row.orderId);
      this.$set(this.checkRefundParams, "refundAmount", row.refundAmount);
    },
    handleCurrentChange(val) {
      this.$set(this.queryParams, "current", val || 1);
      this.queryOrderList();
    },
    handleSizeChange(val) {
      this.$set(this.queryParams, "size", val);
      this.$set(this.queryParams, "current", 1);
      this.queryOrderList();
    },
    async unSubscribeFn(val) {
      const ret = await unSubscribe({ orderId: val });
      if (ret.code === 0) {
        this.$message({
          message: "解约成功！",
          type: "success"
        });
        this.queryOrderList();
      } else {
        this.$message({
          message: "解约失败！",
          type: "error"
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.compress {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

::v-deep.el-input__suffix {
  margin-right: 3px;
}

.head-down {
  display: flex;
  align-items: baseline;
}
</style>
