<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div>
    <el-dialog
      :show-close="false"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
      center
    >
      <div slot="title" class="dialog-title">挂账还款</div>
      <div class="content">
        <div v-if="form.repaymentMethod == 'total' && !form.creditBuyerId" class="credit_info">
          <div>挂账人：{{ form.debtor }}</div>
          <div>挂账金额：￥{{ form.owedAmount || 0 }}</div>
          <div>账户余额: ￥{{ form.accountBalance || 0 }}</div>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
          <el-form-item v-if="form.repaymentMethod == 'total' && !form.creditBuyerId" label="还款方式" style="width: 100%;">
            <el-radio-group v-model="form.repaymentMethod">
              <el-radio v-for="item in repaymentMethodList" v-if="form.repaymentMethod == item.value" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="还款金额" prop="repaymentAmount" style="width: 100%;">
            <el-input v-model="form.repaymentAmount" placeholder="" oninput="value= value.replace(/[^\d|\.]/g, '')">
              <template slot="prepend">￥</template>
            </el-input>
          </el-form-item>
          <el-form-item label="支付方式" prop="paymentMethod" style="width: 100%;">
            <el-input v-model="form.paymentMethod" placeholder="请输入支付方式" />
          </el-form-item>
          <el-form-item label="备注" prop="remark" style="width: 100%;">
            <el-input v-model="form.remark" placeholder="请输入备注" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { creditRePayment, creditPayment } from '@/api/credit'

export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['couponId'],
  data() {
    return {
      dialogVisible: false,
      loading: false,
      repaymentMethodList: [
        { label: '按总金额还款', value: 'total' },
        { label: '按订单还款', value: 'order' }
      ],
      form: {
        id: '',
        creditBuyerId: '',
        orderId: '',
        repaymentMethod: '',
        repaymentAmount: '',
        paymentMethod: '',
        remark: ''
      },
      rules: {
        repaymentAmount: [
          {
            required: true,
            message: '请输入还款金额',
            trigger: 'blur'
          }
        ],
        paymentMethod: [
          {
            required: true,
            message: '请输入支付方式',
            trigger: 'blur'
          }
        ]
      },
      resetForm: null
    }
  },
  mounted() {
    this.resetForm = { ...this.form }
  },
  methods: {
    /**
     * 确定
     */
    // eslint-disable-next-line no-undef
    onSubmitHandle: _.debounce(function async() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            this.loading = true
            // if (!this.form.shopId) { this.form.shopId = localStorage.getItem('shopId') }
            let res
            if (this.form.repaymentMethod === 'total') {
              res = await creditRePayment(this.form)
            } else {
              res = await creditPayment(this.form)
            }
            this.$notify({
              title: '成功',
              message: res.repaymentMsg,
              type: 'success'
            })
            this.dialogVisible = false
            this.loading = false
            this.$emit('success', res)
          } catch (error) {
            this.loading = false
            console.log(error)
          }
        }
      })
    }, 1000),

    /**
     * 打开
     * @param row
     */
    show(row, order) {
      this.form = { ...this.resetForm }
      if (row.creditBuyerId) {
        this.form.creditBuyerId = row.creditBuyerId
        this.form.orderId = order.id
      } else {
        this.form.id = row.id
      }
      this.form.repaymentMethod = row.repaymentMethod
      this.form.debtor = row.debtor
      this.form.owedAmount = row.owedAmount
      this.form.accountBalance = row.accountBalance
      this.dialogVisible = true
    },

    /**
     * 关闭
     */
    close() {
      this.dialogVisible = false
    },

    reset() {
      this.query = { ...this.resetQuery }
    }
  }
}
</script>

<style scoped lang="scss">
.credit_info{
  width: 100%;
  background: #F7F7FA;
  border-radius: 3px 3px 3px 3px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 15px 25px;
  box-sizing: border-box;
  margin-bottom: 30px;
  view{
    font-weight: 400;
    font-size: 14px;
    color: #000000;
  }
}
.dialog-title{
  text-align: left;
}
</style>
