<template>
  <uni-card>
    <view style="display: flex;justify-content: space-between">
      <text style="font-weight: bold;line-height: 60rpx">{{ $t('明细') + (index + 1) }}</text>
      <view v-if="!readonly">
        <button class="mini-btn" type="default" size="mini" @click="$emit('handle-delete', index)">删除</button>
      </view>
    </view>
    <uni-forms ref="addForm" :modelValue="value" 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>
        <!-- <uni-easyinput v-model="value.titleZh" placeholder="中文品名" /> -->
        <select-combox
          v-if="!readonly"
          :candidates="productListZh"
          :productListToBeDetermined="productListToBeDetermined"
          placeholder=""
          @getValue="getValue"
          @input="handleInputZh"
          v-model="prodTitle"
        ></select-combox>
        <text v-else>{{ prodTitle }}</text>
      </uni-forms-item>

      <uni-forms-item :label="$t('品牌')" required>
        <!-- <text v-if="selectListItem.orderWarehouseInBackItemDoList && selectListItem.orderWarehouseInBackItemDoList.length">{{ addForm.brand ? brandRang.find(v => v.id == addForm.brand) ? brandRang.find(v => v.id == addForm.brand).titleZh : $t('无') : $t('无') }}</text> -->
        <!-- <uni-data-select v-else v-model="addForm.brand" :localdata="brandRang" @change="brandChange"></uni-data-select> -->
        <text v-if="readonly">{{ brandRangtitle && brandRangtitle.length === 1 ? brandRangtitle[0] : '' }}</text>
        <select-combox
          v-else
          :candidates="brandRangtitle"
          :valuedates="brandRang"
          placeholder=""
          @getValue="brandChange"
          @input="getPinPai"
          v-model="brand"
        ></select-combox>
        <!-- <select-combox v-else :candidates="brandRangTitle" placeholder="" @getValue="getValueBrand" v-model="addForm.brand"></select-combox> -->

      </uni-forms-item>

      <uni-forms-item :label="$t('材质')">
        <uni-data-select v-model="material" :localdata="caizhiRang" :placeholder="$t('请选择')" :disabled="readonly"></uni-data-select>
      </uni-forms-item>

      <uni-forms-item :label="$t('商品特性')">
        <uni-data-checkbox v-model="prodAttrIds" multiple :localdata="texingLocaldata" :disabled="readonly" />
      </uni-forms-item>

      <uni-forms-item :label="$t('用途')">
        <uni-data-checkbox v-model="usageIds" multiple :localdata="usageIdsList" :disabled="readonly" />
      </uni-forms-item>

      <view class="card-row">
<!--        <uni-easyinput :disabled="readonly" v-model="value.weight" type="number" :placeholder="$t('重量')" :clearable="false"/>-->
<!--        <text>KG</text>-->
        <uni-easyinput :disabled="readonly" v-model="value.quantityAll" type="number" :placeholder="$t('个数')" :clearable="false"/>
        <text>{{$t('个')}}</text>
      </view>
<!--      <view class="card-row">-->
<!--        <uni-easyinput :disabled="readonly" v-model="value.c" type="number" :placeholder="$t('长')" :clearable="false" @input="handleVolume()"/>-->
<!--        <text>*</text>-->
<!--        <uni-easyinput :disabled="readonly" v-model="value.k" type="number" :placeholder="$t('宽')" :clearable="false" @input="handleVolume()"/>-->
<!--        <text>*</text>-->
<!--        <uni-easyinput :disabled="readonly" v-model="value.g" type="number" :placeholder="$t('高')" :clearable="false" @input="handleVolume()"/>-->
<!--        <text>=</text>-->
<!--        <uni-easyinput :disabled="readonly" v-model="value.volume" type="number" placeholder="" :clearable="false" />-->
<!--        <text>CBM</text>-->
<!--      </view>-->

    </uni-forms>
<!--    {{ value }}-->
  </uni-card>
</template>

<script>
import {
  getProductBrankById,
  getProductBrankPage,
  getProductById,
  getProductList,
  getProductTypeList
} from "@/pages/warehousing/api";
import {getProductAttrList} from "@/api/system";
import {DICT_TYPE, getDictDatas} from "@/util/dict";

export default {
  name: "WarehouseRecordDetailItem",
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    },
    readonly: {
      type: Boolean,
      default: false
    },
    // 特性列表
    attrList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      prodAttrIds: [],
      usageIds: [],
      usageIdsList: [],

      c: '',
      k: '',
      g: '',
      productListZh: [],
      productListZhObj: [],
      productListEn: [],
      material: undefined,
      // 是否待确定
      productListToBeDetermined: [],
      brand: '',
      brandRangtitle:[],
      brandRang: [],
      texingLocaldata: [],

      prodTitle: ''
    }
  },

  created() {
    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
      }))
    })
    if (this.value.brand) {
      getProductBrankById({id: this.value.brand}).then(r => {
        this.brandRang = [r]
        if(this.$lang.locale === 'zh-Hans'){
          this.brandRangtitle.push(r.titleZh)
          this.brand = r.titleZh
        }else{
          this.brandRangtitle.push(r.titleEn)
          this.brand = r.titleEn
        }
      })
    } else {
      this.getPinPai()
    }
    if (this.value.prodId) {
      getProductById({ id: this.value.prodId }).then(r => {
        this.productListZhObj = [r]
        this.productListZh = [r.titleZh]
        this.prodTitle = r.titleZh
      })
    } else {
      this.getProductList()
    }

    const boxGauge = this.value.boxGauge?.split('*')
    if (boxGauge && boxGauge.length === 3) {
      this.value.c = boxGauge[0]
      this.value.k = boxGauge[1]
      this.value.g = boxGauge[2]
    }

    this.usageIdsList = getDictDatas(DICT_TYPE.WAREHOUSING_RECORD_DETAIL_USAGE).map(e => ({
      ...e,
      text: e[this.$lang.locale === 'zh-Hans' ? 'label' : 'labelEn']
    }))
    this.prodAttrIds = this.value.prodAttrIds?.split(',').map(e => +e)
    this.usageIds = this.value.usageIds?.split(',')
    this.material = this.value.material
  },

  methods: {
    getProductList(titleZh = '', productCode = undefined){
      // 注意：由于接口特性，中英文均都必须使用titleZh字段搜索
      return getProductList({
        filter: false,
        pageSize: 30,
        titleZh,
        productCode
      }).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)
      })
    },
    handleInputZh(e){
      this.getProductList(e)
    },
    getValue(e) {
      if(e){
        let sindex = 0
        this.productListZhObj.forEach((item,index)=>{
          if(item.titleZh === e){
            sindex = index
          }
        })
        this.prodTitle = this.productListZhObj[sindex][this.$lang.locale === 'zh-Hans' ? 'titleZh' : 'titleEn']

        this.$set(this.value,'prodId',this.productListZhObj[sindex].id)
        this.$set(this.value,'unit',this.productListZhObj[sindex].packaging)
        // this.unitChage(this.productListZhObj[sindex].packaging)
        // this.$set(this.value, 'prodAttrIds',(this.productListZhObj[sindex].attrId || '').split(',').map(v => Number(v)))
        this.prodAttrIds = this.productListZhObj[sindex].attrId.split(',').map(e => +e)
      } else {
        this.prodTitle = ''
      }
    },
    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)
          }
        })
      })
    },
    brandChange(e, value) {
      this.value.brand = value
    },
    handleVolume() {
      this.$nextTick(() => {
        const { c, k, g } = this.value
        if (c && k && g) {
          const volume = ((c * k * g) / 1000000).toFixed(2)
          this.$set(this.value, 'volume', volume === '0.00' ? '0.01' : volume)
          this.value.boxGauge = c + '*' + k + '*' + g
        } else {
          this.value.volume = 0.01
        }
        this.$forceUpdate()
      })
    },
  },

  computed: {
    // 材质字典
    caizhiRang(){
      return (this.$store.getters.dict_datas[this.DICT_TYPE.ECW_PRODUCT_MATERIAL] || []).map(v => ({ ...v, text: this.$l(v, 'label')}))
    }
  },

  watch: {
    prodAttrIds(val) {
      this.value.prodAttrIds = val.join(',')
    },
    usageIds(val) {
      this.value.usageIds = val.join(',')
    },
    material(val) {
      this.value.material = val
    }
  }
}
</script>

<style scoped lang="scss">

.card-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  > text {
    padding: 0 6px;
  }
}
</style>
