<template>
  <view class="charts-box  bg-white content p-2">

    <view v-if="parent.id" class="p-4 mb-2 bg-slate-50">
      上级分类： ({{ parent.name }})
    </view>

    <wd-form ref="form" :model="baseForm">
      <wd-cell-group class="flex py-2 w-full" title="分类图片">
        <view class="ml-3">
          <myUpload v-model="baseForm.pic_url" :size="1"></myUpload>
        </view>
      </wd-cell-group>

      <wd-form-item label-width="76px" label="分类名称" prop="address">
        <wd-input v-model="baseForm.name" placeholder="请输入分类名称" clearable />
      </wd-form-item>

      <wd-form-item label-width="80px" label="分类排序" prop="address">
        <view class="ml-3 flex">
          <wd-input-number v-model="baseForm.sort" />
        </view>
      </wd-form-item>

      <wd-form-item label-width="80px" label="状态" prop="address">
        <view class="ml-3 flex">
          <wd-switch v-model="baseForm.status" :active-value="1" :inactive-value="0" />
        </view>
      </wd-form-item>

      <view class="footer m-4">
        <wd-button @click="saveCat" type="primary" size="large" block>保存</wd-button>
      </view>

    </wd-form>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import goods from '@/api/store/goods.js'
import myUpload from "@/components/myUpload/index.vue"
import {
  onLoad,
} from "@dcloudio/uni-app";

const parent = ref({})
const model = ref({})
const baseForm = ref({})

onLoad(async (e) => {

  if (e.parent) {
    parent.value = JSON.parse(e.parent)
  }

  if (e.edit) {
    baseForm.value = JSON.parse(e.edit)
  }

})

const saveCat = () => {

  goods.classify.createItem({
    parent_id: parent.value.id || baseForm.value.id || 0,
    ...baseForm.value
  }).then(res => {
    if (res.code == 0) {
      uni.showToast({
        title: '操作成功!',
        icon: 'success'
      })

      uni.navigateBack()
    }
  })

}
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
}
</style>