<template>
  <div :value="machineData" :data="machcine_id">
    <i-button type="primary" icon="ios-search" @click="SelectMachineModal">选择设备</i-button>
    <Modal title="选择设备" v-model="machineSelectorModal" :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="machineSelector_machineKeyword" 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: 'machine',
    data () {
        return {
            machineData: {
                id: 0,
                machine_name: '',
                machine_code: ''
            },
            machcine_id: 0,
            machineSelector_machineKeyword: '',
            tableData1: [],
            machineSelectorModal: false,
            tableColumns1: [{
                type: 'index2',
                title: '序号',
                key: 'order',
                render: (h, params) => {
                    return h('span', params.index + 1)
                },
                width: 60
            }, {
                title: '设备名称',
                key: 'machine_name'
            },
            {
                title: '设备编号',
                key: 'machine_code'
            }
            ]
        }
    },
    methods: {
        SelectMachineModal () {
            this.initModal()
            this.machineSelectorModal = true
        },
        initModal () {
            this.search()
            this.machineData = {
                id: 0,
                machine_name: '',
                machine_code: ''
            }
            this.machcine_id = 0
            this.machineSelector_machineKeyword = ''
        },
        search () {
            let params = {
                machinefilter: this.machineSelector_machineKeyword,
                count: 50
            }
            axios.request({
                url: '/tools/ToolConfig/GetMachineListByFilter',
                params,
                method: 'get'
            }).then(res => {
                let data = []
                res.data.data.forEach(item => {
                    if (item) {
                        data.push({
                            machine_code: item.machine_code,
                            machine_name: item.machine_name,
                            id: item.machine_id
                        })
                    }
                })
                this.tableData1 = data
            })
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.machineData = {
                machine_id: currentRow.id,
                machine_name: currentRow.machine_name,
                machine_code: currentRow.machine_code
            }
            this.machcine_id = currentRow.id
            this.machineSelectorModal = false
            this.$emit('activeName', this.machineData)
        }
    }
}
</script>
