<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer"
    direction="rtl"
    :before-close="handleClose"
    size="800px"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="130px"
      :rules="rules"
      class="add-settings"
    >
      <el-form-item label="模式名称" v-if="form.modeId">模式{{ form.sortOrder }}</el-form-item>

      <el-form-item label="模式类型" prop="sharedMode">
        <el-radio-group v-model="form.sharedMode">
          <el-radio :label="0">排队模式</el-radio>
          <el-radio :label="1">均摊模式</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="均摊到账时间"
        prop="immediateArrival"
        v-if="form.sharedMode == 1"
      >
        <el-radio-group v-model="form.immediateArrival">
          <el-radio :label="false">定时均摊</el-radio>
          <el-radio :label="true">立即均摊</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="请选择时间"
        prop="settlementHour"
        v-if="form.sharedMode == 1 && form.immediateArrival === false"
      >
        <el-select
          v-model="form.settlementHour"
          placeholder="请选择均摊到账时间"
          style="width: 300px"
          clearable
        >
          <el-option
            v-for="item in 23"
            :key="item"
            :label="item + ':00'"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商家让利占比" prop="subsidyRatio">
        <el-input-number
          v-model="form.subsidyRatio"
          controls-position="right"
          placeholder="请输入，最低5，最高90"
          :min="5"
          :max="90"
          :precision="0"
          style="width: 300px"
        ></el-input-number>
        <span class="percentage-unit">%</span>
        <span class="description">占到店扫码订单金额的百分比</span>
      </el-form-item>

      <template v-if="form.sharedMode == 1">
        <el-form-item label="队首补贴占比" prop="firstSubsidyRatio">
          <el-input-number
            v-model="form.firstSubsidyRatio"
            controls-position="right"
            placeholder="请输入，最低1，最高99"
            :min="1"
            :max="99"
            :precision="0"
            style="width: 300px"
          ></el-input-number>
          <span class="percentage-unit">%</span>
        </el-form-item>

        <el-form-item label="均摊补贴占比">
          <span
            >{{
              form.firstSubsidyRatio != null ? 100 - form.firstSubsidyRatio : 0
            }}%</span
          >
        </el-form-item>
      </template>

      <el-form-item
        label="消费者最高补贴（占订单金额比）"
        prop="amountSubsidyRatio"
      >
        <el-input-number
          v-model="form.amountSubsidyRatio"
          controls-position="right"
          placeholder="请输入,区间0~100"
          :min="0"
          :max="100"
          :precision="0"
          style="width: 300px"
        ></el-input-number>
        <span class="percentage-unit">%</span>
        <span class="description">占到店扫码订单金额的百分比</span>
      </el-form-item>

      <el-form-item
        label="消费者积分补贴（占订单金额比）"
        prop="pointSubsidyRatio"
      >
        <el-input-number
          v-model="form.pointSubsidyRatio"
          controls-position="right"
          placeholder="请输入,区间0~100"
          :min="0"
          :max="100"
          :precision="0"
          style="width: 300px"
        ></el-input-number>
        <span class="percentage-unit">%</span>
      </el-form-item>

      <p class="description">
        注意：补贴金额+补贴积分占比合计最低要大于等于10%。
      </p>

      <el-form-item label="">
        <el-button type="primary" @click="submitForm" :loading="buttonLoading"
          >保存</el-button
        >
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script>
import {
  subsidyModeAdd,
  subsidyModeEdit,
} from "@/api/subsidyMode/modeSettings";

export default {
  data() {
    return {
      buttonLoading: false,
      title: "新增模式",
      drawer: false,
      form: {
        sharedMode: 0,
        immediateArrival: false,
        amountSubsidyRatio: 100,
      },
      rules: {
        sharedMode: [
          { required: true, message: "请选择模式类型", trigger: "change" },
        ],
        immediateArrival: [
          { required: true, message: "请选择模式", trigger: "change" },
        ],
        settlementHour: [
          { required: true, message: "请选择均摊到账时间", trigger: "change" },
        ],
        subsidyRatio: [
          { required: true, message: "请输入商家让利占比", trigger: "blur" },
        ],
        firstSubsidyRatio: [
          { required: true, message: "请输入队首补贴占比", trigger: "blur" },
        ],
        amountSubsidyRatio: [
          { required: true, message: "请输入消费者最高补贴", trigger: "blur" },
        ],
        pointSubsidyRatio: [
          { required: true, message: "请输入消费者积分补贴", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    open(form, sortOrder) {
      this.form = form
        ? form
        : { sharedMode: 0, immediateArrival: false, amountSubsidyRatio: 100 };
      if (form) {
        this.title = "修改模式";
      } else {
        this.title = "新增模式";
        this.form.sortOrder = sortOrder;
      }
      this.drawer = true;
    },
    handleClose() {
      this.drawer = false;
      this.form = { sharedMode: 0, immediateArrival: false };
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // console.log(this.form);
          // return;
          if (
            this.form.amountSubsidyRatio * 1 + this.form.pointSubsidyRatio * 1 <
            10
          ) {
            this.$message.error("补贴金额+补贴积分占比合计要大于等于10%");
            return;
          }
          this.buttonLoading = true;
          let form = {
            ...this.form,
            settlementHour: this.form.settlementHour
              ? this.form.settlementHour
              : 0,
            firstSubsidyRatio: this.form.firstSubsidyRatio
              ? this.form.firstSubsidyRatio
              : 0,
          };
          let url = form.modeId ? subsidyModeEdit : subsidyModeAdd;
          url(form)
            .then((res) => {
              this.buttonLoading = false;
              if (res.code == 200) {
                this.$message.success(form.modeId ? "修改成功" : "添加成功");
                this.$emit("success", form.modeId ? "edit" : "add");
                this.handleClose();
              }
            })
            .catch((err) => {
              this.buttonLoading = false;
              console.log(err);
            });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.add-settings {
  padding: 0 30px;
  .percentage-unit {
    margin-left: 10px;
  }
  .description {
    margin-left: 20px;
    color: red;
  }
}
</style>
