<template>
  <view class="add-popup">
    <uni-popup ref="popup" background-color="#fff" @maskClick="maskClick">
      <view class="popup-content">
        <view class="popup-title">{{$t('添加新品名')}}</view>
        <view class="add-form">
          <uni-forms ref="addForm" :modelValue="addForm" label-position="top">
            <uni-forms-item :label="$t('中文品名')" required>
              <template v-slot:label>
                <view>
                  <text class="uni-forms-item__label"><text style="color: #dd524d">*</text>{{$t('中文品名')}}</text>
                  <button style="float: right" type="primary" size="mini" @click="addProduct">{{$t('添加新品名')}}</button>
                </view>
              </template>
              <select-combox
                :candidates="productListZh"
                :productListToBeDetermined="productListToBeDetermined"
                placeholder=""
                @getValue="getValue"
                @input="handleInputZh"
                v-model="addForm.prodTitleZh"
              ></select-combox>
            </uni-forms-item>
            <uni-forms-item :label="$t('英文品名')" required>
              <select-combox
                :candidates="productListEn"
                :productListToBeDetermined="productListToBeDetermined"
                placeholder=""
                @getValue="getValueEn"
                @input="handleInputEn"
                v-model="addForm.prodTitleEn"
                :is-chinese="false"
              ></select-combox>
            </uni-forms-item>

            <uni-forms-item :label="$t('品牌')" required>
              <select-combox
                :candidates="brandRangtitle"
                :valuedates="brandRang"
                placeholder=""
                @getValue="brandChange"
                @input="getPinPai"
                v-model="addForm.brand"
              ></select-combox>

            </uni-forms-item>
            <uni-forms-item :label="$t('备案')" required>
              <!-- <uni-data-select v-model="addForm.brandType" :localdata="benanRang" :disabled="true"></uni-data-select> -->
              <text>{{ isBeian }}</text>
            </uni-forms-item>
            <uni-forms-item :label="$t('收费模式')" required>
              <!-- <uni-data-select v-model="addForm.feeType" :localdata="feeTypeRang" :disabled="true"></uni-data-select> -->
              <text>{{ feeType }}</text>
            </uni-forms-item>
            <uni-forms-item :label="$t('材质')">
              <uni-data-select v-model="addForm.material" :localdata="caizhiRang" :placeholder="$t('请选择')"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item :label="$t('单位')" required>
              <uni-data-select v-model="addForm.unit" :localdata="danweiRange" :clear="false" @change="unitChage" :placeholder="$t('请选择')"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item :label="$t('商品特性')" required>
              <uni-data-checkbox v-model="addForm.warehouseInProdAttrIds" multiple :localdata="texingLocaldata" />
            </uni-forms-item>
            <uni-forms-item :label="$t('用途')">
              <uni-data-checkbox v-model="addForm.usageIds" multiple :localdata="usageIdsList" />
            </uni-forms-item>
          </uni-forms>
        </view>
        <view class="add-row-btn" @tap="addRow"><uni-icons type="plus-filled" size="20" color="#eaeced"></uni-icons>{{$t('添加一行')}}</view>
        <uni-card class="add-popup-card" v-for="(item, index) in addForm.orderWarehouseInItemDtoList" :key="index">
          <view class="card-row">
            <uni-easyinput v-model="item.cartonsNum" type="number" :placeholder="`${unitTitle}`+$t('数')" :clearable="false" @input="handleVolume(index)"/>
            <switch :checked="item.specificationType === 1" @change="switchChange(item, index)" />
            <dict-tag :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" :value="item.specificationType + ''"/>
            <uni-easyinput v-model="item.weight" type="number" :placeholder="$t('重量')" :clearable="false"/>
            <text>KG</text>
            <uni-easyinput v-model="item.quantityAll" type="number" :placeholder="$t('个数')" :clearable="false"/>
            <text>{{$t('个')}}</text>
          </view>
          <view class="card-row">
            <uni-easyinput v-model="item.c" type="number" :placeholder="$t('长')" :clearable="false" @input="handleVolume(index)"/>
            <text>*</text>
            <uni-easyinput v-model="item.k" type="number" :placeholder="$t('宽')" :clearable="false" @input="handleVolume(index)"/>
            <text>*</text>
            <uni-easyinput v-model="item.g" type="number" :placeholder="$t('高')" :clearable="false" @input="handleVolume(index)"/>
            <text>=</text>
            <uni-easyinput v-model="item.volume" type="number" placeholder="" :clearable="false" />
            <text>CBM</text>
          </view>
          <view class="card-row">
            <text>{{$t('快递单号')}}</text>
            <uni-easyinput v-model="item.expressNo" :placeholder="$t('输入快递单号')" :clearable="false" />
            <WarehouseRecordDetail v-model="item.orderWarehouseInDetailsVOList" />
          </view>
          <view class="card-row">
            <text>{{$t('入仓备注')}}</text>
            <uni-easyinput v-model="item.remark" :placeholder="$t('输入入仓备注')" :clearable="false" />
          </view>
          <view v-if="index !== 0 && formType !== '2'" class="delete-btn" @tap="delRow(index)">{{$t('删除')}}</view>

          <view class="cu-form-group">
            <view class="title">{{$t('储位')}}</view>
            <view class="content" @tap="toLocation(index)" style="flex:1;justify-content: flex-end;">
              {{ item.orderLocationBackVOList && item.orderLocationBackVOList.length ? item.orderLocationBackVOList.map(v => v.code ||  v.areaName + (v.locationName || '')).join(',') : '' }}
              <uni-icons type="right" size="16"></uni-icons>
            </view>
          </view>
        </uni-card>
        <view class="cu-form-group">
          <view class="title"><span style="color: red">*</span>{{$t('入仓影像')}}</view>
        </view>
        <view class="img-wrap">
          <uni-grid :column="4" :highlight="true" :show-border="false">
            <uni-grid-item v-for="(image, index) in addForm.pictureUrls" :index="index" :key="index">
              <view class="grid-item-box" style="height: 100%;position: relative;">
                <image :src="iconpath" style="position: absolute;top:4px;right:4px;width:24px;height:24px;z-index:9" @tap="delimage(index)" mode="widthFix"></image>
                <image v-if="image.type === 'image'" :src="image.url" mode="scaleToFill" style="height: 100%" @tap="previewImage(image.url)" />
                <video v-else-if="image.type === 'video'" :id="`video_${index}`" style="width: 100%;height: 100%" :src="image.url" @play="playVideo(index)" @tap="playVideo(index)" @fullscreenchange="fullscreenchange"></video>
              </view>
            </uni-grid-item>
            <uni-grid-item>
              <view class="grid-item-box" style="height: 100%">
                <view class="grid-item-box-add" @tap="chooseVideoImage(addForm.pictureUrls)">
                  <uni-icons type="plusempty" size="30" color="#eae8eb"></uni-icons>
                  <!-- <text>添加视频或图片</text> -->
                </view>
              </view>
            </uni-grid-item>
          </uni-grid>
        </view>

        <view class="popup-foot-btn">
          <button class="mini-btn" type="primary" size="mini" @tap="saveForm">{{$t('确认')}}</button>
          <button class="mini-btn" type="default" size="mini" @tap="maskClick">{{$t('取消')}}</button>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="product" background-color="#fff" @maskClick="maskClickAddProduct">
      <view class="popup-content">
        <view class="popup-title">{{$t('添加新商品')}}</view>

        <uni-forms ref="productForm" :modelValue="productForm" label-position="top">
          <uni-forms-item :label="$t('商品类型')" required>
            <uni-data-select v-model="productForm.typeId" :localdata="typeList" :placeholder="$t('选择商品类型')"></uni-data-select>
          </uni-forms-item>
          <uni-forms-item :label="$t('中文标题')" required>
            <uni-easyinput v-model="productForm.titleZh" placeholder="输入中文标题" :clearable="false"/>
          </uni-forms-item>
          <uni-forms-item :label="$t('英文标题')" required>
            <uni-easyinput v-model="productForm.titleEn" placeholder="输入英文标题" :clearable="false"/>
          </uni-forms-item>
          <uni-forms-item :label="$t('商品特性')">
            <uni-data-checkbox v-model="productForm.attrArray" :localdata="texingLocaldata" :placeholder="$t('选择商品特性')" multiple></uni-data-checkbox>
          </uni-forms-item>
        </uni-forms>

        <view class="popup-foot-btn">
          <button class="mini-btn" type="primary" size="mini" @tap="saveProductForm">{{$t('确认')}}</button>
          <button class="mini-btn" type="default" size="mini" @tap="maskClickAddProduct">{{$t('取消')}}</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import {
  addProduct,
  getFeeTypeByCustomerProduct,
  getProductBrankPage,
  getProductList,
  getProductTypeList
} from "@/pages/warehousing/api";
import { DICT_TYPE, getDictDatas } from "@/util/dict";
import iconpath from "@/static/images/close.png"
import { getProductAttrList, updateImg } from "@/api/system";
import WarehouseRecordDetail from "@/components/warehouse-record-detail/index.vue";
import { alert } from "@/util/tools";
import { finishPack } from "@/pages/stocking/api";
export default {
  props:{
    detail: Object
  },
  components: {
    WarehouseRecordDetail
  },
  data(){
    return {
      iconpath,
      productAttrList: [],
      productListZh: [],
      productListZhObj: [],
      productListEn: [],
      // 是否待确定
      productListToBeDetermined: [],
      brandRang: [],
      brandRangtitle: [],
      benanRang: [],
      feeTypeRang: [],
      texingLocaldata: [],
      unitTitle: this.$t('箱'),
      // 选择的品牌ID
      selectBrand: null,
      typeList:[],
      addForm: {
        orderWarehouseInItemDtoList:[],
        warehouseInProdAttrIds: [],
        usageIds:[],
        pictureUrls: []
      },
      productForm: {
        typeId: undefined,
        attrArray: [],
        titleZh: undefined,
        titleEn: undefined
      },
    }
  },
  computed:{
    isBeian(){
      if (this.addForm.brandType !== undefined){
        return [this.$t('无备案'), this.$t('有备案'), this.$t('中性')][this.addForm.brandType]
      }
      const t = this.brandRang.find(e => e.id == this.addForm.brand) || {}
      if (t?.filing){
        return [this.$t('无备案'), this.$t('有备案'), this.$t('中性')][t.filing]
      } else {
        return ''
      }
    },
    feeType(){
      const feeType = parseInt(this.addForm.feeType)
      if (feeType >= 0 && feeType < 3) {
        return [this.$t('无牌价'), this.$t('有牌价'), this.$t('中性品牌价')][feeType]
      }
      return ''
    },
    isChinese(){
      return uni.getLocale() === 'zh-Hans'
    },
    isJiyun(){
      return this.detail.type.indexOf('1') !== -1
    },
    // 单位字典
    danweiRange(){
      return (this.$store.getters.dict_datas[this.DICT_TYPE.ECW_PACKAGING_TYPE] || []).map(v => ({ ...v, text: this.$l(v, 'label')}))
    },
    // 材质字典
    caizhiRang(){
      return (this.$store.getters.dict_datas[this.DICT_TYPE.ECW_PRODUCT_MATERIAL] || []).map(v => ({ ...v, text: this.$l(v, 'label')}))
    },
    usageIdsList() {
      return getDictDatas(DICT_TYPE.WAREHOUSING_RECORD_DETAIL_USAGE).map(e => ({
        ...e,
        text: e[this.$lang.locale === 'zh-Hans' ? 'label' : 'labelEn']
      }))
    },
  },
  async created() {
    await this.$nextTick()
    this.$refs.popup.open()

    // 默认给一行入仓记录
    this.addRow()

    getProductTypeList().then(data => {
      this.typeList = data.map(e => {
        return {
          value: e.id,
          text: this.$lang.locale === 'zh-Hans' ? e.titleZh : e.titleEn
        }
      })
    })
    getProductAttrList().then(data => {
      this.productAttrList = data
      this.texingLocaldata = data.map(v => ({ ...v, text: this.$lang.locale=='zh-Hans'?v.attrName:v.attrNameEn, value: v.id }))
    })
    this.getProductList()
    this.getPinPai()

    this.benanRang = [{ value: 0, text: this.$t('无备案') }, { value: 1, text: this.$t('有备案') }, { value: 2, text: this.$t('中性') }]
    this.feeTypeRang = [{ value: 0, text: this.$t('无牌价') }, { value: 1, text: this.$t('有牌价') }, { value: 2, text: this.$t('中性品牌价') }]

  },
  methods:{
    addProduct(){
      this.$refs.product.open()
      if(this.typeList.length){
        return
      }
      getProductTypeList().then(data => {
        this.typeList = data.map(e => {
          return {
            value: e.id,
            text: this.$lang.locale === 'zh-Hans' ? e.titleZh : e.titleEn
          }
        })
      })
    },
    saveForm(){
      let fields = {
        cartonsNum: this.$t('箱数'),
        c: this.$t('长'),
        k: this.$t('宽'),
        g: this.$t('高'),
        // quantityAll: this.$t('个数'),
        volume: this.$t('体积'),
        weight: this.$t('重量')
      }
      // 检查是否有未填字段
      const empty = []
      this.addForm.orderWarehouseInItemDtoList.forEach((item, index) => {
        Object.keys(fields).forEach((key) => {
          if (!item[key]) {
            empty.push(this.$t("第{n}条记录的{field}未填写", {n: index+1, field: fields[key]}))
          }
        })
      })
      if(empty.length){
        return alert(empty.join('\n'), this.$t('提示'))
      }
      // 根据长宽高生成规格字段
      this.addForm.orderWarehouseInItemDtoList.forEach(item => {
        item.boxGauge = `${item.c}*${item.k}*${item.g}`
        item.unit = this.addForm.unit
      })
      const data = {
        orderId: this.detail.orderId,
        prodId: this.addForm.prodId,
        feeType: this.addForm.feeType,
        brand: this.selectBrand,
        type: 1, // 非下单货物
        usageIds: this.addForm.usageIds.join(','),
        warehouseInProdAttrIds: this.addForm.warehouseInProdAttrIds.join(','),
        orderWarehouseInItemDtoList: this.addForm.orderWarehouseInItemDtoList,
        pictureUrls: this.addForm.pictureUrls.map(item => item.url)
      }
      if(!data.pictureUrls?.length){
        return alert(this.$t('请上传入仓影像'), this.$t('提示'))
      }
      finishPack(data).then(res => {
        return alert(this.$t('您已完成打包，请使用管理后台打印新标签'), this.$t('提示'))
      }).then(() => {
        this.$emit("success")
      })
    },
    maskClick(){
      this.$emit("close")
      this.$refs.popup.close()
    },
    handleInputZh(e){
      this.getProductList(e)
    },
    handleInputEn(e){
      this.getProductList(e)
    },
    getValue(e) {
      if(e){
        var sindex = 0
        this.productListZhObj.forEach((item,index)=>{
          if(item.titleZh == e){
            sindex = index
          }
        })
        // this.addForm.prodTitleZh = this.productListZhObj[sindex].titleZh
        this.$set(this.addForm,'prodTitleZh',this.productListZhObj[sindex].titleZh)
        this.$set(this.addForm,'prodTitleEn',this.productListZhObj[sindex].titleEn)
        this.$set(this.addForm,'prodId',this.productListZhObj[sindex].id)
        this.$set(this.addForm,'material',this.productListZhObj[sindex]?.materialType)
        this.$set(this.addForm,'unit',this.productListZhObj[sindex].packaging)
        this.unitChage(this.productListZhObj[sindex].packaging)
        this.$set(this.addForm,'warehouseInProdAttrIds',(this.productListZhObj[sindex].attrId || '').split(',').map(v => Number(v)))

        this.$nextTick(() => {
          this.addForm.brand && this.getFeeTypeByCustomerProduct(this.addForm)
        });
      } else {
        this.$set(this.addForm,'prodTitleZh', undefined)
        this.$set(this.addForm,'prodTitleEn', undefined)
        this.$set(this.addForm,'prodId', undefined)
      }
    },
    getValueEn(e, updateAttr = true) {
      if(e){
        var sindex = 0
        this.productListZhObj.forEach((item,index)=>{
          if(item.titleEn == e){
            sindex = index
          }
        })
        // this.addForm.prodTitleZh = this.productListZhObj[sindex].titleZh
        this.$set(this.addForm,'prodTitleZh',this.productListZhObj[sindex]?.titleZh)
        this.$set(this.addForm,'prodTitleEn',this.productListZhObj[sindex]?.titleEn)
        this.$set(this.addForm,'material',this.productListZhObj[sindex]?.materialType)
        // this.$set(this.addForm,'unit',this.productListZhObj[sindex].packaging)
        this.unitChage(this.productListZhObj[sindex].packaging)
        if (updateAttr) {
          this.$set(this.addForm,'warehouseInProdAttrIds',(this.productListZhObj[sindex].attrId || '').split(',').map(v => Number(v)))
        }
        let num = Number(this.detail.costVO.totalNum)-Number(this.detail.sumNum)
        if(num>=0){
          this.$set(this.addForm.orderWarehouseInItemDtoList,'cartonsNum',num)
        }
        this.$nextTick(() => {
          this.addForm.brand && this.getFeeTypeByCustomerProduct(this.addForm)
        });
      } else {
        this.$set(this.addForm,'prodTitleZh', undefined)
        this.$set(this.addForm,'prodTitleEn', undefined)
        this.$set(this.addForm,'prodId', undefined)
      }
    },
    brandChange(e, value) {
      console.log(e, value, '-------brandChange----------')
      // let brandData = this.brandRang.find(items=>items.titleZh == e)
      this.addForm.brand = e
      this.selectBrand = value
      this.getFeeTypeByCustomerProduct(this.addForm)

    },
    getPinPai(title = '') {
      const params = {
        pageSize: 30
      }
      if (title) {
        params[this.$lang.locale === 'zh-Hans' ? 'titleZh' : 'titleEn'] = title
      }
      getProductBrankPage(params).then(data => {
        this.brandRangtitle = []
        this.brandRang = [
          ...data.list
        ].map(v => ({ ...v, text: v.titleZh, value: v.id + '' }))
        this.brandRang.forEach(item=>{
          if(this.$lang.locale=='zh-Hans'){
            this.brandRangtitle.push(item.titleZh)
          }else{
            this.brandRangtitle.push(item.titleEn)
          }
        })
      })
    },
    unitChage(value) {
      this.unitTitle = this.danweiRange.find(v => v.value === value)?.text || this.$t('箱')
    },
    addRow() {
      let orderLocationBackVOList = []
      if (this.addForm.orderWarehouseInItemDtoList.length > 0) {
        orderLocationBackVOList = JSON.parse(JSON.stringify(this.addForm.orderWarehouseInItemDtoList[this.addForm.orderWarehouseInItemDtoList.length - 1].orderLocationBackVOList || []))
      }
      this.addForm.orderWarehouseInItemDtoList.push({
        cartonsNum: undefined,
        specificationType: 1,
        c: this.isJiyun ? 0 : '',
        k: this.isJiyun ? 0 : '',
        g: this.isJiyun ? 0 : '',
        orderLocationBackVOList,
        pictureUrls: []
      })
    },
    delRow(index){
      this.addForm.orderWarehouseInItemDtoList.splice(index, 1)
    },
    switchChange(item, index){
      if (item.specificationType === 1){
        this.$set(item, 'specificationType', 2)
      }else {
        this.$set(item, 'specificationType', 1)
      }
      this.handleVolume(index)
    },
    toLocation(index){
      const warehouseId = this.detail.adjustToDestWarehouseId || this.detail?.logisticsInfoDto?.startWarehouseId
      let url = `./location?warehouseId=${warehouseId}&orderId=${this.orderId}&locationList=${JSON.stringify(this.addForm.orderWarehouseInItemDtoList[index].orderLocationBackVOList || [])}&extra=${index}&callback=setAddFormlocation`
      uni.navigateTo({
        url: url
      });
    },
    // 选择储位回调
    setAddFormlocation(locationList, extra){
      this.$set(this.addForm.orderWarehouseInItemDtoList[extra], 'orderLocationBackVOList', locationList)
    },
    handleVolume(index) {
      this.$nextTick(() => {
        const { c, k, g, specificationType, cartonsNum } = this.addForm.orderWarehouseInItemDtoList[index]
        if (c && k && g&& specificationType && cartonsNum) {
          const volume = (((specificationType === 1 || specificationType === '1') ? cartonsNum : 1) * (c * k * g) / 1000000).toFixed(2)
          this.$set(this.addForm.orderWarehouseInItemDtoList[index], 'volume', volume === '0.00' ? '0.01' : volume)
        } else {
          this.addForm.orderWarehouseInItemDtoList[index].volume = 0
        }
        this.$forceUpdate()
      })
    },
    chooseVideoImage(pictureUrls) {
      uni.showActionSheet({
        title: this.$t('选择上传类型'),
        itemList: [this.$t('图片'), this.$t('视频')],
        success: res => {
          console.log(res);
          if (res.tapIndex == 0) {
            this.chooseImages(true, pictureUrls);
          } else {
            this.chooseVideo(pictureUrls);
          }
        }
      });
    },
    chooseImages(flag, pictureUrls) {
      console.log(flag, '---------flag-----');
      uni.chooseImage({
        count: 9, //默认是9张
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择
        success: res => {
          console.log(res, 'ddddsss')
          // let imgFile = res.tempFilePaths;
          res.tempFilePaths.forEach((item, index) => {
            updateImg(item).then(data => {
              console.log(data, flag, '--------res--------');
              if (flag) {
                uni.showToast({
                  title: this.$t('影像上传成功'),
                  icon: 'success'
                })
                pictureUrls.push({ type: 'image', url: data.data })
              } else {
                // this.exceptionList.push({ url: data.data })
                this.$set(this.exceptionList, this.exceptionList.length, { url: data.data })
              }
            })
          })
        }
      })
    },
    //上传视频
    chooseVideo(pictureUrls) {
      uni.chooseVideo({
        maxDuration: 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
        count: 9,
        success: res => {
          let videoFile = res.tempFilePath;
          updateImg(videoFile).then(data => {
            pictureUrls.push({ type: 'video', url: data.data })
          })
        },
        fail:(error)=>{
          uni.hideLoading();
          uni.showToast({
            title: error,
            icon: 'none'
          })
        }
      })
    },
    previewImage(url) {
      //uniapp预览轮播图
      uni.previewImage({
        current: 0, //预览图片的下标
        urls: [url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
      })
    },
    playVideo(index) {
      setTimeout(() => {
        this.videoContext = uni.createVideoContext(`video_${index}`)
      }, 500)
    },
    delimage(index){
      this.addForm.pictureUrls.splice(index,1)
    },
    getProductList(titleZh = ''){
      // 注意：由于接口特性，中英文均都必须使用titleZh字段搜索
      return getProductList({
        filter: false,
        pageSize: 30,
        titleZh
      }).then(data => {
        this.productListZh = data.list.map(v => v.titleZh)
        this.productListZhObj = data.list
        this.productListEn = data.list.map(v => v.titleEn)
        this.productListToBeDetermined = data.list.map(v => v.auditStatus !== 2)
      })
    },
    getFeeTypeByCustomerProduct(item) {
      const t = this.productListZhObj.find(v => v.titleZh === this.addForm.prodTitleZh)
      let brandData = this.brandRang.find(items=>items.titleZh == item.brand)
      console.log(t, brandData, '----brandData---');
      if(t){
        if(brandData){
          getFeeTypeByCustomerProduct({
            brandId: parseInt(brandData.id),
            productId: this.addForm.prodId,
            orderId: this.detail.orderId
          }).then(data => {
            this.$set(this.addForm, 'feeType', parseInt(data.feeType))
            this.$set(this.addForm, 'brandType', parseInt(data.recordMode))
          })
        }else{
          this.$set(this.addForm, 'feeType', 1)
          this.$set(this.addForm, 'brandType', 1)
        }

      }else{
        this.$set(this.addForm, 'feeType', undefined)
        this.$set(this.addForm, 'brandType', undefined)
      }

    },
    maskClickAddProduct() {
      this.$refs.product.close()
      this.productForm = {
        typeId: undefined,
        attrArray: [],
        titleZh: undefined,
        titleEn: undefined
      }
    },
    saveProductForm() {
      if(!this.productForm.typeId){
        return uni.showToast({
          title:this.$t('请选择商品类型'),
          icon:'error'
        })
      }
      if(!this.productForm.titleZh){
        return uni.showToast({
          title:this.$t('请输入中文标题'),
          icon:'error'
        })
      }
      if(!this.productForm.titleEn){
        return uni.showToast({
          title:this.$t('请输入英文标题'),
          icon:'error'
        })
      }
      //商品特性转字符串
      this.productForm.attrId = this.productForm.attrArray.join(',')
      // 添加的提交
      addProduct(this.productForm).then(response => {
        this.addForm.prodId = response
        this.addForm.prodTitleZh = this.productForm.titleZh
        this.addForm.prodTitleEn = this.productForm.titleEn
        this.addForm.warehouseInProdAttrIds = this.productForm.attrArray || []
        this.productListZh.push(this.productForm.titleZh)
        this.productListEn.push(this.productForm.titleEn)
        const item = {
          id: response,
          ...this.productForm,
          attrId: this.productForm.attrArray.join(',')
        }
        this.productListZhObj.push(item)
        this.productListToBeDetermined.push(true)

        this.maskClickAddProduct()
      }).catch(() => {
        this.submitting = false
      })
    },
  }
}
</script>
<style scoped lang="scss">
.img-wrap {
  ::v-deep .uni-grid-item {
    background: #fbf8fb;
  }
  .grid-item-box-add {
    height: 100%;
    display: flex;
    flex-flow: column;
    font-size: 10px;
    padding: 16px 0;
    text-align: center;
    justify-content: center;
  }
}
.add-popup {
  ::v-deep .uni-popup__wrapper {
    background: none !important;
  }
  .popup-content {
    width: 90vw;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    max-height: 80vh;
    overflow: auto;
    .popup-title {
      line-height: 48px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
    }
    .add-form {
      ::v-deep .uni-forms-item__label {
        font-weight: bold;
      }
    }
    .add-row-btn {
      border: 0.5px solid #eee;
      text-align: center;
      line-height: 30px;
      border-radius: 5px;
      ::v-deep .uni-icons {
        vertical-align: bottom;
        margin-right: 8px;
      }
    }
    .add-popup-card {
      margin: 16px 0 0 0 !important;
      .card-row {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        > text {
          padding: 0 6px;
        }
      }
      .delete-btn {
        width: 72px;
        line-height: 30px;
        border: 0.5px solid #007aff;
        text-align: center;
        border-radius: 15px;
        color: #007aff;
        margin-left: auto;
      }
    }
    .popup-foot-btn {
      padding: 8px;
      margin-top: 8px;
      text-align: center;
      button {
        border: 1px solid #007aff;
      }
      > button + button {
        margin-left: 16px;
        color: #007aff;
        background: #fff;
      }
    }
  }
}
</style>
