<template>
  <div class="sparePart">
    <label class="clear block">{{$t(200011)}}：</label>
    <input class="publicinput" style="width: 100%;" v-model="keyword" @keydown="search" />
    <ul class="border" style="width: 100%;max-height: 200px;overflow-y: scroll;">
      <li v-for="(item, index) in  spareList" :key="index" @click="handleAdd(item)">{{item.title}}</li>
    </ul>
    <div class="border mt5" style="padding: 5px 0px;max-height: 455px;overflow-y: scroll;" v-show="spareParts.length>0">
      <Row v-for="(item, index) in spareParts" :key="index" type="flex" justify="space-between" class="code-row-bg mt5">
        <Col span="24">
        <!-- :rules="addModalRule.cutter_location_name" -->
        <label class="pl10 fl inline-block" style="width: 150px;overflow: hidden;line-height: 32px">{{item.spare}}</label>
        <InputNumber class="ml5 fl" @on-change="changeNum($event,item)" :max="item.sku" :min="1" :prop="'spareParts.'+index+'.num'"
          v-model="item.num" :placeholder="$t(1590022)" style="width: 60px;"></InputNumber>
        <a class="pl10 fl inline-block ml10" style="overflow: hidden;line-height: 32px" @click="handleRemove(index)">{{$t(1004)}}</a>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import axios from '@/libs/api.request'
export default {
    props: ['inputSpareParts'],
    data () {
        return {
            index: 0,
            isfirst: true,
            spareParts: [],
            oldSpareParts: [],
            keyword: '',
            spareList: []
        }
    },
    created () {
        this.search()
    },
    methods: {
        search () {
            let params = {
                keyword: this.keyword
            }
            axios.request({
                url: '/tpm/Sparepart/GetSparepartList',
                params,
                method: 'get'
            }).then(res => {
                this.spareList = []
                res.data.data.forEach(item => {
                    if (item) {
                        this.spareList.push({
                            title: item.code + ' ' + item.title,
                            spareid: item.id,
                            orangeTitle: item.title,
                            sku: item.sku
                        })
                    }
                })
                if (this.isfirst) {
                    this.oldSpareParts = this.spareList
                    this.isfirst = false
                }
            })
        },
        handleAdd (spare) {
            let hasSpare = false // spareParts中已经包含选中的配件
            this.spareParts.forEach(item => {
                if (item.spareid === spare.spareid) {
                    hasSpare = true
                }
            })
            if (!hasSpare) { // 如果列表中已经包括了该配件，那么页面上不需要增加一行
                this.index++
                this.spareParts.push({
                    spareid: spare.spareid,
                    spare: spare.title,
                    num: 1,
                    index: this.index
                })
            }
            this.$emit('activeName', this.spareParts)
        },
        handleRemove (index) {
            this.spareParts.splice(index, 1)
            this.$emit('activeName', this.spareParts)
        },
        changeNum (newnum, current_item) {
            this.$emit('activeName', this.spareParts)
        },
        getSpareInfo (spareid, list) {
            let tempItem = ''
            if (list.length > 0) {
                list.forEach(item => {
                    if (item.spareid === spareid) {
                        tempItem = item
                    }
                })
            }
            return tempItem
        }
    },
    watch: {
        inputSpareParts () { // 设置默认值
            let tempArr = []
            this.inputSpareParts.forEach(item => {
                let itemInfo = this.getSpareInfo(parseInt(item.spareid), this.oldSpareParts)
                tempArr.push({
                    spareid: parseInt(item.spareid),
                    spare: itemInfo.orangeTitle,
                    num: item.num,
                    index: item.index,
                    sku: itemInfo.sku
                })
            })
            this.spareParts = tempArr
        }

    }

}
</script>

<style>
  .sparePart .border {
    border: 1px solid #dcdee2;
    border-radius: 6px;
  }

  .sparePart li {
    line-height: 32px;
    padding-left: 10px;
    font-size: 14px;
  }

  .sparePart ul,
  .sparePart li {
    list-style: none;
  }
</style>
