<template>
  <div class="app-container">
    <el-form :model="form" ref="form" inline>
      <h3>基础信息</h3>
      <el-form-item label="订单号：" prop="name">{{form.orderNumber}}</el-form-item>
      <el-form-item label="所属商家：" prop="name">{{form.businessName}}</el-form-item>
      <el-form-item label="商品名称：" prop="name">{{form.businessProductName}}</el-form-item>
      <el-form-item label="订单属性：" prop="name">{{form.productOrder.orderType==0?"自购":form.productOrder.orderType==1?"奖励":"--"}}</el-form-item>
      <el-form-item label="购买数量：" prop="name">{{form.buyQuantity}}（可使用0）</el-form-item>
      <el-form-item label="销售价格：" prop="name">{{form.sellingPrice}}</el-form-item>
      <el-form-item label="应付金额：" prop="name">{{form.orderAmount}}</el-form-item>
      <el-form-item label="订单状态：" prop="name">
        <!-- <el-tag v-if="form.productOrder.orderStatus==10">待使用</el-tag>
        <el-tag v-if="form.productOrder.orderStatus==20&&form.productOrder.refundStatus==0" type="success">已完成</el-tag>
        <el-tag v-if="form.productOrder.orderStatus==30&&form.productOrder.refundStatus==2" type="info">已退款</el-tag>
        <el-tag v-if="form.productOrder.orderStatus==20&&form.productOrder.refundStatus==1" type="info">已完成（有退款）</el-tag>
        <el-tag v-if="form.productOrder.orderStatus==0" type="danger">待支付</el-tag>
        <el-tag v-if="form.productOrder.orderStatus==30&&form.productOrder.refundStatus!=2" type="info">已取消</el-tag> -->
        <el-tag v-if="form.refundStatus===0">待处理</el-tag>
        <el-tag type="info" v-if="form.refundStatus===1">已退款</el-tag>
        <el-tag type="danger" v-if="form.refundStatus===2">退款失败</el-tag>
        <el-tag type="warning" v-if="form.refundStatus===3">退款拒绝</el-tag>
      </el-form-item>
      <el-form-item label="下单人姓名：" prop="name">{{form.userNickname}}</el-form-item>
      <el-form-item label="下单人手机号：" prop="name">{{form.userPhone}}</el-form-item>
      <el-form-item label="下单时间：" prop="name">{{parseTime(form.orderTime, '{y}-{m}-{d} {h}:{i}')}}</el-form-item>
      <el-form-item label="预约日期：" prop="name" v-if="form.reservationDate">{{form.reservationDate}}</el-form-item>
      <el-form-item label="预约场次：" prop="name" v-if="form.reservationTime">{{form.reservationTime}}</el-form-item>
      <div v-if="form.productOrder.productVisitor">
        <h3>游客信息</h3>
        <el-form-item label="游客姓名：" prop="name">{{form.productOrder.productVisitor.visitorName}}</el-form-item>
        <el-form-item label="游客手机号：" prop="name">{{form.productOrder.productVisitor.visitorPhone}}</el-form-item>
        <el-form-item label="游客身份证号：" prop="name">{{form.productOrder.productVisitor.visitorCardNumber}}</el-form-item>
      </div>
      <h3>付款信息</h3>
      <el-form-item label="支付时间：" prop="name">{{parseTime(form.productOrder.payTime, '{y}-{m}-{d} {h}:{i}')}}</el-form-item>
      <el-form-item label="支付方式：" prop="name">微信支付</el-form-item>
      <el-form-item label="支付流水号：" prop="name">{{form.productOrder.payOrder}}</el-form-item>
      <el-form-item label="实际支付金额：" prop="name">{{form.productOrder.payAmount||'--'}}</el-form-item>
      <h3>退款信息</h3>
      <el-form-item label="退款原因：" prop="name">{{form.refundReason||'--'}}</el-form-item>
      <el-form-item label="退款数量：" prop="name">{{form.refundQuantity||'--'}}</el-form-item>
      <el-form-item label="退款金额：" prop="name">{{form.refundAmount||'--'}}</el-form-item>
      <el-form-item label="退款方式：" prop="name">原路返回</el-form-item>

      <div><el-form-item label="退款说明：" prop="name">{{form.refundNotes||'无'}}</el-form-item></div>
      <div><el-form-item label="退款时间：" prop="name">{{parseTime(form.refundApplyTime, '{y}-{m}-{d} {h}:{i}')}}</el-form-item></div>
      <div v-if="form.auditStatus==1||form.auditStatus==2">
        <div><el-form-item label="退款状态：" prop="name">{{dealAuditStatus(form.auditStatus)}}</el-form-item></div>
        <div><el-form-item v-if="form.auditStatus==2" label=" 操作原因：" prop="name">{{form.auditNotes}}</el-form-item></div>
        <div><el-form-item label="操作时间：" prop="name">{{parseTime(form.auditTime, '{y}-{m}-{d} {h}:{i}')||'--'}}</el-form-item></div>
        <div><el-form-item label="操作人：" prop="name">{{form.auditUserName||'--'}}</el-form-item></div>
      </div>
      <el-form-item>
        <el-button @click="back">返回</el-button>
        <el-button type="primary" v-if="form.refundStatus==0" @click="passAudit(10)">同意退款</el-button>
        <el-button type="primary" v-if="form.refundStatus==0" @click="dialogVisible=true">拒绝退款</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="拒绝退款" :visible.sync="dialogVisible" width="30%" :before-close="close">
      <el-form :model="refuseForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="操作原因：" prop="auditNotes">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="refuseForm.auditNotes">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="refuseAudit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { businessProductRefundInfo, businessProductRefundAudit } from '@/api/order.js'
export default {
  data () {
    return {
      form: {
        productOrder: {}
      },
      refuseForm: {},
      refundStatusList: [
        { label: '待处理', value: 0 },
        { label: '审核通过', value: 1 },
        { label: '审核拒绝', value: 2 },
      ],
      dialogVisible: false,
      rules: {
        auditNotes: [
          { required: true, message: '请输入操作原因', trigger: 'blur' }
        ],
      },
      loading: false
    }
  },
  created () {
    this.refuseForm.refundOrderId = this.$route.query.refundOrderId
    this.getDetails();
  },
  methods: {
    dealAuditStatus (status) {
      for (let i = 0; i < this.refundStatusList.length; i++) {
        if (this.refundStatusList[i].value == status) {
          return this.refundStatusList[i].label
        }
      }
    },
    close () {
      this.refuseForm = {
        auditNotes: undefined,
      };
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false
    },
    getDetails () {
      businessProductRefundInfo(this.$route.query.refundOrderId).then(res => {
        this.form = res.data;
        this.refuseForm = {
          refundOrderId: this.$route.query.refundOrderId,
          refundOrderNumber: this.form.refundOrderNumber
        }
      })
    },
    // 同意退款
    passAudit () {
      this.$modal.confirm('确认同意退款？').then(() => {
        this.loading = true;
        this.refuseForm.auditStatus = 1
        return businessProductRefundAudit(this.refuseForm);
      }).then(() => {
        this.loading = false;
        this.$modal.msgSuccess("同意退款成功");
        this.$router.go(-1)
      }).finally(() => {
        this.loading = false;
      });
    },
    // 拒绝退款
    refuseAudit () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$modal.confirm('确认拒绝退款').then(() => {
            this.loading = true;
            this.refuseForm.auditStatus = 2
            this.refuseForm.refundStatus = 3
            return businessProductRefundAudit(this.refuseForm);
          }).then(() => {
            this.loading = false;
            this.$modal.msgSuccess("拒绝退款成功");
            this.$router.go(-1)
          }).finally(() => {
            this.loading = false;
          });
        }
      })
    },
    back () {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang='scss' scoped>
h3 {
  font-weight: 700;
}
.el-form--inline .el-form-item {
  width: 24%;
}
</style>