<template>
  <el-transfer :titles="['SKU列表', tit]" :filter-method="filterMethod" filterable filter-placeholder="输入编号或名称搜索"
    v-model="value" :data="skuListArr">
  </el-transfer>
</template>
<script>
export default {
  name: 'skuTransfer',
  props: {
    tit: String,
    val: Array,
    shop_id: String
  },
  data () {
    return {
      value: this.val
    }
  },
  computed: {
    // 获取商品sku列表
    skuList () {
      return this.$store.state.skuList.filter(item => item.shop_id === this.shop_id)
    },
    // 格式化sku列表
    skuListArr () {
      if (this.skuList.length > 0) {
        const list = this.skuList.map(item => {
          const key = parseInt(item.id) // 将id转换为整数
          const label = `${item.sku_number} - ${item.name}`
          return { key, label }
        })
        return list
      } else {
        return []
      }
    }
  },
  watch: {
    value (val) {
      this.updateValue(val)
    },
    // 监听父级 "所属商铺"控件  更新时清除sku穿梭框已选值
    shop_id () {
      this.value = []
    }
  },
  created () {
  },
  methods: {
    /**
     * @description: 穿梭框 条件搜索
     * @param {*} query 搜索关键字
     * @param {*} item 穿梭框 遍历数据
     */
    filterMethod (query, item) {
      return item.label.indexOf(query) > -1
    },
    /**
     * @description:发送 input 事件给父级  父级通过input事件来接收value值
     */
    updateValue (value) {
      this.$emit('input', value)
    }
  }
}
</script>

<style lang="scss"></style>
