<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>
                    <span>{{$t(8047)}}</span>：
                </label>
                <Select v-model="name" label-in-value clearable filterable class="searchSelect">
                    <Option v-for="item in materials" :value="item.pn" :key="item.id">{{item.pn}}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>
                    <span>{{$t(600036)}}</span>：
                </label>
                <Input class="searchInput" type="text" v-model="tool_name" clearable />
            </div>
            <div class="filter">
                <label>
                    <span>{{$t(600011)}}</span>：
                </label>
                <Select v-model="supplier" label-in-value clearable filterable class="searchSelect">
                    <Option
                        v-for="(item,index) in supplierList"
                        :value="item.text"
                        :key="index"
                    >{{item.text}}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>
                    <span>{{$t(900908)}}</span>：
                </label>
                <DatePicker
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm:ss"
                    v-model="index_time"
                    @on-change="getTime"
                    class="searchInput MaxWidth"
                ></DatePicker>
            </div>
            <div class="searchBtn">
                <Button
                    type="primary"
                    class="twoWord"
                    icon="ios-search"
                    @click="search()"
                >{{$t('1001')}}</Button>
                <Button
                    type="primary"
                    class="fourWord"
                    icon="ios-cloud-download"
                    @click="Export()"
                >{{$t('1007')}}</Button>
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
                class="tableClass"
                highlight-row
                :data="tableData"
                :columns="tableColumns"
            ></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>
    </div>
</template>

<script>
import moment from 'moment';
import axios from '@/libs/api.request';

export default {
    data () {
        return {
            name: '',
            materials: [],
            tool_name: '',
            supplier: '',
            supplierList: [],
            page: 1,
            pagesize: 10,
            total: 0,
            tableData: [],
            tableColumns: [
                {
                    type: 'index2',
                    title: this.$t(1008),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    }
                },
                {
                    title: '刀具名称',
                    key: 'name'
                },
                {
                    title: '料号',
                    key: 'material'
                },
                {
                    title: '供应商',
                    key: 'supplier'
                },
                {
                    title: '使用位置',
                    key: 'location'
                },
                {
                    title: '平均加工数量',
                    key: 'processCount'
                },
                {
                    title: '断刀率(%)',
                    key: 'broken'
                },
                {
                    title: '崩刀率(%)',
                    key: 'damage'
                },
                {
                    title: '磨损率(%)',
                    key: 'collapse'
                }
            ],
            index_time: []
        };
    },
    created () {
        this.getSupplers();
        this.getMaterial();
        this.index_time = [
            moment(new Date().getTime() - 3600 * 24 * 1000 * 7).format(
                'yyyy-MM-DD '
            ) + '00:00:00',
            moment(new Date().getTime()).format('yyyy-MM-DD ') + '23:59:59'
        ];
        this.search();
    },
    methods: {
        search () {
            let starttime = '',
                endtime = '';
            starttime = this.index_time[0] ? this.index_time[0] : '';
            endtime = this.index_time[1] ? this.index_time[1] : '';

            var data = {
                MaterialCode: this.name,
                ToolName: this.tool_name,
                Begin: starttime,
                End: endtime,
                Supplier: this.supplier,
                page: this.page,
                pagesize: this.pagesize
            };
            this.request(
                '/tlm/ToolInstall/GetToolProcessData',
                data,
                'post'
            ).then((res) => {
                // console.log(res.data);
                if (res.data.ret == 1) {
                    this.total = res.data.total;
                    this.tableData = res.data.data;
                }
            });
        },
        getSupplers () {
            this.request('/tlm/ToolCabinet/GetSuppliers', '', 'get').then(
                (res) => {
                    if (res.data.ret == 1) {
                        this.supplierList = res.data.data;
                    }
                }
            );
        },
        getMaterial () {
            let data = {
                pn: '',
                name: '',
                count: 50
            };
            this.request('/config/Material/GetMaterialData', data, 'get').then(
                (res) => {
                    if (res.data.ret == 1) {
                        this.materials = res.data.data;
                    }
                }
            );
        },
        getTime (val) {
            this.index_time = val;
        },
        Export () {
            let starttime = '',
                endtime = '';
            starttime = this.index_time[0] ? this.index_time[0] : '';
            endtime = this.index_time[1] ? this.index_time[1] : '';

            var data = {
                MaterialCode: this.name,
                ToolName: this.tool_name,
                Begin: starttime,
                End: endtime,
                Supplier: this.supplier,
                page: this.page,
                pagesize: this.pagesize
            };
            this.request(
                '/tlm/ToolInstall/ExportToolProcessData',
                data,
                'post'
            ).then((res) => {
                if (res.data.ret === 1) {
                    window.location.href =
                        axios.publicPath + '' + res.data.data;
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.search();
        },
        changePage (value) {
            this.page = value;
            this.search();
        },
        request (url, data, type) {
            if (type == 'get') {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            }
        }
    }
};
</script>

<style>
</style>
