<template>
    <div>
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>{{$t(100088)}}：</label>
                <Select v-model="productname" clearable class="searchSelect" @on-change="getLine">
                    <!--  -->
                    <Option
                        v-for="item in products"
                        :value="item.id"
                        :key="item.code"
                    >{{ item.name }}({{item.code}})</Option>
                </Select>
            </div>
            <div class="filter">
                <label>{{$t(500006)}}：</label>

                <Select v-model="lineid" clearable class="searchSelect">
                    <Option v-for="item in lines" :value="item.route" :key="item.id">{{ item.text }}</Option>
                </Select>
            </div>
            <!-- <div class="filter">
                <label>{{$t(900337)}}：</label>
                <Select v-model="workOrder" label-in-value clearable class="searchSelect">
                    <Option
                        v-for="item in orderList"
                        :value="item.id"
                        :key="item.id"
                    >{{ item.workorder_code }}</Option>
                </Select>
            </div> -->
            <div class="searchBtn">
                <Button type="primary" class="twoWord"  icon="ios-search" @click="search(1,10)">{{$t('1001')}}</Button>
                <!-- <Button type="success" class="twoWord" icon="md-add-circle" @click="add()">{{$t('1002')}}</Button>
                <Button type="warning" class="twoWord" icon="ios-create-outline" @click="edit()">{{$t('1003')}}</Button>
                <Button type="error" class="twoWord" icon="md-close-circle" @click="del()">{{$t('1004')}}</Button> -->
                <Button type="primary" class="twoWord" icon="ios-search" @click="toTool()">{{$t(8048)}}</Button>
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
             class="tableClass"
                :columns="columns"
                :data="data1"
                @on-current-change="handleRowChange"
                highlight-row
            ></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>
        <Modal class="newModalClass" v-model="addModal" title="添加" :styles="{width:'980px'}">
            <div style="width:940px;padding-right:20px;">
                <div class="flex">
                    <div class="filter">
                        <label>
                           <i >*</i> {{$t(900337)}}：
                        </label>
                        <Input type="text" class="searchInput" v-model="addworkOrder" />
                    </div>
                    <div class="filter">
                        <label>
                           <i>*</i> {{$t(100088)}}：
                        </label>
                        <Select
                            v-model="addproductid"
                            clearable
                            class="searchSelect"
                            @on-change="getTable"
                        >
                            <Option
                                v-for="item in products"
                                :value="item.id"
                                :key="item.code"
                            >{{ item.name }}({{item.code}})</Option>
                        </Select>
                    </div>
                </div>
                <div style="width:100%;height:360px">
                    <div style="width:100px;text-align:right;padding-right:18px;float:left">{{$t(920044)}}</div>
                    <div style="float:left;width:800px">
                        <Table
                            style="height:360px;"
                            height="360"
                            :data="processList"
                            :columns="addColums"
                        ></Table>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="closeadd()">{{$t('1033')}}</Button>
                <Button type="primary" size="large" @click="adddata()">{{$t('1011')}}</Button>
            </div>
        </Modal>
        <Modal class="newModalClass" v-model="editModal" title="修改" :styles="{width:'740px'}">
            <div style="width:700px">
                <div class="filter">
                    <label>
                        <i>*</i>{{$t(900337)}}：
                    </label>
                    <Input type="text" class="searchInput" disabled v-model="order_number" />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>{{$t(100088)}}：
                    </label>
                    <Input type="text" class="searchInput" disabled v-model="productName" />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>{{$t(500006)}}：
                    </label>
                    <Input type="text" class="searchInput" disabled v-model="route" />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>{{$t(1041)}}：
                    </label>
                    <Input type="text" class="searchInput" disabled v-model="machineName" />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>{{$t(500068)}}：
                    </label>
                    <InputNumber :min="0" class="searchInput" v-model="count" />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>{{$t(8049)}}：
                    </label>
                    <DatePicker type="date" class="searchInput" v-model="date" format="yyyy-MM-dd"></DatePicker>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="closeadd()">{{$t('1033')}}</Button>
                <Button type="primary" size="large" @click="editdata()">{{$t('1011')}}</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import moment from 'moment';

export default {
    data () {
        return {
            productname: '',
            products: [],
            lines: [],
            lineid: '',
            user: 0,
            workOrder: '',
            orderList: [],
            index_time: [],
            addModal: false,
            total: 0,
            page: 1,
            pagesize: 10,
            detailobj: {},
            data1: [],
            columns: [
                {
                    title: this.$t('1008'),
                    key: 'order',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: 70,
                    align: 'center'
                },

                {
                    title: this.$t(100088),
                    key: 'product_name',
                    align: 'center'
                },
                {
                    title: this.$t(1041),
                    key: 'machineName',
                    align: 'center',
                    render: (h, params) => {
                      let str = '';
                      str = params.row.machineName +'('+params.row.machineCode+')'
                        return h(
                            'span',
                            str
                        );
                    },
                },
                {
                    title: this.$t(500006),
                    key: 'route',
                    align: 'center'
                },
                {
                    title: this.$t(600042),
                    key: 'cutter_number',
                    align: 'center'
                },
                {
                    title: this.$t(8046),
                    key: 'drawcode',
                    align: 'center'
                },
                {
                    title: this.$t(900630),
                    key: 'tool_code',
                    align: 'center'
                },
                {
                    title: this.$t(500068),
                    key: 'count',
                    align: 'center'
                },
                {
                    title: this.$t(920045),
                    key: 'havetoollist',
                    align: 'center'
                },
                {
                    title: this.$t(950412),
                    key: 'operator_name',
                    align: 'center'
                },
                {
                    title: this.$t(8050),
                    key: 'date',
                    align: 'center'
                },
                {
                    title: this.$t(200054),
                    key: 'status',
                    align: 'center',
                    render: (h, params) => {
                        let bgc = '';
                        if (params.row.order_status == 1) {
                            bgc = '#F59A23';
                        }
                        if (params.row.order_status == 2) {
                            bgc = '#70B603';
                        }
                        if (params.row.order_status == 0) {
                            bgc = '#D9001B';
                        }

                        return h(
                            'div',
                            {
                                style: {
                                    color: '#fff',
                                    backgroundColor: bgc
                                }
                            },

                            params.row.status
                        );
                    }
                },
                {
                    title: this.$t(900337),
                    key: 'order_number',
                    align: 'center'
                },
            ],
            editModal: false,
            addworkOrder: '',
            addproductid: '',
            addpdtName: '',
            processList: [],
            addColums: [
                {
                    title: this.$t('1008'),
                    key: 'order',
                    render: (h, params) => {
                        return h('span', params.index + 1);
                    },
                    width: 70,
                    align: 'center'
                },
                {
                    title: this.$t(500006),
                    key: 'route',
                    align: 'center',
                    width: 100
                },
                {
                    title: this.$t(920045),
                    key: 'toolNum',
                    align: 'center',
                    width: 120
                },
                {
                    title: this.$t(1041),
                    key: 'machineName',
                    align: 'center',
                    width: 120
                },
                {
                    title: this.$t(500068),
                    key: 'quantity',
                    align: 'center',
                    render: (h, params) => {
                        return h('InputNumber', {
                            props: {
                                size: 'small',
                                min: 0,
                                value: params.row.quantity
                            },
                            on: {
                                'on-change': e => {
                                    this.processList[params.index][
                                        params.column.key
                                    ] = e;
                                    // this.updateData(id, val);
                                }
                            }
                        });
                    }
                },
                {
                    title: this.$t(8049),
                    key: 'date',
                    align: 'center',
                    width: 260,
                    render: (h, params) => {
                        return h('DatePicker', {
                            props: {
                                clearable: false,
                                value: params.row[params.column.key],
                                type: 'date',
                                format: 'yyyy-MM-dd',
                                size: 'small'
                            },
                            on: {
                                'on-change': val => {
                                    this.processList[params.index][
                                        params.column.key
                                    ] = val;
                                }
                            }
                        });
                    }
                }
            ],
            order_number: '',
            productName: '',
            route: '',
            machineName: '',
            count: 0,
            date: ''
        };
    },
    created () {
        this.getMtList();
        // this.getUserList();
        this.getOrderList();
        this.search(1, 10);
        // 格式化表格样式
        this.columns = this.$time.initTableTitle(this.columns)
    },
    methods: {
        getMtList () {
            var data = {
                name: '', // 供应商id
                count: 50 // 显示数量
            };
            this.request(
                '/config/ProjectProduct/GetProductsByCode',
                data,
                'get'
            ).then(res => {
                // console.log(res.data);
                // if (res.data.ret == 1) {
                // this.codeList = res.data.data;
                // console.log(res.data.data);
                this.products = res.data.data;
                // }
            });
        },
        inilines () {
            this.request(
                '/tlm/Technology/GetRoutes?productid=' + this.productname,
                '',
                'get'
            ).then(res => {
                if (res.data.ret == 1) {
                    this.lines = res.data.data;
                }
                //   this.prelines = res.data.data;
            });
        },
        getLine (value) {
            this.productname = value;
            this.inilines();
        },
        getTable (value) {
            if (value) {
                this.addproductid = value;
                let data = {
                    productid: this.addproductid
                };
                this.request(
                    '/tlm/ToolWorkorder/GetTechList',
                    data,
                    'get'
                ).then(res => {
                    //   console.log(res.data);
                    if (res.data.ret == 1) {
                        let arr = res.data.data;

                        this.renderModalTable(arr);
                    }
                });
            } else {
                this.processList = [];
            }
        },
        renderModalTable (arr) {
            let data = [];
            arr.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        machineName: item.machineType_name,
                        route: item.route,
                        toolNum: item.havetoollist,
                        quantity: 0,
                        date: ''
                    });
                }
            });
            this.processList = data;
        },
        getOrderList () {
            this.request('/tlm/ToolWorkorder/GetWorkOrderList', '', 'get').then(
                res => {
                    if (res.data.ret == 1) {
                        this.orderList = res.data.data;
                    }
                }
            );
        },
        search (page, pagesize) {
            var data = {
                order_number: this.workOrder,
                product_id: this.productname,
                route: this.lineid,
                page: page,
                pagesize: pagesize
            };
            this.request('/tlm/ToolWorkorder/GetPagedList', data, 'post').then(
                res => {
                    this.total = res.data.total;
                    this.renderTable(res.data.data);
                }
            );
        },
        renderTable (arr) {
            let data = [];
            arr.forEach(item => {
                if (item) {
                    let status = '';
                    if (item.order_status == 1) {
                        status = this.$t(8051);
                        bgc = '#F59A23';
                    }
                    if (item.order_status == 2) {
                        status = this.$t(8052);
                    }
                    if (item.order_status == 0) {
                        status = this.$t(8053);
                    }
                    data.push({
                        count: item.count,
                        create_name: item.create_name,
                        date: item.date,
                        drawcode: item.drawcode,
                        havetoollist: item.havetoollist == 0 ? this.$t(8054) : this.$t(8055),
                        id: item.id,
                        machineName: item.machineType_name,
                        machine_type: item.machine_type,
                        operator_name: item.operator_name,
                        order_number: item.order_number,
                        order_status: item.order_status,
                        status: status,
                        product_id: item.product_id,
                        product_name: item.product_name,
                        route: item.route,
                        route_id: item.route_id,
                        technology_id: item.technology_id,
                        cutter_number: item.cutter_number,
                        tool_code: item.tool_code,
                        machineCode:item.machineCode
                    });
                }
            });
            this.data1 = data;
        },
        add () {
            this.addworkOrder = '';
            this.addproductid = '';
            this.addpdtName = '';
            // this.getTable('');
            this.processList = [];
            this.addModal = true;
        },
        adddata () {
            if (this.addworkOrder == '' || this.addproductid == '') {
                this.$Message.error(this.$t(9000136));
                return false;
            }
            let arr = [];

            this.processList.forEach(ele => {
                let obj = {};
                if (ele.quantity > 0 && ele.date != '') {
                    obj.count = ele.quantity;
                    obj.date = ele.date;
                    obj.technology_id = ele.id;
                    obj.order_number = this.addworkOrder;
                    arr.push(obj);
                }
            });

            if (arr.length == 0) {
                this.$Message.error(this.$t(8056));
                return false;
            }

            let data = {
                product_id: this.addproductid,
                workorders: arr
            };
            //   console.log(data);
            // return false;
            this.request('/tlm/ToolWorkorder/AddRange', data, 'post').then(
                res => {
                    if (res.data.ret == 1) {
                        this.$Message.success(this.$t(1055));
                        this.addModal = false;
                        this.search(1, 10);
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                }
            );
        },
        edit () {
            if (this.detailobj.id) {
                if (this.detailobj.order_status != 0) {
                    this.$Message.error(this.$t(8058));
                    return false;
                }
                this.order_number = this.detailobj.order_number;
                this.productName = this.detailobj.product_name;
                this.route = this.detailobj.route;
                this.machineName = this.detailobj.machineName;
                this.count = this.detailobj.count;
                this.date = this.detailobj.date;
                this.editModal = true;
            } else {
                this.$Message.error(this.$t(9000396));
            }
        },
        editdata () {
            var data = {
                id: this.detailobj.id,
                count: this.count,
                date: this.date
            };
            this.request('/tlm/ToolWorkorder/Edit', data, 'post').then(res => {
                if (res.data.ret == 1) {
                    this.$Message.success(this.$t(1060));
                    this.detailobj = {};

                    this.editModal = false;
                    this.search(1, 10);
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            });
        },
        del () {
            if (
                this.detailobj == undefined ||
                this.detailobj.id == undefined ||
                this.detailobj.id == 0
            ) {
                this.$Message.error(this.$t('1017'));
                return false;
            } else {
                if (this.detailobj.order_status != 0) {
                    this.$Message.error(this.$t(8059));
                    return false;
                }
                this.$Modal.confirm({
                    title: this.$t('1018'),
                    content: '',
                    width: '290px',
                    closable: true,
                    okText: this.$t('1004'),
                    onOk: () => {
                        let id = this.detailobj.id;
                        this.request(
                            '/tlm/ToolWorkorder/Delete?id=' + id,
                            '',
                            'post'
                        ).then(res => {
                            if (res.data.ret === 1) {
                                this.$Message.success(this.$t('1058'));
                                this.detailobj = {};
                                this.search(1, 10);
                            } else {
                                this.$Message.error(this.$t(res.data.msg));
                            }
                        });
                    }
                });
            }
        },
        toTool () {
            if (this.detailobj.id) {
                if (this.detailobj.havetoollist == this.$t(8055)) {
                    this.$router.push({
                        path: './tool_select',
                        query: {
                            productId: this.detailobj.product_id,
                            route: this.detailobj.route_id,
                            order_number: this.detailobj.order_number,
                            machine_type: this.detailobj.machine_type,
                            tool_code: this.detailobj.tool_code,
                            id:this.detailobj.id
                        }
                    });
                } else {
                    this.$Message.error(this.$t(8060));
                }
            } else {
                this.$Message.error(this.$t(8061));
            }
        },
        closeadd () {
            this.addModal = false;
            this.editModal = false;
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.data1 = this.search(this.page, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            this.data1 = this.search(this.page, this.pagesize);
        },
        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 lang="less" scoped>
</style>
