<template>
  <el-main class="goods-config">
    <div class="box sa-flex sa-col-bottom">
      <div>库存预警配置</div>
      <div class="line"></div>
    </div>
    <el-form ref="formRef" :model="form.model" :rules="form.rules" label-width="122px">
      <el-form-item label="库存预警阈值">
        <el-input
          v-model="form.model.stock_warning"
          type="number"
          :min="0"
          placeholder="请输入库存预警阈值"
          class="sa-w-120"
        >
          <template #append> 件 </template>
        </el-input>
      </el-form-item>
    </el-form>
  </el-main>
  <el-footer class="sa-footer--submit">
    <el-button @click="getConfig">重置</el-button>
    <el-button type="primary" @click="onSave">保存</el-button>
  </el-footer>
</template>
<script setup>
  import { reactive, ref, onMounted, unref } from 'vue';
  import { api } from '../config.service';
  const formRef = ref();
  const form = reactive({
    model: {
      stock_warning: 0,
    },
  });
  async function getConfig() {
    const { data } = await api.goods();
    form.model = data;
  }
  function onSave() {
    form.model.stock_warning = Number(form.model.stock_warning);
    unref(formRef) &&
      unref(formRef).validate(async (valid) => {
        if (valid) {
          await api.goods(form.model);
        }
      });
  }
  onMounted(() => {
    getConfig();
  });
</script>
<style lang="scss" scoped>
  .box {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: var(--sa-title);
    position: relative;
    margin: 8px 0 24px 0;
    height: 32px;
  }
  .line {
    position: absolute;
    left: -1px;
    bottom: 0;
    width: 86px;
    height: 6px;
    background: rgba(128, 106, 246, 0.3);
  }
</style>
