<template>
  <el-card style="margin-bottom: 10px">
    <div slot="header">
      <span>序号{{ index + 1 }}</span>
      <el-link v-show="!readonly" type="danger" @click="handleDelete" style="float: right">删除</el-link>
    </div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item :label="$t('中文品名')">
          <product-selector v-model="value.prodId" @change="onProductChange" determined :disabled="readonly" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="$t('品牌')">
          <el-select
            v-model="value.brand"
            :placeholder="$t('可修改')"
            filterable
            remote
            :remote-method="getProductBrandPage"
            :disabled="readonly"
            clearable>
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.titleZh"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item :label="$t('商品特性')">
          <el-checkbox-group v-model="prodAttrIds">
            <el-checkbox v-for="item in attrList" :key="item.id" :label="item.id" :disabled="readonly">{{ item.attrName }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="$t('用途')">
          <el-checkbox-group v-model="usageIds">
            <el-checkbox v-for="item in getDictDatas(DICT_TYPE.WAREHOUSING_RECORD_DETAIL_USAGE)" :key="item.value" :label="item.value" :disabled="readonly">{{ $l(item, 'label') }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="4">
        <el-form-item :label="$t('长')">
          <el-input v-model="boxGauge1" type="number" :disabled="readonly" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item :label="$t('宽')">
          <el-input v-model="boxGauge2" type="number" :disabled="readonly" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item :label="$t('高')">
          <el-input v-model="boxGauge3" type="number" :disabled="readonly" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item :label="$t('重量')">
          <el-input v-model="value.weight" type="number" :disabled="readonly" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item :label="$t('体积')">
          <el-input v-model="value.volume" type="number" :disabled="readonly" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="4">
        <el-form-item :label="$t('快递单号')">
          <el-input v-model="value.expressNo" :disabled="readonly" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item :label="$t('包装类型')">
          <dict-selector :type="DICT_TYPE.ECW_PACKAGING_TYPE" v-model="value.unit" :disabled="readonly"></dict-selector>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item :label="$t('数量')">
          <el-input v-model="value.quantityAll" type="number" :disabled="readonly" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import ProductSelector from "@/components/ProductSelector/index.vue"
import { getProductBrank, getProductBrankPage } from '@/api/ecw/productBrank'
import {getProductAttrList} from "@/api/ecw/productAttr"
import {DICT_TYPE, getDictDatas} from '@/utils/dict'

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

      boxGauge1: '',
      boxGauge2: '',
      boxGauge3: '',
    }
  },
  async mounted() {
    // 品牌回显
    if (this.value.brand) {
      await getProductBrank(this.value.brand).then(r => {
        this.brandList = [r.data]
      })
    } else {
      this.getProductBrandPage()
    }

    if (typeof this.value.prodAttrIds === 'string' && this.value.prodAttrIds.length > 0) {
      this.prodAttrIds.push(...this.value.prodAttrIds.split(',').map(e => +e))
    }
    console.log(this.prodAttrIds)

    if (this.value.usageIds) {
      await this.$nextTick()
      this.usageIds = this.value.usageIds.split(',') || []
    }

    if (this.value.boxGauge) {
      const boxGauge = this.value.boxGauge.split('*')
      if (boxGauge?.length === 3) {
        this.boxGauge1 = boxGauge[0]
        this.boxGauge2 = boxGauge[1]
        this.boxGauge3 = boxGauge[2]
      }
    }
  },
  methods: {
    getDictDatas,
    /** 获取产品属性列表 */
    getAttrList() {
      getProductAttrList().then(response => {
        this.attrList = response.data;
      })
    },
    getProductBrandPage(titleZh = undefined) {
      getProductBrankPage({pageSize: 20, titleZh}).then(r => {
        this.brandList = r.data.list
      })
    },
    handleDelete() {
      this.$emit('handle-delete')
    },
    onProductChange(product){
      if (!product || this.readonly) {
        return
      }
      this.prodAttrIds = product.attrId ? product.attrId.split(',').map(e => +e) : []
    }
  },
  watch: {
    prodAttrIds(val) {
      this.value.prodAttrIds = val.join(',')
    },
    usageIds(val) {
      this.$nextTick(() => {
        this.value.usageIds = val.join(',')
      })
    },
    boxGauge1() {
      if (this.boxGauge1 < 0 ) {
        this.boxGauge1 = -this.boxGauge1
      }

      this.value.boxGauge = this.boxGauge1 + '*' + this.boxGauge2 + '*' + this.boxGauge3
      this.value.volume = (this.boxGauge1 * this.boxGauge2 * this.boxGauge3 / 1000000).toFixed(2)
    },
    boxGauge2() {
      if (this.boxGauge2 < 0 ) {
        this.boxGauge2 = -this.boxGauge2
      }
      this.value.boxGauge = this.boxGauge1 + '*' + this.boxGauge2 + '*' + this.boxGauge3
      this.value.volume = (this.boxGauge1 * this.boxGauge2 * this.boxGauge3 / 1000000).toFixed(2)
    },
    boxGauge3() {
      if (this.boxGauge3 < 0 ) {
        this.boxGauge3 = -this.boxGauge3
      }
      this.value.boxGauge = this.boxGauge1 + '*' + this.boxGauge2 + '*' + this.boxGauge3
      this.value.volume = (this.boxGauge1 * this.boxGauge2 * this.boxGauge3 / 1000000).toFixed(2)
    },
    'value.volume'() {
      if (this.value.volume < 0) {
        this.value.volume = -this.value.volume
      }
    },
    'value.quantityAll'() {
      if (this.value.quantityAll < 0) {
        this.value.quantityAll = -this.value.quantityAll
      }
    },
    'value.weight'() {
      if (this.value.weight < 0) {
        this.value.weight = -this.value.weight
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
