<template>
  <div class="app-container">
    <el-form
      ref="beerRef"
      :model="form"
      :rules="rules"
      label-width="165px"
      label-suffix="："
    >
      <div class="zd-card">
        <h3 class="zd-card-title">酒款信息</h3>
        <el-row>
          <el-col :span="7">
            <el-form-item label="商品海报" prop="cover">
              <ImageUpload v-model="form.cover" :fileSize="5" :limit="1" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="鱼眼标" prop="fisheyeLogo">
              <ImageUpload
                v-model="form.fisheyeLogo"
                :fileSize="5"
                :limit="1"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="酒款名称" prop="beerName">
          <el-input
            v-model="form.beerName"
            placeholder="请输入酒款名称"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item label="酒款风格" prop="beerStyles">
          <el-cascader
            v-model="form.beerStyles"
            :options="beerStyles"
            :show-all-levels="false"
            :props="{
              label: 'styleName',
              value: 'styleName',
              emitPath: false,
            }"
            placeholder="请选择酒款风格"
            style="width: 400px"
            clearable
          />
        </el-form-item>
        <el-form-item label="酒精度数 ABV" prop="beerAbv">
          <el-input
            v-model="form.beerAbv"
            placeholder="请输入酒精度数"
            style="width: 400px"
            oninput="value=value.replace(/[^0-9]/g,'')"
          />
        </el-form-item>
        <el-form-item label="原麦汁浓度 Plato" prop="beerOg">
          <el-input
            v-model="form.beerOg"
            placeholder="请输入原麦汁浓度"
            style="width: 400px"
            oninput="value=value.replace(/[^0-9]/g,'')"
          />
        </el-form-item>
        <el-form-item label="苦度值 IBU" prop="beerIbus">
          <el-input
            v-model="form.beerIbus"
            placeholder="请输入苦度值"
            style="width: 400px"
            oninput="value=value.replace(/[^0-9]/g,'')"
          />
        </el-form-item>
        <el-form-item label="上市日期" prop="launchDate">
          <el-date-picker
            clearable
            v-model="form.launchDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择上市日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="产品描述" prop="desc">
          <el-input
            v-model="form.desc"
            type="textarea"
            maxlength="140"
            show-word-limit
            placeholder="请输入产品描述"
            style="width: 400px"
            :autosize="{ minRows: 4, maxRows: 6 }"
          />
        </el-form-item>
      </div>
      <div class="zd-card">
        <h3>酒标签打印配置</h3>
        <el-form-item label="原料以及辅料" prop="materials">
          <el-input
            v-model="form.materials"
            placeholder="请输入原料以及辅料"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item label="保质期" prop="shelfLife">
          <el-input
            v-model="form.shelfLife"
            placeholder="请输入保质期"
            style="width: 400px"
            oninput="value=value.replace(/[^0-9]/g,'')"
          >
            <template #append>
              <el-select v-model="shelfLifeUnit" style="width: 80px">
                <el-option label="天" value="天"></el-option>
                <el-option label="月" value="月"></el-option>
                <el-option label="年" value="年"></el-option>
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="条形码" prop="barcode">
          <el-input
            v-model="form.barcode"
            placeholder="请输入条形码"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item label="净含量" prop="netContent">
          <el-input
            v-model="form.netContent"
            placeholder="请输入净含量"
            style="width: 400px"
            oninput="value=value.replace(/[^0-9]/g,'')"
          >
            <template #append>
              <el-select v-model="netContentUnit" style="width: 80px">
                <el-option label="L" value="L"></el-option>
                <el-option label="ML" value="ML"></el-option>
              </el-select> </template
          ></el-input>
        </el-form-item>
      </div>
      <div class="zd-card">
        <h3>营销策略</h3>
        <el-form-item label="市售状态" prop="onSale">
          <el-radio-group v-model="form.onSale">
            <el-radio :value="1">在售款</el-radio>
            <el-radio :value="0">已停产</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="门店指导价" prop="marketPrice">
          <el-input
            v-model="form.marketPrice"
            placeholder="请输入门店指导价"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item label="市售规格" prop="specs">
          <!-- <el-input v-model="form.specs" placeholder="请输入规格" /> -->
          <el-radio-group v-model="form.specs">
            <el-radio value="桶装">桶装</el-radio>
            <el-radio value="罐装">罐装</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="扫码啤酒币赠送数量" prop="scanCoinCount">
          <el-input
            v-model="form.scanCoinCount"
            type="number"
            min="0"
            max="9999"
            placeholder="请填写整数（必填）"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item label="写酒评赠送数量" prop="firstReviewCoin">
          <el-input
            v-model="form.firstReviewCoin"
            type="number"
            min="0"
            max="9999"
            placeholder="请填写整数（选填）"
            style="width: 400px"
          />
        </el-form-item>
      </div>
    </el-form>
    <div class="btn-container">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleCancle">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { addBeer, styleList } from "@/api/brewery/beer";
import { getCurrentInstance } from "vue";
const router = useRouter();
const { proxy } = getCurrentInstance();
const beerStyles = ref();
const form = ref({
  specs: "桶装",
  onSale: 1,
  scanCoinCount: 0,
  firstReviewCoin: 0,
  cover: "",
  beerName: "",
  beerStyles: "",
});
const netContentUnit = ref("L");
const shelfLifeUnit = ref("天");
const rules = {
  beerName: [{ required: true, message: "请输入啤酒名称", trigger: "blur" }],
  launchDate: [
    { required: true, message: "请选择上市日期", trigger: "change" },
  ],
  scanCoinCount: [
    { required: true, message: "请输入扫码啤酒币赠送数量", trigger: "blur" },
  ],
  cover: [{ required: true, message: "请上传封面图", trigger: "change" }],

  beerStyles: [
    { required: true, message: "请选择啤酒风格", trigger: "change" },
  ],
};
function handleSubmit() {
  proxy.$refs["beerRef"].validate((valid) => {
    if (valid) {
      form.value.netContent += netContentUnit.value;
      form.value.shelfLife += shelfLifeUnit.value;
      addBeer(form.value).then(() => {
        proxy.$message.success("提交成功");
        router.push("/product/beers");
      });
    }
  });
}
function handleCancle() {
  router.push("/product/beers");
}
// 获取酒款风格列表
function getBeerStyles() {
  styleList().then((res) => {
    console.log(res);
    beerStyles.value = res.data;
  });
}
getBeerStyles();
</script>

<style scoped lang="scss">
.btn-container {
  text-align: center;
}
</style>
