<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="app-container">
    <factorylist @getFactory="getFactory" ref="factory"></factorylist>
    <div class="filter-container">
      <el-input size="mini" v-model.trim="search.billCode" placeholder="外协单号" style="width: 120px;" class="filter-item"/>
      <el-input size="mini" v-model.trim="search.orderCode" placeholder="订单编号" style="width: 120px;" class="filter-item"/>
      <el-input size="mini" v-model.trim="search.printBillCode" placeholder="施工单号" style="width: 120px;" class="filter-item"/>
      <el-input size="mini" v-model.trim="search.orderName" placeholder="印品名称" style="width: 120px;" class="filter-item"/>
      <el-input size="mini" v-model.trim="search.orderClientName" placeholder="客户名称" style="width: 120px;" class="filter-item"/>
      <el-input size="mini" v-model.trim="search.printName" placeholder="产品类型" style="width: 120px;" class="filter-item"/>
      <el-input size="mini" v-model.trim="search.outAssistFactoryName" placeholder="外协单位" style="width: 120px;" class="filter-item"/>
      <el-input size="mini" v-model.trim="search.processName" placeholder="工序" style="width: 120px;" class="filter-item"/>
      <el-select style="width: 250px;" @change="productInfoChange" multiple size="mini" value-key="value" v-model="billStateParms" placeholder="工单状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <br> <br>
      <el-date-picker
        size="mini"
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy - MM - dd "
        value-format="yyyy-MM-dd"
        :default-time="['00:00:00','23:59:59']">
      </el-date-picker>
      <el-select style="width: 95px;" size="mini" v-model="search.voidFlag" placeholder="作废查询">
        <el-option
          v-for="item in optionsList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button type="primary" size="mini" @click="printBillAll">批量打印</el-button>
      <el-button type="primary" size="mini" icon="el-icon-refresh" @click="getTableInfo">刷新</el-button>
    </div>
    <el-table
      size="mini"
      :data="tableData"
      @selection-change="handleSelectionChange"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :default-sort="{prop: 'orderCode',prop: 'outSourceTime', order: 'descending'}"
      default-expand-all>
      <el-table-column
        fixed
        type="selection"
        width="50"></el-table-column>
      <el-table-column
        label="#"
        fixed
        align="center"
        type="index"
        :index="indexMethod">
      </el-table-column>
      <el-table-column fixed label="操作" align="left" width="240" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button
            title="编辑"
            icon="el-icon-edit"
            v-if="row.billState<1  && row.voidFlag!=1"
            @click="handleCreateAdd(row.id,row.orderIds)"
            type="primary" size="mini">
          </el-button>
<!--          <el-button-->
<!--            title="查看详情"-->
<!--            icon="el-icon-view"-->
<!--            @click="handleDetail(row.id,row.orderIds)"-->
<!--            type="success" size="mini">-->
<!--          </el-button>-->
          <el-button title="下达" icon="el-icon-check" v-if="row.billState==0 && row.voidFlag!=1"
                     @click="handleFeedback(row,1)" type="primary" size="mini">
          </el-button>
          <el-button title="退回" icon="el-icon-back" v-if="row.billState==1  && row.voidFlag!=1" @click="handleFeedback(row,0)" type="danger"
                     size="mini">
          </el-button>
          <el-button title="反馈" icon="el-icon-refresh-left" v-if="(row.billState==1 || row.billState==0)  && row.voidFlag!=1"
                     @click="handleFeedback(row,2)" type="warning" size="mini">
          </el-button>
          <el-button title="作废" icon="el-icon-delete" v-if="row.billState<2  && row.voidFlag!=1" type="green" size="mini"
                     @click="handleVoidOutAssistBill(row.id)"></el-button>
        </template>
      </el-table-column>
      <el-table-column
        fixed
        label="外协单位"
        show-overflow-tooltip
        width="130px"
      >
        <template slot-scope="scope">
          <span> {{ scope.row.outAssistFactoryName }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed label="工单状态" align="center" width="60px" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-tag size="mini" type="warning" v-if="row.billState==0 && row.voidFlag==0">待下达</el-tag>
          <el-tag size="mini" type="success" v-if="row.billState==1  && row.voidFlag==0">已下达</el-tag>
          <el-tag size="mini" type="primary" v-if="row.billState==2  && row.voidFlag==0">已反馈</el-tag>
          <el-tag size="mini" type="info" v-if="row.voidFlag==1">已作废</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="对接状态" align="center" width="60px" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-tag size="mini" type="warning" v-if="row.syncState==0">未对接</el-tag>
          <el-tag size="mini" type="success" v-if="row.syncState==1">已对接</el-tag>
        </template>
      </el-table-column>
<!--      <el-table-column label="下机状态" align="center" width="90px" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="{row}">-->
<!--          <el-tag size="mini" type="info" v-if="row.printFeedbackFlag==0">未对接</el-tag>-->
<!--          <el-tag size="mini" type="success" v-if="row.printFeedbackFlag==1">已对接</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="下机时间" align="center" width="120px" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <span v-if="row.printFeedbackTimeLong">{{ row.printFeedbackTimeLong | getLongTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="订单消息"
        width="200px"
      >
        <template slot-scope="{row}">
          <template v-if="row.orderMessage">
            <el-button v-if="row.billType==1" size="mini" circle icon="el-icon-plus"
                       @click="openMessage(row)"></el-button>
            <a v-if="row.billType==1" href="javascript:;" style="color: #20a0ff"
               @click="openMessage(row)">{{ row.orderMessage }}</a>
          </template>
          <template v-else>
            <el-button v-if="row.billType==1" size="mini" circle icon="el-icon-plus"
                       @click="openMessage(row)"></el-button>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        label="外协单号"
        width="110px"
      >
        <template slot-scope="{row}">
                    <span @click="handleDetail(row.id,row.orderIds)"
                          style="color: #409EFF;cursor: pointer" v-html="row.billCode"></span>
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        prop="printName"
        label="产品类型">
      </el-table-column>
      <el-table-column
        label="订单编号"
        sortable
        :sort-by="['orderCode']"
        width="110px"
      >
        <template slot-scope="{row}">
          <a href="javascript:;" style="color: #20a0ff" @click="getOrderStepBtn(row)">{{ row.orderCode }}</a>
          <el-image v-if="row.firstOrderFlag == 1" :src="new_badge"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        prop="orderName"
        show-overflow-tooltip
        label="印品名称">
        <template slot-scope="scope">

          <el-tooltip :content="scope.row.orderName" placement="top-start" effect="light">
            <a class="ellipsis" href="javascript:;" style="color: #20a0ff"
               @click="openDetail(scope.row)">{{ scope.row.orderName }}</a>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        width="120px"
        sortable
        :sort-by="['outSourceTime']"
        label="交货时间"
      >
        <template slot-scope="{row}">
          {{ row.outSourceTime  | getTime }}
        </template>
      </el-table-column>

      <el-table-column
        width="60"
        prop="printQty"
        label="订单印量">
      </el-table-column>

      <el-table-column
        width="150"
        prop="containProcessStr"
        label="工序">
      </el-table-column>
      <el-table-column
        width="120"
        show-overflow-tooltip
        prop="outProcessSize"
        label="工序尺寸">
      </el-table-column>
      <el-table-column
        width="120"
        show-overflow-tooltip
        prop="breedCutSize"
        label="展开尺寸">
      </el-table-column>
      <el-table-column
        width="100"
        show-overflow-tooltip
        prop="orderSendKind"
        label="发货方式">
      </el-table-column>
      <el-table-column
        width="180px"
        label="备注">
        <template slot-scope="{row}">
          <el-popover
            placement="top-start"
            width="400"
            trigger="hover"
            :content="row.billMemo">
            <span slot="reference" style="width: 170px" class="ellipsis"> {{ row.billMemo }}</span>
          </el-popover>
        </template>

      </el-table-column>
      <el-table-column
        width="130px"
        label="建单时间"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.createTime">{{ scope.row.createTime | getTime }}</span>
        </template>
      </el-table-column>

      <!--      <el-table-column-->
      <!--        prop=""-->
      <!--        label="特殊工序">-->
      <!--      </el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop=""-->
      <!--        label="已外协工序">-->
      <!--      </el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop=""-->
      <!--        label="纸张金额">-->
      <!--      </el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop=""-->
      <!--        label="印工">-->
      <!--      </el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop=""-->
      <!--        label="后工金额">-->
      <!--      </el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop=""-->
      <!--        label="合计金额">-->
      <!--      </el-table-column>-->

      <!--      <el-table-column-->
      <!--        prop="clientName"-->
      <!--        label="客户名称">-->
      <!--      </el-table-column>-->


    </el-table>
    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page"
                :limit.sync="listData.pageSize" @pagination="getTableInfo"/>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1200px">
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>外协单</span>
            <span v-if="printOrder.billCode">({{ printOrder.billCode }})</span>
            <el-button size="mini" type="success"
                       @click="dialogStatus==='1'?addBtn('ruleForm'):editBtn('ruleForm',1)">保存并打印
            </el-button>
            <el-button size="mini" type="primary"
                       @click="dialogStatus==='1'?addBtn('ruleForm'):editBtn('ruleForm',0)">保 存
            </el-button>
            <el-button size="mini" @click="dialogVisible = false">关 闭</el-button>
          </div>
          <div>
            <el-form size="mini" label-width="130px" ref="ruleForm"
                     label-position="right">
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="订单编号">
                    <span>{{ printOrder.orderCode }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="施工单号">
                    <span>{{ printOrder.printBillCode }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="下单时间">
                    <span v-if="printOrder.createTime">{{ printOrder.createTime | getTime }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="外协单位">
                    <el-button @click="checkFactory" size="mini">{{ outAssistName }}</el-button>
                  </el-form-item>
                </el-col>
                <!--                <el-col :span="8">-->
                <!--                  <el-form-item label="联系人">-->
                <!--                    <el-input v-model="printOrder.financeCode"></el-input>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <!--                <el-col :span="8">-->
                <!--                  <el-form-item label="联系电话">-->
                <!--                    <el-input v-model="printOrder.financeCode"></el-input>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <el-col :span="8">
                  <el-form-item label="印品名称">
                    <span>{{ printOrder.orderName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="交货时间">
                    <span>{{ printOrder.outSourceTime | getTime }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="外协金额">
                    <el-input  oninput = "value=value.replace(/[^\d.]/g,'')" v-model="printOrder.outAssistMoney"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="订单印量">
                    <el-input :disabled="true" v-model="printOrder.printQty"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="物流方式">
                    <el-select v-model="printOrder.deliverMethod" placeholder="请选择">
                      <el-option label="自提自送" value="自提自送"></el-option>
                      <el-option label="管接不送" value="管接不送"></el-option>
                      <el-option label="不接管送" value="不接管送"></el-option>
                      <el-option label="不接不送" value="不接不送"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

          </div>

        </el-card>
      </el-row>
<!--      <el-row style="margin-top: 20px">-->
<!--        <el-tabs v-model="activeName" type="card">-->
<!--          <el-tab-pane label="外协工序" name="first">-->
<!--            <div>-->
<!--              <el-table-->
<!--                ref="multipleTable"-->
<!--                size="mini"-->
<!--                class="tb-edit"-->
<!--                row-key="id"-->
<!--                highlight-current-row-->
<!--                :data="uniqueProcessList"-->
<!--                tooltip-effect="dark"-->
<!--                style="width: 100%"-->
<!--              >-->
<!--                <el-table-column-->
<!--                  label="外协工序"-->
<!--                >-->
<!--                  <template slot-scope="scope">{{ scope.row.outProcessName }}</template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  label="成品尺寸"-->
<!--                >-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-input-->
<!--                      size="mini"-->
<!--                      v-model.trim="scope.row.outProcessSize"-->
<!--                      placeholder="请输入尺寸"-->
<!--                      @change="handleProcessMoney(scope.$index, scope.row.outProcessSize)"></el-input>-->
<!--                    <span>{{ scope.row.outProcessSize }}</span>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  label="开纸尺寸"-->
<!--                >-->
<!--                  <template slot-scope="scope">{{ scope.row.breedCutSize }}</template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  label="工序数量"-->
<!--                >-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-input-->
<!--                      size="mini"-->
<!--                      v-model.trim="scope.row.outProcessQty"-->
<!--                      placeholder="请输入工序数量"-->
<!--                      @change="handleProcessMoney(scope.$index, scope.row.outProcessQty)"></el-input>-->
<!--                    <span>{{ scope.row.outProcessQty }}</span>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  label="金额"-->
<!--                >-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-input-->
<!--                      size="mini"-->
<!--                      v-model.trim="scope.row.outProcessMoney"-->
<!--                      placeholder="请输入金额"-->
<!--                      @input="handleProcessMoneyTotal(scope.$index, scope.row.outProcessMoney)"></el-input>-->
<!--                    <span>{{ scope.row.outProcessMoney }}</span>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  label="备注"-->
<!--                >-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-input-->
<!--                      size="mini"-->
<!--                      v-model="scope.row.outProcessMemo"-->
<!--                      placeholder="请输入备注"-->
<!--                      @change="handleProcessMoney(scope.$index, scope.row.outProcessMemo)"></el-input>-->
<!--                    <span>{{ scope.row.outProcessMemo }}</span>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--              </el-table>-->

<!--            </div>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="施工单列表" name="second">-->
<!--            <div>-->
<!--              <el-table-->
<!--                size="mini"-->
<!--                :data="tableDataPrint"-->
<!--                style="width: 100%;"-->
<!--                row-key="id"-->
<!--                border-->
<!--                default-expand-all>-->
<!--                <el-table-column-->
<!--                  label="#"-->
<!--                  width="50px"-->
<!--                  align="center"-->
<!--                  type="index"-->
<!--                  :index="indexMethod">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  label="施工单号"-->
<!--                  width="110px"-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--                    <span>{{row.billCode}}</span>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  label="施工单名称"-->
<!--                  width="140px"-->
<!--                  show-overflow-tooltip-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--          <span @click="handleDetailPrint(row.id)" style="color: #409EFF;cursor: pointer"-->
<!--                class="ellipsis"> {{ row.billName }}</span>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  width="160px"-->
<!--                  prop="createManName"-->
<!--                  label="建单人">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  width="220px"-->
<!--                  label="订单详细信息">-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-tooltip v-if="scope.row.orderProduceInfos" placement="top-start" effect="light">-->
<!--                      <div v-html="getOrderProduceInfos(scope.row.orderProduceInfos)" slot="content"></div>-->
<!--                      <span class="ellipsis">{{scope.row.orderProduceInfos}}</span>-->
<!--                    </el-tooltip>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="billNote"-->
<!--                  label="备注">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  width="130px"-->
<!--                  label="建单时间"-->
<!--                >-->
<!--                  <template slot-scope="scope">-->
<!--                    <span v-if="scope.row.createTime">{{ scope.row.createTime | getTime }}</span>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--              </el-table>-->
<!--            </div>-->
<!--          </el-tab-pane>-->
<!--        </el-tabs>-->

<!--      </el-row>-->
      <el-row style="margin-top: 20px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>外协单备注</span></div>
          <el-form size="mini" label-width="0px">
            <el-col :span="24">
              <el-form-item label="">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入备注"
                  v-model="billMemo">
                </el-input>
                <!--                    <div-->
                <!--                      class="ProduceInfo-con"-->
                <!--                      style="width: 600px;height: 192px;border: 1px solid #dddd;padding: 5px;line-height: 18px;font-size: 12px">-->
                <!--                      <p-->
                <!--                        v-for="(item,indexItem) in orderProduceInfosArray"-->
                <!--                        :key="item.indexItem"-->
                <!--                      >{{ item }}</p>-->
                <!--                      <p v-if="printOrder.orderMemo">{{printOrder.orderMemo}}</p>-->
                <!--                    </div>-->
              </el-form-item>
            </el-col>
          </el-form>
        </el-card>

      </el-row>
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <p>金额合计：<span style="font-size: 15px;color: #409EFF">{{ totalMoney }}</span>&nbsp;元</p>-->


<!--      </div>-->
    </el-dialog>
    <!--    <servicedialog @tableRefresh="tableRefresh" ref="menuDialog" :dialogStatus="dialogStatus" :menuId="menuId" :titleDialog="titleDialog" :dialogVisible="dialogVisible"/>-->
<!--    外协单反馈开始-->
    <el-dialog title="外协单反馈与包数录入" size="mini" :visible.sync="feedBackVisible" width="1200px">
      <el-row>
        <div>
          <el-form size="mini" label-width="130px"
                   label-position="right">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="单据号">
                  <span>{{ printOrderFeedBack.orderCode }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="外协单号">
                  <span>{{ printOrderFeedBack.printBillCode }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="印件名称">
                  <span v-if="printOrderFeedBack.createTime">{{ printOrderFeedBack.createTime | getTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="外协单位">
                  <span>{{ printOrderFeedBack.outAssistFactoryName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="印品名称">
                  <span>{{ printOrderFeedBack.orderName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="外协金额">
                  <span>{{ printOrderFeedBack.outAssistMoney }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="外协单备注">
                  <span>{{ printOrderFeedBack.billMemo }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

        </div>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-tabs v-model="activeNameFeedBack" type="card">
          <el-tab-pane label="包数录入" name="one">
            <span style="line-height: 30px;color: #F56C6C">订单包数录入:包数录入请输入有效的计算表达式,比如2*3000+1*4000</span>
            <div>
              <el-table
                :cell-style="customCellStyle"
                size="mini"
                border
                class="tb-edit"
                row-key="id"
                highlight-current-row
                :data="packOrderList"
                tooltip-effect="light"
                style="width: 100%"
              >
                <el-table-column
                  label="订单编号"
                >
                  <template slot-scope="scope">{{ scope.row.orderCode }}</template>
                </el-table-column>
                <el-table-column
                  label="客户名称"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.clientName }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="印品名称"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.orderName }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="订单后工"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.allProcessStr }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="订单印量"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.orderQty }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="已打包印量"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.boxedOrderQty }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="未打包印量"
                >
                  <template slot-scope="scope">
                    <span>{{getUnpackagedNum(scope.row)}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="已打包数"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.packageQty }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="currentBoxCount"
                  label="本次打包数据"
                  width="200"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    <input style="border: 1px solid #ddd;background: #fff;width:180px;height: 30px;line-height: 30px;outline: 1px solid #ddd;" size="mini" v-model="scope.row.currentBoxCount"/>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-tab-pane>
          <el-tab-pane label="外协工序" name="two">
            <div>
              <el-table
                size="mini"
                class="tb-edit"
                row-key="id"
                highlight-current-row
                :data="uniqueProcessList"
                tooltip-effect="dark"
                style="width: 100%"
              >
                <el-table-column
                  label="外协工序"
                >
                  <template slot-scope="scope">{{ scope.row.outProcessName }}</template>
                </el-table-column>
                <el-table-column
                  label="尺寸"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.outProcessSize }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="工序数量"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.outProcessQty }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="金额"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.outProcessMoney }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="备注"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.outProcessMemo }}</span>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="feedBackVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="clickBtn" @click="feedbackOutAssistBillBtn">确 定
        </el-button>
      </div>
    </el-dialog>
<!--    外协单反馈结束-->
    <el-drawer
      title="订单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <order-message ref="orderMessage"></order-message>
    </el-drawer>
    <outside-detail ref="outsideDetail"></outside-detail>
    <printbill-detail ref="printbillDetail"></printbill-detail>
    <el-drawer
      title="订单脚印"
      :reverse="true"
      :visible.sync="drawer"
      :with-header="false">
      <el-timeline style="width: 90%;margin-top: 20px">
        <el-timeline-item v-for="step in stepList"
                          :timestamp="workTime ? (step.workTime).substring(0,19):step.workMan+'  '+(step.workTime).substring(0,19)"
                          placement="top">
          <el-card class="stepList">
            <h4 style="margin: 5px 0">{{ step.workMemo }}</h4>
            <p>{{ step.workExplain }}</p>
          </el-card>
        </el-timeline-item>

      </el-timeline>
    </el-drawer>
    <el-dialog title="订单详情" :close-on-click-modal="false" class="orderDetailDialog" :visible.sync="detailVisible" top="10px" width="1200px">
      <order-detail ref="orderDetail"></order-detail>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryOutAssistBill,
  editOutAssistBill,
  feedbackOutAssistBillList,
  voidOutAssistBill, getOutAssistOrderDetail,
  getInfoById,
  getOrderPrintBillList,
  feedbackOutAssistBill,
  outAssistDoPrint
} from '@/api/outsidebill/outsidebill.js'
import PrintbillDetail from "@/components/printbillDetail/printbillDetail";
import Pagination from '@/components/Pagination'
import {taskFeedbackStart} from "@/api/feedBack/feedBack";
import Factorylist from './components/factoryList.vue';
import OrderMessage from '@/components/orderMessage/orderMessage'
import outsideDetail from '@/components/outsideDetail/outsideDetail';
import {printBillDoPrint} from "@/api/printbill/printbill";
import {doLocalPrint} from "@/utils";
import {getOrderStepList} from "@/api/order/orderList";
import OrderDetail from "@/components/orderDetail/orderDetail";
import new_badge from '@/assets/new_badge.gif'
//外协单详情

export default {
  name: "outsidebillList",
  components: {
    Pagination,
    Factorylist,
    OrderMessage,
    outsideDetail,
    PrintbillDetail,
    OrderDetail
  },
  data() {
    return {
      new_badge: new_badge,
      detailVisible:false,
      stepList:[],
      multipleSelection: [],
      clickBtn:false,
      billMemo:"",
      idOutAssistBill:"",
      feedbackState:"",
      packOrderList:[],
      activeNameFeedBack: 'one',
      printOrderFeedBack: {},
      feedBackVisible:false,
      tableDataPrint:[],
      activeName: 'first',
      totalMoney: 0,
      typeView: "",
      options: [{
        value: '0',
        label: '待下达'
      }, {
        value: '1',
        label: '已下达'
      }, {
        value: '2',
        label: '已反馈'
      }, {
        value: '3',
        label: '已审核'
      }],
      optionsList: [{
        value: 0,
        label: '正常'
      },{
        value: 1,
        label: '已作废'
      }],
      value1: "",
      memoDrawer: false,
      idProcessArray: [],
      uniqueProcessList: [],
      outAssistName: "",
      factoryId: "",
      orderProduceInfosArray: [],
      printOrder: {},
      drawer: false,
      avtiveStep: true,
      activitiesArray: [],
      printBillBreedList: [],//生产信息
      printOrderList: [],//订单列表
      processList: [],//工序列表
      activities: [],
      printBillDetail: {},
      printVisible: false,
      cityshow: false,
      byId: "",
      dialogStatus: 1,//1增加，2修改
      dialogTitle: '',
      dialogVisible: false,
      billStateParms:["0"],
      voidFlagBtn:false,
      search: {
        billCode: '',
        printBillCode: '',
        orderCode: '',
        orderName: '',
        orderClientName: '',
        billStates: "",
        beginTime: "",
        endTime: "",
        printName: "",
        outAssistFactoryName: "",
        processName: "",
        voidFlag:0,
        billType:2
      },
      ruleForm: {},
      rules: {},
      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      listLoading: false,
      tableData: [],
    }
  },
  mounted() {
    this.getTableInfo();
  },
  methods: {
    openDetail(row) {
      //查看详情
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = row.orderIds
        _that.$refs.orderDetail.getInfo()
      })
    },
    // 获取脚印
    getOrderStepBtn(row) {
      const _that = this
      _that.drawer = true
      var data = {
        idOrder: row.orderIds
      }
      // console.log(data);
      getOrderStepList(data).then(response => {
        // console.log(response)
        const data = response.data
        _that.stepList = data
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    checkState(val) {
      // console.log(val);
      const _that = this;
      // _that.listData.page = 1;
      // _that.getTableInfo();
    },
    productInfoChange(val) {
      this.billStateParms = val;
    },
    printBillAll(){
      const _that = this;
      var ids = [];
      if (_that.multipleSelection.length <= 0) {
        _that.$message("请选择施工单");
        return
      }
      for (var i = 0; i < _that.multipleSelection.length; i++) {
        var datas = _that.multipleSelection[i];
        ids.push(datas.id)

      }
      var datas = {
        "ids": ids.join(',')
      }
      outAssistDoPrint(datas).then(response => {
        // console.log("printBillDoPrint", response);
        var PrintData = {
          '_rootData': response.data
        }
        var data = {
          PrintTemplate: 'OutSourceBill_ZD.fr3',//整单
          NeedPreview: 1,
          PrintData: JSON.stringify(PrintData)
        }
        // axios.post('http://127.0.0.1:19876', JSON.stringify(data), { headers: { 'Content-Type': 'application/json;charset=UTF-8' }}).then((res) => {
        //   console.log(res)
        // }).catch((error) => {
        //   console.log(error)
        // })

        // 以后打印调这个通用接口
        doLocalPrint(data)
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    handleSelectionChange(rows) {
      var _that = this;
      _that.multipleSelection = rows;
    },
    feedbackOutAssistBillBtn(){
      // 反馈外协单,带订单打包
      const _that = this;

      for (const x of _that.packOrderList) {
        // if (x.currentBoxCount === null || x.currentBoxCount === undefined || x.currentBoxCount === '') {
        //   this.$message('打包数量不正确')
        //   return
        // }

        // const reg = new RegExp('^[0-9*+]*$')
        // const vali = x.currentBoxCount.search(reg)
        // if (vali < 0) {
        //   this.$message.error('打包数量存在非法字符,请检查')
        //   return
        // }
        if(x.currentBoxCount == ""){

        }else {
          var regTest = /^(?:(\d+\*\d+)\+)+$/
          var valInput = x.currentBoxCount+'+';
          if(!regTest.test(valInput)){
            _that.$message.error('打包数量存在非法字符,请检查')
            return
          }
          const reg = new RegExp('^[0-9*+]*$')
          const vali = x.currentBoxCount.search(reg)
          if (vali < 0) {
            this.$message.error('打包数量存在非法字符,请检查')
            return
          }
          try {
            // eslint-disable-next-line no-eval
            eval(x.currentBoxCount)
          } catch (e) {
            this.$message.error('打包数量存在非法字符,请检查')
            return
          }
        }

        // const packCount = execMathExpress(x.currentBoxCount)
        // console.log(packCount);
      }
      _that.clickBtn = true;
      var packArray = [];
      for (let i = 0; i < _that.packOrderList.length; i++) {
        var datas = _that.packOrderList[i];
        var item = {
          idOrder:"",
          currentBoxCount:""
        }
        item.idOrder = datas.id;
        if(!datas.currentBoxCount){

        }else {
          item.currentBoxCount = datas.currentBoxCount;
          packArray.push(item)
        }

      }
      var data = {
        idOutAssistBill: _that.idOutAssistBill,
        feedbackState: _that.feedbackState,
        packOrderList: packArray
      }
      var parms = {
        "feedbackReq": JSON.stringify(data),
      }
      feedbackOutAssistBill(parms).then(res => {
        // console.log("getOutAssistOrderDetail22", res);
        if (res.httpCode == 200) {
          _that.$message('反馈成功')
          _that.feedBackVisible = false;
          _that.getTableInfo();
        } else {
          // _that.$message.error(res.msg)
        }
        _that.clickBtn = false;
      }).catch(err => {
        // _that.$message.error(err)
        _that.clickBtn = false;
      })
    },
    getUnpackagedNum(row){
      return parseInt(row.orderQty)- parseInt(row.boxedOrderQty) || ""
    },
    handleDetailPrint(id) {
      const _that = this;
      _that.$refs.printbillDetail.idOrder = id;
      _that.$refs.printbillDetail.printVisible = true;
      _that.$refs.printbillDetail.getDetail()
    },
    customCellStyle({row, column, rowIndex, columnIndex}) {
      if (column.property === 'currentBoxCount') {
        return {
          background: '#f7b1b180'
        }
      }
    },
    // 订单消息
    openMessage(row) {
      var _that = this
      _that.memoDrawer = true
      _that.$nextTick(function () {
        // console.log(_that.$refs.orderMemo);
        _that.$refs.orderMessage.idOrder = row.orderIds
        _that.$refs.orderMessage.getList()
      })
    },
    getFactory(id, outAssistName) {
      this.factoryId = id;
      this.outAssistName = outAssistName;
    },
    getOrderProduceInfos(str){
      // console.log(str);
      //郑州鑫源制衣_6000`[封面]尺寸：210*285_样式：横板_P数：双面印4_数量：6000_克重纸张类型：128克鹿鸣铜版C_`[内文]P数：24_克重纸张类型：105克通用铜版C_`
      var newStr = str.replace(/`/g,"<br/>")
      // console.log(newStr);
      return newStr
    },
    checkFactory() {
      const _that = this;
      _that.factoryId = "";
      this.$refs.factory.outerVisible = true
    },
    handleFeedback(row, state) {
      // console.log(row);
      const _that = this;
      _that.packOrderList=[];
      _that.idOutAssistBill = row.id;
      _that.feedbackState = state
      if(state==2){
        _that.feedBackVisible = true;
        var data = {
          "id": row.id
        }
        getInfoById(data).then(res => {
          // console.log("getOutAssistOrderDetail22", res);
          if (res.httpCode == 200) {
            _that.uniqueProcessList = [];
            _that.printOrderFeedBack = res.data;
            // console.log(_that.printOrderFeedBack);
            _that.packOrderList = res.data.packOrderList;
            for (let i = 0; i < res.data.packOrderList.length; i++) {
              _that.$set(res.data.packOrderList[i], 'currentBoxCount', "");
            }
            for (let i = 0; i < res.data.outAssistBillItemList.length; i++) {
              var item = res.data.outAssistBillItemList[i];
              if(!item.outProcessMoney){
                _that.totalMoney= 0
              }else {
                _that.totalMoney+=parseInt(item.outProcessMoney);
              }
              _that.uniqueProcessList.push(item);
            }

          } else {
            _that.$message.error(res.msg)
          }
        }).catch(err => {
          _that.$message.error(err)
        })
      }else {
        var datas = {
          ids: row.id,
          state: state
        }
        var Infos = {
          "params": datas,
        }
        feedbackOutAssistBillList(Infos).then(response => {
          // console.log("taskFeedbackPause", response);
          _that.$message("成功");
          _that.getTableInfo();
        }).catch(err => {
          _that.$message.error(err);
        })
      }
    },
    handleProcessMoneyTotal(index, value) {
      var _that = this;
      if (!value || isNaN(value)) {
        _that.uniqueProcessList[index].outProcessMoney = "";
      }
      _that.totalMoney = 0;
      for (let i = 0; i < _that.uniqueProcessList.length; i++) {
        var item = _that.uniqueProcessList[i];

        if (!item.outProcessMoney) {
          _that.totalMoney = 0
        } else {
          _that.totalMoney += parseFloat(item.outProcessMoney);
        }

      }
    },
    handleVoidOutAssistBill(id) {
      const _that = this;
      _that.$confirm('此操作将作废改外协单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = {
          id: id
        }
        // console.log(data);
        voidOutAssistBill(data).then(res => {
          _that.$message("作废成功");
          _that.getTableInfo();
        }).catch(err => {
          _that.$message.error(err)
        })
      }).catch(() => {
      });
    },
    //获取列表
    getTableInfo() {
      const _that = this;
      _that.listLoading = true;
      var ids = []
      if (_that.billStateParms.length>0) {
        for (let i = 0; i <_that.billStateParms.length; i++) {
          var datas = _that.billStateParms[i];
          ids.push(datas)
        }
        var idRemotes = ids.join(',');

        _that.search.billStates = idRemotes;
      }else {
        _that.search.billStates = "";
      }
      var params = _that.search;
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize,
      }
      var data = {
        "params": JSON.stringify(params),
        "page": JSON.stringify(page),
      }
      queryOutAssistBill(data).then(response => {
        // console.log("getInfoOutAssist",response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.listLoading = false
      })
    },
    getOrderStep(id) {
      const _that = this;

      var data = {
        idPrintBill: id
      }
      getPrintBillSteps(data).then(res => {
        var datas = res.data;
        // console.log("getPrintBillSteps", res);
        _that.activitiesArray = res.data;
        if (_that.activitiesArray.length <= 0) {
          _that.$message("暂无脚印");
          return
        }
        _that.drawer = true;
        // if(_that.activities.length<=10){
        //   _that.activitiesArray = _that.activities;
        // }else {
        //   _that.activitiesArray = _that.activities.slice(0,9);
        // }


      }).catch(err => {
        _that.$message.error(err)
      })
    },
    handleClose() {
      const _that = this;
      _that.avtiveStep = !_that.avtiveStep;
      _that.activitiesArray = _that.activities.slice(0, 9);
    },
    handleOpen() {
      const _that = this;
      _that.avtiveStep = !_that.avtiveStep;
      _that.activitiesArray = _that.activities;
    },
    handleDetail(id,orderIds) {
      const _that = this;
      _that.$refs.outsideDetail.idOrder = id;
      _that.$refs.outsideDetail.orderIds = orderIds;
      _that.$refs.outsideDetail.billType = 2;

      _that.$refs.outsideDetail.dialogVisible = true;
      _that.$refs.outsideDetail.getOutsideDetail();
      _that.$refs.outsideDetail.activeName = "three";
    },
    //修改外协单信息
    handleCreateAdd(id, orderIds) {
      const _that = this;
      _that.printOrder.deliverMethod = "";
      _that.ruleForm = {}
      _that.billMemo = "";
      _that.dialogTitle = '编辑';
      _that.outAssistName = "选择外协单位";
      _that.factoryId = "";
      _that.dialogStatus = '2';
      _that.dialogVisible = true;
      _that.idCheck = id;
      _that.byId = id;
      var data = {
        "id": id,
      }
      getInfoById(data).then(res => {
        // console.log("getOutAssistOrderDetail22", res);
        _that.totalMoney = 0
        if (res.httpCode == 200) {
          _that.uniqueProcessList = [];
          _that.printOrder = res.data;
          _that.factoryId = res.data.idOutAssistFactory;
          _that.outAssistName = res.data.outAssistFactoryName;
          _that.printOrder.deliverMethod = res.data.deliverMethod;
          // console.log(_that.printOrder.deliverMethod);
          //_that.outAssistName
          for (let i = 0; i < res.data.outAssistBillItemList.length; i++) {
            var item = res.data.outAssistBillItemList[i];
            if (!item.outProcessMoney) {
              _that.totalMoney = 0
            } else {
              _that.totalMoney += parseInt(item.outProcessMoney);
            }
            _that.uniqueProcessList.push(item);
          }
          _that.orderProduceInfosArray = res.data.billMemo.split('`');
          // console.log(_that.orderProduceInfosArray);
          for (let i = 0; i < _that.orderProduceInfosArray.length; i++) {
            var datas = _that.orderProduceInfosArray[i];
            _that.billMemo += datas;
          }

        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
      })

      var dataOrders = {
        "idOrders": orderIds,
      }
      getOrderPrintBillList(dataOrders).then(res => {
        // console.log("getOrderPrintBillList11", res);
        if (res.httpCode == 200) {
          _that.tableDataPrint = res.data;
          // console.log(_that.tableDataPrint);
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },


    //唤起修改
    // handleUpdate(id) {
    //   const _that = this;
    //   _that.dialogTitle = '修改外协单信息'
    //   _that.dialogVisible = true
    //   _that.dialogStatus = '2';
    //   _that.byId = id;
    // },
    //修改档案
    editBtn(formName,type) {
      const _that = this
      _that.idProcessArray = [];
      // for (let i = 0; i < _that.uniqueProcessList.length; i++) {
      //   var datas = _that.uniqueProcessList[i];
      //   // console.log(datas);
      //   var outAssistBillItem = {
      //     id: "",
      //     outProcessSize: "",
      //     outProcessQty: "",
      //     outProcessMoney: "",
      //     outProcessMemo: "",
      //   }
      //   outAssistBillItem.id = datas.id;
      //   outAssistBillItem.outProcessSize = datas.outProcessSize;
      //   outAssistBillItem.outProcessQty = datas.outProcessQty;
      //   outAssistBillItem.outProcessMoney = datas.outProcessMoney;
      //   outAssistBillItem.outProcessMemo = datas.outProcessMemo;
      //   _that.idProcessArray.push(outAssistBillItem)
      // }
      var dataForm = {
        id: _that.byId,
        idOutAssistFactory: _that.factoryId,
        outAssistFactoryName: _that.outAssistName,
        // outSourceTime: _that.printOrder.outSourceTime,
        billMemo: _that.billMemo,
        deliverMethod: _that.printOrder.deliverMethod,
        outAssistMoney: _that.printOrder.outAssistMoney
      }
      // console.log("dataFormred",dataForm);
      var info = JSON.stringify(dataForm)
      var data = {
        "outAssistBill": info,
      }
      // console.log(data);

      editOutAssistBill(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.dialogVisible = false
          _that.$message({
            message: '修改成功',
            type: 'success'
          });
          if (type == 1) {
            var datasIds = {
              "ids":_that.byId
            }
            outAssistDoPrint(datasIds).then(response => {
              // console.log("printBillDoPrint", response);
              var PrintData = {
                '_rootData': response.data
              }
              // console.log(PrintData);
              var data = {
                PrintTemplate: 'OutSourceBill_XQD.fr3',
                NeedPreview: 1,
                PrintData: JSON.stringify(PrintData)
              }
              // axios.post('http://127.0.0.1:19876', JSON.stringify(data), { headers: { 'Content-Type': 'application/json;charset=UTF-8' }}).then((res) => {
              //   console.log(res)
              // }).catch((error) => {
              //   console.log(error)
              // })
              // 以后打印调这个通用接口
              doLocalPrint(data)
            }).catch(err => {
              _that.$message.error(err)
            })
          }
          _that.tableRefresh();
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
        _that.dialogVisible = true
      })

    },
    //刷新表格
    tableRefresh() {
      //刷新变革
      this.getTableInfo()
    },

    //搜索
    searchData() {
      // console.log(this.value1);
      if (this.value1.length > 0) {
        this.search.beginTime = this.value1[0] + " 00:00:00";
        this.search.endTime = this.value1[1] + " 23:59:59";
      }
      this.listData.page = 1;
      this.getTableInfo()
    },
    //序号
    indexMethod(index) {
      return index + 1;
    }
  }
}
</script>
<style>
.area-select .area-selected-trigger {
  padding: 0px 20px 7px 12px !important;
}

.area-select {
  height: 40px !important;
}
</style>

<style lang="scss" scoped>
.tb-edit .el-input {
  display: none
}
::v-deep .el-input__inner{
  border: 1px solid #ddd !important;
  background: #fff !important;
 }

.tb-edit .current-row .el-input {
  display: block
}

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

.card-tit {
  float: left;
  height: 100%;
  min-height: 200px;
  max-height: 200px;
  font-size: 14px;
  color: #7c7c7c;
  width: 20px;
  margin: 0 auto;
  line-height: 20px;
  padding: 20px;
  padding-left: 10px;
  border-right: 1px solid #ddd;
}

.area-select {
  height: 40px;
}

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

.print-tit {
  color: #7c7c7c;
}

.print-con {
  color: #333;
}

.item-print {
  margin-bottom: 10px;
}

.el-timeline {
  padding: 0px;
  padding-top: 15px;
}
</style>
