<script setup lang="tsx">
import { onMounted, reactive, ref, useTemplateRef, unref } from 'vue'
import { ContentWrap } from '@/components/ContentWrap'
import {
  ElInput,
  FormInstance,
  // ElSwitch,
  ElTabPane,
  ElCascader,
  ElTabs,
  ElForm,
  ElFormItem,
  ElInputTag,
  ElMessage,
  ElMessageBox,
  ElSelect,
  ElOption,
  ElRadioGroup,
  ElRadio,
  ElTableColumn,
  ElTable,
  ElDivider
} from 'element-plus'
import { Editor, EditorExpose } from '@/components/Editor'
import { useRoute, useRouter } from 'vue-router'
import { goodsData, attrsValue, goodsDatas } from '@/api/goods/types'
import { getProductCategory, addProduct, getProductDetail, putProduct } from '@/api/goods'
import { AttrBaseItem } from '@/api/goods/types'
import { UpImgButtom } from '@/components/UpFile'
import { getStoreList } from '@/api/store'
import { isArray } from 'lodash-es'
import { TableImage } from '@/components/tableImage'
import { getUnitList } from '@/api/goods'
const pageTitle = ref('添加')
const { params } = useRoute()
const { push } = useRouter()
const actinoTabIndex = ref(1)
const productType = [
  { value: 0, label: '普通商品' },
  { value: 1, label: '卡密' },
  { value: 2, label: '优惠券' },
  { value: 3, label: '虚拟商品' }
]
const formData = reactive<goodsData & { attrs_value: attrsValue[]; keyword: string[] }>({
  // bar_code: '',
  product_type: 0,
  store_id: '',
  id: 0,
  store_name: '',
  video_open: 0,
  video_link: '',
  slider_image: [],
  image: [],
  store_info: '',
  keyword: [],
  cate_id: [],
  sales: 0,
  ficti: 0,
  spec_type: 0,
  is_show: 1,
  limit_num: 0,
  is_limit: 0,
  limit_type: 0,
  is_police: 0,
  shelf_life: 0,
  attrs: [],
  attrs_value: [], // 初始化为空数组
  sort: 0,
  description: '',
  show_type: 0,
  is_verify: 0,
  pay_qudou: 1,
  is_vip_product: 0,
  is_weigh: 0,
  specs: [],
  cost: 0
})
const attrs_value = reactive<
  attrsValue & {
    image: string[]
  }
>({
  suk: '默认',
  image: [],
  stock: 0,
  detail: {},
  price: 0,
  ot_price: 0,
  cost: 0
})

/**
 * 创建并返回一个字段验证规则对象
 *
 * @param {string} field - 需要验证的字段名称
 * @param {string} errorMessage - 当验证失败时显示的错误信息
 * @returns {Object} 包含验证规则的对象，包括错误信息、是否必填、及自定义验证器
 */
const validateField = (field, errorMessage) => {
  // 返回一个对象，定义了验证规则
  return {
    // 错误信息，在验证失败时展示
    message: errorMessage,
    // 标记字段为必填
    required: true,
    // 自定义验证器，接收三个参数：规则、数据、及回调函数
    validator: (_, __, callback) => {
      // 检查指定字段在属性值对象中是否存在
      if (!attrs_value[field]) {
        // 如果字段不存在，通过回调函数返回一个错误对象，包含错误信息
        callback(new Error(errorMessage))
      } else {
        // 如果字段存在，调用回调函数但不传递错误，表示验证通过
        callback()
      }
    }
  }
}

/**
 * 根据规格类型获取对应的验证规则
 *
 * 此函数用于根据不同的商品规格类型返回相应的验证规则它接受一个规格类型参数（specType），
 * 并根据此参数的值返回不同的验证规则对象如果specType的值是0，则返回包含商品图片、库存、售价和成本价的验证规则；
 * 如果specType的值是1，则返回一个空对象表示没有验证规则；如果specType的值不是0或1，则在控制台输出警告信息并返回一个空对象
 *
 * @param {number} specType - 商品的规格类型，用于确定返回哪种验证规则
 * @returns {Object} - 返回对应规格类型的验证规则对象
 */
const getRulesForSpecType = (specType) => {
  if (specType === 0) {
    // 当规格类型为0时，返回包含商品图片、库存、售价和成本价验证规则的对象
    return {
      sutimage: [validateField('image', '请选择商品图片')],
      stock: [validateField('stock', '请填写库存')],
      price: [validateField('price', '请填写售价')]
      // cost: [validateField('cost', '请填写成本价')]
    }
  } else if (specType === 1) {
    // 当规格类型为1时，返回一个空对象表示没有验证规则
    return {}
  } else {
    // 当规格类型不是0或1时，输出警告信息并返回一个空对象
    console.warn('Unknown spec_type:', specType)
    return {}
  }
}

const rules = reactive({
  limit_num: [{ required: true, message: '请输入限购数量', trigger: 'blur' }],
  store_id: [{ required: true, message: '请选择门店', trigger: 'change' }],
  cate_id: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
  store_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  image: [{ required: true, message: '请选择商品主图', trigger: 'change' }],
  slider_image: [
    {
      message: '请选择轮播图片',
      trigger: 'change',
      required: true,
      validator: (_, val, callback) => {
        if (!val || val.length === 0) {
          callback(new Error('请选择轮播图片'))
        } else {
          callback()
        }
      }
    }
  ],
  ...getRulesForSpecType(formData.spec_type)
})
const formRef = ref<FormInstance>()
// 分类查询功能
const cateIdsProps = {
  checkStrictly: false,
  // emitPath: false,
  multiple: true,
  lazy: true,
  lazyLoad: (node, resolve) => {
    getProductCategory({ page: 1, limit: 100, pid: node.value || 0 })
      .then((res) => {
        if (res) {
          const nodes = res.data.list.map((item) => {
            return {
              value: item.id,
              label: item.cate_name,
              leaf: item.children.length == 0
            }
          })
          resolve(nodes)
        }
      })
      .catch((e) => {
        console.log(e)
      })
  }
}

const editorRef = ref<typeof Editor & EditorExpose>()
/**
 * 递归地展平类别ID数组
 * 此函数的目的是将一个包含数字和数字数组的数组转换成一个不重复的数字集合
 * 这在处理商品分类ID时特别有用，其中子分类ID需要被展平以便于后续处理
 *
 * @param items - 一个数组，其元素可以是数字或数字数组，代表类别ID
 * @returns 返回一个Set，包含所有展平后的类别ID，不包含重复项
 */
const flattenCateIds = (items: (number | number[])[]): Set<number> => {
  // 初始化一个空的Set集合，用于存储最终展平的类别ID
  const result = new Set<number>()

  /**
   * 递归函数，用于展平类别ID
   * 如果当前项是一个数组，则遍历数组的每一项并递归调用flatten
   * 如果当前项是一个数字，则将其添加到result集合中
   *
   * @param item - 当前要处理的类别ID或类别ID数组
   */
  const flatten = (item: number | number[]) => {
    // 判断当前项是否为数组，如果是，则递归处理数组中的每一项
    if (isArray(item)) {
      item.forEach(flatten)
    } else {
      // 如果当前项不是数组，则将其添加到result集合中
      result.add(item)
    }
  }

  // 遍历输入的items数组，对每一项调用flatten函数进行展平处理
  items.forEach(flatten)

  // 返回包含所有展平后类别ID的Set集合
  return result
}
/**
 * 保存表单数据
 * 此函数在用户提交表单时被触发，它首先验证表单数据的有效性，如果有效则处理数据并调用相应的API进行保存
 * @param {FormInstance | undefined} formEl - 表单实例，用于表单验证和获取表单数据
 * @returns {Promise<Array>} - 返回一个空数组，当前函数没有实际返回值，但为了保持接口一致性，返回了空数组
 */

const loading = ref(false)
const save = async (formEl: FormInstance | undefined) => {
  if (loading.value == true) return
  // 检查表单实例是否存在，如果不存在则返回空数组
  if (!formEl) return []

  // 验证表单数据，如果验证失败，则显示错误消息并中断保存流程
  const valid = await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      for (const key in fields) {
        ElMessage.error(fields[key][0].message)
        return
      }
      console.log('error submit!', fields)
    }
  })
  // 验证商品规格
  let ggValid = false
  let ggValids = false

  let arr: AttrBaseItem[] = []
  attrBase.forEach((item) => {
    let items = JSON.parse(JSON.stringify(item))
    if (items.is_default) {
      ggValids = true
    }
    if (item.img.length != 1 || !item.name || !item.num || !item.rate) {
      ggValid = true
    } else {
      items.img = item.img[0]
      arr.push(items)
    }
  })
  if (ggValid) {
    return ElMessage.error('请正确填写规格参数')
  }
  if (!ggValids) {
    return ElMessage.error('请选择一个默认单位')
  }
  // 如果表单数据有效，则准备数据并调用API进行保存
  if (valid) {
    // 将分类ID转换为数组形式，以便后续处理
    const cateId: number[] = Array.from(flattenCateIds(formData.cate_id)).map((re) => re)
    // 构建要保存的商品数据对象
    const data: goodsDatas = {
      // bar_code: formData.bar_code,
      is_weigh: formData.is_weigh,
      is_verify: formData.is_verify,
      recommend_image: formData.recommend_image,
      product_type: formData.product_type,
      store_id: formData.store_id,
      store_name: formData.store_name,
      video_open: formData.video_open,
      video_link: formData.video_link,
      slider_image: formData.slider_image,
      store_info: formData.store_info,
      image: formData.image,
      keyword: formData.keyword || [],
      cate_id: cateId,
      sales: formData.sales,
      ficti: formData.ficti,
      description: formData.description,
      sort: formData.sort,
      is_show: formData.is_show,
      is_vip_product: formData.is_vip_product,
      is_limit: formData.is_limit,
      limit_num: formData.limit_num,
      limit_type: formData.limit_type,
      is_police: formData.is_police,
      shelf_life: formData.shelf_life,
      show_type: formData.show_type,
      pay_qudou: formData.pay_qudou,
      cost: formData.cost,
      specs: arr
    }
    // 处理规格
    console.log(data, 'data')
    loading.value = true
    try {
      let res = {}
      // 根据操作类型（添加或编辑）调用相应的API
      if (params.type == 'add') {
        res = await addProduct(data)
      } else if (params.type == 'edit') {
        data.id = formData.id
        res = await putProduct(data)
      }
      // 处理API调用结果，如果成功则显示成功消息并询问用户是否返回商品列表
      if (res) {
        let title = '添加'
        if (params.type == 'edit') {
          title = '编辑'
        }
        ElMessage.success('保存成功')
        ElMessageBox.confirm(`${title}成功是否返回商品列表`, '提示', {
          confirmButtonText: '返回列表',
          cancelButtonText: `继续${title}`,
          closeOnClickModal: false,
          type: 'warning'
        })
          .then(() => {
            backList()
          })
          .catch(() => {
            loading.value = false
            console.log('error')
          })
      }
    } catch (error) {
      console.log(error)
      loading.value = false
    } finally {
      // console.log(data)
    }
  }
}
interface op {
  label: string
  value: string
  is_weigh: number
}
const unitList = ref<op[]>([])
const getUnitLists = async () => {
  const res = await getUnitList({
    page: 1,
    limit: 9999,
    type: 'unit',
    is_show: 1
  })
  unitList.value = res.data.list.map((item) => {
    return { label: item.name, value: item.name, is_weigh: item.is_weigh }
  })
}
const loadingData = ref(false)
onMounted(async () => {
  getUnitLists()
  //加载商品规格
  // ruleList()
  if (params.type == 'add') {
    pageTitle.value = '添加商品'
  } else if (params.type == 'edit') {
    pageTitle.value = '编辑商品'
    try {
      const res = await getProductDetail(params.id)
      const data = res.data
      formData.id = data.id
      formData.is_weigh = data.is_weigh
      formData.store_id = data.store_id
      formData.store_name = data.store_name
      formData.store_info = data.store_info
      formData.video_open = data.video_open
      formData.video_link = data.video_link
      formData.slider_image = data.slider_image ? data.slider_image.split(',') : []
      formData.image = [data.image]
      // formData.bar_code = data.bar_code
      formData.recommend_image = data.recommend_image
      formData.keyword = data.keyword ? data.keyword.split(',') : []
      formData.cate_id = data.cate_id.split(',').map((re) => parseInt(re))
      formData.sales = data.sales
      formData.ficti = data.ficti
      formData.spec_type = data.spec_type
      formData.is_show = data.is_show
      formData.is_vip_product = data.is_vip_product
      formData.is_limit = data.is_limit
      formData.limit_type = data.limit_type
      formData.limit_num = data.limit_num
      formData.is_police = data.is_police
      formData.shelf_life = data.shelf_life
      formData.pay_qudou = data.pay_qudou
      formData.show_type = data.show_type
      formData.attrs = data.attrs
      formData.sort = data.sort
      formData.description = data.description
      formData.is_verify = data.is_verify
      formData.cost = data.cost
      // formData.specs = data.specs
      attrBase = reactive(
        data.specs.map((item) => {
          let obj = JSON.parse(JSON.stringify(item))
          obj.img = [item.img]
          return obj
        })
      )
      //加载门店
      getStore('', data.store_id)
      console.log('z')
    } catch (error) {
      console.log(error, 'error')
    }
  }
})
const backList = () => {
  push('/goods/list')
}
const storeLoading = ref(false)
const storeOptions = ref<any[]>([])
const getStore = async (query = '', id = '') => {
  try {
    storeLoading.value = true
    const res = await getStoreList({ page: 1, limit: 100, name: query, id, store: 1 })
    if (res) {
      storeOptions.value = res.data.list.map((item) => {
        return {
          value: item.id,
          label: item.name
        }
      })
    } else {
      return []
    }
  } catch (error) {
    console.log(error)
  } finally {
    storeLoading.value = false
  }
}

let attrBase = reactive<AttrBaseItem[]>([
  {
    img: [], //图片
    bar_code: '', //产品编号
    price: 0, //售价
    num: 0,
    is_default: 0,
    price_1: 0,
    price_2: 0,
    price_3: 0,
    name: '',
    is_del: 0,
    rate: 0
  }
])

/**
 * 添加规则
 */
const addAttr = () => {
  console.log('zhe')
  try {
    attrBase.push({
      img: [], //图片
      bar_code: '', //产品编号
      price: 0, //售价
      num: 0,
      is_default: 0,
      price_1: 0,
      price_2: 0,
      price_3: 0,
      name: '',
      is_del: 0,
      rate: 0
    })
  } catch (error) {
    console.log('添加错误：', error)
  }

  // actionAttrs.push({
  //   attrHidden: '',
  //   detail: [attrItem.value],
  //   detailValue: '',
  //   value: attrItem.name
  // })
  // attrItem.value = ''
  // attrItem.name = ''
  // addAttrShow.value = false
}
const upImageButtomRef = useTemplateRef('upImageButtomRef')

const selectPic = ref<string[]>([]) //选中的图片
const selectPicIndex = ref(0) //上传图片选择对象
const selectPicObj = ref('header') //上传图片类型

/**
 * 点击上传图片回调函数
 * @param {string[]} pic - 图片数组
 * @param {number} index - 图片在数组中的索引
 * @param {string} type - 图片类型
 */
const clickUpImage = (index: number, type: string) => {
  // 设置当前选中图片的类型
  selectPicObj.value = type
  // 设置当前选中图片的索引
  selectPicIndex.value = index
  // 获取上传图片元素
  const picElment = unref(upImageButtomRef)
  // 设置当前操作的图片数组
  selectPic.value = []
  // 日志输出上传图片元素，用于调试
  // console.log(picElment, 'picElment')
  // 调用编辑图片方法，这里以添加图片为例
  picElment?.editImage(0, 'add')
}

/**
 * 根据不同的图片选择对象类型，更新相应的图片数组
 * @param {string[]} pic - 要更新的图片数组
 */
const changePic = (pic: string[]) => {
  console.log(pic, 'pic')
  // 根据选中的图片对象类型，更新对应的图片数组
  switch (selectPicObj.value) {
    case 'header':
      // 更新产品属性列表中的图片数组
      attrBase[selectPicIndex.value].img = pic
      break
    case 'attrBase':
      // 更新基础属性中的图片数组
      attrBase[0].img = pic
      break
    case 'banner':
      // 更新表单数据中的图片数组
      formData.image = pic
      break
    case 'attrOne':
      // 更新单规格的图片数组
      attrs_value.image = pic
      break
    default:
      // 其他情况不做处理
      break
  }
}
const setDefault = (index) => {
  // attrBase[index].is_default = 1
  let len = attrBase.length
  for (let i = 0; i < len; i++) {
    if (i == index) {
      attrBase[i].is_default = 1
    } else {
      attrBase[i].is_default = 0
    }
  }
}
const delAttr = (index) => {
  attrBase.splice(index, 1)
  if (attrBase.length == 0) {
    addAttr()
  }
}
const chooseUnit = (e) => {
  console.log(e)
  let unit = unitList.value.find((item) => item.value == e)
  if (unit) {
    formData.is_weigh = unit.is_weigh
  }
}
</script>
<template>
  <ContentWrap
    :title="pageTitle"
    class="!min-h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height)-var(--app-content-padding))]"
  >
    <template #header>
      <BaseButton size="small" @click="backList"> 返回列表 </BaseButton>
    </template>
    <ElForm
      v-loading="loadingData"
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
    >
      <ElTabs v-model="actinoTabIndex" type="border-card">
        <ElTabPane label="商品信息" :name="1">
          <!-- product type -->
          <ElFormItem label="商品类型" prop="product_type">
            <ElSelect
              :disabled="params.type == 'edit'"
              v-model="formData.product_type"
              placeholder="请选择商品类型"
            >
              <ElOption
                v-for="item in productType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="商品分类" prop="cate_id">
            <ElCascader
              v-model="formData.cate_id"
              :show-all-levels="false"
              clearable
              class="w-full"
              :props="cateIdsProps"
              placeholder="请选择商品分类"
            />
          </ElFormItem>
          <ElFormItem label="门店" prop="store_id">
            <ElSelect
              filterable
              remote
              reserve-keyword
              :disabled="params.type == 'edit'"
              v-model="formData.store_id"
              :remote-method="getStore"
              :loading="storeLoading"
              remote-show-suffix
              placeholder="请选择门店"
            >
              <ElOption
                v-for="item in storeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="商品名称" prop="store_name">
            <ElInput v-model="formData.store_name" placeholder="请输入商品名称" />
          </ElFormItem>
          <ElFormItem label="关键词" prop="keyword">
            <ElInputTag v-model="formData.keyword" tagEffect="light" tagType="primary" clearable />
          </ElFormItem>
          <!-- <ElFormItem label="条码" prop="keyword">
            <ElInput v-model="formData.bar_code"  placeholder="请输入条码" />
          </ElFormItem> -->

          <ElFormItem label="商品简介" prop="store_info">
            <ElInput
              type="textarea"
              :rows="4"
              v-model="formData.store_info"
              placeholder="请输入商品简介"
            />
          </ElFormItem>
          <ElFormItem label="商品封面图" prop="image">
            <TableImage
              :isShowImageViewer="false"
              :src="formData.image[0]"
              @click="clickUpImage(0, 'banner')"
            />
          </ElFormItem>
          <ElFormItem label="商品轮播图" prop="slider_image">
            <UpImgButtom
              tip="建议尺寸：800 * 800px，可拖拽改变图片顺序，默认首张图为主图，最多上传10张"
              v-model="formData.slider_image"
              :num="10"
            />
          </ElFormItem>

          <ElFormItem label="排序" prop="sort">
            <ElInput type="number" v-model="formData.sort" placeholder="请输入排序" />
          </ElFormItem>
          <ElFormItem label="成本价" prop="cost">
            <ElInput type="number" v-model="formData.cost" placeholder="请输入成本价" />
          </ElFormItem>
        </ElTabPane>
        <ElTabPane label="商品单位" :name="2">
          <ElFormItem label="商品属性">
            <BaseButton type="primary" style="margin-bottom: 20px" @click="addAttr">
              新增单位
            </BaseButton>
            <ElTable
              header-cell-class-name="bg-gray-100!"
              :data="attrBase"
              class="w-100%"
              :border="true"
              stripe
            >
              <ElTableColumn prop="image" label="图片" width="100px">
                <template #header> <span>图片</span><span class="text-red">*</span> </template>
                <template #default="{ row, $index }">
                  <TableImage
                    :isShowImageViewer="false"
                    :src="row.img[0]"
                    @click="clickUpImage($index, 'header')"
                  />
                </template>
              </ElTableColumn>
              <ElTableColumn prop="name" label="单位">
                <template #header> <span>单位</span><span class="text-red">*</span> </template>
                <template #default="{ row }">
                  <!-- <ElInput type="text" v-model="row.name" /> -->
                  <ElSelect
                    v-model="row.name"
                    class="m-2"
                    placeholder="请选择单位"
                    @change="chooseUnit"
                  >
                    <ElOption
                      v-for="item in unitList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </ElSelect>
                </template>
              </ElTableColumn>
              <ElTableColumn prop="bar_code" label="条码">
                <template #default="{ row }">
                  <ElInput type="text" v-model="row.bar_code" />
                </template>
              </ElTableColumn>
              <ElTableColumn prop="rate" label="转化率">
                <template #header> <span>转化率</span><span class="text-red">*</span> </template>
                <template #default="{ row }">
                  <ElInput type="number" v-model="row.rate" />
                </template>
              </ElTableColumn>
              <ElTableColumn prop="num" label="数量">
                <template #header> <span>数量</span><span class="text-red">*</span> </template>
                <template #default="{ row }">
                  <ElInput type="number" v-model="row.num" />
                </template>
              </ElTableColumn>
              <ElTableColumn prop="price" label="售价">
                <template #header> <span>售价</span><span class="text-red">*</span> </template>
                <template #default="{ row }">
                  <ElInput type="number" v-model="row.price" />
                </template>
              </ElTableColumn>
              <ElTableColumn prop="price_1" label="VIP价格">
                <template #default="{ row }">
                  <ElInput type="number" v-model="row.price_1" />
                </template>
              </ElTableColumn>
              <ElTableColumn prop="price_2" label="金卡价格">
                <template #default="{ row }">
                  <ElInput type="number" v-model="row.price_2" />
                </template>
              </ElTableColumn>
              <ElTableColumn prop="price_3" label="钻卡价格">
                <template #default="{ row }">
                  <ElInput type="number" v-model="row.price_3" />
                </template>
              </ElTableColumn>
              <ElTableColumn fixed="right" label="操作" width="140px">
                <template #default="{ row, $index }">
                  <template v-if="row.is_default == 0">
                    <BaseButton link type="primary" @click="setDefault($index)">
                      设为默认
                    </BaseButton>
                    <ElDivider direction="vertical" />
                  </template>
                  <BaseButton link type="primary" @click="delAttr($index)"> 删除 </BaseButton>
                </template>
              </ElTableColumn>
            </ElTable>
          </ElFormItem>
        </ElTabPane>
        <ElTabPane label="商品详情" :name="3">
          <Editor v-model="formData.description" ref="editorRef" />
        </ElTabPane>
        <ElTabPane label="营销设置" :name="4">
          <ElFormItem label="限购类型" prop="limit_type">
            <ElRadioGroup v-model="formData.limit_type">
              <ElRadio :value="0">不限购</ElRadio>
              <ElRadio :value="1">单次限购</ElRadio>
              <ElRadio :value="2">永久限购</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem label="会员专属" prop="is_vip_product">
            <ElRadioGroup v-model="formData.is_vip_product">
              <ElRadio :value="0">否</ElRadio>
              <ElRadio :value="1">是</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem v-if="formData.limit_type" label="限购数量" prop="limit_num">
            <ElInput type="number" v-model="formData.limit_num" placeholder="请输入限购数量" />
          </ElFormItem>
        </ElTabPane>
        <ElTabPane label="其他设置" :name="5">
          <ElFormItem label="是否称重" prop="is_weigh">
            <ElRadioGroup v-model="formData.is_weigh">
              <ElRadio :value="0">否</ElRadio>
              <ElRadio :value="1">是</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem label="虚拟销量" prop="ficti">
            <ElInput type="number" v-model="formData.ficti" placeholder="请输入虚拟销量" />
          </ElFormItem>
          <ElFormItem label="保质期天数" prop="shelf_life">
            <ElInput type="number" v-model="formData.shelf_life" placeholder="请输入保质期天数" />
          </ElFormItem>
          <ElFormItem label="是否上架" prop="is_show">
            <ElRadioGroup v-model="formData.is_show">
              <ElRadio :value="0">未上架</ElRadio>
              <ElRadio :value="1">上架</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem label="是否警告" prop="is_police">
            <ElRadioGroup v-model="formData.is_police">
              <ElRadio :value="0">否</ElRadio>
              <ElRadio :value="1">是</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem label="是否可用趣豆" prop="pay_qudou">
            <ElRadioGroup v-model="formData.pay_qudou">
              <ElRadio :value="0">否</ElRadio>
              <ElRadio :value="1">是</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem label="展示方式" prop="show_type">
            <ElRadioGroup v-model="formData.show_type">
              <ElRadio :value="0">所有端</ElRadio>
              <ElRadio :value="1">移动端</ElRadio>
              <ElRadio :value="1">收银台</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem label="审核状态" prop="is_verify">
            <ElRadioGroup v-model="formData.is_verify">
              <ElRadio :value="0">未审核</ElRadio>
              <ElRadio :value="1">通过</ElRadio>
              <ElRadio :value="-1">未通过</ElRadio>
              <ElRadio :value="-2">强制下架</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
        </ElTabPane>
      </ElTabs>
    </ElForm>
    <UpImgButtom
      class="pos-absolute left-[-200px]"
      ref="upImageButtomRef"
      v-model="selectPic"
      @change="changePic"
    />
  </ContentWrap>
  <div
    class="text-center border-t-1px border-solid border-gray-200 py-10px mt-10px position-sticky bottom-0 left-0 right-0 bg-white"
  >
    <BaseButton v-if="actinoTabIndex > 1" @click="actinoTabIndex--"> 上一步 </BaseButton>
    <BaseButton v-if="actinoTabIndex < 5" @click="actinoTabIndex++"> 下一步 </BaseButton>
    <BaseButton v-if="params.type == 'edit'" @click="save(formRef)"> 保存 </BaseButton>
    <BaseButton v-if="params.type == 'add' && actinoTabIndex == 5" @click="save(formRef)">
      保存
    </BaseButton>
  </div>
</template>
