<template>
  <el-card style="margin-bottom: 10px">
    <div slot="header">
      <span>序号{{ index + 1 }}</span>
    </div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item :label="$t('中文品名')">
          <product-selector v-if="!readOnly" v-model="value.prodId" determined protect-once/>
          <span v-else>{{ value.prodTitleZh }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="$t('品牌')">
          <el-select
            v-model="value.brand"
            :placeholder="$t('可修改')"
            filterable
            remote
            @change="handleBrandChange"
            :remote-method="getProductBrandPage"
            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="value.prodAttrIds">
            <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="12">
        <el-form-item :label="$t('用途')">
        </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.boxGauge1" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item :label="$t('宽')">
          <el-input v-model="value.boxGauge2" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item :label="$t('高')">
          <el-input v-model="value.boxGauge3" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item :label="$t('重量')">
          <el-input v-model="value.weight" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item :label="$t('体积')">
          <el-input v-model="value.volume" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import ProductSelector from "@/components/ProductSelector/index.vue";
import {getProductBrankPage} from "@/api/ecw/productBrank";
import {getProductAttrList} from "@/api/ecw/productAttr";
// import {getFeeTypeByOrderProduct} from "@/api/ecw/productBrank";

export default {
  name: "WarehouseRecordDetailItem",
  components: {ProductSelector},
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    // 特性列表
    attrList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      brandList: [],
    }
  },
  methods: {
    /** 获取产品属性列表 */
    getAttrList() {
      getProductAttrList().then(response => {
        this.attrList = response.data;
      })
    },
    handleBrandChange(v){
    //   getFeeTypeByOrderProduct({
    //     brandId: parseInt(v),
    //     productId: this.warehousing.prodId,
    //     orderId: this.orderId
    //   }).then(r => {
    //     if(r.code === 0){
    //       (this.activeName === "first" ? this.form : this.form1).feeType = parseInt(r.data.feeType);
    //       (this.activeName === "first" ? this.form : this.form1).recordMode = parseInt(r.data.recordMode)
    //     }
    //   })
    },
    getProductBrandPage(titleZh = undefined) {
      getProductBrankPage({pageSize: 20, titleZh}).then(r => {
        this.brandList = r.data.list
      })
    },
  }
}
</script>

<style scoped lang="scss">

</style>
