<template>
  <div class="addgoods">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" status-icon>
      <el-form-item label="商品名称" required>
        <el-col :span="12">
          <el-form-item prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入商品名称" />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="商品介绍">
        <el-col :span="12">
          <el-form-item>
            <el-input v-model="ruleForm.shortTitle" type="textarea" placeholder="请输入商品介绍" />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="单位" required>
        <el-col :span="12">
          <el-form-item prop="unitId">
            <el-select v-model="ruleForm.unitId" placeholder="请选择单位">
              <el-option :label="item.name" :value="item.id" v-for="item in datas.Company" :key="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="商品分类" required>
        <el-col :span="12">
          <el-form-item prop="region">
            <el-select v-model="ruleForm.categoryId" placeholder="请选择商品分类">
              <el-option :label="item.name" :value="item.id" v-for="item in datas.classification" :key="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
      <!-- <el-form-item label="商品图片" required prop="images">
        <MultiImageUpload v-model="ruleForm.images" />
      </el-form-item> -->
      <el-form-item label="商品图片" required prop="images">
        <div style="display: flex; flex-wrap: wrap">
          <div v-for="(item, index) in ruleForm.images" :key="index" style="position: relative" class="showStyle">
            <el-icon class="buttonstyle" @click="deleteEvent(item)">
              <DeleteFilled />
            </el-icon>
            <img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :src="item" alt="" />
          </div>
          <div class="upImgStyle" @click="addimgEvent">+</div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="tips">注：第一张图为商品封面图，图片尺寸为750×750</div>
      </el-form-item>
      <!-- 选择图片 -->
      <AddImg ref="addImg" @successEvent="successEvent"></AddImg>

      <el-form-item label="商品类型">
        <el-radio-group v-model="ruleForm.type" @change="changeTypeEnum(ruleForm.type)">
          <el-radio value="single">单规格商品</el-radio>
          <el-radio value="sku">多规格商品</el-radio>
          <el-radio value="package">套餐商品</el-radio>
          <el-radio value="weight">称重商品</el-radio>
          <!-- <el-radio label="coupon">团购券</el-radio> -->
        </el-radio-group>
      </el-form-item>
      <el-form-item label="套餐商品" v-if="ruleForm.type == 'package'">
        <div style="display: block;width: 100%;">
          <div class="head-container">
            <el-radio-group v-model="ruleForm.groupType" @change="typeChange">
              <el-radio-button label="0">固定套餐</el-radio-button>
              <el-radio-button label="1">可选套餐</el-radio-button>
            </el-radio-group>
          </div>
          <div v-if="ruleForm.groupType == '0'">
            <el-table border :data="item.goods" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
              <el-table-column label="名称" prop="proName"></el-table-column>
              <el-table-column label="规格" prop="skuName"> </el-table-column>
              <el-table-column label="价格" prop="price"></el-table-column>
              <el-table-column label="数量" prop="number">
                <template v-slot="scope">
                  <el-input-number v-model="scope.row.number" :min="0" />
                </template>
              </el-table-column>
              <el-table-column width="150">
                <template #header>
                  <el-button type="primary" @click="addgoods(-1)">添加商品</el-button>
                </template>
                <template v-slot="scope">
                  <el-button type="text" :disabled="scope.row.type != 'sku'"
                    @click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
                  <el-button type="text"
                    @click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="ruleForm.groupType == '1'">
            <div class="group_wrap" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
              <el-form inline :model="item">
                <el-form-item label="规格组名">
                  <el-input v-model="item.title" />
                </el-form-item>
                <el-form-item :label="`本组菜品${item.goods.length}选`">
                  <el-input v-model="item.number" />
                </el-form-item>
                <el-form-item>
                  <el-button @click="ruleForm.proGroupVo.splice(index, 1)">删除</el-button>
                </el-form-item>
              </el-form>
              <div style="margin-top: 20px;">
                <el-table border :data="item.goods">
                  <el-table-column label="名称" prop="proName"></el-table-column>
                  <el-table-column label="规格" prop="skuName"></el-table-column>
                  <el-table-column label="价格" prop="price"></el-table-column>
                  <el-table-column label="数量" prop="number">
                    <template v-slot="scope">
                      <el-input-number v-model="scope.row.number" :min="0" />
                    </template>
                  </el-table-column>
                  <el-table-column width="150">
                    <template #header>
                      <el-button type="primary" @click="addgoods(index);">添加商品</el-button>
                    </template>
                    <template v-slot="scope">
                      <el-button type="text" :disabled="scope.row.type != 'sku'"
                        @click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
                      <el-button type="text"
                        @click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <el-button type="primary" @click="addtaocan">添加套餐组</el-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="选择规格" v-if="ruleForm.type == 'sku'">
        <el-select v-model="ruleForm.specId" placeholder="请选择规格" style="width: 500px" @change="selectSpecHandle">
          <el-option :label="item.name" :value="item.id" v-for="item in datas.specificationsconfig"
            :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="ele.name" v-if="datas.selectSpeclist.length" v-for="ele in datas.selectSpeclist"
        :key="ele.name">
        <el-checkbox-group v-model="ele.selectSpecResult" @change="selectSpecResultChange">
          <el-checkbox :value="element.name" :label="element.name" v-for="(element, index) in ele.children"
            :key="index"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 规格属性 -->
      <!-- 单规格、称重 -->
      <SpecificationAttribute v-if="ruleForm.type != 'sku'" :info="ruleForm" :list="list"
        ref="specificationAttributeRef">
      </SpecificationAttribute>
      <SpecificationAttribute v-if="ruleForm.type == 'sku' && list.length" :specTableHeaders="datas.specTableHeaders"
        :info="ruleForm" :list="list" ref="specificationAttributeRef"></SpecificationAttribute>
      <el-form-item label="重量">
        <el-col :span="12">
          <div style="display: block;">
            <el-input v-model="ruleForm.weight" placeholder="">
              <template #append>千克</template>
            </el-input>
            <!-- <div style="color: #999;">用于快递或配送运费计重</div> -->
          </div>
        </el-col>
      </el-form-item>
      <el-form-item label="是否允许临时改价">
        <el-radio-group v-model="ruleForm.isAllowTempModifyPrice">
          <el-radio :value="1">允许</el-radio>
          <el-radio :value="0">不允许</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="每日销量上限">
        <el-input-number v-model="ruleForm.dayLimit" :min="0" />
      </el-form-item>
      <el-form-item label="每单限购">
        <el-input-number v-model="ruleForm.dayLimit" :min="0" />
      </el-form-item>
      <el-form-item label="每人限购">
        <el-input-number v-model="ruleForm.dayLimit" :min="0" />
      </el-form-item> -->
      <el-form-item label="定时上下架">
        <el-checkbox-group v-model="ruleForm.days">
          <el-checkbox v-for="(item, index) in datas.cycle" :key="item.value" :value="item.value">
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-col :span="12">
          <el-time-picker v-model="ruleForm.useTime" is-range range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" :default-value="[new Date('00:00'), new Date('23:59')]" value-format="HH:mm"
            format="HH:mm" />
        </el-col>
      </el-form-item>
      <el-form-item label="上架">
        <el-switch v-model="ruleForm.isSale" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item label="库存开关">
        <div style="display: block;">
          <el-switch v-model="ruleForm.isStock" :active-value="1" :inactive-value="0" />
          <div style="color: #999;">注：关闭则不计算出入库数据</div>
        </div>
      </el-form-item>
      <el-form-item label="设为推荐" prop="delivery">
        <el-switch v-model="ruleForm.isHot" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item label="库存数量">
        <el-input-number v-model="ruleForm.stockNumber" :min="0" />
      </el-form-item>

      <el-form-item label="打包费" prop="delivery">
        <div style="display: block;">
          <el-input-number v-model="ruleForm.packFee" controls-position="right"></el-input-number>
          <div style="color: #999;">单份商品打包费。注：店铺开启外卖模式下该数据才生效</div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 选择商品 -->
    <shopList ref="shopListRef" @success="selectShopRes" />
    <el-dialog :title="datas.selectSkuItem.proName" v-model="datas.showSelectSku">
      <div class="pro_sku">
        <div class="item">
          <div class="row">
            <div class="title">选项值</div>
            <div class="tag" :class="{ active: item.active }" v-for="(item, index) in datas.selectSkuItem.skuList"
              :key="item.id" @click="selectSkuHandle(item, index)">
              {{ item.specInfo }}
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="datas.showSelectSku = false">取 消</el-button>
          <el-button type="primary" @click="showSelectSkuConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
// 规格属性
import SpecificationAttribute from './SpecificationAttribute.vue'
import UserAPI from "@/api/product/productclassification";
import UserAPI2 from "@/api/product/commonUnits";
import UserAPI3 from "@/api/product/index";
import UserAPI4 from "@/api/product/specificationsconfig";
import shopList from "@/components/mycomponents/shopList.vue";
import AddImg from '@/components/mycomponents/addImg.vue';
import { useRouter } from 'vue-router';
import { useTagsViewStore } from "@/store";
const tagsViewStore = useTagsViewStore();
const router = useRouter();
let list = ref<any[]>([{
  "originPrice": 0,
  "costPrice": 0,
  "salePrice": 0,
  "memberPrice": 0,
  "suitNum": 1,
  "coverImg": "",
  "weight": 0,
  "barCode": "88888888888888888888"
}]);
let datas = reactive<datasForm>({
  cycle: [
    { label: "周一", value: "Monday" },
    { label: "周二", value: "Tuesday" },
    { label: "周三", value: "Wednesday" },
    { label: "周四", value: "Thursday" },
    { label: "周五", value: "Friday" },
    { label: "周六", value: "Saturday" },
    { label: "周七", value: "Sunday" }
  ],
  Company: [],
  classification: [],
  // 商品规格
  specificationsconfig: [],
  selectSpeclist: [],
  defaultSku: {
    "originPrice": 0,
    "costPrice": 0,
    "salePrice": 0,
    "memberPrice": 0,
    "suitNum": 1,
    "coverImg": "",
    "weight": 0,
    "barCode": "88888888888888888888"
  },
  specTableHeaders: [],
  // 套餐商品-单规格index
  selectSkuTableIndex: 0,
  selectSkuConfirmIndex: 0,
  showSelectSku: false,
  selectSkuItem: {},
  addGroupIndex: -1,

})
let shopListRef = ref(null)
let addImg = ref(null)
let isedit = ref(true)
interface datasForm {
  cycle: { label: string, value: string }[],
  Company: any[],
  classification: any[],
  specificationsconfig: any[],
  selectSpeclist: any[],
  defaultSku: any,
  specTableHeaders: any[],
  selectSkuTableIndex: any,
  selectSkuConfirmIndex: number,
  showSelectSku: boolean,
  selectSkuItem: any,
  addGroupIndex: any,
}
interface RuleForm {
  name: string,
  shortTitle: string,
  unitId: string,
  categoryId: string,
  coverImg: string,
  images: string[],
  type: string,
  specId: any,
  groupType: any,
  skuList: string[],
  weight: any,
  isAllowTempModifyPrice: any,
  days: any,
  useTime: string[],
  startTime: string,
  endTime: string,
  isSale: string,
  isStock: string,
  isHot: string,
  stockNumber: any,
  packFee: any,
  sort: Number,
  proGroupVo: any[],
  selectSpecInfo: any
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  //商品名称
  name: '',
  //商品介绍
  shortTitle: '',
  // 单位id
  unitId: '',
  // 分类id
  categoryId: '',
  // 封面图url
  coverImg: '',
  // 详情图urls
  images: [],
  // 商品类型
  type: 'single',
  // 规格id
  specId: '',
  // 套餐类型
  groupType: '0',
  // 套餐入参
  proGroupVo: [{
    title: '',
    count: '',
    number: '',
    goods: []
  }],
  // sku集合
  skuList: [],
  // 重量
  weight: 0,
  // 是否允许改价
  isAllowTempModifyPrice: 1,
  // 定时上下架周期
  days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  useTime: ['00:00:00', '23:59:59'],
  // 开始时间
  startTime: '',
  // 结束时间
  endTime: "",
  // 是否上架
  isSale: "1",
  // 是否开启库存
  isStock: "1",
  // 设为推荐
  isHot: "1",
  // 库存数量
  stockNumber: 0,
  // 打包费
  packFee: 0,
  // 排序值
  sort: 1,
  selectSpecInfo: {}
})
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入商品名称', trigger: 'blur' },
  ],
  unitId: [
    {
      required: true,
      message: '请选择单位',
      trigger: 'change',
    },
  ],
  categoryId: [
    {
      required: true,
      message: '请选择商品分类',
      trigger: 'change',
    },
  ],
  images: [
    {
      required: true,
      message: '请选择图片',
      trigger: 'change',
    },
  ],

})
onMounted(() => {
  getList()
  if (router.currentRoute.value.query.goods_id) {
    tbProductGetDetail(router.currentRoute.value.query.goods_id);
  }
})
watch(() => router.currentRoute.value.query.goods_id, (val) => {
  tbProductGetDetail(val);
})
async function tbProductGetDetail(id: any) {
  // 获取商品详情
  const res = await UserAPI3.getDetail(id);
  changeTypeEnum(res.type)
  for (const key in res) {
    if (key !== 'images' && key !== 'days') {
      (ruleForm as any)[key] = res[key];
    }
  }
  ruleForm.images = res.images.map((item: any, index: number) => item);
  ruleForm.days = res.days.split(',');
  ruleForm.useTime = [res.startTime, res.endTime];
  ruleForm.proGroupVo = res.groupSnap
  if (res.type === "sku") {
    await tbProductSpecGet()
    selectSpecHandle(ruleForm.specId)
    datas.selectSpeclist.forEach((item: any) => {
      item.selectSpecResult = res.selectSpecInfo[item.name]
      // if (item.name === res.selectSpecInfo.name
      // ) { }
      // item.children.forEach((ele: any) => {
      // item.selectSpecResult.push(ele.name)
      // })
    })
    selectSpecResultChange()
  } else {
    list.value = ruleForm.skuList
  }
}
// 选择套餐商品sku
function selectSkuHandle(item: any, index: number) {
  // 把所有的设置为false
  datas.selectSkuItem.skuList.map((item: any, index: number) => {
    let nitem = { ...item }
    nitem.active = false
    datas.selectSkuItem.skuList[index] = nitem
  })

  if (item.active) {
    item.active = false
  } else {
    item.active = true
  }
  datas.selectSkuItem.skuList[index] = { ...item }

  // let arr = datas.selectSkuItem.skuList.filter((item:any) => item.active)

  // if (arr.length) {
  //   this.selectSkuConfirmDisabled = false
  // } else {
  //   this.selectSkuConfirmDisabled = true
  // }
}
function addimgEvent() {
  (addImg.value as any)?.show()
}
// 确认套餐商品设置规格
function showSelectSkuConfirm() {
  let item = datas.selectSkuItem.skuList.filter((item: any) => item.active)
  ruleForm.proGroupVo[datas.selectSkuTableIndex].goods[datas.selectSkuConfirmIndex] = { ...ruleForm.proGroupVo[datas.selectSkuTableIndex].goods[datas.selectSkuConfirmIndex], skuId: item[0].id }
  ruleForm.proGroupVo[datas.selectSkuTableIndex].goods[datas.selectSkuConfirmIndex] = { ...ruleForm.proGroupVo[datas.selectSkuTableIndex].goods[datas.selectSkuConfirmIndex], skuName: item[0].specInfo }
  datas.showSelectSku = false
}
// 显示套餐商品设置规格
function showSelectSkuHandle(row: any, index: any, tabIndex: any) {
  datas.selectSkuTableIndex = tabIndex
  datas.selectSkuConfirmIndex = index
  datas.showSelectSku = true

  let obj = { ...row }

  obj.skuList.map((item: any) => {
    item.active = false
  })

  datas.selectSkuItem = obj
}
// 添加商品
function addgoods(index: number = -1) {
  datas.addGroupIndex = index;
  (shopListRef.value as any)?.opens()
}
function deleteEvent(d: any) {
  let index = ruleForm.images.findIndex((ele) => ele == d);
  ruleForm.images.splice(index, 1);
}
function successEvent(d: any) {
  ruleForm.images.push(d[0].url);
}
// 分组选择商品
function selectShopRes(res: Array<any>) {
  let newres = res.map(item => {
    item.proId = item.id
    item.proName = item.name
    item.price = item.lowPrice
    item.skuId = item.skuList[0].id
    item.skuName = ''
    item.number = 1
    // 单规格skuid添加
    return item
  })

  if (ruleForm.groupType == '0') {
    let obj = {
      title: '',
      count: newres.length,
      number: '',
      goods: newres
    }
    ruleForm.proGroupVo = [{ ...obj }]
  } else {
    if (datas.addGroupIndex != -1) {
      ruleForm.proGroupVo[datas.addGroupIndex].count = newres.length
      ruleForm.proGroupVo[datas.addGroupIndex].goods = newres
    } else {
      let arr = [...ruleForm.proGroupVo]
      arr.push({
        title: '',
        count: newres.length,
        number: '',
        goods: newres
      })
      ruleForm.proGroupVo = [...arr]
    }
  }
}
// 获取单位、分类数据
async function getList() {
  datas.Company = (await UserAPI2.getList(null)) as any[]
  datas.classification = (await UserAPI.getList(null)) as any[]
}
// 选择规格属性
function selectSpecResultChange() {
  createSkuHeader();
  createSkuBody();
}

function createSkuHeader() {
  const headers = [];
  for (let item of datas.selectSpeclist) {
    if (item.selectSpecResult.length) {
      headers.push({
        label: item.name,
        value: item.name,
      });
    }
  }
  datas.specTableHeaders = headers;
}

// 可选套餐弹窗
function addtaocan() {
  datas.addGroupIndex = -1;
  (shopListRef.value as any)?.opens()
}
// 生成多规格表体
function createSkuBody() {
  let bodys = [];
  for (let item of datas.selectSpeclist) {
    if (item.selectSpecResult.length) {
      let arr = [];
      for (let val of item.selectSpecResult) {
        arr.push({
          [item.name]: val,
        });
      }
      bodys.push(arr);
    }
  }
  let arr = cartesian(bodys);
  const m = {
    coverImg: "",
    ...datas.defaultSku,
  };
  let newarr = [];
  for (let item of arr) {
    if (Array.isArray(item)) {
      let obj: Record<string, any> = {};
      let specSnap = [];
      for (let v of item) {
        for (let key in v) {
          obj[`${key}`] = v[key];
          specSnap.push(v[key]);

        }
      }
      let specSnapStr = specSnap.join(",");
      newarr.push({
        specSnap: specSnapStr,
        specInfo: specSnapStr,
        ...m,
        ...obj,
        // barCode: `${dayjs().valueOf()}${RandomNumBoth(1, 9999)}`,
      });
    } else {
      let specSnap = [];
      for (let key in item) {
        specSnap.push(item[key]);
      }
      let specSnapStr = specSnap.join(",");
      newarr.push({
        specSnap: specSnapStr,
        specInfo: specSnapStr,
        ...m,
        ...item,
        // barCode: `${dayjs().valueOf()}${RandomNumBoth(1, 9999)}`,
      });
    }
  }
  if (ruleForm.skuList.length) {
    if (isedit.value) {
      let arr: any[] = []
      ruleForm.skuList.forEach((item: any, index: number) => {
        newarr.forEach((val: any, i: number) => {
          if (item.specInfo == val.specInfo) {
            //       newarr[i] = item
            Object.assign(val, item)
            arr.push(val)
          }
        });
      });
      list.value = arr
      isedit.value = false
    } else {
      list.value = newarr;
    }
  } else {
    list.value = newarr;
  }
}
// 切换类型
function changeTypeEnum(item: string) {
  // single-单规格商品 sku-多规格商品 package-套餐商品 weight-称重商品 coupon-团购券
  list.value = []
  if (item == 'sku') {
    tbProductSpecGet();
  } else {
    ruleForm.specId = ""
    datas.selectSpeclist = []
    list.value = [datas.defaultSku]
  }
}
// 笛卡尔积算法
function cartesian(arr) {
  if (arr.length < 2) return arr[0] || [];
  return [].reduce.call(arr, (col, set) => {
    let res = [];
    col.forEach((c) => {
      set.forEach((s) => {
        let t = [].concat(Array.isArray(c) ? c : [c]);
        t.push(s);
        res.push(t);
      });
    });
    return res;
  });
}
// 套餐类型切换
function typeChange() {
  // ruleForm.typeEnum = 'normal'
  if (ruleForm.groupType == '0') {
    ruleForm.proGroupVo = []
    ruleForm.proGroupVo[0] = {
      title: '',
      count: '',
      number: 1,
      goods: []
    }
  } else {
    ruleForm.proGroupVo = []
  }
  // this.changeTypeEnum()
}
// 获取规格列表
async function tbProductSpecGet() {
  datas.specificationsconfig = (await UserAPI4.getPage(null)) as []
}
// 选择规格
function selectSpecHandle(e: any) {
  const selectSpec = JSON.parse(JSON.stringify(datas.specificationsconfig.find((item) => item.id == e).children));
  for (let item in selectSpec) {
    selectSpec[item].selectSpecResult = [];
  }
  datas.selectSpeclist = selectSpec;
}
const specificationAttributeRef = ref(null)
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      ruleForm.days = ruleForm.days.join(',')
      // 第一张图片作为封面图
      ruleForm.coverImg = ruleForm.images[0]
      // 规格id修改
      // ruleForm.specId = specIdFunction(ruleForm.type)
      let selectTitle = false
      ruleForm.proGroupVo.forEach((item: any) => {
      })
      if (selectTitle) {
        ElMessage.error('请填写标题和几选几')
        return
      }
      // 修改时间
      ruleForm.startTime = ruleForm.useTime[0]
      ruleForm.endTime = ruleForm.useTime[1]
      // 拿到sku数据
      ruleForm.skuList = (specificationAttributeRef.value as any)?.getdata()
      // 多规格 selectSpecInfo 添加
      if (ruleForm.type == 'sku') {
        let obj: any = {}
        datas.selectSpeclist.forEach((item: any) => {
          obj[item.name] = item.selectSpecResult
        })
        ruleForm.selectSpecInfo = obj
      } else if (ruleForm.type == 'package') {
        // console.log(ruleForm, '套餐')
      }
      setTimeout(() => {
        ruleForm.days = ruleForm.days.split(',')
      }, 200);
      // 标题和几选几是否填写
      if (ruleForm.type == "package") {
        if (ruleForm.groupType == '1') {
          let selectTitle = false
          ruleForm.proGroupVo.forEach((item: any) => {
            if (item.number == '' || item.title == '') {
              selectTitle = true
            }
          })
          if (selectTitle) {
            ElMessage.error('请填写标题和几选几')
            return
          }
        }
      }


      if (ruleForm.id) {
        let res = await UserAPI3.update(ruleForm)
        if (res.code == 200) {
          ElMessage.success("修改成功");
        }
      } else {

        let res = await UserAPI3.addunit(ruleForm)
        if (res.code == 200) {
          ElMessage.success("添加成功");
        }
      }
      setTimeout(() => {
        closeSelectedTag({
          "name": "addgoods",
          "title": "新增商品",
          "path": "/product/addgoods",
          "fullPath": "/product/addgoods",
        })
      }, 500);
      setTimeout(() => {
        router.push({ path: '/product/index' });
      }, 1000);
    } else {
      ElMessage.error("请填写完整信息");
      console.log('error submit!', fields)
    }
  })
}


// 关闭当前窗口
function closeSelectedTag(view: TagView) {
  tagsViewStore.delView(view).then((res: any) => {
    if (tagsViewStore.isActive(view)) {
      tagsViewStore.toLastView(res.visitedViews, view);
    }
  });
}
// 规格id过滤
const specIdFunction = (type: string) => {
  if (type === 'single') {
    return ''
  } else if (type === '2') {
    return 2
  } else if (type === '3') {
    return 3
  } else if (type === '4') {
    return 4
  } else if (type === '5') {
    return 5
  }
}
const resetForm = (formEl: FormInstance | undefined) => {
  closeSelectedTag({
    "name": "addgoods",
    "title": "新增商品",
    "path": "/product/addgoods",
    "fullPath": "/product/addgoods",
    "affix": false,
    "keepAlive": true,
    "query": {}
  })
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped lang="scss">
.addgoods {
  padding: 20px;
  background-color: #fff;
}

.pro_sku {
  .item {
    .row {
      display: flex;
      align-items: center;

      &:not(:first-child) {
        margin-top: 20px;
      }

      .title {
        width: 80px;
      }

      .tag {
        background-color: #F7F7FA;
        padding: 6px 12px;
        margin-right: 10px;
        border-radius: 4px;

        &.no {
          background: none;
          padding: 6px 0;
        }

        &.active {
          background-color: #46A6FF;
          color: #fff;
        }
      }
    }
  }
}

.group_wrap {
  padding: 20px;
  background-color: #F7F7FA;
  margin-bottom: 20px;
}

.showStyle:hover>.buttonstyle {
  display: block;
}

.upImgStyle {
  cursor: pointer;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
  border-radius: 1%;
  font-size: 30px;
  color: #ccc;
}

.buttonstyle {
  border-radius: 50%;
  color: #db1616;
  background-color: #fff;
  font-size: 20px;
  display: none;
  position: absolute;
  right: 0px;
  top: -10px;
  z-index: 10;
}
</style>