<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { Ref, ref } from "vue";
import Upload from "../../../components/Upload.vue";
import RichEditor from "../../../components/RichEditor.vue";
import { addGood } from "@/api/product";

const ruleForm = ref(null) as Ref;

const basicData = ref({
  name: "",
  class_id: null,
  cover: [],
  rotation: [],
  profile: "",
  details: "",
  stock: null,
  number: null,
  market_num: null,
  state: 2,
});

const rules = {
  name: [
    {
      required: true,
      message: "请填写商品名称",
    },
  ],
  class_id: [
    {
      required: true,
      message: "请选择商品分类",
    },
  ],
  cover: [
    {
      required: true,
      message: "请上传商品封面",
      validator: (value) => {
        return value.length > 0;
      },
    },
  ],
  rotation: [
    {
      required: true,
      message: "请上传商品轮播图",
      validator: (value) => {
        return value.length > 0;
      },
    },
  ],
  profile: [
    {
      required: true,
      message: "请填写商品名称",
    },
  ],
  stock: [
    {
      required: true,
      message: "请填写商品库存",
    },
  ],
  number: [
    {
      required: true,
      message: "请填写商品价格",
    },
  ],
  market_num: [
    {
      required: true,
      message: "请填写商品市场价",
    },
  ],
};

const columnsClass = ref([]);

Taro.useLoad((options) => {
  console.log(options);
});

const openGoodClass = ref(false);

const confirmClass = (val: any) => {
  console.log(val);
};

const ok = async () => {
  ruleForm.value.validate().then(({ valid, errors }: any) => {
    if (valid) {
      console.log("success", basicData.value);
    } else {
      console.log("error submit!!", errors);
    }
  });
};
</script>

<template>
  <view>
    {{ basicData }}
    <nut-backtop>
      <template v-slot:content>
        <nut-form ref="ruleForm" :model-value="basicData" :rules="rules">
          <nut-form-item label="商品分类:" required prop="class_id">
            <nut-input
              v-model="basicData.class_id"
              disabled
              placeholder="请选择商品分类"
              @click="openGoodClass = true"
            />
          </nut-form-item>
          <nut-form-item label="商品封面:" required prop="cover">
            <Upload v-model:list="basicData.cover" />
          </nut-form-item>
          <nut-form-item label="商品轮播图:" required prop="rotation">
            <Upload v-model:list="basicData.rotation" :max="10" />
          </nut-form-item>
          <nut-form-item label="商品名称:" required prop="name">
            <nut-input
              v-model="basicData.name"
              placeholder="请输入商品名称"
              type="text"
            />
          </nut-form-item>
          <nut-form-item label="商品价格:" required prop="number">
            <nut-input
              v-model="basicData.number"
              placeholder="请输入商品价格"
            />
          </nut-form-item>
          <nut-form-item label="市场价格:" required prop="market_num">
            <nut-input
              v-model="basicData.market_num"
              placeholder="请输入市场价格"
            />
          </nut-form-item>
          <nut-form-item label="商品库存:" required prop="stock">
            <nut-input v-model="basicData.stock" placeholder="请输入商品库存" />
          </nut-form-item>
          <nut-form-item label="商品简介:" required prop="profile">
            <nut-textarea
              class="textarea"
              v-model="basicData.profile"
              placeholder="请输入商品简介"
              type="text"
            />
          </nut-form-item>
          <nut-form-item label="上架状态:" prop="state">
            <nut-switch
              v-model="basicData.state"
              :active-value="1"
              :inactive-value="2"
            />
          </nut-form-item>
          <nut-form-item prop="details">
            <RichEditor
              :content="basicData.details"
              @input="(val) => (basicData.details = val)"
            />
          </nut-form-item>
          <nut-form-item prop="ok">
            <nut-button block type="primary" @click="ok">提交</nut-button>
          </nut-form-item>
        </nut-form>
      </template>
    </nut-backtop>
    <!--   商品分类     -->
    <nut-popup
      position="bottom"
      v-model:visible="openGoodClass"
      @close="openGoodClass = false"
    >
      <nut-picker
        :columns="columnsClass"
        title="商品分类"
        @confirm="confirmClass"
      ></nut-picker>
    </nut-popup>
  </view>
</template>

<style lang="scss">
.nut-input {
  border: none;
  color: #000;
}

.textarea {
  height: 100px;
  background-color: #fafafa;
  padding: 10px !important;
  border-radius: 10px;
}
</style>
