<template>
  <div :value="productData" :data="product_id">
    <i-button type="primary" icon="ios-search" @click="SelectProductModal">选择产品</i-button>
    <Modal title="选择产品" v-model="productSelectorModal" :styles="{top: '40px',width:'600px'}">
      <div class="modal_body" style="overflow-y:auto;">
        <div style="width:100%;max-height:300px;">
          <div class="filter">
            <input class="publicinput" type="text" v-model="productSelector_productKeyword" placeholder="请输入产品名称/编号">
            <Button class="ml5" type="primary" @click="search">{{$t('1001')}}</Button>
          </div>
          <Table style="margin-top:10px" @on-current-change="handleRowChange" highlight-row :data="tableData1" :columns="tableColumns1"></Table>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from '@/libs/api.request'
export default {
    name: 'Product',
    data () {
        return {
            productData: {
                id: 0,
                product_name: '',
                product_drawingcode: ''
            },
            product_id: 0,
            productSelector_productKeyword: '',
            tableData1: [],
            productSelectorModal: false,
            tableColumns1: [{
                type: 'index2',
                title: '序号',
                key: 'order',
                render: (h, params) => {
                    return h('span', params.index + 1)
                },
                width: 60
            }, {
                title: '产品名称',
                key: 'product_name'
            },
            {
                title: this.$t(100089),
                key: 'product_drawingcode'
            }
            ]

        }
    },
    methods: {
        SelectProductModal () {
            this.initModal()
            this.productSelectorModal = true
        },
        initModal () {
            this.search()
            this.productData = {
                id: 0,
                product_name: '',
                product_drawingcode: ''
            }
            this.product_id = 0
            this.productSelector_productKeyword = ''
        },
        search () {
            let params = {
                productfilter: this.productSelector_productKeyword,
                count: 50
            }
            axios.request({
                url: '/tools/ToolConfig/GetProductList',
                params,
                method: 'get'
            }).then(res => {
                let data = []
                res.data.data.forEach(item => {
                    if (item) {
                        data.push({
                            product_drawingcode: item.drawingcode,
                            product_name: item.name,
                            id: item.id
                        })
                    }
                })
                this.tableData1 = data
            })
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.productData = {
                product_id: currentRow.id,
                product_name: currentRow.product_name,
                product_drawingcode: currentRow.product_drawingcode
            }
            this.product_id = currentRow.id
            this.productSelectorModal = false
            this.$emit('activeName', this.productData)
        }
    }
}
</script>
