<template>
  <div class="app-container">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
      <div class="list-item">
        <p class="title">代理商分账配置</p>
        <el-form-item label="省级代理" prop="provinceBusinessRatio">
          <el-input-number v-model="formData.provinceBusinessRatio" controls-position="right" placeholder="请输入" :min="0"
            :precision="0" style="width: 200px; text-align: left"></el-input-number>
          <span class="unit">%</span>
          <span class="desc">*分直系店铺到店支付收益中，平台服务费里面的百分比。</span>
        </el-form-item>
        <el-form-item label="省级代理" prop="provinceRegionRatio">
          <el-input-number v-model="formData.provinceRegionRatio" controls-position="right" placeholder="请输入" :min="0"
            :precision="0" style="width: 200px; text-align: left"></el-input-number>
          <span class="unit">%</span>
          <span class="desc">*分下级代理店铺支付收益中，平台服务费里面的百分比。</span>
        </el-form-item>
        <el-form-item label="地级代理" prop="regionBusinessRatio">
          <el-input-number v-model="formData.regionBusinessRatio" controls-position="right" placeholder="请输入" :min="0"
            :precision="0" style="width: 200px; text-align: left"></el-input-number>
          <span class="unit">%</span>
          <span class="desc">*分直系店铺到店支付收益中，平台服务费里面的百分比。</span>
        </el-form-item>
      </div>

      <div class="list-item">
        <p class="title">提现手续费</p>
        <el-form-item label="店铺结算" prop="businessWithdrawRatio">
          <el-input-number v-model="formData.businessWithdrawRatio" controls-position="right" placeholder="请输入" :min="0"
            :precision="0" style="width: 200px; text-align: left"></el-input-number>
          <span class="unit">%手续费</span>
        </el-form-item>
        <el-form-item label="代理提现" prop="agentWithdrawRatio">
          <el-input-number v-model="formData.agentWithdrawRatio" controls-position="right" placeholder="请输入" :min="0"
            :precision="0" style="width: 200px; text-align: left"></el-input-number>
          <span class="unit">%手续费</span>
        </el-form-item>
        <el-form-item label="用户补贴提现" prop="userWithdrawRatio">
          <el-input-number v-model="formData.userWithdrawRatio" controls-position="right" placeholder="请输入" :min="0"
            :precision="0" style="width: 200px; text-align: left"></el-input-number>
          <span class="unit">%手续费</span>
        </el-form-item>
      </div>

      <div class="list-item">
        <p class="title">服务费</p>
        <el-form-item label="到店支付" prop="onlineOrderServiceFeeRatio">
          <el-input-number v-model="formData.onlineOrderServiceFeeRatio" controls-position="right" placeholder="请输入"
            :min="0" :precision="0" style="width: 200px; text-align: left"></el-input-number>
          <span class="unit">%服务费</span>
          <span class="desc">扫码订单的百分比。</span>
        </el-form-item>
        <el-form-item label="商城收益" prop="orderServiceFeeRatio">
          <el-input-number v-model="formData.orderServiceFeeRatio" controls-position="right" placeholder="请输入" :min="0"
            :precision="0" style="width: 200px; text-align: left"></el-input-number>
          <span class="unit">%</span>
          <span class="desc">商城订单实际支付金额的百分比</span>
        </el-form-item>
      </div>

      <div class="list-item">
        <p class="title">用户年累计消费额度限制</p>
        <el-form-item label="年上限" prop="onlineOrderUserYearConsumptionLimit">
          <el-input-number v-model="formData.onlineOrderUserYearConsumptionLimit" controls-position="right"
            placeholder="请输入" :min="0" :precision="2" style="width: 200px; text-align: left"></el-input-number>
          <span class="desc">到达额度后，扫码消费提示，年消费额度已满，需要调整请联系平台管理员。（自然年，每年清空）</span>
        </el-form-item>
      </div>
    </el-form>
    <div class="button-group">
      <el-button type="primary" @click="submitForm" :loading="buttonLoading">保 存</el-button>
    </div>
  </div>
</template>

<script>
import {
  revenueSharingConfigInfo,
  revenueSharingConfigAdd,
} from "@/api/platformInfo";
export default {
  data() {
    return {
      buttonLoading: false,
      formData: {},
      rules: {
        provinceBusinessRatio: [
          { required: true, message: "请输入省级代理", trigger: "blur" },
        ],
        provinceRegionRatio: [
          { required: true, message: "请输入省级代理", trigger: "blur" },
        ],
        regionBusinessRatio: [
          { required: true, message: "请输入地级代理", trigger: "blur" },
        ],
        businessWithdrawRatio: [
          { required: true, message: "请输入店铺结算", trigger: "blur" },
        ],
        agentWithdrawRatio: [
          { required: true, message: "请输入代理提现", trigger: "blur" },
        ],
        userWithdrawRatio: [
          { required: true, message: "请输入用户补贴提现", trigger: "blur" },
        ],
        onlineOrderServiceFeeRatio: [
          { required: true, message: "请输入到店支付", trigger: "blur" },
        ],
        orderServiceFeeRatio: [
          { required: true, message: "请输入商城收益", trigger: "blur" },
        ],
        onlineOrderUserYearConsumptionLimit: [
          {
            required: true,
            message: "请输入用户年累计消费额度限制",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      revenueSharingConfigInfo().then((res) => {
        if (res.code == 200) {
          this.formData = res.data || {};
        }
      });
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          revenueSharingConfigAdd(this.formData).then((res) => {
            if (res.code == 200) {
              this.$successMsg('保存成功');
            }
          }).catch(err => {
          }).finally(() => {
            this.buttonLoading = false;
          })
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px 20px 100px 50px;

  .list-item {
    margin-bottom: 30px;

    .title {
      font-size: 17px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    ::v-deep input {
      text-align: left;
    }

    .unit {
      margin-left: 10px;
    }

    .desc {
      margin-left: 50px;
      color: red;
    }
  }

  .button-group {
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 10px 50px;
    background-color: #ffffff;
    z-index: 100;
  }
}
</style>
