<template>
  <div class="app-container">
    <el-row style="margin-bottom: 12px;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>待排产外加工单</span>
        </div>
        <div style="margin-bottom:50px;">
          <el-col :span="24" class="text-center">
            <div class="filter-container">
              <el-input size="mini" v-model.trim="searchTable.keyWord" placeholder="关键字" style="width: 150px;"
                        class="filter-item"/>
              <el-input size="mini" v-model.trim="searchTable.craftName" placeholder="工序" style="width: 120px;"
                        class="filter-item"/>
              <el-input size="mini" v-model.trim="searchTable.productName" placeholder="产品类型" style="width: 120px;"
                        class="filter-item"/>
              <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchDataTable">
                搜索
              </el-button>

              <el-button
                size="mini"
                class="filter-item"
                type="primary"
                icon="el-icon-refresh"
                @click="refreshTableInfo">
                刷新
              </el-button>
              <el-button
                size="mini"
                class="filter-item"
                type="primary"
                @click="handleMachine">
                查看机台工序
              </el-button>
              <el-tag>您一共勾选了{{ selectData.length }}条</el-tag>
            </div>
            <div style="position: relative" class="rowHoverNone">
              <!--              <div style="position: absolute;left: 65px;top: 3px;z-index: 99;">-->
              <!--                <el-dropdown @command="handleCommand" size="mini" split-button>-->
              <!--                  分配工序-->
              <!--                  <el-dropdown-menu slot="dropdown">-->
              <!--                    <el-dropdown-item-->
              <!--                      v-for="item in machineInfList"-->
              <!--                      :key="item.id"-->
              <!--                      :command="item"-->
              <!--                    >{{ item.groupName }}-->
              <!--                    </el-dropdown-item>-->

              <!--                  </el-dropdown-menu>-->
              <!--                </el-dropdown>-->
              <!--              </div>-->
              <el-table
                size="mini"
                :data="tableData"
                max-height="680"
                v-loading="listLoading"
                ref="multipleTable"
                @row-contextmenu="rowContextmenu"
                :row-class-name="rowClass"
                @row-click="handleClickTableRow"
                @selection-change="handleSelectionChange"
                tooltip-effect="dark"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all>
                <el-table-column
                  fixed
                  type="selection"
                  width="55"
                  :reserve-selection="true">
                </el-table-column>
                <!--                <el-table-column fixed label="" align="center" width="130px" class-name="small-padding fixed-width">-->
                <!--                  <template slot-scope="{row}">-->
                <!--                    <el-button title="查看详情" icon="el-icon-view" @click="handleDetail(row.id)" type="primary"-->
                <!--                               size="mini"></el-button>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <el-table-column
                  label="序号"
                  width="70px">
                  <template slot-scope="scope">
                    <span>{{(listData.page - 1) *listData.pageSize + scope.$index + 1}}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  label="工序名称"
                  width="160px"
                >
                  <template slot-scope="scope">

                    <span @click.stop="handleDetail(scope.row.idCraftBill,scope.row.craftBill.idOriginFactory,scope.row.craftBill.originOrderCode)"
                          style="color: #409EFF;cursor: pointer">{{ scope.row.craftName }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="processSize"
                  label="工序尺寸">
                </el-table-column>
                <el-table-column
                  prop="breedCutSize"
                  label="展开尺寸">
                </el-table-column>
                <el-table-column
                  prop="processNum"
                  width="60"
                  label="工序数量">
                </el-table-column>
                <el-table-column
                  width="120"
                  show-overflow-tooltip
                  prop="printName"
                  label="印品名称">
                  <template slot-scope="{row}">
                    <span v-html="row.craftBill.printName"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="120"
                  prop="productName"
                  label="产品类型">
                  <template slot-scope="{row}">
                    <span v-html="row.craftBill.productName"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="120"
                  prop="originOrderSendKind"
                  label="订单发货方式">
                  <template slot-scope="{row}">
                    <span v-html="row.craftBill.originOrderSendKind"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="交货时间"
                  width="130px"
                >
                  <template slot-scope="{row}">
                    <span>{{row.craftBill.expectedDeliverDate | getTime}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="订单制单日期"
                  width="130px"
                >
                  <template slot-scope="{row}">
                    <span>{{ row.craftBill.originOrderSubmitTime  | getTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="原订单所有后工"
                  width="150"
                  show-overflow-tooltip
                >
                  <template slot-scope="{row}">
                    {{row.craftBill.origOrderAllProcess}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="processMemo"
                  width="200px"
                  show-overflow-tooltip
                  label="工序备注">
                </el-table-column>
                <el-table-column
                  width="120px"
                  label="订单编号">
                  <template slot-scope="{row}">
                    <span v-html="row.craftBill.originOrderCode"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="120px"
                  label="外加工单号">
                  <template slot-scope="{row}">
                    <span v-html="row.craftBill.billCode"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="120px"
                  label="外协单号">
                  <template slot-scope="{row}">
                    <span v-html="row.craftBill.originOutAssistBill"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="120px"
                  label="客户名称">
                  <template slot-scope="{row}">
                    <span>{{ row.craftBill.customerName }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="加工单备注"
                  width="200px"
                >
                  <template slot-scope="{row}">
                    <span>{{ row.craftBill.billMemo }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="120px"
                  label="施工单号">
                  <template slot-scope="{row}">
                    <span v-html="row.craftBill.originPrintBillCode"></span>
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page"
                          :limit.sync="listData.pageSize" @pagination="getTableInfo"/>
            </div>

          </el-col>
        </div>
      </el-card>
    </el-row>
    <div v-show="machinefListVisible"
         style="width: 100%;position: fixed;left: 0px;height: 760px;z-index: 1024;background: #fff;bottom:0px;border-top: 1px solid #ddd;overflow-y: auto;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">

      <el-row style="width: 98%;margin: auto">
        <div style="float: left;width: 120px;font-size: 16px;line-height: 40px">机台任务</div>
        <div @click="clickClose" style="float: right;width: 70px;font-size: 20px;text-align:center;line-height: 40px;color: #333;font-weight: bold;cursor: pointer;"><span style="font-weight: normal;font-size: 16px;line-height: 40px;vertical-align: middle;padding-bottom: 20px">关闭</span><i class="el-icon-close"></i></div>
        <div style="clear: both"></div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>工序</span>

            <el-input size="mini" v-model.trim="search.keyWord" placeholder="订单编号" style="width: 150px;"
                      class="filter-item"/>
            <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
              搜索
            </el-button>
            <el-button
              size="mini"
              class="filter-item"
              style="margin-left: 10px;display: inline-block"
              type="primary"
              @click="handleSort">
              工序排序
            </el-button>
          </div>
          <!--        <div class="filter-container">-->
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            class="filter-item"-->
          <!--            style="margin-left: 10px;"-->
          <!--            type="primary"-->
          <!--            @click="handleSave">-->
          <!--            排序保存-->
          <!--          </el-button>-->
          <!--        </div>-->
          <div style="position: relative" class="sortTable-con">
            <el-badge
              size="mini"
              v-for="(item,index) in machineInfList"
              :key="item.id"
              class="item-badge">
              <el-button @click="handleClick(index)" v-if="activeName==item.feedbackGroupName" type="primary" size="mini"
                         class="share-button">
                {{ item.feedbackGroupName }}
                <span
                  style="line-height: 14px;display:block">({{ item.taskCount }}/{{ item.processNum1000 }})</span>
              </el-button>
              <el-button @click="handleClick(index)" v-else size="mini" class="share-button">
                {{ item.feedbackGroupName }}
                <span
                  style="line-height: 14px;display: block">({{ item.taskCount }}/{{ item.processNum1000 }})</span>
              </el-button>
            </el-badge>
            <div>
              <!--              <div style="position: absolute;left: 65px;top: 3px;z-index: 99">-->
              <!--                <el-dropdown @command="handleCommand2" size="mini" split-button>-->
              <!--                  重新分配-->
              <!--                  <el-dropdown-menu slot="dropdown">-->
              <!--                    <el-dropdown-item-->
              <!--                      v-for="(item,indexItem) in machineInfList"-->
              <!--                      v-show="activeIndex!=indexItem"-->
              <!--                      :key="indexItem"-->
              <!--                      :command="item"-->
              <!--                    >{{ item.groupName }}-->
              <!--                    </el-dropdown-item>-->
              <!--                  </el-dropdown-menu>-->
              <!--                </el-dropdown>-->
              <!--              </div>-->
              <div class="elTbleTask rowHoverNone elTble">
                <el-table
                  size="mini"
                  max-height="680"
                  v-loading="listLoadingSort"
                  :data="activeMachineInfList"
                  @row-contextmenu="rowContextmenu2"
                  :row-class-name="tableRowClassName"
                  @row-click="handleClickTableRow2"
                  ref="multipleTable2"
                  tooltip-effect="dark"
                  style="width: 100%;margin-bottom: 20px;"
                  row-key="id"
                  show-summary
                  :summary-method="getSummaries"
                  border
                  default-expand-all>
                  <el-table-column
                    label="序号"
                    width="70px">
                    <template slot-scope="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                  <!--                  <el-table-column label="操作" fixed align="center" width="100px" class-name="small-padding fixed-width">-->
                  <!--                    <template slot-scope="{row}">-->
                  <!--                      <el-button @click="handleBackBreedTask(row)" type="primary" size="mini">-->
                  <!--                        退回-->
                  <!--                      </el-button>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <el-table-column
                    label="工序名称"
                  >
                    <template slot-scope="scope">
                     <span @click.stop="handleDetail(scope.row.idCraftBill,scope.row.craftBill.idOriginFactory,scope.row.craftBill.originOrderCode)"
                           style="color: #409EFF;cursor: pointer">{{ scope.row.craftName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="工序尺寸"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.processSize }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="breedCutSize"
                    label="展开尺寸">
                    <template slot-scope="scope">
                      <span>{{ scope.row.breedCutSize }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="60"
                    label="工序数量"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.processNum }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="反馈状态" align="center" width="110px" class-name="small-padding fixed-width">
                    <template slot-scope="{row}">
                      <el-tag size="mini" type="info" v-if="row.processState==0">待排产</el-tag>
                      <el-tag size="mini" type="danger" v-if="row.processState==1">待验收</el-tag>
                      <el-tag size="mini" type="warning" v-if="row.processState==2">待生产</el-tag>
                      <el-tag size="mini" type="primary" v-if="row.processState==3">待完工</el-tag>
                      <el-tag size="mini" type="success" v-if="row.processState==4">待流转</el-tag>
                      <el-tag size="mini" type="" v-if="row.processState==10">已完成</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="原订单所有后工"
                    width="150"
                    show-overflow-tooltip
                  >
                    <template slot-scope="{row}">
                      {{row.craftBill.origOrderAllProcess}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="工序备注"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.processMemo }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="120px"
                    label="外加工单号"
                  >
                    <template slot-scope="scope">
                      <span v-html="scope.row.craftBill.billCode"></span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="加工单工序"
                    width="120px"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.craftBill.processStr }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="订单编号"
                    width="120px"
                  >
                    <template slot-scope="scope">
                      <span v-html="showBillCodeTask(scope.row.craftBill.originOrderCode)"></span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="覆膜反馈状态"
                    width="90px"
                  >
                    <template slot-scope="{row}">
                      <span>{{ row.craftBill.coveringState }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="模切反馈状态"
                    width="90px"
                  >
                    <template slot-scope="{row}">
                      <span>{{ row.craftBill.cuttingState }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="成型反馈状态"
                    width="90px"
                  >
                    <template slot-scope="{row}">
                      <span>{{ row.craftBill.moldingState }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="交货日期"
                    width="130px"
                  >
                    <template slot-scope="{row}">
                      <span>{{row.craftBill.expectedDeliverDate | getTime}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="订单制单日期"
                    width="130px"
                  >
                    <template slot-scope="{row}">
                      <span>{{ row.craftBill.originOrderSubmitTime  | getTime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="外协单号"
                    width="130px"
                  >
                    <template slot-scope="{row}">
                      <span>{{ row.craftBill.originOutAssistBill }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="印品名称"
                    show-overflow-tooltip
                    width="130px"
                  >
                    <template slot-scope="{row}">
                      <span>{{row.craftBill.printName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="客户名称"
                    width="130px"
                  >
                    <template slot-scope="{row}">
                      <span>{{row.craftBill.customerName}}</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="验收日期"
                    width="130px"
                  >
                    <template slot-scope="{row}">
                      <span>{{ row.craftBill.printCompleteTime  | getTime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="加工单备注"
                    width="200px"
                  >
                    <template slot-scope="{row}">
                      <el-popover
                        placement="top-start"
                        width="400"
                        trigger="hover"
                        :content="row.craftBill.billMemo">
                        <span slot="reference" style="width: 200px" class="ellipsis"> {{ row.craftBill.billMemo }}</span>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="施工单号"
                    width="130px"
                  >
                    <template slot-scope="{row}">
                      <span>{{ row.craftBill.originPrintBillCode}}</span>
                    </template>
                  </el-table-column>
                </el-table>

              </div>
            </div>
          </div>
        </el-card>
      </el-row>
    </div>

    <!--    <servicedialog @tableRefresh="tableRefresh" ref="menuDialog" :dialogStatus="dialogStatus" :menuId="menuId" :titleDialog="titleDialog" :dialogVisible="dialogVisible"/>-->
    <el-dialog title="工序排序" :fullscreen="true" :visible.sync="dialogSort" style="" width="95%">
      <div style="width: 100%;">
        <el-input size="small" v-model.trim="search.keyWord" placeholder="订单编号" style="width: 200px;"
                  class="filter-item"/>
        <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
          搜索
        </el-button>
        <el-button
          class="filter-item"
          style="margin-left: 10px;margin-bottom: 15px;"
          type="primary"
          size="small"
          :disabled="disabledSave"
          @click="handleSave">
          排序保存
        </el-button>
        <span>(<span style="color: #E6A23C">只保存当前展示机台任务</span>)</span>
        <el-button type="primary" plain size="small" @click="handleClose">关 闭</el-button>
      </div>
      <div class="sortTable-con">
        <el-badge
          size="mini"

          v-for="(item,index) in machineInfList"
          :key="item.id"
          class="item-badge">
          <el-button @click="handleClick(index)" v-if="activeName==item.feedbackGroupName" type="primary" size="mini"
                     class="share-button">
            {{ item.feedbackGroupName }}
            <span
              style="line-height: 14px;display:block">({{ item.taskCount }}/{{ item.processNum1000 }})</span>
          </el-button>
          <el-button @click="handleClick(index)" v-else size="mini" class="share-button">
            {{ item.feedbackGroupName }}
            <span
              style="line-height: 14px;display: block">({{ item.taskCount }}/{{ item.processNum1000 }})</span>
          </el-button>
        </el-badge>
        <div style="width: 100%;"><el-button
          type="primary"
          style="padding: 7px;margin-bottom: 10px"
          size="small"
          @click="sortTableBtn(1)">
          一键排序(交货日期)
        </el-button>
          <el-button
            type="success"
            style="padding: 7px;margin-bottom: 10px"
            size="small"
            @click="sortTableBtn(2)">
            一键排序(制单日期)
          </el-button>
        </div>
      </div>
      <div>
        <div class="elTbleSort rowHoverNone">
          <el-table
            class="dropTableList tb-edit"
            size="mini"
            max-height="550"
            :data="activeMachineInfList"
            v-loading="listLoadingSort"
            ref="multipleTableSort"
            highlight-current-row
            tooltip-effect="dark"
            @row-contextmenu="rowContextmenuSort"
            @row-click="handleSendBillClickTableRow"
            @selection-change="handleSelectionChangeSort"
            :row-style="customRowStyle"
            :row-class-name="rowClassName"
            style="width: 100%;margin-bottom: 20px;"
            show-summary
            :summary-method="getSummaries2"
            border
            default-expand-all>
            <el-table-column label="操作" width="70px" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button  @click.stop="handleSortFirst(scope.row,scope.$index)" type="primary" size="mini">
                  <span style="color: #fff !important;">置顶</span>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              width="60px"
              align="center"
              label="排序">
              <template slot-scope="scope">
                <div
                  @click.stop="handleInput"
                  v-show="scope.$index==scopeIndex"
                >
                  <el-input
                    size="mini"
                    style="padding: 0px !important;"
                    v-model="scope.row.scheduleIndex"
                    placeholder="请输入内容"
                    @change="handleEdit(scope.$index, scope.row.scheduleIndex,scope.row)"></el-input>
                </div>

                <!--                      <span>{{ scope.row.breedName }}</span>-->
                <span v-show="scope.$index!=scopeIndex"  style="width: 60px;display: inline-block" @click.stop="handleTemplate(scope.$index)">{{ scope.row.scheduleIndex }}</span>
              </template>
            </el-table-column>
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="工序名称"
            >
              <template slot-scope="scope">
                 <span @click.stop="handleDetail(scope.row.idCraftBill,scope.row.craftBill.idOriginFactory,scope.row.craftBill.originOrderCode)"
                       style="color: #409EFF;cursor: pointer">{{ scope.row.craftName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="工序尺寸"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.processSize }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="breedCutSize"
              label="展开尺寸">
              <template slot-scope="scope">
                <span>{{ scope.row.breedCutSize }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="60"
              label="工序数量"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.processNum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="反馈状态" align="center" width="110px" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-tag size="mini" type="info" v-if="row.processState==0">待排产</el-tag>
                <el-tag size="mini" type="danger" v-if="row.processState==1">待验收</el-tag>
                <el-tag size="mini" type="warning" v-if="row.processState==2">待生产</el-tag>
                <el-tag size="mini" type="primary" v-if="row.processState==3">待完工</el-tag>
                <el-tag size="mini" type="success" v-if="row.processState==4">待流转</el-tag>
                <el-tag size="mini" type="" v-if="row.processState==10">已完成</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="原订单所有后工"
              width="150"
              show-overflow-tooltip
            >
              <template slot-scope="{row}">
                {{row.craftBill.origOrderAllProcess}}
              </template>
            </el-table-column>
            <el-table-column
              label="原订单消息"
              width="190"
              show-overflow-tooltip
            >
              <template slot-scope="{row}">
                <template v-if="row.craftBill.originOrderMessage">
                        <span
                          style="color: #20a0ff; cursor: pointer"
                          @click="openOriginOrderMessage(row)"> {{ row.craftBill.originOrderMessage }}</span>
                </template>
                <template v-else>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              label="工序备注"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.processMemo }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="120px"
              label="外加工单号"
            >
              <template slot-scope="scope">
                <span v-html="scope.row.craftBill.billCode"></span>
              </template>
            </el-table-column>
            <el-table-column
              label="加工单工序"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.processCost }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="订单编号"
              width="120px"
            >
              <template slot-scope="scope">
                <span v-html="showBillCodeSort(scope.row.craftBill.originOrderCode)"></span>
              </template>
            </el-table-column>
            <el-table-column
              label="覆膜反馈状态"
              width="90px"
            >
              <template slot-scope="{row}">
                <span>{{ row.craftBill.coveringState }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="模切反馈状态"
              width="90px"
            >
              <template slot-scope="{row}">
                <span>{{ row.craftBill.cuttingState }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="成型反馈状态"
              width="90px"
            >
              <template slot-scope="{row}">
                <span>{{ row.craftBill.moldingState }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="交货日期"
              width="130px"
            >
              <template slot-scope="{row}">
                <span>{{row.craftBill.expectedDeliverDate | getTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="订单制单日期"
              width="130px"
            >
              <template slot-scope="{row}">
                <span>{{ row.craftBill.originOrderSubmitTime  | getTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="外协单号"
              width="130px"
            >
              <template slot-scope="{row}">
                <span>{{ row.craftBill.originOutAssistBill }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="印品名称"
              show-overflow-tooltip
              width="130px"
            >
              <template slot-scope="{row}">
                <span>{{row.craftBill.printName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户名称"
              width="130px"
            >
              <template slot-scope="{row}">
                <span>{{row.craftBill.customerName}}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="加工单备注"
              width="200px"
            >
              <template slot-scope="{row}">
                <el-popover
                  placement="top-start"
                  width="400"
                  trigger="hover"
                  :content="row.craftBill.billMemo">
                  <span slot="reference" style="width: 200px" class="ellipsis"> {{ row.craftBill.billMemo }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="施工单号"
              width="130px"
            >
              <template slot-scope="{row}">
                <span>{{ row.craftBill.originPrintBillCode}}</span>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div  v-if="processListShow" style="margin-top: 10px">
          <el-table
            class="dropTable"
            size="mini"
            :data="processListData"
            tooltip-effect="dark"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all>
            <el-table-column
              label="#"
              width="50px">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              label="加工单号"
            >
              <template slot-scope="scope">
                <span>{{scope.row.billCode}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="工序名称"
            >
              <template slot-scope="scope">
                <span @click="handleDetail(scope.row.idCraftBill,scope.row.craftBill.idOriginFactory,scope.row.craftBill.originOrderCode)"
                      style="color: #409EFF;cursor: pointer">{{ scope.row.craftName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="反馈状态" align="center" width="110px" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-tag size="mini" type="info" v-if="row.processState==0">待排产</el-tag>
                <el-tag size="mini" type="danger" v-if="row.processState==1">待验收</el-tag>
                <el-tag size="mini" type="warning" v-if="row.processState==2">待生产</el-tag>
                <el-tag size="mini" type="primary" v-if="row.processState==3">待完工</el-tag>
                <el-tag size="mini" type="success" v-if="row.processState==4">待流转</el-tag>
                <el-tag size="mini" type="" v-if="row.processState==10">已完成</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="反馈组"
            >
              <template slot-scope="scope">
                                      <span>{{ scope.row.feedbackGroupName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="60"
              label="工序数量"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.processNum }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="已反馈数量"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.feedbackNum }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="工序尺寸"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.processSize }}</span>
              </template>
            </el-table-column>


            <el-table-column
              label="工序备注"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.row.processMemo }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <allot-button :machineInfList="machineInfList" v-if="menuVisible" @foo="foo" ref="contextbutton"
                  @handleThree="handleThree"></allot-button>
    <task-button style="z-index: 1025" :activeIndex="activeIndex" :machineInfList="machineInfList" v-if="menuVisible1" @foo1="foo1"
                 ref="taskbutton" @handleTwo2="handleTwo2" @handleThree2="handleThree2"
    ></task-button>
    <!--    <el-drawer-->
    <!--      title="订单消息"-->
    <!--      :reverse="true"-->
    <!--      :visible.sync="memoDrawer"-->
    <!--      size="600px">-->
    <!--      <order-message ref="orderMessage"></order-message>-->
    <!--    </el-drawer>-->
    <craft-detail ref="craftDetail"></craft-detail>
    <el-drawer
      title="原订单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <originorder-message ref="originorderMessage"></originorder-message>
    </el-drawer>
    <!--待排产表格右键开始-->
    <div id="contextmenuSort">
      <sort-button v-if="menuVisibleSort" @foo2="foo2" ref="sortbutton"
                   @handleTopping="handleTopping"></sort-button>
    </div>

    <!--待排产表格右键结束-->
  </div>
</template>

<script>
import {
  scheduleProcessSort,
  scheduleProcessBack,
  scheduleProcess,
  queryFeedbackGroupWithTasks,
  queryProcessToSchedule,
  addInfo,
  calcFeedbackGroupTaskCollectInfo,
  getFeedbackGroupWithTasks,
  findFeedbackGroupByKeyWord
} from '@/api/outsideFactory/processTos/index.js'
import Sortable from "sortablejs"
import allotButton from './components/allotButton/index.vue'
import taskButton from './components/taskButton/index.vue'
import sortButton from '@/views/printbill/sortButton/index.vue'
// import OrderMessage from '@/components/orderMessage/orderMessage'
import CraftDetail from "@/components/craftDetail/craftDetail";
import {calcAllMachineTaskCollection, findMachineByKeyWord} from "@/api/printbill/breedTasks/breedTasks";
import {getMachineInfoByID} from "@/api/baseInfo/machineInfo";
import originorderMessage from '@/views/feedBack/orderMessage/originorderMessage'
import {getSimpleProductInfoList} from "@/api/order/orderList";


export default {
  components: {
    Sortable,
    allotButton,
    taskButton,
    CraftDetail,
    originorderMessage,
    sortButton
    // OrderMessage
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      scopeIndex:9999,
      menuVisibleSort:false,
      rowData:{},
      machinefListVisible:false,
      clickCheckId:"",
      selectRow: [],//选中的行
      selectData: [],//选中的数据
      row:{},
      processListShow:false,
      processListData:[],
      rowIndex: '',
      copyMachineInfList: [],
      copyTableData: [],
      listLoadingSort: false,
      memoDrawer: false,
      menuVisible: false,
      menuVisible1: false,
      disabledSave: false,
      dialogSort: false,
      activeIndex2: 0,
      activeName2: '',
      activeMachineInfList: [],
      activeMachineInfList2: [],
      activeIndex: 99,
      activeName: '',
      machineInfList: [],
      multipleSelection: [],
      multipleSelection2: [],
      multipleSelectionSort:[],
      dialogStatus: 1,//1增加，2修改
      dialogTitle: '',
      dialogVisible: false,
      search: {
        keyWord: ''
      },
      searchTable: {
        keyWord: '',
        craftName:"",
        productName:""
      },
      ruleForm: {},
      rules: {
        companyName: [
          {required: true, message: '请填写待排产任务名称', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请填写待排产任务地址', trigger: 'blur'}
        ],
        linkMan: [
          {required: true, message: '请填写联系人', trigger: 'blur'}
        ],
        linkPhone: [
          {required: true, message: '请填写联系电话', trigger: 'blur'}
        ]

      },
      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },
      confirmdialog: false,
      listLoading: false,
      tableData: [],
      menuId: ''
    }
  },
  mounted() {
    this.getTableInfo();
    this.getMachineStatus();
  },
  methods: {
    // 获取产品// 获取产品；类型
    handleInput(){
      // console.log(66666);
      // this.multipleSelectionSort= [];
      // this.$refs.multipleTableSort.clearSelection();
    },
    handleTemplate(index){
      this.scopeIndex =index;
    },
    handleTopping(value,typeValue){
      Array.prototype.insert = function(index, value){
        this.splice(index,0, value);
      }
      //批量置顶
      const _that = this;
      // console.log(value);
      _that.rowIndex = "";

      if(_that.multipleSelectionSort.length<=0){
        _that.$message("请选择需要排序的工单")
        return
      }
      if(!typeValue && !value){
        _that.$message("请输入排产顺序的数字");
        return
      }
      // _that.activeMachineInfList.splice(parseInt(sortIndex) - 1, 0, row);
      for (let j = 0; j < _that.activeMachineInfList.length; j++) {
        for (let i = 0; i < _that.multipleSelectionSort.length; i++) {
          if (_that.activeMachineInfList[j].id == _that.multipleSelectionSort[i].id) {
            _that.activeMachineInfList.splice(j, 1)
          }
        }
      }
      _that.multipleSelectionSortCopy = JSON.parse(JSON.stringify(_that.multipleSelectionSort)).reverse();
      for (let i = 0; i < _that.multipleSelectionSortCopy.length; i++) {
        var datas = _that.multipleSelectionSortCopy[i];
        if(!typeValue){
          if(parseInt(value)==0){
            _that.activeMachineInfList.insert(0, datas);
          }else {
            _that.activeMachineInfList.insert(parseInt(value) - 1, datas)
          }
        }else {
          _that.activeMachineInfList.insert(0, datas)
        }

      }
      _that.multipleSelectionSort= [];
      _that.$refs.multipleTableSort.clearSelection();
      for (let i = 0; i < _that.activeMachineInfList.length; i++) {
        var datas = _that.activeMachineInfList[i];
        datas.scheduleIndex = i + 1;
      }
      _that.menuVisibleSort = false;
    },
    handleClickTableSort(row, event, column){
      const _that = this;
      _that.$refs.multipleTableSort.toggleRowSelection(row);
    },
    handleSelectionChangeSort(rows) {
      var _that = this;
      // console.log(rows);
      _that.multipleSelectionSort = rows;
      // console.log("_that.multipleSelection111",_that.multipleSelection);
    },
    openOriginOrderMessage(row){
      var _that = this
      _that.memoDrawer = true;
      _that.rowData = row;
      _that.$nextTick(function () {
        // console.log(_that.$refs.orderMemo);
        _that.$refs.originorderMessage.idOriginFactory = row.craftBill.idOriginFactory;
        _that.$refs.originorderMessage.originOrderId = row.craftBill.originOrderId;
        _that.$refs.originorderMessage.getList()
      })
    },
    getSummaries(param) {
      const {
        columns,
        data
      } = param
      const sums = []
      columns.forEach((column, index) => {
        // console.log("11111", column);
        if (index === 0) {
          sums[index] = '合计'
          //只计算最后一列
          // console.log(columns.length - 8);
        } else if (column.label == "工序数量") {
          // console.log("data", data);
          var num = 0;
          for (let i = 0; i < data.length; i++) {
            num += data[i].processNum
          }
          sums[index] = num;
        }
      })
      return sums
    },
    getSummaries2(param) {
      const {
        columns,
        data
      } = param
      const sums = []
      columns.forEach((column, index) => {
        // console.log("11111", column);
        if (index === 0) {
          sums[index] = '合计'
          //只计算最后一列
          // console.log(columns.length - 8);
        } else if (column.label == "工序数量") {
          // console.log("data", data);
          var num = 0;
          for (let i = 0; i < data.length; i++) {
            num += data[i].processNum
          }
          sums[index] = num;
        }
      })
      return sums
    },
    searchDataTable(){
      const _that = this;
      _that.listData.page = 1;
      _that.getTableInfo();
    },
    handleClose() {
      this.dialogSort = false;
    },
    showBillCodeSort(val) {
      //搜索施工单号限时变黄
      if (val.indexOf(this.search.keyWord) !== -1 && this.search.keyWord !== '') {
        return val.replace(this.search.keyWord, '<font class="selectorSort" style="background:yellow;color: #333">' + this.search.keyWord + '</font>')
      } else {
        return val
      }
    },
    showBillCodeTask(val) {
      //搜索施工单号限时变黄
      if (val.indexOf(this.search.keyWord) !== -1 && this.search.keyWord !== '') {
        return val.replace(this.search.keyWord, '<font class="selectorTask" style="background:yellow;color: #333">' + this.search.keyWord + '</font>')
      } else {
        return val
      }
    },
    clickClose(){
      this.machinefListVisible = false;
    },
    handleMachine(){
      this.machinefListVisible = true;
    },
    sortTableBtn(value){
      const _that = this;
      if(_that.activeMachineInfList.length<=0){
        return
      }
      // _that.activeMachineInfList.sort(_that.compare('createTime'));
      // _that.activeMachineInfList.sort(_that.compare('id'));
      if(value==1){
        _that.activeMachineInfList.sort(function(a, b){
          return b.craftBill.expectedDeliverDate < a.craftBill.expectedDeliverDate ? 1 : -1;
        });
      }else {
        _that.activeMachineInfList.sort(function(a, b){
          return b.craftBill.originOrderSubmitTime < a.craftBill.originOrderSubmitTime ? 1 : -1;
        });
      }

      for (let i = 0; i < _that.activeMachineInfList.length; i++) {
        _that.activeMachineInfList[i].scheduleIndex = i+1;
      }

    },
    compareSort(propertyName) {
      return function (object1, object2) {
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
        if (value2 < value1) {
          return 1;
        } else if (value2 > value1) {
          return -1;
        } else {
          return 0;
        }
      }

    },
    // return b.createTime < a.createTime ? 1 : -1
    customRowStyle({row, rowIndex}) {
      // if (row.voidFlag === 1) {
      //   return {
      //     color: '#F56C6C'
      //   }
      // }
      // if (column.property === 'boxCount') {
      //   return 'background-color:#1989fa80;color:#fff;font-weight:600;'
      // }
      if (this.rowIndex === rowIndex) {
        return {
          'background-color': '#8cc5ff !important',
          'color': '#7c7c7c !important',
        }
      }
    },
    rowClassName({row, rowIndex}) {
      row.index = rowIndex
      if ((row.craftBill.coveringState == "无此类型工序" || row.craftBill.coveringState == "已完成") && (row.craftBill.cuttingState == "无此类型工序" || row.craftBill.cuttingState == "已完成")) {
        return 'success-text';
      }
      if (row.craftBill.coveringState == "无此类型工序" || row.craftBill.coveringState == "已完成") {
        return 'primary-text';
      }
    },

    handleSendBillClickTableRow(row, column, event) {
      var _that = this
      _that.processListShow = false;
      _that.$refs.multipleTableSort.toggleRowSelection(row);
      _that.rowIndex = row.index;
      _that.processListData = row.craftBill.processList;
      for (let i = 0; i < _that.processListData.length; i++) {
        var datas = _that.processListData[i];
        _that.$set(datas, 'billCode', row.craftBill.billCode);
      }

      // console.log(this.processListData);
      if(_that.processListData.length<=0){
        _that.processListShow = false;
      }else {
        _that.processListShow = true;
      }
    },
    // 订单消息
    // openMessage(row) {
    //   var _that = this
    //   _that.memoDrawer = true
    //   _that.$nextTick(function() {
    //     // console.log(_that.$refs.orderMemo);
    //     _that.$refs.orderMessage.idOrder = row.id
    //     _that.$refs.orderMessage.getList()
    //   })
    // },
    handleBackBreedTask(row) {
    },
    handleCommand2(command) {
    },
    handleCommand(command) {

    },
    handleTwo2(row) {
      const _that = this;
      _that.row = row;
      var process = {
        id: row.id,
        processState: row.processState
      }
      console.log(process);
      var data = {
        "process": JSON.stringify(process)
      }
      scheduleProcessBack(data).then(response => {
        // console.log("getAllEnableMachineInfo", response)
        _that.$message({
          type: 'success',
          message: '退回成功!'
        });
        _that.tableData = [];
        _that.listData.page = 1;
        _that.selectRow = [];
        _that.selectData = [];
        _that.clickCheckId = "";
        _that.getTableInfo();
        _that.getMachineStatus(_that.activeName, _that.activeIndex);
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    handleThree2(item, index,row) {
      const _that = this;
      _that.multipleSelection2 = [];
      _that.row = row;
      _that.multipleSelection2.push(_that.row)
      // var taskList = _that.multipleSelection2;
      for (let i = 0; i < _that.multipleSelection2.length; i++) {
        var datas = _that.multipleSelection2[i];
        datas["idFeedbackGroup"] = item.idFeedbackGroup;
        datas["scheduleIndex"] = 0;
      }
      var data =  JSON.stringify(_that.multipleSelection2)
      scheduleProcessSort(data).then(response => {
        // console.log("getAllEnableMachineInfo", response
        _that.$message.success("重新分配成功");
        _that.clickCheckId = "";
        _that.getMachineStatus(_that.activeName,_that.activeIndex);
        // _that.rowDrop();

      }).catch(err => {
        // _that.$message.error(err)
      })
    },
    handleThree(row, indexItem) {
      //分配工序
      const _that = this;
      // this.$message('click on item ' + command);

      //console.log(_that.multipleSelection);

      if (_that.selectData.length <= 0) {
        _that.$message({
          message: '请先勾选需要重新分配的工序',
          type: 'warning'
        });
        return
      }

      // console.log("command", command);
      // console.log("_that.multipleSelection",_that.multipleSelection);
      var ids = [];
      for (var i = 0; i < _that.selectData.length; i++) {
        var datas = _that.selectData[i];
        ids.push(datas.id)

      }
      var datas = {
        "processIds": ids.join(','),
        "idGroup": row.idFeedbackGroup
      }
      scheduleProcess(datas).then(response => {
        //console.log("getAllEnableMachineInfo", response)
        _that.$message.success("分配成功");
        _that.tableData = [];
        _that.selectRow = [];
        _that.selectData = [];
        _that.clickCheckId = "";
        _that.listData.page = 1;
        _that.getTableInfo();
        // _that.machinefListVisible = true;
        _that.getMachineStatus(row.feedbackGroupName,indexItem);

      }).catch(err => {
        _that.$message.error(err)
      })
    },
    handleEdit(index, sortIndex, row) {
      const _that = this;
      _that.processListShow = false;
      _that.rowIndex = "";
      var regexp = /^[1-9]\d*$/;
      if (sortIndex == "") {
        return
      }
      if (!regexp.test(parseInt(sortIndex))) {
        _that.$message("请输入大于0的正整数");
        return
      }
      _that.activeMachineInfList.splice(index, 1);
      _that.activeMachineInfList.splice(parseInt(sortIndex) - 1, 0, row);

      for (let i = 0; i < _that.activeMachineInfList.length; i++) {
        var datas = _that.activeMachineInfList[i];
        datas.scheduleIndex = i + 1;
      }
    },
    handleSortFirst(row, index) {
      const _that = this;
      // console.log(_that.activeMachineInfList);
      _that.processListShow = false;
      _that.rowIndex = "";
      _that.activeMachineInfList.splice(index, 1);
      _that.activeMachineInfList.splice(0, 0, row);

      for (let i = 0; i <_that.activeMachineInfList.length; i++) {
        var datas = _that.activeMachineInfList[i];
        datas.scheduleIndex = i + 1;
      }


    },
    handleClick2(tab, event) {
      const _that = this;
      _that.activeIndex2 = tab.index;
      _that.activeName2 = _that.machineInfList[tab.index].groupName;
    },
    handleSort() {
      const _that = this;
      _that.dialogSort = true;
      // _that.activeIndex2 = 0;
      // _that.activeName2 = _that.machineInfList[0].groupName;
      // _that.activeMachineInfList2 = _that.machineInfList[0].scheduledProcessList;

      // _that.activeIndex2 = 0;
      // _that.activeIndex = 0;
      // _that.activeName2 = _that.machineInfList[0].feedbackGroupName;
      // _that.activeName = _that.machineInfList[0].feedbackGroupName;
      // _that.activeMachineInfList = _that.machineInfList[0].scheduledProcessList;
      // _that.search.keyWord = "";
    },
    handleDetail(id,idOriginFactory,originOrderCode) {
      const _that = this;
      _that.menuVisibleSort = false;
      _that.$refs.craftDetail.idBill = id;
      _that.$refs.craftDetail.activeName = "first";
      _that.$refs.craftDetail.idOriginFactory = idOriginFactory;
      _that.$refs.craftDetail.orderCode = originOrderCode;
      _that.$refs.craftDetail.getDetail();
      _that.$refs.craftDetail.getOrderDetail();
    },
    //勾选数据行的 Checkbox 时触发的事件
    rowClass({row, rowIndex}) {
      // console.log(rowIndex);
      var indexNum = (this.listData.page - 1) *this.listData.pageSize + rowIndex
      if (this.selectRow.includes(indexNum)) {
        return 'slecleRowColor ';
      }
    },
    handleClickTableRow(row, event, column) {
      const _that = this;
      _that.$nextTick(() => {
        _that.$refs.multipleTable.toggleRowSelection(row);
      })
    },
    handleSelectionChange(val) {
      const _that = this
      this.selectData = val
    },
    handleClickTableRow2(row, event, column) {
      // const _that = this;
      // console.log(row);
      // console.log(column);
      const _that = this;
      _that.clickCheckId = row.id;
    },
    handleSave() {
      const _that = this;
      _that.disabledSave = true;
      var taskListArray = [];
        // machineInfLists.taskList.sort(_that.compare('sortIndex'));
      for (let j = 0; j <_that.activeMachineInfList.length; j++) {
        var taskLists = {
          id: "",
          idCraftBill: "",
          idFeedbackGroup: "",
          processState: "",
          scheduleIndex: ""
        };
        var datas = _that.activeMachineInfList[j];
        taskLists.id = datas.id;
        taskLists.idCraftBill = datas.idCraftBill;
        taskLists.idFeedbackGroup = datas.idFeedbackGroup;
        taskLists.processState = datas.processState;
        taskLists.scheduleIndex = j + 1;
        taskListArray.push(taskLists);
      }

      // console.log("1111",taskListArray);
      var data = JSON.stringify(taskListArray)
      scheduleProcessSort(data).then(response => {
        // console.log("getAllEnableMachineInfo", response)
        // _that.getMachine();
        _that.$message.success("保存排序成功")
        _that.disabledSave = false;
        // _that.dialogSort = false;
      }).catch(err => {
        _that.disabledSave = false;
        _that.$message.error(err)
      })
    },
    //拖拽
    // rowDrop() {
    //   const _that = this;
    //   return new Promise(function (resolve, reject) {
    //     setTimeout(() => {
    //       const tbody = document.querySelectorAll(".dropTable tbody");
    //       // console.log(tbody);
    //       for (let i = 0; i < tbody.length; i++) {
    //         var tbodyItem = tbody[i];
    //         // Sortable.create(tbodyItem);
    //         Sortable.create(tbodyItem, {
    //           onEnd({newIndex, oldIndex}) {
    //             const currRow = _that.activeMachineInfList.splice(oldIndex, 1)[0]
    //             _that.activeMachineInfList.splice(newIndex, 0, currRow)
    //           }
    //         })
    //       }
    //       resolve(0)
    //     }, 1000)
    //   })
    // },


    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
    },
    handleClick(tabIndex) {
      const _that = this;
      // _that.rowDrop();
      _that.rowIndex = "";
      _that.processListShow = false;
      _that.activeIndex = tabIndex;
      _that.activeMachineInfList = [];
      _that.getMachineInfo(_that.machineInfList[tabIndex].idFeedbackGroup);
      // _that.activeMachineInfList = _that.machineInfList[_that.activeIndex].taskList;
      _that.activeName = _that.machineInfList[tabIndex].feedbackGroupName;
      _that.activeName2 = _that.machineInfList[tabIndex].feedbackGroupName;
      _that.activeIndex2 = tabIndex;
      // _that.activeIndex = tab.index;
      // _that.activeMachineInfList = _that.machineInfList[tab.index].scheduledProcessList;
      // console.log(_that.activeMachineInfList);
      // console.log(_that.activeIndex);
      // console.log(tab.index);
      // console.log(_that.machineInfList);
    },
    //获取列表
    getTableInfo() {
      const _that = this;
      _that.listLoading = true;
      var params = _that.searchTable;
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        "params": JSON.stringify(params),
        "page": JSON.stringify(page)
      }
      // console.log(data);
      queryProcessToSchedule(data).then(response => {
        // console.log("tableData",response)
        const data = response.data
        // //  组合表单数据
        _that.listData.total = response.total;
        _that.tableData = response.data;
        _that.copyTableData = JSON.parse(JSON.stringify(_that.tableData));
        // console.log(_that.tableData)
        for (let i = 0; i < _that.tableData.length; i++) {
          var itemData = _that.tableData[i];
          _that.$set(itemData, 'checkIndex',(_that.listData.page - 1) *_that.listData.pageSize + i);
          // <span>{{(listData.page - 1) *listData.pageSize + scope.$index + 1}}</span>
        }
        // console.log(_that.tableData);
        _that.listLoading = false;
      }).catch(err => {
        _that.listLoading = false
      })
      //前台获取机型列表
      // console.log(data);

    },
    //获取机台任务
    getMachine(activeName, activeIndex) {
      const _that = this;
      _that.listLoadingSort = true;
      var datas = {}
      var Infos = {
        "params": JSON.stringify(datas),
      }

      queryFeedbackGroupWithTasks(Infos).then(response => {
        // console.log("queryFeedbackGroupWithTasks", response)
        _that.listLoadingSort = false;
        _that.machineInfList = response.data;
        _that.copyMachineInfList = JSON.parse(JSON.stringify(response.data));
        if (activeName) {
          _that.activeIndex = activeIndex;
          _that.activeName = activeName;
        } else {
          _that.activeIndex = 0;
          _that.activeName = _that.machineInfList[0].groupName;
        }
        _that.activeMachineInfList = response.data[_that.activeIndex].scheduledProcessList;
        for (let i = 0; i < _that.machineInfList.length; i++) {
          var machineInfLists = _that.machineInfList[i];
          var taskListNew = machineInfLists.scheduledProcessList.sort(_that.compare('sortIndex'));
          machineInfLists.scheduledProcessList = taskListNew;
          _that.$set(machineInfLists.scheduledProcessList, 'groupName', machineInfLists.groupName);
          var numOrderCount = 0;
          var numPrintCount1000 = 0;
          for (let j = 0; j < machineInfLists.scheduledProcessList.length; j++) {
            var itemData = machineInfLists.scheduledProcessList[j];
            // console.log(itemData);
            itemData.sortIndex = parseInt(j + 1)
            numOrderCount = machineInfLists.scheduledProcessList.length;
            // console.log(itemData.processNum);
            numPrintCount1000 += Number(itemData.processNum);
          }
          // console.log(numPrintCount1000* 0.001);
          _that.$set(_that.machineInfList[i], 'numOrderCountTotal', numOrderCount);
          _that.$set(_that.machineInfList[i], 'printCount1000Total', (numPrintCount1000 * 0.001).toFixed(3));
        }
      }).catch(err => {
        _that.listLoadingSort = false;
        _that.$message.error(err)
      })
    },
    getMachineStatus(activeName = '', activeIndex = 0) {
      const _that = this;
      calcFeedbackGroupTaskCollectInfo({}).then(response => {
        // console.log("calcFeedbackGroupTaskCollectInfo", response)
        _that.machineInfList = response.data;
        if (activeIndex) {
          _that.activeIndex = activeIndex;
          _that.activeName = _that.machineInfList[activeIndex].feedbackGroupName;
          _that.getMachineInfo(_that.machineInfList[activeIndex].idFeedbackGroup)
        } else {
          _that.activeIndex = 0;
          _that.activeName = _that.machineInfList[0].feedbackGroupName;
          _that.getMachineInfo(_that.machineInfList[0].idFeedbackGroup)
        }


      }).catch(err => {
        _that.$message.error(err)
      })
    },
    getMachineInfo(id) {
      const _that = this;
      _that.listLoadingSort = true;
      const params = {
        idGroup: id
      }
      getFeedbackGroupWithTasks(params).then(res => {
        // console.log(res);
        _that.activeMachineInfList = res.data.scheduledProcessList;
        _that.listLoadingSort = false;
        _that.$nextTick(() => {
          _that.$tableScrollMoveTask("multipleTable2");
          _that.$tableScrollMoveSort("multipleTableSort");
        })
      })
    },
    compare(propertyName) {
      return function (object1, object2) {
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
        if (value2 < value1) {
          return 1;
        } else if (value2 > value1) {
          return -1;
        } else {
          return 0;
        }
      }
    },
    //刷新表格
    tableRefresh() {
      //刷新变革
      this.getTableInfo()
    },
    //增加
    addBtn(formName) {
      const _that = this
      _that.$refs[formName].validate((valid) => {
        // console.log(valid);
        if (valid) {
          var info = JSON.stringify(_that.ruleForm)
          // console.log(info);
          var data = {
            "companyInfo": info,
          }

          // console.log("clientLevel",data);
          addInfo(data).then(res => {
            // console.log(res);
            if (res.httpCode == 200) {
              _that.dialogVisible = false
              _that.$message({
                message: '增加成功',
                type: 'success'
              });
              _that.tableRefresh();
            } else {
              _that.$message.error(res.msg)
            }
          }).catch(err => {
            _that.$message.error(err)
            _that.dialogVisible = true
          })
        } else {
          // console.log('error submit!!');
          return false;
        }
      });

    },
    //刷新表格
    refreshTableInfo() {
      this.getTableInfo();
      this.getMachineStatus();
    },
    //搜索
    searchData() {
      const _that = this;
      const params = {
        keyWord: _that.search.keyWord
      }
      findFeedbackGroupByKeyWord(params).then(res => {
        // console.log(res);
        if (res.data.length <= 0) {
          _that.$message("无搜索结果");
          return
        }
        _that.machinefListVisible = true;
        var data = res.data[0];
        _that.activeMachineInfList = [];
        _that.getMachineInfo(data.id);
        // _that.activeMachineInfList = _that.machineInfList[_that.activeIndex].taskList;
        _that.activeName = data.groupName;
        _that.activeName2 = data.groupName;
      })
    },
    $tableScrollMove(refName, index) {
      if (!refName || !this.$refs[refName]) return//不存在表格的ref vm 则返回
      let vmEl = this.$refs[refName].$el
      if (!vmEl) return
      //计算滚动条的位置
      const targetTop = vmEl.querySelectorAll('.elTble .el-table__body tr')[index].getBoundingClientRect().top
      const containerTop = vmEl.querySelector('.elTble .el-table__body').getBoundingClientRect().top
      const scrollParent = vmEl.querySelector('.elTble .el-table__body-wrapper')
      scrollParent.scrollTop = targetTop - containerTop;
    },
    $tableScrollMoveTask(refName) {
      if (!refName || !this.$refs[refName]) return//不存在表格的ref vm 则返回
      let vmEl = this.$refs[refName].$el
      if (!vmEl) return
      if (vmEl.querySelectorAll('.elTbleTask .el-table__body .selectorTask').length <= 0) return
      const targetTop = vmEl.querySelectorAll('.elTbleTask .el-table__body .selectorTask')[0].getBoundingClientRect().top
      const containerTop = vmEl.querySelector('.elTbleTask .el-table__body').getBoundingClientRect().top
      const scrollParent = vmEl.querySelector('.elTbleTask .el-table__body-wrapper')
      scrollParent.scrollTop = targetTop - containerTop;
    },
    $tableScrollMoveSort(refName) {
      if (!refName || !this.$refs[refName]) return//不存在表格的ref vm 则返回
      let vmEl = this.$refs[refName].$el
      if (!vmEl) return
      // console.log(vmEl.querySelectorAll('.elTbleSort .el-table__body .selectorSort'));
      if (vmEl.querySelectorAll('.elTbleSort .el-table__body .selectorSort').length <= 0) return
      const targetTop = vmEl.querySelectorAll('.elTbleSort .el-table__body .selectorSort')[0].getBoundingClientRect().top
      const containerTop = vmEl.querySelector('.elTbleSort .el-table__body').getBoundingClientRect().top
      const scrollParent = vmEl.querySelector('.elTbleSort .el-table__body-wrapper')
      scrollParent.scrollTop = targetTop - containerTop;
    },
    $tableScrollMove1(refName, index) {
      if (!refName || !this.$refs[refName]) return//不存在表格的ref vm 则返回
      let vmEl = this.$refs[refName].$el
      if (!vmEl) return
      //计算滚动条的位置
      const targetTop = vmEl.querySelectorAll('.dropTable .el-table__body tr')[index].getBoundingClientRect().top
      const containerTop = vmEl.querySelector('.dropTable .el-table__body').getBoundingClientRect().top
      const scrollParent = vmEl.querySelector('.dropTable .el-table__body-wrapper')
      // console.log(targetTop);
      // console.log(containerTop);
      scrollParent.scrollTop = targetTop - containerTop;
    },
    rowContextmenu(row, column, event) {
      const _that = this;
      _that.row = row;
      if (this.selectRow.includes(row.checkIndex)) {

      }else {
        _that.$nextTick(() => {
          _that.$refs.multipleTable.toggleRowSelection(row);
        })
      }
      _that.menuVisible1 = false;
      _that.menuVisible = true;
      _that.menuVisibleSort = false;

      // _that.$refs.multipleTable.toggleRowSelection(row);
      // 阻止右键默认行为
      event.preventDefault()
      _that.$nextTick(() => {
        _that.$refs.contextbutton.init(row, column, event);
      })
    },
    rowContextmenu2(row, column, event) {
      const _that = this;
      _that.row = row;
      _that.clickCheckId = row.id;
      _that.menuVisible = false;
      _that.menuVisible1 = true;
      _that.menuVisibleSort = false
      // _that.$refs.multipleTable.toggleRowSelection(row);
      // 阻止右键默认行为
      event.preventDefault()
      _that.$nextTick(() => {
        _that.$refs.taskbutton.init1(row, column, event);
      })
    },
    rowContextmenuSort(row, column, event) {
      const _that = this;
      _that.row = row;
      _that.menuVisible = false;
      _that.menuVisible1 = false;
      _that.menuVisibleSort = true;
      // _that.$refs.multipleTable.toggleRowSelection(row);
      // 阻止右键默认行为
      event.preventDefault()
      _that.$nextTick(() => {
        _that.$refs.sortbutton.init(row, column, event);
      })
    },
    tableRowClassName({row, rowIndex}) {
      var _that = this;
      //cuttingState
      if (row.id == _that.clickCheckId ) {
        return 'primary-row';
      }
      if ((row.craftBill.coveringState == "无此类型工序" || row.craftBill.coveringState == "已完成") && (row.craftBill.cuttingState == "无此类型工序" || row.craftBill.cuttingState == "已完成")) {
        return 'success-text';
      }
      if (row.craftBill.coveringState == "无此类型工序" || row.craftBill.coveringState == "已完成") {
        return 'primary-text';
      }

    },
    foo() { // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      this.menuVisible1 = false;
      this.menuVisibleSort = false;

      document.removeEventListener('click', this.foo)
    },
    foo1() { // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      this.menuVisible1 = false;
      this.menuVisibleSort = false;

      document.removeEventListener('click', this.foo1)
    },
    foo2() { // 取消鼠标监听事件 菜单栏
      const _that = this;
      _that.menuVisible = false;
      _that.menuVisible1 = false;
      // _that.menuVisibleSort = false;
      document.addEventListener('click', e => {
        var box = document.getElementById("contextmenuSort");
        if(box.contains(e.target)){

        }else {
          _that.menuVisibleSort = false;
        }
      }) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法

    }
  },
  watch: {
    //监听多选的选择状态、数据
    selectData(data) {
      this.selectRow = [];
      if (data.length > 0) {
        data.forEach((item, index) => {
          this.selectRow.push(item.checkIndex)
        })
      }
      //console.log(this.selectRow);
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .elTble .el-table .primary-text span {
  color: #409EFF;
}
::v-deep .elTble .el-table .success-text span {
  color: #67C23A !important;
}
::v-deep .elTbleSort .el-table .primary-text span {
  color: #409EFF;
}
::v-deep .elTbleSort .el-table .success-text span {
  color: #67C23A;
}
::v-deep.elTble .el-table .primary-row {
  background: #8cc5ff!important;
  color: #fff!important;
}
//table选中高亮
::v-deep.el-table .slecleRowColor {
  background: #8cc5ff !important;
  color: #fff !important;
}
::v-deep .hsp {
  background: yellow !important;
}

::v-deep .sortTable-con .el-button--mini {
  padding: 3px 3px !important;
}

//.tb-edit .el-input {
//  display: none
//}
//
//.tb-edit .current-row .el-input {
//  display: block
//}
//
//.tb-edit .current-row .el-input + span {
//  display: none
//}
//
//.tb-edit .el-input {
//  display: none
//}
//
//.tb-edit .current-row .el-input {
//  display: block
//}
//
//.tb-edit .current-row .el-input + span {
//  display: none
//}

.app-container {
  ::v-deep .el-card__header {
    padding: 5px 15px !important;
    font-size: 14px !important;
  }
}

.app-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}

.filter-container {
  margin-bottom: 15px;
}

.text-task {
  font-size: 14px;
  text-align: center;
  color: #7c7c7c;
  margin-left: 15px;
}

.el-table__fixed {
  padding-bottom: -5px !important;
}

.item-badge {
  margin-right: 10px;
  margin-bottom: 10px;
}
::v-deep.el-dialog__header{
  padding: 10px 10px 10px;
}
::v-deep.el-dialog__body{
  padding: 5px 20px;
}
::v-deep.el-card__header{
  padding: 5px 20px;
}
.dropTable {

  ::v-deep .el-table__body tr:hover > td {
    background-color: #8cc5ff !important;
    color: #fff !important;
  }

  ::v-deep .el-table__body tr.current-row > td {
    background-color: #8cc5ff !important;
    color: #fff !important;
  }
}
</style>
