<template>
  <view>
    <template v-if="text">
      <text style="margin-right: 10px;color: #4085e3" @click="handleOpen">{{ num }}{{$t('箱')}}({{ $t('混箱') }})</text>
    </template>
    <template v-else>
      <button class="mini-btn" type="primary" size="mini" @tap="handleOpen" style="margin-left: 10rpx">{{ title }}</button>
    </template>
    <view class="add-popup">
      <uni-popup ref="popup1" background-color="#fff">
        <view class="popup-content">
          <view class="popup-title">{{ title }}</view>

          <WarehouseRecordDetailItem
            v-for="(item, index) in dataList"
            v-model="dataList[index]"
            :key="index"
            :index="index"
            :attr-list="attrList"
            :readonly="readonly"
            @handle-delete="handleDelete"
          />

          <button v-show="!readonly" type="primary" size="mini" @click="handleAddItem">添加一条明细</button>
          <button v-if="orderId" style="margin-left: 10rpx" type="primary" size="mini" @click="handleChooseOrderProduct">选择订单商品</button>

          <view class="popup-foot-btn">
            <button v-show="!readonly" class="mini-btn" type="primary" size="mini" @tap="handleSave">{{$t('确认')}}</button>
            <button v-show="!readonly" class="mini-btn" type="default" size="mini" @tap="handleCancel">{{$t('取消')}}</button>
            <button v-show="readonly" class="mini-btn" type="default" size="mini" @tap="handleCancel">{{$t('关闭')}}</button>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>

</template>

<script>
import WarehouseRecordDetailItem from "@/components/warehouse-record-detail/item.vue";

export default {
  name: "WarehouseRecordDetail",
  components: {WarehouseRecordDetailItem},

  props: {
    value: {
      type: Array,
      default: () => []
    },
    readonly: {
      type: Boolean,
      default: false
    },
    text: {
      type: Boolean,
      default: false
    },
    num:{
      type:Number,
      default:0
    },
    // 订单ID,有此参数则表示备货页面引用，需开启选择订单商品
    orderId: Number,
    warehouseInId:Number
  },

  data() {
    return {
      dataList: [],
      // 特性列表
      attrList: []
    }
  },
  mounted() {
    uni.addProductFromOrder = this.addItem
  },
  beforeDestroy() {
    uni.addProductFromOrder = null
  },
  methods: {
    init() {
      if (!this.value || this.value.length === 0) {
        this.dataList = [{
          "boxGauge": "",
          "brand": undefined,
          "cartonsNum": undefined,
          "createTime": "",
          "expressNo": "",
          "prodAttrIds": '',
          "prodId": undefined,
          "quantityAll": undefined,
          "specificationType": undefined,
          "unit": "",
          "usageIds": "",
          "volume": undefined,
          "weight": undefined
        }]
      } else {
        this.dataList = JSON.parse(JSON.stringify(this.value))
      }
    },
    handleAddItem() {
      this.dataList.push({
        "boxGauge": "",
        "brand": undefined,
        "cartonsNum": undefined,
        "createTime": "",
        "expressNo": "",
        "prodAttrIds": '',
        "prodId": undefined,
        "quantityAll": undefined,
        "specificationType": undefined,
        "unit": "",
        "usageIds": "",
        "volume": undefined,
        "weight": undefined
      })
    },
    handleDelete(index) {
      this.dataList.splice(index, 1)
    },
    handleOpen() {
      this.init()
      this.$refs.popup1.open('center')
    },
    handleCancel() {
      this.$refs.popup1.close()
      // this.popupForm = {}
    },
    handleSave() {
      for (let i = 0; i < this.dataList.length; i++) {
        if (!this.dataList[i].prodId) {
          return uni.showToast({
            title: '明细' + (i + 1) + ': ' + '请选择品名',
            icon: "error"
          })
        }
        if (!this.dataList[i].brand) {
          return uni.showToast({
            title: '明细' + (i + 1) + ': ' + '请选择品牌',
            icon: "error"
          })
        }
        // if (!this.dataList[i].prodAttrIds) {
        //   return uni.showToast({
        //     title: '明细' + (i + 1) + ': ' + '请选择商品特性',
        //     icon: "error"
        //   })
        // }
      }

      this.$emit('input', this.dataList)

      this.$refs.popup1.close()
    },
    handleChooseOrderProduct(){
      uni.navigateTo({
        url: `/pages/stocking/chooseOrderProducts?orderId=${this.orderId}&warehouseInId=${this.warehouseInId}`
      })
    },
    async addItem(item) {
      console.log("addItem", {...item})
      if(this.dataList?.length){
        let lastItem = this.dataList[this.dataList.length - 1]
        if(!lastItem.prodId && !lastItem.brand && !lastItem.material && !lastItem.quantityAll){
          this.dataList.splice(0, 1)
        }
      }
      await this.$nextTick()
      this.dataList.push({
        "boxGauge": "",
        "brand": item.brand,
        "cartonsNum": undefined,
        "createTime": "",
        "expressNo": item.expressNo,
        "pictureUrls": item.pictureUrls,
        "prodAttrIds": item.prodAttrIds,
        "prodId": item.prodId,
        "quantityAll": item.quantityAll,
        "specificationType": undefined,
        "unit": "",
        "usageIds": item.usageIds || "",
        "volume": undefined,
        "weight": undefined,
        "material": item.material
      })
    }
  },

  computed: {
    title() {
      if (this.readonly) {
        return '查看箱明细'
      }
      return !this.value || this.value.length === 0 ? '添加箱明细' : '编辑箱明细'
    }
  }
}
</script>

<style scoped lang="scss">

.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>
