<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv" style="margin:0px;">
            <div>
                <div class="filter">
                <label><span >{{$t('90000024')}}</span>：</label>
                <Select v-model="base_station" label-in-value clearable class="searchSelect"  >
                    <Option
                    v-for="item in base_stationlist"
                    :value="item.id"
                    :key="item.id"
                    >{{ item.name }}</Option>
                </Select>
                </div>
                <div class="filter">
                <label><span >{{$t('90000026')}}</span>：</label>
                <Select v-model="Supplier" label-in-value clearable class="searchSelect"  >
                    <Option
                    v-for="item in Supplierlist"
                    :value="item.name"
                    :key="item.name"
                    >{{ item.name }}</Option>
                </Select>
                </div>
                <div class="filter">
                <label><span >{{$t('800008')}}</span>：

                </label>
                <Select v-model="qrcode"
                filterable
                remote
                :remote-method="remoteMethod"
                :loading="loading1"
                label-in-value clearable class="searchSelect"  >
                    <Option
                    v-for="item in qrcodelist"
                    :value="item.id"
                    :key="item.id"
                    >{{ item.name }}</Option>
                </Select>
                </div>
                 <div class="filter">
                        <label >{{$t('90000027')}}：</label>
                        <DatePicker type="datetimerange" :value="dateTime" v-model="dateTime" placeholder="" class="searchInput MaxWidth" ></DatePicker>
                    </div>
            </div>

            <div class="searchBtn">
                <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search(1, 10, 0)">{{$t('1001')}}</Button>
                <Button type="primary" class="fourWord" icon="ios-cloud-download" @click="search(1, 10, 1)">{{$t('1007')}}</Button>
            </div>

        </div>
        <!-- table开始 -->
        <div class="divborder newTableDiv">
            <Table class="tableClass"
                highlight-row :data="tableData1" :columns="tableColumns1"></Table>
            <div class="pageDiv">
                <div class="pageDirection">
                <Page :total="total" :current="page" @on-change="changePage" show-elevator show-sizer show-total
                    @on-page-size-change="handlePageSize" :page-size-opts="[10,20,30,40,100]"></Page>
                </div>
            </div>
        </div>
        <!-- table结束 -->
    </div>
</template>
<script>
import moment from 'moment'
export default {
    data () {
        return {
            base_stationlist: [], // 基站下拉框列表
            base_station: '', // 基站下拉框value
            Supplier: '', // 供应商value
            Supplierlist: [], // 供应商list
            qrcode: '', // 二维码
            qrcodelist: [], // 二维码list
            loading1: false, // 远程搜索loading
            dateTime: '', // 时间范围
            starttime: '', // 开始时间
            endtime: '', // 结束时间

            total: 0, // 数据总量
            page: 1, // 页码
            pagesize: 10,
            tableData1: [], // table数据
            tableColumns1: [ // table表头数据
                { // 列表字段属性集合
                    type: 'index2',
                    align: 'center',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h('span', params.index + (this.page - 1) * this.pagesize + 1)
                    },
                    width: 90
                },
                {
                    title: this.$t('800008'),
                    align: 'center',
                    key: 'barcode',
                    width: 200
                },
                {
                    title: this.$t('90000024'),
                    align: 'center',
                    key: 'station_name'
                },
                {
                    title: this.$t('100390'),
                    align: 'center',
                    key: 'part_number'
                },
                {
                    title: 'Duns',
                    align: 'center',
                    key: 'duns'
                },
                {
                    title: this.$t('600011'),
                    align: 'center',
                    key: 'supplier'
                },
                {
                    title: this.$t('90000028'),
                    align: 'center',
                    key: 'produce_time_str'
                },
                {
                    title: this.$t('90000029'),
                    align: 'center',
                    key: 'acc_code'
                },
                {
                    title: this.$t('90000027'),
                    align: 'center',
                    key: 'feeding_time',
                    width: 160
                },
                {
                    title: this.$t('300084'),
                    align: 'center',
                    key: 'quantity'
                },
                {
                    title: 'Die/Matrix',
                    align: 'center',
                    key: 'matrix',
                    width: 120
                },
                {
                    title: 'Heat',
                    align: 'center',
                    key: 'heat'
                },
                {
                    title: 'steel route',
                    align: 'center',
                    key: 'Steel_route',
                    width: 120
                }
            ]
        }
    },
    created () {
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
        this.dateTime = [
            moment(new Date().getTime() - 3600 * 1000 * 24 * 7).format('YYYY-MM-DD ') + '00:00:00',
            moment(new Date().getTime()).format('YYYY-MM-DD ') + '23:59:59'
        ]

        this.search(this.page, this.pagesize, 0)
    },
    methods: {
        initstation () { // 获取基站下拉框数据
            this.axios.request({
                url: '/qms/barcode/GetStations',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.base_stationlist = res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        initSupplier () { // 获取供应商下拉框数据
            this.axios.request({
                url: '/qms/barcode/GetSuppliers', //
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.Supplierlist = res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        remoteMethod (query) { // 远程搜索
            if (query !== '') {
                this.loading1 = true
                setTimeout(() => {
                    this.loading1 = false
                    this.initqrcode(query)
                }, 200)
            } else {
                this.initqrcode('')
            }
        },
        initqrcode (word) { // 获取二维码下拉框数据
            var params = {
                keyword: word, // 关键词
                count: 50 // 后台默认返回50条
            }
            this.axios.request({
                url: '/qms/barcode/GetBarcodes', //
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.qrcodelist = res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        search (page, pagesize, toexcel) { // 查询接口
            var start_time = moment(this.dateTime[0]).format('YYYY-MM-DD HH:mm:ss')
            var end_time = moment(this.dateTime[1]).format('YYYY-MM-DD HH:mm:ss')
            var params = {
                page: page,
                pagesize: pagesize,
                stationid: this.base_station,
                duns: this.Supplier,
                barcode: this.qrcode,
                starttime: start_time,
                endtime: end_time,
                toexcel: toexcel
            }
            this.axios.request({
                url: '/qms/barcode/GetBarcodeList', //
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    if (toexcel === 0) {
                        this.mockTableData1(res.data.data)
                        this.total = res.data.total
                        this.page = res.data.page
                    } else {
                        window.location.href = this.axios.publicPath + '' + res.data.data
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        mockTableData1 (tablelist) { // 转换数据，并赋值给列表数据容器tableData1
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    // console.log(item);
                    data.push({
                        id: item.id,
                        barcode: item.barcode,
                        station_name: item.station_name,
                        part_number: item.part_number,
                        duns: item.duns,
                        supplier: item.supplier,
                        create_time: item.create_time,
                        acc_code: item.acc_code,
                        feeding_time: item.feeding_time,
                        quantity: item.quantity,
                        matrix: item.Matrix,
                        heat: item.heat,
                        steel_route: item.Steel_route,
                        produce_time_str: item.produce_time_str
                    })
                }
            })
            this.tableData1 = data
        },
        changePage (value) { // 页码改变
            this.page = value
            this.search(this.page, this.pagesize, 0)
        },
        handlePageSize (value) { // pagesize改变
            this.pagesize = value
            this.search(1, this.pagesize, 0)
        }

    }
}
</script>
<style lang="less" scoped>

</style>
