<template>
<el-dialog
    :title="$t('添加新品名')"
    :visible.sync="visible"
    width="90vw"
  >

    <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
      <el-descriptions border :column="2">
        <el-descriptions-item>
          <template slot="label"><span style="color: red">*</span>{{ $t('中文品名') }}</template>
          <span style="min-width: 200px;margin-right: 15px;display: inline-block">
              <product-selector
                v-model="form.prodId"
                @change="handleProdChange"
              />
          </span>
          <el-button type="text" @click="isShowProduct = true">{{ $t('添加新商品') }}</el-button>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><span style="color: red">*</span>{{ $t('英文品名') }}</template>
          <span>
            <product-selector
              lang="En"
              v-model="form.prodId"
							@change="handleProdChange"
            />
          </span>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('品牌')">
          <template slot="label"><span style="color: red">*</span>{{ $t('品牌') }}</template>
          <el-form-item required label="" prop="brand" label-width="0">
            <el-select
              v-model="form.brand"
              :placeholder="$t('可修改')"
              filterable
              remote
              @change="handleBrandChange"
              :remote-method="getProductBrandPage"
              >
              <el-option
                v-for="item in brandList"
                :key="item.id"
                :label="item.titleZh"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('是否备案')">
          <template slot="label"><span style="color: red">*</span>{{ $t('是否备案') }}</template>
          {{ isBeian }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('收费模式')">
          <template slot="label"><span style="color: red">*</span>{{ $t('收费模式') }}</template>
          {{ feeType }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('填单参数')">
          {{$t('非填单货物')}}
        </el-descriptions-item>
      </el-descriptions>
      <el-row>
        <el-col :span="4">
          <el-form-item :label="$t('材质')" style="margin-top: 20px">
            <dict-selector :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" v-model="form.material" clearable></dict-selector>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('入仓特性')" style="margin-top: 20px">
            <el-checkbox-group v-model="form.warehouseInProdAttrIds">
              <el-checkbox v-for="item in attrList" :key="item.id" :label="item.id">{{ item.attrName }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
				<el-col :span="8">
					<el-form-item :label="$t('用途')" style="margin-top: 20px">
						<el-checkbox-group v-model="form.usageIds">
							<el-checkbox v-for="item in getDictDatas(DICT_TYPE.WAREHOUSING_RECORD_DETAIL_USAGE)" :key="item.value" :label="item.value">{{ $l(item, 'label') }}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>
      </el-row>
    </el-form>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ $t('入仓记录') }}</span>
        <el-button style="float: right;margin-left: 15px" size="mini" type="primary" icon="el-icon-minus" circle @click="handleDelete" :disabled="form.table.length < protectRowCount"></el-button>
        <el-button style="float: right" size="mini" type="primary" icon="el-icon-plus" circle @click="handleAdd()"></el-button>
      </div>
      <el-form ref="tableForm" :rules="tableFormRules" :model="form" size="mini">
        <el-table
          :data="form.table"
          style="width: 100%">
          <el-table-column :label="$t('箱数')" width="150px">
            <template v-slot:header>
              <span style="color: red">*</span>{{ $t('箱数') }}</template>
            <template v-slot="{r,c,$index}">
              <el-form-item :rules="tableFormRules.cartonsNum" :prop="`table.${$index}.cartonsNum`">
                <el-input v-model="form.table[$index].cartonsNum" placeholder="" @blur="handleVolume($index)" :disabled="$index < protectRowCount">
                  <span slot="append">{{ getDictDataLabel(DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE, form.table[$index].specificationType) }}</span>
                </el-input>
                <dict-selector :disabled="$index < protectRowCount" :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" v-model="form.table[$index].specificationType" @change="handleVolume($index)"></dict-selector>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('包装类型')" width="100px">
            <template v-slot:header>
              <span style="color: red">*</span>{{ $t('包装类型') }}</template>
            <template v-slot="{r,c,$index}">
              <el-form-item>
                <dict-selector :disabled="$index < protectRowCount" :type="DICT_TYPE.ECW_PACKAGING_TYPE" v-model="form.table[$index].unit"></dict-selector>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="长(cm)" width="110px">
            <template v-slot:header>
              <span>{{ $t('长') }}</span>(cm)
            </template>
            <template v-slot="{r,c,$index}">
              <el-form-item :rules="tableFormRules.boxGauge1" :prop="`table.${$index}.boxGauge1`">
                <el-input :disabled="$index < protectRowCount" type="number" v-model="form.table[$index].boxGauge1" placeholder="" @blur="handleVolume($index)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="宽(cm)" width="110px">
            <template v-slot:header>
              <span>{{ $t('宽') }}</span>(cm)
            </template>
            <template v-slot="{r,c,$index}">
              <el-form-item :rules="tableFormRules.boxGauge2" :prop="`table.${$index}.boxGauge2`">
                <el-input :disabled="$index < protectRowCount" type="number" v-model="form.table[$index].boxGauge2" placeholder="" @blur="handleVolume($index)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="高(cm)" width="110px">
            <template v-slot:header>
              <span>{{ $t('高') }}</span>(cm)
            </template>
            <template v-slot="{r,c,$index}">
              <el-form-item :rules="tableFormRules.boxGauge3" :prop="`table.${$index}.boxGauge3`">
                <el-input :disabled="$index < protectRowCount" type="number" v-model="form.table[$index].boxGauge3" placeholder="" @blur="handleVolume($index)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="体积(m³)" width="110px">
            <template v-slot:header>
              <span style="color: red">*</span> <span>{{ $t('体积') }}</span>(m³)
            </template>
            <template v-slot="{r,c,$index}">
              <el-form-item :rules="tableFormRules.volume" :prop="`table.${$index}.volume`">
                <el-input :disabled="$index < protectRowCount" v-model="form.table[$index].volume" placeholder="" type="number"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="重量(Kg)" width="110px">
            <template v-slot:header>
              <span style="color: red">*</span> <span>{{ $t('重量') }}</span>(Kg)
            </template>
            <template v-slot="{r,c,$index}">
              <el-form-item :rules="tableFormRules.weight" :prop="`table.${$index}.weight`">
                <el-input :disabled="$index < protectRowCount" v-model="form.table[$index].weight" placeholder="" type="number"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('数量')" width="130px">
            <template v-slot="{r,c,$index}">
              <el-form-item :rules="tableFormRules.quantityAll">
                <el-input :disabled="$index < protectRowCount" v-model.number="form.table[$index].quantityAll" placeholder="">
                  <template slot="append">{{ $t('个') }}</template>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('快递单号')" width="150px">
            <template v-slot="{r,c,$index}">
              <el-form-item>
                <el-input :disabled="$index < protectRowCount" v-model="form.table[$index].expressNo" placeholder=""></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('储位')" prop="orderLocationBackVOList"  width="150px">
            <template v-slot="{ row, column, $index }">
              <warehouse-area-select
                v-if="visible"
                v-model="form.table[$index].orderLocationBackVOList"
                :order-id="orderId"
                :order-item-id="warehousing.orderItemId"
                :warehouse-in-id="form.table[$index].id"
                :warehouse-id="warehouseId"
                :is-editing="edit"></warehouse-area-select>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备注')">
              <template v-slot="{r,c,$index}">
                  <el-form-item>
                      <el-input v-model="form.table[$index].remark" type="textarea" show-word-limit maxlength="100" placeholder=""></el-input>
                  </el-form-item>
              </template>
          </el-table-column>
          <el-table-column :label="$t('操作')">
            <template v-slot="{ row, column, $index}">
							<WarehouseRecordDetail v-model="form.table[$index].orderWarehouseInDetailsVOList" />
              <el-popconfirm
                v-if="$index >= protectRowCount"
                title="确定要删除该行记录吗？"
                @confirm="handleDeleteRow($index)"
              >
                <template v-slot:reference>
                  <el-button size="mini" type="danger">{{$t('删除')}}</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-card>
    <el-card style="margin-top: 15px;">
      <div slot="header" class="clearfix">
        <span style="font-size: 18px"><span style="color: red">*</span>{{$t('入仓影像')}}</span>
      </div>
      <div>
        <image-and-video-upload :fileSize="50" :isShowTip="true" v-model="pictureUrls" ></image-and-video-upload>
      </div>
    </el-card>
    <span slot="footer">
        <el-button type="primary" @click="handleSubmit">{{ $t('完成打包') }}</el-button>
        <el-button @click="handleClose">{{ $t('返回')}}</el-button>
    </span>

    <!-- 对话框(添加 / 修改) -->
    <el-dialog title="添加商品" :visible.sync="isShowProduct" width="550px" append-to-body>
      <el-form ref="productForm" :model="productForm" :rules="productRules" label-width="110px">
        <el-form-item :label="$t('商品类型')" prop="typeId">
          <el-select v-model="productForm.typeId" :placeholder="$t('选择商品类型')" clearable>
            <el-option v-for="types in typeList" :key="types.id" :label="types.titleZh" :value="types.id" />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('中文标题')" prop="titleZh">
          <el-input v-model="productForm.titleZh" :placeholder="$t('请输入中文标题')" />
        </el-form-item>

        <el-form-item :label="$t('英文标题')" prop="titleEn">
          <el-input v-model="productForm.titleEn" :placeholder="$t('请输入英文标题')" />
        </el-form-item>

        <el-form-item :label="$t('商品特性')" prop="attrArray">
          <el-select v-model="productForm.attrArray" :placeholder="$t('选择商品特性')" clearable multiple>
            <el-option v-for="attr in attrList" :key="attr.id" :label="attr.attrName" :value="attr.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="productSubmit">{{$t('确定')}}</el-button>
        <el-button @click="productCancel">{{$t('取消')}}</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import ProductSelector from "@/components/ProductSelector"
import WarehouseAreaSelect from "@/components/WarehouseAreaSelect"
import {getFeeTypeByOrderProduct, getProductBrankPage} from "@/api/ecw/productBrank"
import {cancelProcessInstance} from "@/api/bpm/processInstance"
import WorkFlow from "@/components/WorkFlow"
import {DICT_TYPE, getDictDataLabel, getDictDatas} from "@/utils/dict"
import {finishPacked, orderWarehouseIn, orderWarehouseInUpdateApply} from "@/api/ecw/order"
import {getProductAttrList} from "@/api/ecw/productAttr"
import {getProductTypeList} from "@/api/ecw/productType"
import {addProduct} from "@/api/ecw/product"
import WarehouseRecordDetail from "@/views/ecw/order/warehousing/components/WarehouseRecordDetail.vue";
import ImageAndVideoUpload from "@/components/ImageAndVideoUpload/index.vue";

export default {
  name: "NewProduct",
  components: {
    ImageAndVideoUpload,
    WarehouseRecordDetail,
    ProductSelector,
    WarehouseAreaSelect,
    WorkFlow
  },

  props: {
    title: {
      type: String,
      default: undefined
    },
    order: {
      type: Object,
      default: undefined
    },
    // 是否集运
    isJiyun: {
      type: Boolean,
      default: false
    },
    // 是否修改
    edit: {
      type: Boolean,
      default: false
    },
    // 订单信息中的商品项
    orderItemA: {
      type: Object,
      default: () => {
        return {
          material: undefined,
          inTime: undefined,
          orderWarehouseInBackItemDoList: []
        }
      }
    },
    // 入仓的商品项
    orderItemB: {
      type: Object,
      default: () => {
        return {
          material: undefined,
          inTime: undefined,
          orderWarehouseInBackItemDoList: []
        }
      }
    }
  },

  mounted() {
    this.getAttrList()
    this.getTypeList()
  },

  computed: {
    isAdd() {
      return this.$route.path === "/order/warehousing-add"
    },
    warehousing(){
      return {...this.orderItemA, ...this.orderItemB}
    },
    orderId(){
      return this.order.orderId
    },
    brandObject(){
      return this.brandList.find(e => e.id === this.form.brand) || ''
    },
    brandObject1(){
      return this.brandList.find(e => e.id === this.form1.brand) || ''
    },
    isBeian(){
      if (this.form.recordMode !== undefined){
        return [this.$t('无备案'), this.$t('有备案'), this.$t('中性')][this.form.recordMode]
      }
      if (this.brandObject.filing){
        return [this.$t('无备案'), this.$t('有备案'), this.$t('中性')][this.brandObject.filing]
      } else {
        return ''
      }
    },
    isBeian1(){
      if (this.form1.recordMode !== undefined){
        return [this.$t('无备案'), this.$t('有备案'), this.$t('中性')][this.form1.recordMode]
      }
      if (this.brandObject1.filing){
        return [this.$t('无备案'), this.$t('有备案'), this.$t('中性')][this.brandObject1.filing]
      } else {
        return ''
      }
    },
    /**
     * 收费模式
     * @returns {string} 无牌价0，有牌价1，中性品牌价2
     */
    feeType(){
      const feeType = this.form.feeType
      if (feeType >= 0 && feeType < 3) {
        return [this.$t('无牌价'), this.$t('有牌价'), this.$t('中性品牌价')][feeType]
      }
      return ''
    },
    feeType1(){
      const feeType = parseInt(this.form1.feeType)
      if (feeType >= 0 && feeType < 3) {
        return [this.$t('无牌价'), this.$t('有牌价'), this.$t('中性品牌价')][feeType]
      }
      return ''
    },
    warehouseId(){
      return this.order.adjustToDestWarehouseId || this.order?.logisticsInfoDto?.startWarehouseId
    }
  },

  watch: {
    visible(val){
      if (val) {
        this.getProductBrandPage(this.warehousing.brandName)
        this.handleBrandChange(parseInt(this.form.brand))
      } else {
        this.$emit('close')
      }
    },
    'form.brand'(){
      this.handleBrandChange()
    },
    'form.prodId'(){
      this.handleBrandChange()
    }
  },

  data(){
    return {
      DICT_TYPE,
      getDictDataLabel,
      getDictDatas,
      activeName: 'first',
      visible: false,
      form: {
        table: [],
        brandType: undefined,
        orderId: undefined,
        orderNo: undefined,
        brand: undefined,
        inTime: undefined,
        material: undefined,
        orderItemId: undefined,
        warehouseInProdAttrIds: [],
        prodId: undefined,
        prodTitleEn: undefined,
        prodTitleZh: undefined,
        prodType: undefined,
        type: undefined,
        feeType: undefined,
        recordMode: undefined,
        usageIds:[]
      },
      brandList: [],
      formRules: {
        prodId: [{required: true, message: this.$t("请选择品名"), trigger: "change"}],
        brand: [{required: true, message: this.$t("请选择品牌"), trigger: "change"}],
      },
      tableFormRules: {
        cartonsNum: [{required: true, message: this.$t("箱数不能为空"), trigger: "change"}],
        boxGauge1: [{required: true, message: this.$t("货物长不能为空"), trigger: "change"}],
        boxGauge2: [{required: true, message: this.$t("货物宽不能为空"), trigger: "change"}],
        boxGauge3: [{required: true, message: this.$t("货物高不能为空"), trigger: "change"}],
        volume: [{required: true, message: this.$t("体积不能为空"), trigger: "change"}],
        weight: [{required: true, message: this.$t("重量不能为空"), trigger: "change"}],
        // quantityAll: [{required: true, message: this.$t("数量不能为空"), trigger: "change"}]
      },


      selectedUsers: undefined,

      // 入仓修改正在审核中
      isEditing: false,
      // 审批业务id
      formId: '',

      // 追加时被保护的行数
      protectRowCount: -1,

      // 添加商品弹窗
      isShowProduct: false,
      productForm: {
        typeId: undefined,
        attrArray: [],
        titleZh: undefined,
        titleEn: undefined
      },
      productRules: {
        typeId: [{ required: true, message: this.$t("商品类型不能为空"), trigger: "change" }],
        // attrArray: [{ required: true, message: this.$t("商品特性不能为空"), trigger: "change" }],
        titleZh: [{ required: true, message: this.$t("中文标题不能为空"), trigger: "blur" }],
        titleEn: [{ required: true, message: this.$t("英文标题不能为空"), trigger: "blur" }],
      },
      //类型列表
      typeList: [],
      // 特性列表
      attrList: [],
      pictureUrls: []
    }
  },
  async created() {
    this.visible = true
    this.$nextTick()
    this.pictureUrls = this.orderItemB.pictureUrls || []
    this.handleAdd()
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleVolume(index, val){
      setTimeout(() => {
        const {boxGauge1, boxGauge2, boxGauge3, specificationType, cartonsNum} = (val === 1 ? this.form1.table : this.form.table)[index]
        let result = ''
        if (boxGauge1 && boxGauge2 && boxGauge3 && specificationType && cartonsNum) {
          result = (((specificationType === 1 || specificationType === '1') ? cartonsNum : 1) * (boxGauge1 * boxGauge2 * boxGauge3) / 1000000 + 0.000001)?.toFixed(2) || ''
        } else {
          result = ''
        }
        if (result === '0.00') result = '0.01';
        (val === 1 ? this.form1.table : this.form.table)[index].volume = result
      }, 0)
    },
    handleSubmit() {
      if (this.form.warehouseInProdAttrIds.indexOf(4) !== -1) {
        return this.$notify({
          title: this.$t('提示'),
          message: this.$t("订单包含不接受货物，请检查"),
          type: 'warning'
        })
      }
      this.$refs['tableForm'].validate(valid1 => {
        console.log("表单校验", valid1)
        if (!valid1) {
          return
        }
        // 复制数据副本，避免修改格式后原数据被影响
        const table = JSON.parse(JSON.stringify(this.form.table))
        table.forEach(({orderWarehouseInDetailsVOList}) => {

        })

        if (this.pictureUrls?.length === 0) {
          return this.$notify({
            title: '请上传入仓影像',
            type: 'warning'
          });
        }

        // 首次入仓、入仓补充
        return finishPacked({
          brand: this.form.brand,
          prodId: this.form.prodId,
          feeType: this.form.feeType,
          usageIds: this.form.usageIds.join(','),
          warehouseInProdAttrIds: this.form.warehouseInProdAttrIds.join(','),
          type: 1,// 非下单货物
          orderId: this.order.orderId,
          orderWarehouseInItemDtoList: table.map(e => {
            if(!e.orderWarehouseInDetailsVOList){
                e.orderWarehouseInDetailsVOList = []
            }
              e.orderWarehouseInDetailsVOList = e.orderWarehouseInDetailsVOList.map(item => {
                if(Array.isArray(item.prodAttrIds)){
                    item.prodAttrIds = item.prodAttrIds.join(',')
                }
                if(Array.isArray(item.usageIds)){
                    item.usageIds = item.usageIds.join(',')
                }
                return item
            })

            return {
              ...e,
              boxGauge: e.boxGauge1 + '*' + e.boxGauge2 + '*' + e.boxGauge3,
              orderLocationCreateReqVOList: e.orderLocationBackVOList
            }
          }),
          pictureUrls: this.pictureUrls
        }).then(r => {
          if (r.data) {
            this.$message.success('打包成功')
            this.handleClose()
          } else {
            this.$message.success('打包失败')
          }
        })
      })
    },
    getProductBrandPage(titleZh = undefined) {
      getProductBrankPage({pageSize: 20, titleZh}).then(r => {
        this.brandList = r.data.list
      })
    },
    handleBrandChange(){
      if(!this.form.prodId || !this.form.brand) return
      getFeeTypeByOrderProduct({
        brandId: parseInt(this.form.brand),
        productId: this.form.prodId,
        orderId: this.orderId
      }).then(r => {
        if(r.code === 0){
          this.$set(this.form, 'feeType', parseInt(r.data.feeType))
          this.$set(this.form,'recordMode', parseInt(r.data.recordMode))
        }
      })
    },
    handleDelete(val) {
      if (val === 1) {
        this.form1.table.pop()
      } else if (this.form.table.length > this.protectRowCount) {
        this.form.table.pop()
      }
    },
    handleDeleteRow(index, val) {
      if (val === 1) {
        this.form1.table.splice(index, 1)
      } else if (this.form.table.length > this.protectRowCount) {
        this.form.table.splice(index, 1)
      }
    },
    handleAdd(val = 0) {
      let cartonsNum = ''
      if (val !== 1) { // 货物入仓
        let hasCartonsNum = 0
        this.form.table.forEach(e => {
          hasCartonsNum += e.cartonsNum
        })
        cartonsNum = this.warehousing.num - hasCartonsNum
      }

      const form = {...this.form}
      const formLength = form.table.length
      let orderLocationBackVOList = []
      /* // 不默认使用上一条记录的储位 https://zentao.test.jdshangmen.com/bug-view-3344.html
      if (formLength > 0) {
        orderLocationBackVOList = JSON.parse(JSON.stringify(form.table[formLength - 1].orderLocationBackVOList))
      }*/
      form.table.push({
        "boxGauge1": this.isJiyun ? 0 : '',
        "boxGauge2": this.isJiyun ? 0 : '',
        "boxGauge3": this.isJiyun ? 0 : '',
        "cartonsNum": cartonsNum > 0 ? cartonsNum : '',
        "expressNo": "",
        "quantityAll": undefined,
        "unit": "1",
        "volume": '',
        "weight": '',
        specificationType: '1',
        table: [],
        orderLocationBackVOList
      })
    },
    /** 获取产品属性列表 */
    getAttrList() {
      getProductAttrList().then(response => {
        this.attrList = response.data;
      })
    },
    /** 获取产品类型列表 */
    getTypeList() {
      getProductTypeList().then(response => {
        this.typeList = response.data;
      })
    },
    productSubmit(){
      this.$refs["productForm"].validate(valid => {
        if (!valid) {
          return;
        }
        //商品特性转字符串
        this.productForm.attrId = this.productForm.attrArray.join(',')
        // 添加的提交
        addProduct(this.productForm).then(response => {
          this.$modal.msgSuccess(this.$t("新增成功"))
          if (this.activeName === 'first') {
            this.form.prodId = response.data
            this.form.warehouseInProdAttrIds = this.productForm.attrArray
          } else {
            this.form1.prodId = response.data
            this.form1.warehouseInProdAttrIds = this.productForm.attrArray
          }
          this.productCancel()
        })
      })
    },
    productCancel(){
      this.isShowProduct = false
      this.productForm = {
        typeId: undefined,
        attrArray: [],
        titleZh: undefined,
        titleEn: undefined
      }
    },
    handleProdChange(prod){
      console.log('handleProdChange', prod)
      let attrIds = prod.attrId?.split(',')?.map(item => parseInt(item)) || []
      this.$set(this.form,'warehouseInProdAttrIds', attrIds)
      this.$set(this.form, 'material', prod.materialType)
    }
  }
}
</script>

<style scoped>

</style>
