<template>
  <div class="app-container" v-loading="loading">
    <el-form ref="formRef" :model="form" label-width="110px">
      <div class="zd-card">
        <h4>新建兑换商品</h4>
        <div>
          <el-form-item label="参与活动类型" prop="activityType">
            <el-radio-group v-model="form.activityType">
              <el-radio :value="1" border>
                <div class="btn-title">通用兑换</div>
                <div class="btn-sub">
                  发布后上架啤酒币商城展示并支持累积返利兑换。
                </div>
              </el-radio>
              <el-radio :value="2" border>
                <div class="btn-title">累积返利</div>
                <div class="btn-sub">仅适用于累积返利兑换，不上架展示。</div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
      <div class="zd-card">
        <h4>基本信息</h4>
        <div>
          <el-form-item label="商品类型" prop="goodsType">
            <el-radio-group v-model="form.goodsType">
              <el-radio :value="1">酒款</el-radio>
              <el-radio :value="2">其他</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="售卖方式" prop="purchaseMethod">
            <el-radio-group v-model="form.purchaseMethod">
              <el-radio :value="1">啤酒币兑换</el-radio>
              <el-radio :value="2">活动奖励</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="form.goodsType == 1"
            label="快速套用酒款"
            prop="goodsCover"
          >
            <el-select
              v-model="selBeer"
              placeholder="请选择酒款"
              style="width: 400px"
              value-key="id"
              @change="handleSelectChange"
            >
              <el-option
                v-for="item in allBeersList"
                :key="item.id"
                :label="item.beerName"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品图片" prop="goodsCover">
            <ImageUpload v-model="form.goodsCover" :fileSize="5" :limit="1" />
          </el-form-item>

          <el-form-item label="商品名称" prop="goodsName">
            <el-input
              v-model="form.goodsName"
              placeholder="请输入商品名称"
              style="width: 400px"
            />
          </el-form-item>
          <el-form-item label="商品规格" prop="specs">
            <el-input
              v-model="form.specs"
              placeholder="请输入规格"
              style="width: 400px"
            />
          </el-form-item>
        </div>
      </div>
      <div v-if="form.activityType == 1" class="zd-card">
        <h4>兑换比例与库存</h4>
        <el-form-item label="可兑换库存数量" prop="stockNum">
          <el-input
            v-model="form.stockNum"
            placeholder="请输入"
            style="width: 400px"
            oninput="value=value.replace(/[^0-9]/g,'')"
          />
        </el-form-item>
        <el-form-item label="需啤酒币数量" prop="redeemedNum">
          <el-input
            v-model="form.redeemedNum"
            placeholder="请输入啤酒币兑换数"
            style="width: 400px"
            oninput="value=value.replace(/[^0-9]/g,'')"
          />
        </el-form-item>
        <el-form-item label="是否限购" prop="redeemed">
          <el-radio-group v-model="form.redeemed">
            <el-radio :value="0">是</el-radio>
            <el-radio :value="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>

      <div class="zd-card">
        <h4>商品详情</h4>
        <el-form-item label="商品规格" prop="specs">
          <editor v-model="form.desc" :min-height="150" style="width: 400px" />
        </el-form-item>
      </div>
    </el-form>
    <div class="btn-container">
      <el-button type="primary" @click="handlePublish">保存并发布</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="handleCancle">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { addGoods } from "@/api/brewery/goods";
import { allBeers } from "@/api/brewery/beer";
const { proxy } = getCurrentInstance();
const router = useRouter();
const loading = ref(false);
const goodsType = ref(1);
const form = ref({
  activityType: 1,
  goodsType: 1,
  purchaseMethod: 1,
  redeemed: 1,
});
const allBeersList = ref([]); // 所有啤酒列表
// 获取所有啤酒列表
function getAllBeersFun() {
  allBeers().then((response) => {
    allBeersList.value = response.data;
  });
}
const selBeer = ref(null); // 快速套用酒款
function handleSelectChange(beer) {
  console.log(beer, beer.beerName);
  form.value.goodsCover = beer.cover;
  form.value.goodsName = beer.beerName;
  form.value.specs = beer.specs;
  form.value.desc = beer.desc;
}
getAllBeersFun(); // 所有啤酒列表
function handlePublish() {
  console.log("发布");
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      form.value.onSale = 1;
      loading.value = true;
      addGoods(form.value)
        .then((response) => {
          loading.value = false;
          proxy.$modal.msgSuccess("发布成功");
          router.back();
        })
        .catch((error) => {
          loading.value = false;
          console.log(error);
          proxy.$modal.msgError("发布失败");
        });
    }
  });
}
function handleSubmit() {
  console.log("保存");
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      form.value.onSale = 0;
      loading.value = true;
      addGoods(form.value)
        .then((response) => {
          loading.value = false;
          proxy.$modal.msgSuccess("保存成功");
          router.back();
        })
        .catch((error) => {
          loading.value = false;
          console.log(error);
          proxy.$modal.msgError("保存失败");
        });
    }
  });
}
function handleCancle() {
  router.back();
}
</script>

<style scoped lang="scss">
:deep(.el-radio.is-bordered) {
  width: auto;
  height: auto;
  padding: 8px 15px;
}
.btn-title {
  font-family: Nunito Sans;
  font-size: 14px;
  font-weight: 600;
  color: #202224;
}
.btn-sub {
  font-family: Nunito Sans;
  font-size: 10px;
  font-weight: 600;
  color: #979797;
}
.btn-container {
  text-align: center;
}
</style>
