<template>
    <div class="testdiv">
        <!-- 查询条件 -->
        <div class="divborder newSearchDiv" style="margin:0px;">
            <div class="filter">
                <label>{{$t('100088')}}：</label>
                <Input class="searchInput" type="text" v-model="productName" />
            </div>
            <div class="filter">
                <label>{{$t('100090')}}：</label>
                <Input class="searchInput" type="text" v-model="drawingNo" />
            </div>
            <div class="filter">
                <label>{{$t('900337')}}：</label>
                <Input class="searchInput" type="text" v-model="productionOrderNo" />
            </div>
            <div class="filter">
                <label>{{$t('99200041')}}：</label>
                <Input class="searchInput" type="text" v-model="workOrderNo" />
            </div>
            <!-- 次级搜索条件--隐藏 -->
            <div v-show="!morecondition">
                <div class="filter">
                  <label>{{$t('200002')}}：</label>
                  <Select class="searchSelect" v-model="status" clearable >
                      <Option value>{{$t('1014')}}</Option>
                      <Option value="0">{{$t('900938')}}</Option>
                      <Option value="1">{{$t('900937')}}</Option>
                      <Option value="2">{{$t('500096')}}</Option>
                      <Option value="3">{{$t('900936')}}</Option>
                      <Option value="4">{{$t('900935')}}</Option>
                  </Select>
              </div>
                <div class="filter">
                  <label>{{$t('500030')}}：</label>
                  <DatePicker
                      class="searchInput middleWidth"
                      type="daterange"
                      :value="dateTime"
                      @on-change="selectdate"
                  ></DatePicker>
              </div>
            </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('950371')}}</Button>
                <Button type="warning" class="twoWord intervalRight" icon="md-close-circle" @click="end()">{{$t('900948')}}</Button>
                <Button type="primary" class="fourWord" icon="md-download" @click="progress()">{{$t('5500096')}}</Button>
                <Button type="primary" class="fourWord" icon="ios-print" @click="print()">{{$t('900949')}}</Button>
                <!-- <Button type="primary" class="fourWord intervalRight" icon="ios-create-outline" @click="change()">{{$t('5500097')}}</Button> -->
            </div>
            <!-- 更多条件 按钮组件 -->
            <MoreConbtn @getCon="morecondition = !morecondition" :morecondition="morecondition"></MoreConbtn>
            </div>
            <div class="divborder newTableDiv">
                <Table
                    class="tableClass"
                    @on-current-change="handleRowChange"
                    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>
        <!-- <Modal
            class="newModalClass"
            :title="$t('100075')"
            v-model="addmodal"
            :styles="{width:'1100px'}"
        >
            <div class="modal_body" style="padding-right:40px">
                <div class="modaltop">
                    <div>订单数量：{{detailobj.quantity}}</div>
                    <div style="margin-left:10px">已排产数量：{{detailobj.has_schedule}}</div>
                    <div class="filter">
                        <label>本次排产数量：</label>
                        <Input class="searchInput" class="searchInput" type="number" min="0" v-model="currentNum" />
                    </div>
                    <div class="filter">
                        <label>批次数：</label>
                        <Input class="searchInput" class="searchInput" type="number" min="0" v-model="batchNum" />
                    </div>
                    <Button type="primary" @click="addBatch()">{{$t('1011')}}</Button>
                    <Checkbox v-model="rest" style="width:100px!important;margin-left:10px">排除休息时间</Checkbox>
                    <Button type="primary" @click="exclude()">一键排程</Button>
                </div>
                <div class="modaltop">
                    <div style="width:25%">产品编号(料号)：{{detailobj.product_code}}</div>
                    <div style="width:25%">产品名称：{{detailobj.product_name}}</div>
                    <div style="width:25%">图纸号：{{detailobj.draw_number}}</div>
                    <div style="width:25%">交付时间：{{detailobj.delivery_time_str}}</div>
                </div>
                <div>
                    <Table
                        style="margin-top:10px"
                        :data="addTable1"
                        :columns="addColumn1"
                        height="150"
                    ></Table>
                    <Table
                        style="margin-top:10px;overflow:visible"
                        :data="addTable2"
                        :columns="addColumn2"
                        height="200"
                    ></Table>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="addmodal=false" v-text="$t('1033')">取消</Button>
                <Button type="primary" size="large" @click="adddata" v-text="$t('1011')">确定</Button>
            </div>
        </Modal>-->
        <Modal class="newModalClass" v-model="printmodal" :styles="{width:'1000px'}">
            <div class="modal_body" style="min-width:900px;border:0;padding-right:40px">
                <div v-show="type==0">
                    <div class="row" style="padding:10px 10px;margin-left:15px;">
                        <!-- 生产计划id -->
                        <div class="div_span1" style="margin-left:40px;">
                            <label>生产令号：</label>
                            <span class="rowone1">{{detailobj.code}}</span>
                            <span id="codenumber" style="display: none;"></span>
                        </div>
                        <div class="div_span1">
                            <label>产品名称：</label>
                            <span class="rowone2">{{detailobj.product_name}}</span>
                        </div>
                        <div class="div_span1">
                            <label>交付时间：</label>
                            <span class="rowone3">{{detailobj.delivery_time_str}}</span>
                        </div>
                        <div class="div_span1">
                            <label>订单数量：</label>
                            <span class="rowone4">{{detailobj.quantity}}</span>
                        </div>
                    </div>
                    <hr style="margin:10px;font-weight:10px;" />
                    <div style="">
                        <div class="filter">
                            <label>派工工序：</label>
                            <Select
                                class="searchSelect"
                                v-model="process"
                                @on-change="getRouteNumber"
                            >
                                <!-- <Option v-for="item in list1">请选择</Option> -->
                                <Option
                                    v-for="item in processArr"
                                    :value="item.id"
                                    :key="item.id"
                                >{{ item.name }}</Option>
                            </Select>
                        </div>
                        <div class="filter">
                            <label>未派工数量：</label>
                            <InputNumber class="searchInput" :min="0" type="number" v-model="notNum" disabled />
                        </div>
                        <div class="filter">
                            <label>派工数量：</label>
                            <InputNumber class="searchInput" :min="0" type="number" v-model="hasNum" />
                        </div>
                    </div>
                    <div style="">
                        <div class="filter">
                            <label>班组：</label>
                            <Select
                                class="searchSelect"
                                v-model="group"
                                @on-change="getUsername"
                                label-in-value
                            >
                                <Option
                                    v-for="item in groupArr"
                                    :value="item.id"
                                    :key="item.id"
                                >{{ item.name }}</Option>
                            </Select>
                        </div>
                        <div class="filter">
                            <label>操作者：</label>
                            <Select
                                class="searchSelect"
                                v-model="operator"
                                label-in-value
                                @on-change="getName"
                            >
                                <Option
                                    v-for="item in operatorArr"
                                    :value="item.id"
                                    :key="item.id"
                                >{{ item.name }}</Option>
                            </Select>
                        </div>
                        <div class="filter">
                            <label>派工工位：</label>
                            <Select
                                class="searchSelect"
                                v-model="station"
                                label-in-value
                                @on-change="getMachineName"
                            >
                                <OptionGroup
                                    v-for="item in stationArr"
                                    :key="item.id"
                                    :label="item.title"
                                >
                                    <Option
                                        v-for="item in item.children"
                                        :value="item.id"
                                        :key="item.id"
                                    >{{ item.title }}</Option>
                                </OptionGroup>
                            </Select>
                        </div>
                    </div>
                    <div style="">
                        <div class="filter">
                            <label>额定工时：</label>
                            <InputNumber
                                class="searchInput"
                                type="number"
                                v-model="limitTime"
                                :min="0"
                            />
                        </div>
                        <div class="filter">
                            <label>准终工时：</label>
                            <InputNumber
                                class="searchInput"
                                type="number"
                                v-model="stopTime"
                                :min="0"
                            />
                        </div>
                        <div class="filter">
                            <label>备注：</label>
                            <Input class="searchInput" v-model="remark" />
                        </div>
                        <Button type="primary" size="large" @click="addBill" v-text="$t('1011')">确定</Button>
                    </div>
                    <hr style="margin:0px;font-weight:10px;" />
                </div>
                <div v-show="type==1">
                    <div class="filter">
                        <label>派工工序：</label>
                        <Select class="searchSelect" v-model="route" label-in-value>
                            <!-- <Option v-for="item in list1">请选择</Option> -->
                            <Option
                                v-for="item in orderArr"
                                :value="item.planDetailId"
                                :key="item.planDetailId"
                            >{{ item.route_name}} ({{item.order_number}})</Option>
                        </Select>
                    </div>
                    <Button
                        type="primary"
                        size="large"
                        @click="getPrintDetail"
                        v-text="$t('1011')"
                    >确定</Button>
                </div>
                <div style="padding:0px 15px;height:460px" id="print" ref="printhtml">
                    <div class="panel panel-default" style="border:0;">
                        <div
                            class="panel-body div_print"
                            style="position:relative;width:100%;padding:0px;"
                        >
                            <div
                                style="width:15%;height:460px;float:left;padding:5px;margin-left:5px;font-size: 13px;"
                            >
                                <h4 style="text-align:center;margin:50px 0px;">副票</h4>
                                <div>日期：</div>
                                <div>
                                    <table
                                        class="table modle_table_one modle_table"
                                        style="margin-bottom:0px;border-collapse: collapse;text-align:center"
                                    >
                                        <tr>
                                            <td class="td_one" style="padding:3px 1px;">完成数量</td>
                                            <td style="padding:3px 8px;border:1px solid black;"></td>
                                        </tr>
                                        <tr>
                                            <td class="td_one" style="padding:3px 1px;">实动工时</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="td_one" style="padding:3px 1px;">完成工时</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="td_one" style="padding:3px 1px;">超差工时</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td class="td_one" style="padding:45px 1px;">备注</td>
                                            <td></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div
                                style="width:1px;height:440px;border-left:1px solid black;float:left;margin-top:20px;font-size: 13px;"
                            ></div>
                            <div style="width:84%;height:460px;float:left;padding:0 20px">
                                <h4
                                    style="font-size:30px;text-align:center;font-weight:500;margin-top:20px;margin-bottom:20px;"
                                >电子工作票</h4>
                                <div class="row" id="div_span_row">
                                    <div class="div_span3">
                                        <span>派工日期</span>：
                                        <span
                                            class="div_span3_1"
                                            style="display:inline-block;width:75px;"
                                        >{{billobj.date}}</span>
                                    </div>
                                    <div class="div_span3">
                                        <span>班组</span>：
                                        <span
                                            class="div_span3_2"
                                            style="display:inline-block;width:55px;"
                                        >{{billobj.workgroup}}</span>
                                    </div>
                                    <div class="div_span3">
                                        <span>操作者</span>：
                                        <span
                                            class="div_span3_3"
                                            style="display:inline-block;width:55px;"
                                        >{{billobj.operator_name}}</span>
                                    </div>
                                    <div class="div_span3">
                                        <span>派工工位</span>：
                                        <span
                                            class="div_span3_4"
                                            style="display:inline-block;width:55px;"
                                        >{{billobj.machine_name}}</span>
                                    </div>
                                    <div class="div_span3">
                                        <span>工令单号</span>：
                                        <div
                                            id="qrcode"
                                            style="display:inline-block;/*vertical-align: -15px;*/"
                                        ></div>
                                    </div>
                                </div>
                                <div style="padding:5px;margin：0 auto">
                                    <table
                                        class="table modle_table_two modle_table"
                                        style="margin-bottom:0px;border-collapse: collapse;text-align:center"
                                    >
                                        <tr style="background-color:#ddd;">
                                            <td style="min-width:70px;" colspan="2">生产令号</td>
                                            <td style="min-width:70px;">零件图号</td>
                                            <td style="min-width:70px;">零件名称</td>
                                            <td style="width:60px;">派工数量</td>
                                            <td style="width:90px;">工序</td>
                                            <td style="width:60px;">单件额定</td>
                                            <td style="width:40px;">准终</td>
                                            <td style="width:70px;">增减工时定额员章</td>
                                            <td style="width:60px;">派工人员</td>
                                        </tr>
                                        <tr class="tr_chose">
                                            <!-- <td colspan="2"></td> -->
                                            <td colspan="2">{{billobj.code}}</td>
                                            <td>{{billobj.draw_code}}</td>
                                            <td>{{billobj.product_name}}</td>
                                            <td>{{billobj.quantity}}</td>
                                            <td>{{billobj.route_name}}</td>
                                            <td>{{billobj.working_hours}}</td>
                                            <td>{{billobj.prepare}}</td>
                                            <td></td>
                                            <td>{{billobj.creator_name}}</td>
                                        </tr>
                                        <tr style="background-color:#ddd;">
                                            <td colspan="2">班次</td>
                                            <td>开工时间</td>
                                            <td>终止时间</td>
                                            <td>完成数量</td>
                                            <td>实动数量</td>
                                            <td>完成定额工时</td>
                                            <td>超差工时</td>
                                            <td colspan="2">备注</td>
                                        </tr>
                                        <tr>
                                            <td colspan="2"></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td colspan="2" rowspan="3">
                                                <span
                                                    class="lblremark1"
                                                    style="display:inline-block;display:inline-block;width: 127px;height: 100%;word-wrap: break-word;white-space: pre-wrap;text-align: left;"
                                                ></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2"></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td colspan="2"></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td
                                                rowspan="3"
                                                style="width:25px;vertical-align: middle;"
                                            >检验结果</td>
                                            <td>项目</td>
                                            <td>合格数</td>
                                            <td>回用数</td>
                                            <td>废品数</td>
                                            <td>尺寸合格率%</td>
                                            <td>自控率%</td>
                                            <td>CP</td>
                                            <td colspan="2">检验员章</td>
                                        </tr>
                                        <tr>
                                            <td>自检</td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td colspan="2"></td>
                                        </tr>
                                        <tr>
                                            <td>复核</td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td colspan="2"></td>
                                        </tr>
                                    </table>
                                    <div style="text-align:right;margin-top:5px;">记录表式编号：ZTG001</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" @click="printmodal=false" v-text="$t('1028')">关闭</Button>
                <Button
                    type="primary"
                    v-show="type==0 && printornot==1"
                    size="large"
                    @click="addPost()"
                    :loading="btnLoading"
                >
                  <span v-if="!btnLoading">保存并打印</span>
                  <span v-else>Loading...</span>
                </Button>
                <Button
                    type="primary"
                    v-show="type==0 && printornot==2"
                    size="large"
                    v-print="printObj"
                    @click="addPost()"
                    :loading="btnLoading"
                >
                  <span v-if="!btnLoading">保存并打印</span>
                  <span v-else>Loading...</span>
                </Button>
                <Button
                    type="primary"
                    v-show="type==0"
                    size="large"
                    v-text="$t('900306')"
                    @click="addPost()"
                    :loading="btnLoading"
                >
                  <span v-if="!btnLoading">保存</span>
                  <span v-else>Loading...</span>
                </Button>
                <Button type="primary" v-show="type==1" size="large" v-print="printObj">打印</Button>
            </div>
        </Modal>
        <Modal v-model="lookModal" :styles="{width:'900px'}">
            <div slot="header">
                <div class="row">
                    <!-- 生产计划id -->
                    <div class="div_span1" style="margin-left:40px;">
                        <label>工单号：</label>
                        <span class="rowone1">{{detailobj.code}}</span>
                        <span id="codenumber" style="display: none;"></span>
                    </div>
                    <div class="div_span1">
                        <label>产品名称：</label>
                        <span class="rowone2">{{detailobj.product_name}}</span>
                    </div>
                    <div class="div_span1">
                        <label>交付时间：</label>
                        <span class="rowone3">{{detailobj.delivery_time_str}}</span>
                    </div>
                    <div class="div_span1">
                        <label>订单数量：</label>
                        <span class="rowone4">{{detailobj.quantity}}</span>
                    </div>
                </div>
            </div>
            <div class="modal_body">
                <div>
                    <Table
                        style="margin-top:10px"
                        :data="addTable1"
                        :columns="addColumn1"
                        height="150"
                    ></Table>
                </div>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" @click="lookModal=false" v-text="$t('1028')">取消</Button>
            </div>
        </Modal>
        <!-- 终止 -->
        <Modal v-model="endmodal" :styles="{width:'900px'}">
            <div class="modal_body">
              <div class="row">
                    <!-- 生产计划id -->
                    <div class="div_span1" style="margin-left:40px;">
                        <label>工令号：</label>
                        <span class="rowone1">{{detailobj.code}}</span>
                        <span id="codenumber" style="display: none;"></span>
                    </div>
                </div>
                <div>
                    <Table
                        style="margin-top:10px"
                        :data="endata1"
                        :columns="columns1"
                        min-height="500"
                        @on-selection-change="handleSelect"
                    ></Table>
                </div>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" @click="endmodal=false" v-text="$t('1028')">取消</Button>
                <Button type="primary" size="large" @click="endPost" v-text="$t('900948')">终止</Button>
            </div>
        </Modal>
        <Modal class="newModalClass" title="订单变更" v-model="changemodal" :styles="{width:'400px'}">
            <div class="modal_body">
                <div class="filter">
                    <label>产品名称：</label>
                    <span class="rowone2">{{detailobj.product_name}}</span>
                </div>
                <br/>
                <div class="filter">
                    <label>原始生产令号：</label>
                    <span class="rowone1">{{detailobj.code}}</span>
                    <span id="codenumber" style="display: none;"></span>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>新生产令号：
                    </label>
                    <Input class="searchInput" v-model="newcode" />
                </div>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" @click="changemodal=false" v-text="$t('1028')">取消</Button>
                <Button type="primary" size="large" @click="changePost">确认变更</Button>
            </div>
        </Modal>
    </div>
</template>

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

export default {
    data () {
        return {
            printObj: {
                id: '#print',
                popTitle: '',
                extraCss: '',
                extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
            },
            btnLoading: false,
            printornot: 1,
            morecondition: false,
            productName: '',
            drawingNo: '',
            productionOrderNo: '', // 生产令号
            workOrderNo: '', // 工单号
            status: '', // 排期
            status1: '', // 是否逾期
            startTime: '', // 开始时间
            endTime: '', // 结束时间
            dateTime: '', // 时间范围
            total: 0, // 总信息数
            page: 1,
            pagesize: 10,
            tableData: [], // 表格数据
            tableColumns: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: '60px'
                },

                {
                    title: this.$t('100088'),
                    key: 'product_name',
                    width: '120px',
                    align: 'center'
                },
                {
                    title: this.$t('100089'),
                    key: 'product_code',
                    width: '120px'
                },
                {
                    title: this.$t('100090'),
                    key: 'draw_number',
                    width: '120px',
                    align: 'center'
                },
                {
                    title: this.$t('100091'),
                    key: 'product_remark',
                    width: '120px',
                    align: 'center'
                },
                {
                    title: this.$t('900337'),
                    key: 'code',
                    align: 'center'
                },
                {
                    title: this.$t('500099'),
                    key: 'quantity',
                    align: 'center'
                },
                {
                    title: this.$t('950190'),
                    key: 'has_schedule',
                    align: 'center'
                },
                {
                    title: this.$t('500100'),
                    key: 'delivery_time_str',
                    align: 'center'
                },
                {
                    title: this.$t('900925'),
                    key: 'leaveDays',
                    align: 'center'
                },
                {
                    title: this.$t('200002'),
                    key: 'status',
                    align: 'center',
                    render: (h, params) => {
                        var status = '',
                            bg = '';
                        if (params.row.status === 0) {
                            status = '未排产';
                            bg = '#f0ad4e';
                        } else if (params.row.status === 1) {
                            status = '已排产';
                            bg = '#f0ad4e';
                        } else if (params.row.status === 2) {
                            status = '生产中';
                            bg = 'green';
                        } else if (params.row.status === 3) {
                            status = '已完工';
                            bg = 'blue';
                        } else if (params.row.status === 4) {
                            status = '已终止';
                            bg = 'blue';
                        } else {
                            status = '逾期';
                            bg = 'blue';
                        }
                        return h(
                            'div',
                            {
                                class: '',
                                style: {
                                    backgroundColor: bg,
                                    color: '#fff',
                                    width: '100%',
                                    height: '36px',
                                    lineHeight: '36px',
                                    textAlign: 'center'
                                }
                            },
                            status
                        );
                    }
                },
                {
                    title: this.$t('900950'),
                    key: 'plan_start',
                    align: 'center',
                    render: (h, params) => {
                        let str = '';
                        str = params.row.plan_start == 0 ? '' : moment(params.row.plan_start * 1000).format('YYYY-MM-DD');
                        return h('div', str);
                    }
                },

                {
                    title: this.$t('900951'),
                    key: 'plan_end',
                    align: 'center',
                    render: (h, params) => {
                        let str = '';
                        str = params.row.plan_end == 0 ? '' : moment(params.row.plan_end * 1000).format('YYYY-MM-DD');
                        return h('div', str);
                    }
                },
                {
                    title: this.$t('900952'),
                    key: 'finish_time',
                    align: 'center',
                    render: (h, params) => {
                        let str = '';
                        str = params.row.finish_time == 0 ? '' : moment(params.row.finish_time * 1000).format('YYYY-MM-DD');
                        return h('div', str);
                    }
                },
                {
                    title: 'OK产量',
                    key: 'ok_number',
                    align: 'center'
                },
                {
                    title: 'NOK产量',
                    key: 'nok_number',
                    align: 'center'
                },
                {
                    title: this.$t('1950514'),
                    align: 'center',
                    key: 'batch'
                },
                {
                    title: this.$t('500103'),
                    align: 'center',
                    key: 'number'
                }
            ],
            detailobj: {},

            lookModal: false,
            addTable1: [],
            addTable2: [],
            addColumn1: [
                {
                    type: 'index2',
                    title: '工序顺序',
                    key: 'serialNumber',
                    // render: (h, params) => {
                    //     return h(
                    //         "span",
                    //         params.index + (this.page - 1) * this.pagesize + 1
                    //     );
                    // },
                    width: '60px'
                },
                {
                    title: this.$t('900967'),
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '工序说明',
                    key: 'description'
                },
                {
                    title: '计划数量',
                    key: 'plan_count',
                    align: 'center'
                },
                {
                    title: '已派工数量',
                    key: 'job_count',
                    align: 'center'
                },
                {
                    title: '已完工数量',
                    key: 'finish_count',
                    align: 'center'
                },
                {
                    title: '未完工数量',
                    key: 'unjob_count',
                    align: 'center'
                },
                {
                    title: '状态',
                    key: 'state',
                    align: 'center',
                    render: (h, params) => {
                        var state = '',
                            bg = '';
                        if (params.row.state === 0) {
                            state = '未排产';
                        } else if (params.row.state === 1) {
                            state = '已排产';
                            bg = '#f0ad4e';
                        } else if (params.row.state === 2) {
                            state = '生产中';
                            bg = 'green';
                        } else if (params.row.state === 3) {
                            state = '已完工';
                            bg = 'blue';
                        } else {
                            state = '已终止';
                            bg = 'blue';
                        }
                        return h(
                            'div',
                            {
                                style: {
                                    backgroundColor: bg,
                                    color: '#fff',
                                    width: '100%',
                                    height: '36px',
                                    lineHeight: '36px',
                                    textAlign: 'center'
                                }
                            },
                            state
                        );
                    }
                }
            ],
            printmodal: false,
            selection: [],
            notNum: 0,
            hasNum: 0,
            process: '',
            processArr: [],
            group: '',
            groupArr: [],
            operator: '',
            operatorArr: [],
            station: '',
            stationArr: [],
            limitTime: 0,
            stopTime: 0,
            remark: '',
            processName: '',
            billobj: {}, // 电子票数据
            type: 0,
            orderArr: [],
            route: '',
            newcode: '',
            changemodal: false,
            endmodal: false,
            columns1: [
                {
                    type: 'selection',
                    width: 80,
                    align: 'center'
                },
                {
                    title: this.$t('100088'),
                    key: 'product_name',
                    align: 'center'
                },
                {
                    title: this.$t('900967'),
                    key: 'route_name'
                },
                {
                    title: this.$t('900979'),
                    key: 'number',
                    align: 'center'
                },
                {
                    title: '派工时间',
                    key: 'time',
                    align: 'center'
                }
            ],
            endata1: [],
            addcheck: false
        };
    },
    created () {
        this.inittime();
        this.search(1, 10);
        this.tableColumns = this.$time.initTableTitle(this.tableColumns);
    },
    methods: {
        inittime () {
            // 时间赋值
            var date = new Date();
            var start = this.$time.timestampToTime(
                date.getTime() - 3600 * 1000 * 24 * 6
            );
            var end = this.$time.timestampToTime(
                date.getTime()
            );
            // this.dateTime = [start, end];
        },
        selectdate (e) {
            this.dateTime = [e[0], e[1]];
        },
        search () {
            var params = {
                page: this.page,
                pagesize: this.pagesize,
                product_name: this.productName,
                draw_number: this.drawingNo,
                code: this.productionOrderNo,
                ordernumber: this.workOrderNo,
                status: this.status,
                // isdelay: this.status1,
                startTime: this.dateTime != '' ? this.dateTime[0] : '',
                endTime: this.dateTime != '' ? this.dateTime[1] : ''
            };
            axios
                .request({
                    url: '/cnc/ProductJob/GetPlanListForJob',
                    params,
                    methods: 'get'
                })
                .then((res) => {
                    this.total = res.data.total;
                    let arr = [];
                    arr = res.data.data;
                    arr.forEach((item) => {
                        if (item) {
                            if (parseInt(item.quantity) <= 0) {
                                item.number = 0 + '%';
                            } else {
                                item.number =
                                    Math.round(
                                        (item.ok_number / item.quantity) * 100
                                    ) + '%';
                            }
                        }
                    });
                    this.tableData = arr;
                });
        },
        add () {
            if (!this.detailobj.id) {
                this.$Message.error(this.$t(9000396));
                return false;
            }
            this.process = '';
            this.hasNum = 0;
            this.notNum = 0;
            this.group = '';
            this.operator = '';
            this.station = '';
            this.limitTime = 0;
            this.stopTime = 0;
            this.remark = '';
            this.billobj = {};
            this.getRoute();
            this.getGroups();
            this.getMachines();
            document.getElementById('qrcode').innerHTML = '';
            this.type = 0;
            this.printmodal = true;
        },
        addBill () {
            if (
                this.process == '' ||
                this.hasNum == 0 ||
                this.group == '' ||
                this.operator == '' ||
                this.station == ''
            ) {
                this.$Message.error('请填写完成参数');
                return false;
            }
            if (parseInt(this.hasNum) > parseInt(this.notNum)) {
                this.$Message.error('派工数量不能超过未派工数量');
                return false;
            }
            this.billobj = {
                date: moment().format('YYYY-MM-DD'),
                workgroup: this.detailobj.group,
                operator_name: this.detailobj.user,
                machine_name: this.detailobj.machine,
                code: this.detailobj.code,
                draw_code: this.detailobj.draw_number,
                product_name: this.detailobj.product_name,
                quantity: this.hasNum,
                route_name: this.processName,
                working_hours: this.limitTime,
                prepare: this.stopTime,
                creator_name: this.$store.state.user.userName
            };

            let url =
                this.detailobj.code +
                '-' +
                this.detailobj.serial_number +
                '-' +
                this.detailobj.serialnumber;
            console.log(this.detailobj);
            this.detailobj.order_number = url;
            this.getqrcode('qrcode', url);
            this.addcheck = true
            this.printornot = 2
        },
        getqrcode (code, machine_url) {
            document.getElementById(code).innerHTML = '';
            var qrcode = new QRCode(document.getElementById(code), {
                width: 50,
                height: 50
            });
            qrcode.makeCode(machine_url);
        },
        // 保存派工
        addPost () {
            if (!this.billobj.code) {
                this.$Message.error('请填写完成参数');
                return false;
            }

            let data = {
                planId: this.detailobj.id, // 计划id
                route_id: this.process,
                count: this.hasNum,
                machine_id: this.station,
                order_number: this.detailobj.order_number,
                operator_mid: this.operator,
                remark: this.remark,
                working_hours: this.limitTime,
                prepare: this.stopTime
            };
            this.btnLoading = true
            this.request('/cnc/ProductJob/SaveJob', data, 'post').then(
                (res) => {
                    this.btnLoading = false
                    if (res.data.ret == 1) {
                        this.detailobj = {};
                        this.search(1, 10);
                        this.printmodal = false;
                        // this.addTable1 = res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                }
            );
        },
        exclude () {
            let arr = [];
            this.addTable2.forEach((ele) => {
                let i = ele.batch;
                ele.orderNumber = this.addTable1[i].orderNumber;
                ele.count = this.addTable1[i].count;
                ele.machines.forEach((item) => {
                    if (ele.machine_id == item.machine_id) {
                        ele.machine_name = item.machine_name;
                    }
                });
                let obj = {
                    batch: ele.batch,
                    orderNumber: ele.orderNumber,
                    count: ele.orderNumber,
                    route_type: ele.route_type,
                    route_number: ele.route_number,
                    route_name: ele.route_name,
                    machine_id: ele.machine_id,
                    machine_name: ele.machine_name,
                    cycleTime: ele.cycle_time,
                    remark: ele.remark
                };
                arr.push(obj);
            });

            var data = {
                planId: this.detailobj.id, // 计划id
                excludeRestTime: this.rest == true ? 1 : 0, // 是否排除节假日
                orders: arr // 工令号及产线层级的集合
            };

            this.request(
                '/cnc/ProductSchedule/ExecuteSchedule',
                data,
                'post'
            ).then((res) => {
                console.log(res.data);
            });
        },
        progress () {
            if (!this.detailobj.id) {
                this.$Message.error(this.$t(9000396));
                return false;
            }

            let data = {
                planId: this.detailobj.id
            };
            this.request('/cnc/ProductJob/GetOrderProgress', data, 'get').then(
                (res) => {
                    console.log(res.data);
                    this.addTable1 = res.data.data;
                    this.lookModal = true;
                }
            );
        },
        end () {
            if (!this.detailobj.id) {
                this.$Message.error(this.$t('9000396'));
                return false;
            }
            this.endmodal = true;
            this.request(
                '/cnc/ProductJob/GetOrderProgressForStop?planId=' +
                    this.detailobj.id,
                '',
                'get'
            ).then((res) => {
                console.log(res.data.data);
                if (res.data.ret === 1) {
                    this.endata1 = res.data.data;
                }
            });
        },
        handleSelect (val) {
            this.selection = val;
        },
        endPost () {
            let arr = [];
            this.selection.forEach((ele) => {
                arr.push(ele.id);
            });
            var data = {
                ids: arr
            };
            this.request('/cnc/ProductJob/StopSchedule', data, 'post').then(
                (res) => {
                    if (res.data.ret == 1) {
                        console.log(res.data.data);
                        this.search(1, 10);
                        this.endmodal = false;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                }
            );
        },
        print () {
            if (!this.detailobj.id) {
                this.$Message.error(this.$t('9000396'));
                return false;
            }
            this.type = 1;
            this.printmodal = true;
            this.billobj = {};
            document.getElementById('qrcode').innerHTML = '';
            var data = {
                planId: this.detailobj.id
            };
            this.request('/cnc/ProductJob/GetOrdersByPlan', data, 'get').then(
                (res) => {
                    if (res.data.ret == 1) {
                        this.orderArr = res.data.data;
                    }
                }
            );
            // this.getPrintDetail();
        },
        getPrintDetail () {
            let id, url;
            this.orderArr.forEach((ele) => {
                if (ele.planDetailId == this.route) {
                    id = ele.route_id;
                    url = ele.order_number;
                }
            });

            var data = {
                planDetailId: this.route,
                routeId: id
            };
            this.request(
                '/cnc/ProductJob/PrintScheduleByRouteId',
                data,
                'get'
            ).then((res) => {
                if (res.data.ret == 1) {
                    // console.log(res.data.data);
                    this.billobj = res.data.data;
                    this.getqrcode('qrcode', url);
                }
            });
        },
        change () {
            if (!this.detailobj.id) {
                this.$Message.error(this.$t('9000396'));
                return false;
            }
            this.changemodal = true;
            this.newcode = '';
        },
        changePost () {
            if (this.newcode == '') {
                this.$Message.error(this.$t(6000037));
                return false;
            }
            var data = {
                plan_id: this.detailobj.id,
                new_code: this.newcode
            };
            this.request('/cnc/PlanChange/AddChangeRecord', data, 'post').then(
                (res) => {
                    if (res.data.ret == 1) {
                        console.log(res.data);
                    }
                }
            );
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
        },
        getRoute () {
            let data = {
                productid: this.detailobj.product_id
            };
            this.request(
                '/config/ProductRoute/GetRoutesByProduct',
                data,
                'get'
            ).then((res) => {
                if (res.data.ret == 1) {
                    this.processArr = res.data.data;
                }
            });
        },
        getRouteNumber (val) {
            if (val) {
                let data = {
                    planId: this.detailobj.id,
                    route_id: val
                };
                this.request(
                    '/cnc/productjob/GetRouteNumber',
                    data,
                    'get'
                ).then((res) => {
                    if (res.data.ret == 1) {
                        this.notNum = res.data.data.unjob_quanlity;
                        this.hasNum = res.data.data.unjob_quanlity;
                        this.detailobj['serialnumber'] =
                            res.data.data.serial_number;
                    }
                });

                this.processArr.forEach((ele) => {
                    if (ele.id == val) {
                        this.limitTime = ele.working_hours;
                        this.stopTime = ele.prepare;
                        this.processName = ele.name;
                        this.detailobj['serial_number'] = ele.serialNumber;
                    }
                });
            } else {

            }
        },
        getGroups () {
            let data = {
                departid: 0
            };
            this.request(
                '/config/WorkingGroup/GetAllWorkGroup',
                data,
                'get'
            ).then((res) => {
                if (res.data.ret == 1) {
                    this.groupArr = res.data.data;
                }
            });
        },
        getUsername (val) {
            if (val) {
                this.detailobj['group'] = val.label;
                let data = {
                    id: val.value
                };
                this.request(
                    '/config/WorkingGroup/GetAllUsersByWorkGroup',
                    data,
                    'get'
                ).then((res) => {
                    if (res.data.ret == 1) {
                        this.operatorArr = res.data.data;
                    }
                });
            }
        },
        getName (val) {
            if (val) {
                this.detailobj['user'] = val.label;
            }
        },
        getMachineName (val) {
            if (val) {
                this.detailobj['machine'] = val.label;
            }
        },
        getMachines () {
            this.request(
                '/config/ProjectLevelSection/GetTwoLevelSection',
                '',
                'get'
            ).then((res) => {
                if (res.data.ret == 1) {
                    this.stationArr = res.data.data;
                }
            });
        },
        handlePageSize (value) {
            this.pagesize = value;

            this.tableData = this.search();
        },
        changePage (value) {
            this.page = value;
            this.tableData = 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 scoped>
.modaltop {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
}
.div_span1 {
    width: 25%;
    display: inline-block;
}
.div_span1 > span:first-child {
    font-weight: bold;
}
.div_span2 {
    display: inline-block;
}
.div_span3 {
    display: inline-block;
    font-size: 13px;
}
.row {
    display: flex;
    align-items: flex-end;
    height: 55px;

    /* justify-content: space-between; */
}
.div_span2 > span:first-child {
    font-weight: bold;
}
.div_span2 > Select,
.div_span2 > Input {
    display: inline-block;
    width: 180px;
}
.div_span3 > Select,
.div_span3 > Input {
    display: inline-block;
    width: 100px;
}
.div_span3 > span:last-child {
    text-decoration: underline;
}
/* .div_input {
    display: inline-block;
    margin: 10px 0px;
} */
.modle_table {
    border: 1px solid black;
}
.modle_table_one td {
    border: 1px solid black;
}
.td_one {
    width: 35%;
    border-top: 1px solid black !important;
}
.modle_table_two td,
.modle_table_two th {
    border: 1px solid black !important;
    height: 34px;
    padding: 0px 1px !important;
    vertical-align: middle !important;
}
.div_span_row1 {
    margin: -30px 0px 5px 10px;
}
.div_span_row2 {
    margin: -66px 0px 5px 10px;
}
/*****打印 去除页眉页脚 */
/* @page {
    size: auto;
    margin: 0mm;
} */
</style>
