<template>
  <div class="app-container">
    <el-form :size="ELsize" ref="form" :model="form" :rules="rules" label-width="130px" style="width: 700px">
      <el-form-item label="营业状态" prop="businessStatus">
        <el-switch v-model="form.businessStatus" active-text="营业中" inactive-text="停业中">
        </el-switch>
      </el-form-item>
      <el-form-item label="营业时间" prop="businessHours">
        <el-input v-model="form.businessHours" placeholder="请输入营业时间" clearable />
      </el-form-item>
      <el-form-item label="单笔消费限额" prop="onlineOrderConsumptionLimit">
        <el-input-number v-model="form.onlineOrderConsumptionLimit" controls-position="right" placeholder="请输入单笔消费限额"
          :min="0" :precision="2" style="width: 100%"></el-input-number>
        <div style="margin-top: 5px">
          <el-radio-group v-model="radioNum">
            <el-radio-button v-for="value in optionsList" :key="value.label" :label="value.value">{{ value.label
              }}</el-radio-button>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" :loading="loading" @click="handleSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { businessSetPayParamsPage, businessInfoBase } from "@/api/shop";

export default {
  data() {
    return {
      loading: false,
      radioNum: null,
      form: {
        businessStatus: false,
      },
      rules: {},
      optionsList: [
        {
          label: 100,
          value: 100,
        },
        {
          label: 200,
          value: 200,
        },
        {
          label: 300,
          value: 300,
        },
        {
          label: 500,
          value: 500,
        },
        {
          label: 1000,
          value: 1000,
        },
        {
          label: 2000,
          value: 2000,
        },
        {
          label: 3000,
          value: 3000,
        },
      ],
    };
  },
  watch: {
    radioNum(val) {
      this.form.onlineOrderConsumptionLimit = val;
    },
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      businessInfoBase().then((res) => {
        if (res.code == 200) {
          this.form = res.data;
        }
      });
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          console.log(this.form);
          businessSetPayParamsPage({
            businessId: this.form.businessId,
            businessStatus: this.form.businessStatus,
            businessHours: this.form.businessHours,
            onlineOrderConsumptionLimit:
              this.form.onlineOrderConsumptionLimit || 0,
          })
            .then((res) => {
              this.loading = false;
              if (res.code == 200) {
                this.$message.success("保存成功");
              }
            })
            .catch((err) => {
              this.loading = false;
              console.log(err);
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
