<template>
  <a-spin :spinning="confirmLoading">
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-card title="分利日期设置">
        <a-row>
          <a-col>
            <a-form-model-item label="订单完成超过：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="days" style="margin-bottom:10px">
              <a-input-number v-model="model.days" :min="1" placeholder="请输入天数" style="width: 90%" />
              <span style="margin-left:3px">天</span>
            </a-form-model-item>
          </a-col>
          <a-col :offset="5">
            <p style="color:red">自动结束交易，不能申请退款 ，超过日期后的订单才能进行结算</p>
          </a-col>

          <a-col>
            <a-form-model-item label="业主支付使用积分数：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payUsePoints" style="margin-bottom:10px">
              <a-input-number v-model="model.payUsePoints" :min="1" placeholder="请输入" style="width: 90%" />
              <span style="margin-left:3px">积分</span>
            </a-form-model-item>
          </a-col>
          <a-col :offset="5">
            <p style="color:red">抵扣物业费1元使用积分数</p>
          </a-col>

          <a-col>
            <a-form-model-item label=" 业主支付获取积分数：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payGetPoints" style="margin-bottom:10px">
              <a-input-number v-model="model.payGetPoints" :min="1" placeholder="请输入天数" style="width: 90%" />
              <span style="margin-left:3px">积分</span>
            </a-form-model-item>
          </a-col>
          <a-col :offset="5">
            <p style="color:red">商品购买1元获取积分数</p>
          </a-col>

          <a-col style="margin-top: 100px">
            <a-form-model-item :wrapper-col="{ span: 14, offset: 8 }">
              <a-button type="primary" @click="onSubmit">提交</a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>
    </a-form-model>
  </a-spin>
</template>

<script>
import { getRuleDayDetailApi, editRuleDayDetailApi } from '@/api/api'

export default {
  name: 'PermissionListAsync',
  data() {
    return {
      // 表头
      confirmLoading: false,
      labelCol: {
        xs: { span: 6 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 8 },
        sm: { span: 8 },
      },
      model: {
        days: 7,
        payUsePoints: 1,
        payGetPoints: 1
      },
      validatorRules: {
        days: [{ required: true, message: '请输入天数', trigger: 'blur' }],
        payUsePoints: [{ required: true, message: '请输入积分', trigger: 'blur' }],
        payGetPoints: [{ required: true, message: '请输入积分', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async getDetails() {
      let {result} = await getRuleDayDetailApi({ id: 1 })
      this.model.days = result.days
      this.model.payUsePoints = result.payUsePoints
      this.model.payGetPoints = result.payGetPoints
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if(valid) {
          editRuleDayDetailApi({...this.model, id: 1}).then(res=> {
            this.$message.success('修改成功！');
          })
        }
      })
    }
  },
  created() {
    this.getDetails()
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>