<template>
  <div>
    <BaseDialog
      :disabledBtn="disabledBtn"
      width="900px"
      :isShow.sync="isShow"
      title="退款审核"
      @close="close"
      :confirmStatus="false"
    >
      <div v-if="formPay.toBankAcount">
        <em>收款信息：</em>
        <el-form
          :model="formPay"
          :rules="rulesPay"
          ref="rulesPay"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="银行账号：" prop="toBankAcount">
            <el-input
              readonly
              clearable
              v-model="formPay.toBankAcount"
            ></el-input>
          </el-form-item>
          <el-form-item label="账号名称：" prop="toBankName">
            <el-input
              readonly
              clearable
              v-model="formPay.toBankName"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行名称：" prop="toBankTypeName">
            <el-input
              readonly
              clearable
              v-model="formPay.toBankTypeName"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
      </div>
      <template v-if="form.checkType === 2">
        <p style="margin-top: 0">
          申请时间：{{ $methodsTools.onlyForma(form.applyTime) }}
        </p>
        <p>
          <span class="color_1890ff">{{ form.applyName }}</span>
          <span>,发起退款申请</span>
        </p>

        <div class="bgc_pink">
          <p>
            <strong>订单号：</strong><span>{{ form.orderSn }}</span>
            <el-button
              type="text"
              style="margin-left: 10px"
              @click="openOrderDetail"
              >订单详情</el-button
            >
          </p>
          <!-- :span-method="objectSpanMethod" 表格合并代码👇 -->
          <el-table
            size="small"
            border
            :data="form.refundUserList"
            stripe
            style="width: 100%"
            height="340"
          >
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="70"
            ></el-table-column>
            <el-table-column
              align="center"
              v-for="(item, index) in tableList"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
            >
              <template slot-scope="scope">
                <template v-if="item.scope === 'isOptions'">
                  <template v-for="(i, k) in item.options">
                    <span v-if="scope.row[item.prop] == i.value">{{
                      i.label
                    }}</span>
                  </template>
                </template>
                <div v-else :style="item.style">
                  <span v-if="item.ch && scope.row[item.prop]">{{
                    item.ch
                  }}</span>
                  {{ scope.row[item.prop] }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <ul>
            <li>
              本次申请退款：<span
                >￥{{ parseFloat(form.refundFee).toFixed(2) }}</span
              >
            </li>
            <li>
              未收货款：<span
                >￥{{ parseFloat(form.orderUncollected).toFixed(2) }}</span
              >
            </li>
            <li>
              已收款待退：<span
                >￥{{ parseFloat(form.orderReceived).toFixed(2) }}</span
              >
            </li>
            <li>
              已申请的佣金：<span
                >￥{{ parseFloat(form.brokerage).toFixed(2) }}</span
              ><strong v-if="form.brokerage > 0"
                >（佣金已结算，建议联系业务员与客户沟通，确认是否申请佣金，再做审核已）</strong
              >
            </li>
            <li>
              本次可退金额：<span style="font-weight: bold"
                >￥{{
                  parseFloat(form.refundFee - form.orderUncollected).toFixed(2)
                }}</span
              >
            </li>
          </ul>
        </div>
        <template slot="slotBtnRight">
          <el-button @click="auditFail">审核不通过</el-button>
          <el-button type="primary" @click="submitForm">审核通过</el-button>
        </template>
        <audit-progress
          :auditProgress.sync="auditProgress"
          :checkLogVos="form.checkLogVos"
        ></audit-progress>
      </template>
      <template v-if="form.checkType === 3">
        <em>订单信息：</em>
        <p>
          支付金额：<span
            class="color_red"
            style="font-size: 28px; font-weight: 400"
            >¥ {{ form.refundMoney.toFixed(2) }}</span
          >
        </p>
        <p>
          下单时间：<em>{{ $methodsTools.onlyForma(form.applyTime) }}</em>
        </p>
        <p>
          订单单号：<em>{{ form.orderSn }}</em>
        </p>
        <p>
          支付方式：<el-radio disabled v-model="form.payType" :label="1"
            >微信支付</el-radio
          >
          <el-radio disabled v-model="form.payType" :label="2"
            >网银支付、对公转账</el-radio
          >
        </p>
        <el-divider></el-divider>
        <em>支付方式：</em>
        <el-tag type="success" v-if="form.payType === 1">原路返回</el-tag>
        <el-tag type="danger" v-if="form.payType === 2">网银支付</el-tag>
      </template>
    </BaseDialog>

    <dislogOrderDetails
      :dialogVisible.sync="orderDialogVisible"
      :orderSn="orderSn"
      :ShowStatus="1"
    ></dislogOrderDetails>
  </div>
</template>

<script>
import dislogOrderDetails from "../dislogOrderDetails.vue";
import auditProgress from "./auditProgress.vue";
export default {
  name: "DislogSet",
  components: {
    auditProgress,
    dislogOrderDetails,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    orderSn: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      disabledBtn: false,
      auditProgress: false,
      orderDialogVisible: false,
      form: {
        checkLogVos: [],
      },
      formPay: {
        toBankAcount: "",
        toBankName: "",
        toBankTypeName: "",
      },
      rulesPay: {
        toBankAcount: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
        ],
        toBankName: [
          { required: true, message: "请输入账号名称", trigger: "blur" },
        ],
        toBankTypeName: [
          { required: true, message: "请输入银行名称", trigger: "blur" },
        ],
      },
      tableData: [],
      tableList: [
        {
          label: "业务类型",
          prop: "businessName",
          width: "180",
        },
        {
          label: "退款课程",
          prop: "goodsName",
          width: "180",
        },
        {
          label: "原价",
          prop: "refundFee",
          width: "100",
          ch: "￥",
        },
        {
          label: "单价",
          prop: "refundFee",
          width: "160",
          ch: "￥",
          style: { color: "red" },
        },
        {
          label: "税前佣金",
          prop: "refundFee",
          ch: "￥",
        },
        {
          label: "实际单价",
          prop: "refundFee",
          ch: "￥",
        },
        {
          label: "学员姓名",
          prop: "userName",
        },
        {
          label: "身份证号码",
          prop: "userCard",
          width: "160",
        },
        {
          label: "退款原因",
          prop: "refundReason",
        },
      ],
    };
  },

  mounted() {},

  methods: {
    //订单详情
    openOrderDetail() {
      this.orderDialogVisible = true;
    },
    init() {
      this.resetForm();
      this.$api.systemtoporderrefunddetail(this.orderSn).then((res) => {
        this.form = res.data;
        this.formPay = {
          toBankAcount: res.data.proceedsAccount,
          toBankName: res.data.openingName,
          toBankTypeName: res.data.openingBank,
        };
      });
    },
    close() {
      this.$refs["rulesPay"].resetFields();
    },
    resetForm() {
      this.form = {
        checkLogVos: [],
      };
      this.formPay = {
        toBankAcount: "",
        toBankName: "",
        toBankTypeName: "",
      };
    },

    auditFail() {
      this.$prompt("确定审核不通过吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "输入不通过原因",
      })
        .then(({ value }) => {
          this.$api
            .systemtoporderrefundcheck({
              orderSn: this.orderSn,
              checkResult: "-1",
              checkReason: value || "",
            })
            .then((res) => {
              this.$message.success("操作成功");
              this.isShow = false;
              this.$emit("search");
            });
        })
        .catch(() => {});
    },
    submitForm() {
      if (this.form.checkType === 3) {
        this.$api
          .systemtoporderrefundpay({
            orderSn: this.orderSn,
            payType: this.form.payType,
            tenantId: this.form.tenantId,
            ...this.formPay,
          })
          .then((res) => {
            this.isShow = false;
            this.$emit("search");
          });
      } else {
        this.disabledBtn = true;
        this.$api
          .systemtoporderrefundcheck({
            orderSn: this.orderSn,
            checkResult: "1",
          })
          .then((res) => {
            this.$message.success("操作成功");
            this.isShow = false;
            this.$emit("search");
          })
          .finally(() => {
            this.disabledBtn = false;
          });
      }
    },
  },
  computed: {
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.bgc_pink {
  padding: 10px;
  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  color: #000;
}
.color_red {
  font-weight: bold;
  color: rgb(235, 59, 59);
}
.color_1890ff {
  color: #1890ff;
  font-weight: bold;
}
em {
  font-weight: bold;
  color: #000;
  font-style: unset;
}
li {
  margin-bottom: 6px;
  span {
    color: red;
  }
}
</style>
