<template>
  <view class="content p-2 bg-gray-100">
    <wd-form ref="form" :model="model">
      <wd-cell-group border>

        <div class="bg-gray-100">
          <div class="bg-gray-100 rounded mb-2">
            <div class="bg-white flex flex-col pt-3 pl-3">
              <div class="name mb-2 text-xs">缩略图</div>
              <wd-upload :file-list="fileList" :action="action" :formData="formData" :header="header"
                @change="handleChange" name="image"></wd-upload>
            </div>
          </div>
        </div>

        <div class="bg-gray-100">
          <div class="bg-gray-100 rounded mb-2">
            <div class="bg-white flex flex-col pt-3 pl-3">
              <div class="name mb-2 text-xs">商品主图</div>
              <wd-upload :file-list="fileList" :action="action" :formData="formData" :header="header"
                @change="handleChange" name="image"></wd-upload>
            </div>
          </div>
        </div>

        <view class="h-2 bg-gray-100"></view>

        <view class=" p-3 rounded mb-2">
          <div class="name mb-2 text-xs">商品名称</div>
          <view class="bg-white px-3 py-1 rounded">
            <wd-textarea v-model="model.value" auto-height />
          </view>
        </view>

        <view class="h-2 bg-gray-100"></view>

        <view class="bg-gray-100  rounded mb-2">
          <div class="p-2 bg-white">
            <div class="name mb-2 text-xs">服务内容</div>
            <view class="bg-white px-3 py-1 rounded">
              <wd-input type="text" v-model="value" placeholder="例子: 正品保障,极速发货,7天退换货。多个请使用英文逗号“,”分隔"
                @change="handleChange" />
            </view>
          </div>
        </view>

        <view class="h-2 bg-gray-100"></view>

        <view class=" p-3 rounded mb-2">
          <div class="name mb-2 text-xs">商品重量</div>
          <view class="bg-white px-3 py-2 rounded flex items-center mb-4">
            <wd-input-number v-model="value" @change="handleChange" />
            <view class="text-xs from-neutral-300 ml-4">千克</view>
          </view>

          <wd-picker class="w-full" :columns="freightRules" label="运费模板" v-model="model.freight_id"
            @confirm="handleConfirm" />

        </view>




      </wd-cell-group>
      <view class="footer mt-4">
        <wd-button type="primary" size="large" @click="handleSubmit" block>保存</wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script setup>
// const { success } = useToast()
import { ref } from 'vue'
import system from '@/api/modules/system.js'
import goods from '@/api/store/goods.js'

const fileList = ref([
  {
    url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'
  }
])

const action = 'https://saasdemo.byin.vip/admin/system/uploadImage'
const token = uni.getStorageSync("token");
const header = {
  Authorization: `Bearer ${token}`
}
const formData = {
  parent_id: 0,
  type: "image",
}

function handleChange({ files }) {
  fileList.value = files
}

const model = ref({
  value1: '',
  value2: ''
})

const form = ref()

function handleSubmit1() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        showSuccess({
          msg: '校验通过'
        })
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

const freightRules = ref([])
const GetfreightRules = () => {
  goods.freightRules().then(res => {
    freightRules.value = res.data.rows.map(item => {
      return {
        label: item.name,
        value: item.id
      }
    })
  })
}
GetfreightRules()
</script>

<style lang="scss"></style>
