<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('提现设置') }}</span>
          </div>
          <div>
            <el-form
              ref="form"
              label-width="100px"
              :model="form"
              :rules="rules"
              size="medium"
            >
              <el-form-item
                :label="__('提现最低金额')"
                label-width="200px"
                prop="withdraw_min_amount"
              >
                <el-input
                  v-model="form.withdraw_min_amount"
                  clearable
                  :placeholder="__('请输入单行文本提现最低金额')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                :label="__('客户确定收货后N天可提现')"
                label-width="200px"
                prop="withdraw_received_day"
              >
                <el-input
                  v-model="form.withdraw_received_day"
                  clearable
                  :placeholder="
                    __(
                      '客户收货确认后N天可提现，如果填写7，则代表客户确认收货7天后，这笔订单金额商家可申请提现'
                    )
                  "
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                :label="__('佣金提现日期')"
                label-width="200px"
                prop="withdraw_monthday"
              >
                <el-input
                  v-model="form.withdraw_monthday"
                  clearable
                  :placeholder="
                    __(
                      '佣金提现日期，填写 1,2 代表只有每月1日,2日可以申请提现佣金提现日期'
                    )
                  "
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                :label="__('提现佣金比例')"
                label-width="200px"
                prop="withdraw_fee_rate"
              >
                <el-input
                  v-model="form.withdraw_fee_rate"
                  clearable
                  :placeholder="
                    __('例，请填写百分比符号%前面的数字提现佣金比提现佣金比例')
                  "
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button
              class="form-sub-btn"
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ __('退款设置') }}</span>
            </div>
            <div>
              <el-form
                ref="refundForm"
                label-width="100px"
                :model="refundForm"
                :rules="refundRules"
                size="medium"
              >
                <el-form-item
                  :label="__('退款方式')"
                  label-width="200px"
                  prop="order_refund_flag"
                >
                  <el-radio-group
                    v-model="refundForm.order_refund_flag"
                    size="medium"
                  >
                    <el-radio
                      v-for="(item, index) in order_refund_flagOptions"
                      :key="index"
                      :disabled="item.disabled"
                      :label="item.value"
                    >
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button
                class="form-sub-btn"
                icon="el-icon-s-tools"
                type="primary"
                @click="RefundEdit"
              >
                {{ __('修改') }}
              </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { getList, doEdit } from '@/api/base/config'
  import { URL } from '@/config'

  export default {
    name: 'Withdraw',
    components: {},
    data() {
      return {
        form: {
          withdraw_min_amount: undefined,
          withdraw_received_day: undefined,
          withdraw_monthday: undefined,
          withdraw_fee_rate: undefined,
        },
        refundForm: { order_refund_flag: undefined },
        refundRules: {
          order_refund_flag: [
            {
              required: true,
              message: this.__('退款方式不能为空'),
              trigger: 'change',
            },
          ],
        },
        order_refund_flagOptions: [
          {
            label: this.__('原路退回【支付宝及微信】'),
            value: '1',
          },
          {
            label: this.__('退回余额'),
            value: '2',
          },
        ],
        rules: {
          withdraw_min_amount: [
            {
              required: true,
              message: this.__('请输入单行文本提现最低金额'),
              trigger: 'blur',
            },
          ],
          withdraw_received_day: [
            {
              required: true,
              message: this.__(
                '客户收货确认后N天可提现，如果填写7，则代表客户确认收货7天后，这笔订单金额商家可申请提现'
              ),
              trigger: 'blur',
            },
          ],
          withdraw_monthday: [
            {
              required: true,
              message: this.__(
                '佣金提现日期，填写" 1, 2 "代表只有每月1日,2日可以申请提现佣金提现日期'
              ),
              trigger: 'blur',
            },
          ],
          withdraw_fee_rate: [
            {
              required: true,
              message: this.__(
                '例，请填写百分比符号%前面的数字提现佣金比提现佣金比例'
              ),
              trigger: 'blur',
            },
          ],
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,
      async fetchData() {
        const { data } = await getList()
        this.form = {
          withdraw_min_amount: data.withdraw_min_amount,
          withdraw_received_day: data.withdraw_received_day,
          withdraw_monthday: data.withdraw_monthday,
          withdraw_fee_rate: data.withdraw_fee_rate,
        }
        this.refundForm.order_refund_flag = data.order_refund_flag
      },
      handleEdit() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.form),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      RefundEdit() {
        this.$refs['refundForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.refundForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
    },
  }
</script>
