<template>
  <!-- 委外下一步 -->
  <div class="card">
    <div class="c_header_title">
      <div class="c_title">委外请托</div>
    </div>

    <div class="card_box">
      <el-form
        label-width="100px"
        :rules="rules"
        ref="form"
        :model="attributeData"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="委外名称:" prop="name">
              <el-input
                v-model="attributeData.name"
                class="full"
                :disabled="isInfo"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="委外类型:" prop="type">
              <el-select
                v-model="attributeData.type"
                class="full"
                :disabled="isInfo"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="委外工序:" prop="taskIdes">
              <el-select
                v-model="attributeData.taskIdes"
                @change="changeTaskId"
                multiple
                class="full"
                :disabled="isInfo"
              >
                <el-option
                  v-for="item in newStepsList"
                  :key="item.taskId"
                  :label="item.taskTypeName"
                  :value="item.taskId"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="委外场景:" prop="sceneText">
              <el-input
                v-model="attributeData.sceneText"
                disabled
                class="full"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="直接入库:" prop="warehouseId">
              <el-select
                v-if="attributeData.clientEnvironmentId == 2 || isInWarehouse"
                v-model="attributeData.warehouseId"
                placeholder="请选择"
                class="full"
                :disabled="isInfo"
              >
                <el-option
                  v-for="item in warehouseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <span v-else style="font-size: 15px">是</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="委外单位:" prop="supplierId">
              <el-select
                v-model="attributeData.supplierId"
                placeholder="请选择"
                filterable
                class="full"
                :disabled="isInfo"
              >
                <el-option
                  v-for="item in gysList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="isInfo">
            <el-form-item label="委外数量:" prop="formedNumLast">
              <el-input
                placeholder="请输入委外数量"
                type="number"
                v-model="attributeData.formedNumLast"
                class="full"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="isInfo">
            <el-form-item label="交付日期:" prop="requireDeliveryTime">
              <el-date-picker
                v-model="attributeData.requireDeliveryTime"
                class="full"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="isInfo">
            <el-form-item label="交付类型:" prop="deliveryMethod">
              <el-select
                v-model="attributeData.deliveryMethod"
                placeholder="请选择"
                @change="changeMethod"
                style="width: 135px"
              >
                <el-option
                  v-for="item in deliveryMethodTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>

              <el-link
                type="primary"
                :underline="false"
                @click="setBatchTime"
                v-if="attributeData.deliveryMethod == 2"
                style="margin-left: 10px"
              >
                设置分批时间
              </el-link>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="isInfo">
            <el-form-item label="是否尾工序:" prop="isLast">
              <el-radio-group v-model="attributeData.isLast">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="btn-box" v-if="!isInfo">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save"> 确认 </el-button>
      </div>
    </div>

    <el-tabs v-model="activeName" v-if="timeList.length == 0">
      <el-tab-pane label="物品清单" name="0">
        <div class="materialList">
          <div class="u-reset">
            <el-button
              type="primary"
              size="small"
              class="u-reset-button"
              @click="openPicking(2, 'goods')"
              v-if="pickOutInList.length == 0 && isInfo"
            >
              添加
            </el-button>
          </div>

          <el-table
            ref="pickOutRef"
            class="table_content"
            :max-height="600"
            :data="pickOutInList"
            tooltip-effect="dark"
            style="width: 100%; margin-top: 10px"
            stripe
            border
            @select="handleRowSelect"
            @select-all="handleSelectAll"
            @selection-change="selectionPickOut"
          >
            <el-table-column align="center" type="selection" width="55">
            </el-table-column>
            <el-table-column label="序号" type="index" width="55">
              <template slot-scope="{ row, $index }">
                {{ $index + 1 }}
              </template>
            </el-table-column>

            <el-table-column
              label="编码"
              type="code"
              minWidth="110"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.categoryCode }}
              </template>
            </el-table-column>
            <el-table-column
              label="名称"
              type="name"
              minWidth="110"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.name }}
                <!-- ({{
							row.rootCategoryLevelId == 2
							? '在制品'
							: row.rootCategoryLevelId == 23
							? '半成品'
							: row.rootCategoryLevelId == 9
							? '产品'
							: item.rootCategoryLevelId == 28
							? '废品'
							: ''
						}}) -->
              </template>
            </el-table-column>

            <el-table-column
              label="型号"
              type="modelType"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.modelType }}
              </template>
            </el-table-column>

            <el-table-column
              label="规格"
              type="specification"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.specification }}
              </template>
            </el-table-column>

            <el-table-column label="牌号" type="brandNum" show-overflow-tooltip>
              <template slot-scope="{ row, $index }">
                {{ row.brandNum }}
              </template>
            </el-table-column>

            <el-table-column
              label="数量"
              type="feedQuantity"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                <el-input
                  v-model="row.feedQuantity"
                  v-if="row.isSelection == '1'"
                  @input="inputNum(row, $index)"
                ></el-input>
                <span v-else> {{ row.feedQuantity }}</span>
              </template>
              <!-- <template slot-scope="{ row, $index }" v-else>
                {{ row.feedQuantity }}
              </template> -->
            </el-table-column>

            <el-table-column
              label="重量"
              type="weightUnit"
              width="120"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.newWeight || 0 }} {{ row.weightUnit }}
              </template>
            </el-table-column>
            <el-table-column label="刻码" type="engrave" show-overflow-tooltip>
              <template slot-scope="{ row, $index }">
                {{ row.extInfo.engrave }}
              </template>
            </el-table-column>

            <el-table-column
              label="物料代号"
              type="materielCode"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.extInfo.materielCode }}
              </template>
            </el-table-column>
            <el-table-column
              label="客户代号"
              type="clientCode"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.extInfo.clientCode }}
              </template>
            </el-table-column>

            <el-table-column label="操作" show-overflow-tooltip fixed="right">
              <template slot-scope="{ row, $index }">
                <el-button type="text" @click="deleteData(row, $index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="带料清单" name="1">
        <div class="materialList">
          <div class="u-reset">
            <el-button
              type="primary"
              size="small"
              class="u-reset-button"
              @click="openPicking(2, 'belting')"
            >
              添加
            </el-button>
          </div>

          <div v-for="(item, index) in bomMaterialList" :key="index">
            <label class="listBox rx-bs">
              <div class="listBox-con">
                <div class="listBox-bottom rx">
                  <div class="items"> <span>序号</span>{{ index + 1 }} </div>
                  <div class="items" :title="item.name">
                    <span>名称</span>{{ item.name }}
                  </div>

                  <div class="items" :title="item.code">
                    <span>编码</span>{{ item.code }}
                  </div>

                  <div
                    v-for="(itm, index) in tableH(item.rootCategoryLevelId)"
                    :key="index"
                    class="items"
                    v-if="!itm.formatter"
                  >
                    <span>{{ itm.label }}</span
                    >{{ item[itm.prop] }}
                  </div>

                  <div
                    class="items"
                    v-if="item.isDemandQuantity && clientEnvironmentId != 2"
                    style="width: 15%"
                  >
                    <span>数量</span>
                    <input
                      style="width: 90% !important"
                      v-model="item.demandQuantity"
                    />
                    {{ item.measuringUnit }}
                  </div>
                  <div
                    class="items content_num"
                    v-if="!item.isDemandQuantity && clientEnvironmentId != 2"
                    style="width: 15%"
                  >
                    <span>数量</span>
                    <input
                      style="width: 90% !important"
                      v-model="item.demandQuantity"
                    />
                    {{ item.measuringUnit }}
                  </div>

                  <div
                    class="items"
                    v-if="item.isDemandQuantity && clientEnvironmentId == 2"
                    style="width: 15%"
                  >
                    <span>数量</span
                    >{{ item.count * (outObj.formedNumLast || 1) }}
                  </div>
                  <div
                    class="items content_num"
                    v-if="!item.isDemandQuantity && clientEnvironmentId == 2"
                    style="width: 15%"
                  >
                    <span>数量</span>
                    <input
                      style="width: 90% !important"
                      v-model="item.demandQuantity"
                    />
                    {{ item.measuringUnit }}
                  </div>

                  <div>
                    <el-button type="text" @click="convertList(item, index)"
                      >转物品清单</el-button
                    >

                    <el-button
                      type="text"
                      style="color: red"
                      @click="deleteBomMaterial(item, index)"
                      >删除</el-button
                    >
                  </div>
                </div>
              </div>
            </label>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="产出清单" name="2">
        <div class="materialList">
          <div class="u-reset">
            <!-- <el-button
              type="primary"
              size="small"
              class="u-reset-button"
              @click="openPicking(3, 'output')"
            >
              添加
            </el-button> -->
          </div>
          <div v-for="(item, index) in standardOutputList" :key="index">
            <label class="listBox rx-bs">
              <div class="listBox-con">
                <div class="listBox-bottom rx">
                  <div class="items" style="width: 15%">
                    <span>序号</span>{{ index + 1 }}
                  </div>
                  <div class="items"> <span>名称</span>{{ item.name }} </div>

                  <div class="items"> <span>编码</span>{{ item.code }} </div>

                  <div
                    v-for="(itm, index) in tableH(item.rootCategoryLevelId)"
                    :key="index"
                    class="items"
                    v-if="!itm.formatter"
                  >
                    <span>{{ itm.label }}</span
                    >{{ item[itm.prop] }}
                  </div>

                  <div class="items">
                    <span>数量</span>
                    <input
                      style="width: 30% !important"
                      v-model="item.demandQuantity"
                    />
                  </div>

                  <div
                    class="items"
                    v-if="item.isSelection && item.isSelection == '1'"
                  >
                    <span>产出工序</span>
                    <el-select v-model="item.taskId" placeholder="请选择">
                      <el-option
                        v-for="item in outObj.taskDataList"
                        :key="item.taskId"
                        :label="item.taskTypeName"
                        :value="item.taskId"
                      >
                      </el-option>
                    </el-select>
                  </div>

                  <div>
                    <el-button
                      type="text"
                      @click="deleteOutput(index)"
                      style="color: red"
                      >删除</el-button
                    >
                  </div>
                </div>
              </div>
            </label>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-tabs v-model="activeBatch" v-else type="card">
      <el-tab-pane
        v-for="(it, index) in timeList"
        :key="it.batchNo"
        :label="it.batchNo"
        :name="it.batchNo"
      >
        <!-- 内层 Tabs（物品/带料/产出） -->
        <el-tabs v-model="it.innerActive" type="border-card">
          <!-- 物品清单 -->
          <el-tab-pane label="物品清单" name="0">
            <div class="materialList">
              <el-table
                ref="pickOutRefs"
                class="table_content"
                :max-height="600"
                :data="it.pickOutInList"
                tooltip-effect="dark"
                style="width: 100%; margin-top: 10px"
                stripe
                border
                @selection-change="selectionPickOut"
              >
                <el-table-column
                  align="center"
                  type="selection"
                  width="55"
                  v-if="it.batchNo == '一次性到货'"
                >
                </el-table-column>
                <el-table-column label="序号" type="index" width="55">
                  <template slot-scope="{ row, $index }">
                    {{ $index + 1 }}
                  </template>
                </el-table-column>

                <el-table-column
                  label="编码"
                  type="code"
                  minWidth="110"
                  show-overflow-tooltip
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.categoryCode }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="名称"
                  type="name"
                  minWidth="110"
                  show-overflow-tooltip
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.name }}
                    <!-- ({{
							row.rootCategoryLevelId == 2
							? '在制品'
							: row.rootCategoryLevelId == 23
							? '半成品'
							: row.rootCategoryLevelId == 9
							? '产品'
							: item.rootCategoryLevelId == 28
							? '废品'
							: ''
						}}) -->
                  </template>
                </el-table-column>

                <el-table-column
                  label="型号"
                  type="modelType"
                  show-overflow-tooltip
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.modelType }}
                  </template>
                </el-table-column>

                <el-table-column
                  label="规格"
                  type="specification"
                  show-overflow-tooltip
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.specification }}
                  </template>
                </el-table-column>

                <el-table-column
                  label="牌号"
                  type="brandNum"
                  show-overflow-tooltip
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.brandNum }}
                  </template>
                </el-table-column>

                <el-table-column
                  label="数量"
                  type="feedQuantity"
                  show-overflow-tooltip
                >
                  <template slot-scope="{ row, $index }">
                    <el-input
                      v-model="row.feedQuantity"
                      v-if="row.isSelection == '1'"
                      @input="inputNum(row, $index)"
                    ></el-input>
                    <span v-else> {{ row.feedQuantity }}</span>
                  </template>
                  <!-- <template slot-scope="{ row, $index }" v-else>
                {{ row.feedQuantity }}
              </template> -->
                </el-table-column>

                <el-table-column
                  label="重量"
                  type="weightUnit"
                  width="120"
                  show-overflow-tooltip
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.newWeight || 0 }} {{ row.weightUnit }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="刻码"
                  type="engrave"
                  show-overflow-tooltip
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.extInfo.engrave }}
                  </template>
                </el-table-column>

                <el-table-column
                  label="物料代号"
                  type="materielCode"
                  show-overflow-tooltip
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.extInfo.materielCode }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="客户代号"
                  type="clientCode"
                  show-overflow-tooltip
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.extInfo.clientCode }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="带料清单" name="1">
            <div class="materialList">
              <div v-for="(item, index) in it.bomMaterialList" :key="index">
                <label class="listBox rx-bs">
                  <div class="listBox-con">
                    <div class="listBox-bottom rx">
                      <div class="items">
                        <span>序号</span>{{ index + 1 }}
                      </div>
                      <div class="items" :title="item.name">
                        <span>名称</span>{{ item.name }}
                      </div>

                      <div class="items" :title="item.code">
                        <span>编码</span>{{ item.code }}
                      </div>

                      <div
                        v-for="(itm, index) in tableH(item.rootCategoryLevelId)"
                        :key="index"
                        class="items"
                        v-if="!itm.formatter"
                      >
                        <span>{{ itm.label }}</span
                        >{{ item[itm.prop] }}
                      </div>

                      <div
                        class="items"
                        v-if="item.isDemandQuantity && clientEnvironmentId != 2"
                        style="width: 15%"
                      >
                        <span>数量</span
                        >{{
                          checkListLen == 0
                            ? item.demandQuantity
                            : item.count * (checkListLen || 1)
                        }}
                        {{ item.unit }}
                      </div>
                      <div
                        class="items content_num"
                        v-if="
                          !item.isDemandQuantity && clientEnvironmentId != 2
                        "
                        style="width: 15%"
                      >
                        <span>数量</span>
                        <!-- <input
                          style="width: 90% !important"
                          v-model="item.demandQuantity"
                          disabled
                        /> -->
                        {{ item.demandQuantity }}
                        {{ item.measuringUnit }}
                      </div>

                      <div
                        class="items"
                        v-if="item.isDemandQuantity && clientEnvironmentId == 2"
                        style="width: 15%"
                      >
                        <span>数量</span
                        >{{ item.count * (outObj.formedNumLast || 1) }}
                      </div>
                      <div
                        class="items content_num"
                        v-if="
                          !item.isDemandQuantity && clientEnvironmentId == 2
                        "
                        style="width: 15%"
                      >
                        <span>数量</span>
                        <!-- <input
                          style="width: 90% !important"
                          v-model="item.demandQuantity"
                          disabled
                        /> -->
                        {{ item.demandQuantity }}
                        {{ item.measuringUnit }}
                      </div>
                    </div>
                  </div>
                </label>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="产出清单" name="2">
            <div class="materialList">
              <div class="u-reset"> </div>
              <div v-for="(item, index) in it.standardOutputList" :key="index">
                <label class="listBox rx-bs">
                  <div class="listBox-con">
                    <div class="listBox-bottom rx">
                      <div class="items" style="width: 15%">
                        <span>序号</span>{{ index + 1 }}
                      </div>
                      <div class="items">
                        <span>名称</span>{{ item.name }}
                      </div>

                      <div class="items">
                        <span>编码</span>{{ item.code }}
                      </div>

                      <div
                        v-for="(itm, index) in tableH(item.rootCategoryLevelId)"
                        :key="index"
                        class="items"
                        v-if="!itm.formatter"
                      >
                        <span>{{ itm.label }}</span
                        >{{ item[itm.prop] }}
                      </div>

                      <div class="items">
                        <span>数量</span>
                        <!-- <input
                          style="width: 30% !important"
                          v-model="item.demandQuantity"
                          disabled
                        /> -->
                        {{ item.demandQuantity }}
                        {{ item.measuringUnit }}
                      </div>

                      <div
                        class="items"
                        v-if="item.isSelection && item.isSelection == '1'"
                      >
                        <span>产出工序</span>
                        <el-select v-model="item.taskId" placeholder="请选择">
                          <el-option
                            v-for="item in outObj.taskDataList"
                            :key="item.taskId"
                            :label="item.taskTypeName"
                            :value="item.taskId"
                          >
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                  </div>
                </label>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>

    <div class="operate_box" v-if="isInfo">
      <el-button
        size="small"
        class="u-reset-button"
        @click="close"
        style="margin-left: 10px"
      >
        取消
      </el-button>
      <el-button
        type="primary"
        size="small"
        class="u-reset-button"
        @click="handOK(0)"
      >
        确认
      </el-button>

      <el-button
        type="primary"
        size="small"
        class="u-reset-button"
        @click="handOK(1)"
      >
        提交
      </el-button>
    </div>

    <pickingList
      ref="pickingListRef"
      isType="weiwai"
      @allSelection="allSelection"
    ></pickingList>

    <timeDialog ref="timeDialogRef" @chooseTime="chooseTime"></timeDialog>
  </div>
</template>

<script>
  import { applyoutsourceSave } from '@/api/produce/index.js';
  import {
    getWarehouseList,
    producerouting,
    checkOutsourceMaterial
  } from '@/api/produce/index.js';
  import { contactList } from '@/api/produce/bom.js';
  import { tableHeader } from '@/utils/dict/common.js';
  import { batchOutsourcing } from '@/api/outsourcing';

  import pickingList from './pickingList.vue';
  import timeDialog from './timeDialog.vue';
  export default {
    components: { pickingList, timeDialog },
    data() {
      return {
        checkListLen: 0,
        checkedAll: true,
        checkList: [],
        mode: 'center',
        show: false,
        topHight: 20 || 20,
        activeName: '0',
        outObj: {
          name: '111',
          type: 4,
          isInWarehouse: 1
        },
        isInWarehouse: true,

        tabList: [
          {
            name: '物品清单'
          },
          {
            name: '带料清单'
          },
          {
            name: '产出清单'
          }
        ],

        actTab: '物品清单',
        datapickOutInList: [],
        bomMaterialList: [],
        pickOutInList: [],
        materialList: [],
        standardOutputList: [],

        isFirstTask: null,
        isLoading: null,

        // clientEnvironmentId: uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo")
        // 	.clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境

        seletedAll: false, //全选状态

        warehouseList: [],
        pickOutInListSelect: [],
        selectionIds: [],
        newStepsList: [],
        gysList: [],
        outsourceData: {},
        attributeData: {
          name: '',
          type: '', //类型
          sceneText: '', //场景
          formedNumLast: '', //数据
          taskIds: '', //委外到
          isFirstTask: '',
          clientEnvironmentId: 1, //直接入库
          requireDeliveryTime: '', //计划交期
          warehouseId: '', //仓库id
          produceRoutingId: '', //工艺路线id
          supplierId: '', //供应商id
          supplierName: '',
          taskIdes: [],
          factoriesId: '',
          factoriesName: '',
          taskDataList: [],
          priority: '',
          deliveryMethod: 1,
          isLast: 0
        },
        timeList: [],
        rules: {
          name: [
            { required: true, message: '请输入委外名称', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择委外类型', trigger: 'blur' }
          ],
          formedNumLast: [
            { required: true, message: '请输入委外数量', trigger: 'blur' }
          ],
          taskIdes: [
            { required: true, message: '请选择委外工序', trigger: 'blur' }
          ],
          sceneText: [
            { required: true, message: '请选择委外场景', trigger: 'blur' }
          ],
          warehouseId: [{ required: true, message: '请选择', trigger: 'blur' }],
          requireDeliveryTime: [
            { required: true, message: '请选择计划交期时间', trigger: 'blur' }
          ]
        },
        typeList: [
          {
            id: 4,
            name: '带料生产委外'
          },
          {
            id: 5,
            name: '不带料生产委外'
          }
        ],
        newStepsList: [],
        produceList: [],
        deliveryMethodTypeList: [
          {
            name: '一次性到货',
            value: 1
          },
          {
            name: '分批到货',
            value: 2
          }
        ],
        isInfo: false,

        activeBatch: '',

        defaultInnerActive: '0',
        outsourcedQuantity: ''
      };
    },

    created() {
      console.log(this.workData, '89586');
      this.outsourceData = this.deepCopy(this.outObj);
      // this.getWarehouseFn();
      this.getContactList();
      if (this.chooseType == '1') {
        this.attributeData.name = this.taskObj.name
          ? this.taskObj.name + '委外'
          : this.taskObj.taskTypeName + '委外';
      }
    },

    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },

    props: {
      taskObj: {
        type: Object,
        default: ''
      },
      chooseType: {
        type: String,
        default: '1'
      },
      outsourceFormVal: {
        type: Object,
        default: () => {}
      },
      workData: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      outsourceFormVal: {
        handler(val) {
          Object.assign(this.attributeData, val);

          if (this.clientEnvironmentId == 3) {
            if (
              this.attributeData.newStepsList &&
              this.attributeData.newStepsList.length != 0
            ) {
              this.newStepsList = this.attributeData.newStepsList.filter(
                (item) => item.type != 6
              );
            }
          } else {
            this.newStepsList = this.attributeData.newStepsList;
          }

          this.getWarehouseFn();
          this.produceFn();
        },
        deep: true,
        immediate: true
      }
    },

    methods: {
      allSelection(e, item, type) {
        if (e == 2) {
          if (type == 'goods') {
            item.map((it) => {
              it.isSelection = '1';
              it.categoryCode = it.code;
              it.feedQuantity = 1;
              it.categoryId = it.id;
              it.newWeight = it.weight;
              it.checked = true;
              this.pickOutInList.push(this.deepCopy(it));
            });
            this.changNumber(this.pickOutInList);
            this.selectionData();
          } else {
            if (item.length) {
              item.map((v) => {
                this.bomMaterialList.push(v);
              });
            }
          }
        } else if (e == 3) {
          if (item.length) {
            item.map((it) => {
              it.isSelection = '1';
              it.categoryCode = it.code;
              it.feedQuantity = 1;
              it.categoryId = it.id;
              it.newWeight = it.weight;
              it.rootCategoryLevelId = it.categoryLevelPathIdParent;
              it.taskId = '';
              it.taskName = '';
              this.standardOutputList.push(this.deepCopy(it));
            });
          }
        }
      },

      produceFn() {
        let param = {
          pageNum: 1,
          size: -1,
          routeType: 2
        };
        producerouting(param).then((res) => {
          this.produceList = res.list;
        });
      },

      deepCopy(obj, hash = new WeakMap()) {
        if (obj === null) return null;
        if (obj instanceof Date) return new Date(obj);
        if (obj instanceof RegExp) return new RegExp(obj);
        if (typeof obj !== 'object' && typeof obj !== 'function') return obj;
        if (hash.has(obj)) return hash.get(obj);

        const result = Array.isArray(obj) ? [] : {};
        hash.set(obj, result);

        return Object.keys(obj).reduce((acc, key) => {
          acc[key] = this.deepCopy(obj[key], hash);
          return acc;
        }, result);
      },

      openPicking(id, type) {
        this.$refs.pickingListRef.open(id, type);
      },

      outsourceMaterialFn(res) {
        let _arr = [];
        _arr = [...res.pickOutInList, ...res.materialList];

        this.pickOutInList = _arr.reduce((acc, item) => {
          const existingItem = acc.find((existing) => existing.id === item.id);
          if (!existingItem) {
            item.isSelection = '2';
            acc.push(item);
          }
          return acc;
        }, []);

        this.bomMaterialList = res.bomMaterialList.map((m) => {
          return {
            ...m,
            isDemandQuantity: true
          };
        });

        this.pickOutInList.map((v) => {
          v.checked = true;
        });

        this.checkListLen = this.pickOutInList.length;

        this.standardOutputList = res.standardOutputList;

        this.changNumber(this.pickOutInList);

        this.$nextTick(() => {
          this.$refs.pickOutRef.toggleAllSelection();
        });
      },

      changNumber(list) {
        let total = 0;
        let batchTotal = 0;

        if (list && list.length !== 0) {
          total = list.reduce(
            (acc, pro) =>
              acc + (pro.checked ? Number(pro.feedQuantity || 0) : 0),
            0
          );
        }

        if (this.timeList.length !== 0) {
          for (let item of this.timeList) {
            if (item.batchNo !== '一次性到货') {
              batchTotal += Number(item.purchaseQuantity || 0);
            }
          }
        }

        this.attributeData.formedNumLast = total + batchTotal;
      },

      handleRowSelect(selection, row) {},

      handleSelectAll(selection) {},

      inputNum(item, index) {
        if (item.feedQuantity) {
          const totalWeight = Number(item.feedQuantity) * Number(item.weight);
          this.$set(this.pickOutInList[index], 'newWeight', totalWeight);
          this.$forceUpdate();
        } else {
          this.$set(this.pickOutInList[index], 'newWeight', item.weight);
          this.$forceUpdate();
        }

        this.changNumber(this.pickOutInList);
      },

      deleteData(item, index) {
        this.pickOutInList.splice(index, 1);
      },

      handTab(item) {
        this.actTab = item.name;
      },
      //关闭弹窗
      close() {
        this.$emit('closeForm');
      },

      handleEvent({ message }) {
        if (message.pid == 3) {
          this.standardOutputList = message.memoList;
        } else {
          if (message.pid == 2) {
            this.bomMaterialList = message.memoList;
          }
        }
      },

      tableH(type) {
        return tableHeader(type);
      },

      selectionPickOut(val) {
        this.pickOutInListSelect = val;
        this.changNumber(val);
      },

      deleteOutput(index) {
        this.standardOutputList.splice(index, 1);
      },

      deleteBomMaterial(item, index) {
        this.bomMaterialList.splice(index, 1);
      },

      convertList(item, index) {
        if (item.demandQuantity) {
          item.categoryCode = item.code;
          item.feedQuantity = item.demandQuantity;
          item.isSelection = '1';
          item.categoryId = item.id;
          item.newWeight = item.weight;
          item.checked = true;
          this.pickOutInList.push(this.deepCopy(item));
          this.selectionData();
          this.changNumber(this.pickOutInList);
          this.bomMaterialList.splice(index, 1);
          this.$forceUpdate();
        } else {
          return this.$message({
            message: '请输入转换数量',
            type: 'warning'
          });
        }
      },

      selectionData() {
        this.$nextTick(() => {
          this.$refs.pickOutRef.toggleAllSelection();
        });
      },

      changeTaskId() {
        if (this.attributeData.taskIdes.length != 0) {
          if (this.attributeData.taskIdes.length == 1) {
            this.attributeData.sceneText = '单工序';
            this.attributeData.outsourceScene = 2;
          } else {
            this.attributeData.sceneText = '多工序';
            this.attributeData.outsourceScene = 3;
          }
        } else {
          this.attributeData.sceneText = '';
          this.attributeData.outsourceScene = '';
        }
      },

      scrolltolower() {},

      addPicking(id) {
        const storageKey = Date.now() + '';
        let arr = null;
        if (id == 3) {
          arr = [
            {
              standardOutputList: this.standardOutputList
            }
          ];
        } else {
          arr = [
            {
              bomMaterialList: this.bomMaterialList
            }
          ];
        }
      },

      async getWarehouseFn() {
        await getWarehouseList().then((res) => {
          this.warehouseList = res.data.filter(
            (item) => item.factoryId == this.$store.state.user.info.factoryId
          );
        });
      },

      async getContactList() {
        let param = {
          pageNum: 1,
          type: 2,
          size: -1,
          status: 1
        };
        await contactList(param).then((res) => {
          this.gysList = res.list;
        });
      },

      setBatchTime() {
        if (!this.pickOutInList.length) {
          return this.$message.warning('请先添加物料清单!');
        }
        if (!this.pickOutInListSelect.length) {
          return this.$message.warning('请先勾选需要分批物料清单');
        }

        const batchList = this.timeList
          .filter(
            (b) => b.batchNo != '一次性到货' && Array.isArray(b.pickOutInList)
          )
          .flatMap((b) => b.pickOutInList);

        const checkedList = [...this.pickOutInListSelect, ...batchList];
        const batchTimeList = this.timeList.filter(
          (b) => b.batchNo != '一次性到货'
        );

        this.$refs.timeDialogRef.open(
          this.attributeData,
          null,
          false,
          checkedList,
          this.workData.list[0],
          batchTimeList,
          this.pickOutInList
        );
      },

      cancel() {
        this.$emit('outScucc');
      },

      changeMethod(e) {
        if (e == 1) {
          this.timeList = [];
          this.attributeData.formedNumLast = 0;
          this.pickOutInListSelect = [];

          this.$nextTick(() => {
            if (this.$refs.pickOutRef) {
              this.$refs.pickOutRef.clearSelection();
            }
          });

          return;
        }
      },

      async save() {
        const valid = await this.$refs.form.validate().catch(() => false);
        if (!valid) return;

        if (this.chooseType == '1') {
          if (this.attributeData.supplierId) {
            const obj = this.gysList.find(
              (item) => item.id === this.attributeData.supplierId
            );
            this.attributeData.supplierName = obj ? obj.name : '';
          }

          this.attributeData.taskDataList = [];

          this.attributeData.taskIdes.forEach((it) => {
            const match = this.newStepsList.find((i) => i.taskId == it);
            if (match) this.attributeData.taskDataList.push(match);
          });

          this.attributeData.taskIds = this.attributeData.taskIdes.join(',');
        }

        const req = {
          taskId: this.attributeData.taskId,
          taskIds: this.attributeData.taskIds,
          workOrderId: this.attributeData.workOrderId,
          quantity: this.attributeData.formedNumLast || 0
        };

        const res = await checkOutsourceMaterial(req);

        this.outObj = this.deepCopy({ ...res.data, ...this.attributeData });

        if (this.outObj.pickOutInList.length == 0) {
          this.attributeData.formedNumLast = 0;
        }

        this.outsourceMaterialFn(this.outObj);

        this.isInfo = true;
      },

      outsourceMaterialFn(res) {
        let _arr = [];
        _arr = [...res.pickOutInList, ...res.materialList];

        this.pickOutInList = _arr.reduce((acc, item) => {
          const existingItem = acc.find((existing) => existing.id === item.id);
          if (!existingItem) {
            item.isSelection = '2';
            acc.push(item);
          }
          return acc;
        }, []);

        this.bomMaterialList = res.bomMaterialList.map((m) => {
          return {
            ...m,
            isDemandQuantity: true
          };
        });

        this.pickOutInList.map((v) => {
          v.checked = true;
        });

        this.checkListLen = this.pickOutInList.length;

        this.standardOutputList = res.standardOutputList;

        this.changNumber(this.pickOutInList);

        this.$nextTick(() => {
          this.$refs.pickOutRef.toggleAllSelection();
        });
      },

      chooseTime(current, clonedTimeList, currentIndex) {
        if (clonedTimeList.length === 0) {
          this.resetAll();
          return;
        }

        const isSingleReport = this.workData.list[0].singleReport == 1;
        const isMultiSelect = this.pickOutInList.length > 1;

        if (isSingleReport || isMultiSelect) {
          this.handleMulti(clonedTimeList);
        } else {
          this.handleSingle(clonedTimeList);
        }
      },

      resetAll() {
        this.timeList = [];
        this.attributeData.formedNumLast = 0;
        this.pickOutInListSelect = [];
        this.pickOutInList = this.pickOutInList.map((item) => {
          item.selected = false;

          return item;
        });

        this.$nextTick(() => {
          this.$refs.pickOutRef && this.$refs.pickOutRef.clearSelection();
        });
      },

      calcTotal(list, key) {
        return list.reduce((sum, item) => sum + Number(item[key] || 0), 0);
      },

      insertOrUpdateOnce(timeList, data) {
        const index = timeList.findIndex((t) => t.batchNo === '一次性到货');
        if (index === -1) {
          timeList.unshift(data);
        } else {
          timeList.splice(index, 1, data);
        }
      },

      assignMaterialLists(timeList, totalNum, bomList, outputList) {
        for (let it of timeList) {
          it.bomMaterialList = [];
          it.standardOutputList = [];
        }

        const assign = (sourceList, targetKey) => {
          if (!sourceList.length) return;

          for (let item of sourceList) {
            for (let it of timeList) {
              const proportion = this.div(it.purchaseQuantity, totalNum);
              const allocated = this.mul(proportion, item.demandQuantity);

              it[targetKey].push({
                ...item,
                demandQuantity: allocated
              });
            }
          }
        };

        assign(bomList, 'bomMaterialList');
        assign(outputList, 'standardOutputList');
      },

      setActive() {
        this.timeList[0].innerActive = '0';
        this.activeBatch = this.timeList[0].batchNo;
        this.pickOutInListSelect = [];
      },

      handleSingle(clonedTimeList) {
        const selected = this.deepCopy(this.pickOutInListSelect[0]);

        this.timeList = clonedTimeList.map((item) => ({
          ...item,
          pickOutInList: [selected]
        }));

        const totalNum = this.calcTotal(this.pickOutInList, 'feedQuantity');
        const batchNum = this.calcTotal(this.timeList, 'purchaseQuantity');

        this.attributeData.formedNumLast = batchNum;

        const remain = this.sub(totalNum, batchNum);
        if (remain != 0) {
          const data = {
            batchNo: '一次性到货',
            requireDeliveryTime: null,
            purchaseQuantity: remain,
            pickOutInList: [{ ...selected, selected: false }],
            bomMaterialList: [],
            standardOutputList: [],
            isParent: 1
          };
          this.insertOrUpdateOnce(this.timeList, data);
        }

        this.assignMaterialLists(
          this.timeList,
          totalNum,
          this.bomMaterialList,
          this.standardOutputList
        );

        let singleWeight = 0;
        if (selected.newWeight || selected.newWeight === 0) {
          singleWeight = this.div(selected.newWeight, totalNum);
        }

        this.timeList = this.timeList.map((it) => {
          it.pickOutInList.forEach((item) => {
            item.feedQuantity = it.purchaseQuantity;
            item.newWeight = this.mul(singleWeight, it.purchaseQuantity);
          });
          return it;
        });

        this.setActive();
      },

      handleMulti(clonedTimeList) {
        this.timeList = clonedTimeList.map((i) => i);

        const selectedIds = new Set();
        this.timeList.forEach((t) =>
          t.pickOutInList.forEach((i) => selectedIds.add(i.id))
        );

        const totalNum = this.calcTotal(this.pickOutInList, 'feedQuantity');
        this.attributeData.formedNumLast = this.calcTotal(
          this.timeList,
          'purchaseQuantity'
        );

        const unassigned = this.pickOutInList.filter(
          (i) => !selectedIds.has(i.id)
        );

        if (unassigned.length > 0) {
          const number = this.calcTotal(unassigned, 'feedQuantity');
          const data = {
            batchNo: '一次性到货',
            requireDeliveryTime: null,
            purchaseQuantity: number,
            pickOutInList: unassigned.map((i) => ({ ...i, selected: false })),
            bomMaterialList: [],
            standardOutputList: [],
            isParent: 1
          };
          this.insertOrUpdateOnce(this.timeList, data);
        }

        this.assignMaterialLists(
          this.timeList,
          totalNum,
          this.bomMaterialList,
          this.standardOutputList
        );

        this.setActive();
      },

      getDecimalLength(num) {
        return (num.toString().split('.')[1] || '').length;
      },

      toInteger(num) {
        const len = this.getDecimalLength(num);
        return {
          int: Math.round(num * Math.pow(10, len)),
          factor: Math.pow(10, len)
        };
      },

      add(a, b) {
        const { int: aInt, factor: aFactor } = this.toInteger(a);
        const { int: bInt, factor: bFactor } = this.toInteger(b);
        const maxFactor = Math.max(aFactor, bFactor);
        return (
          (aInt * (maxFactor / aFactor) + bInt * (maxFactor / bFactor)) /
          maxFactor
        );
      },

      sub(a, b) {
        const { int: aInt, factor: aFactor } = this.toInteger(a);
        const { int: bInt, factor: bFactor } = this.toInteger(b);
        const maxFactor = Math.max(aFactor, bFactor);
        return (
          (aInt * (maxFactor / aFactor) - bInt * (maxFactor / bFactor)) /
          maxFactor
        );
      },

      mul(a, b) {
        const aLen = this.getDecimalLength(a);
        const bLen = this.getDecimalLength(b);
        return (
          (Number(a.toString().replace('.', '')) *
            Number(b.toString().replace('.', ''))) /
          Math.pow(10, aLen + bLen)
        );
      },

      div(a, b) {
        const aLen = this.getDecimalLength(a);
        const bLen = this.getDecimalLength(b);
        return (
          (Number(a.toString().replace('.', '')) /
            Number(b.toString().replace('.', ''))) *
          Math.pow(10, bLen - aLen)
        );
      },

      handOK(isRelease) {
        if (!this.attributeData.requireDeliveryTime) {
          return this.$message.warning('请选择交付日期！');
        }

        if (isRelease == 1) {
          if (
            this.timeList.length == 0 &&
            this.attributeData.deliveryMethod == 2
          ) {
            return this.$message.warning('请先分批！');
          }
        }

        // 环境判断
        let _pickOutInList = [];

        if (this.clientEnvironmentId == 2) {
          _pickOutInList = this.pickOutInList;
        } else {
          _pickOutInList = this.pickOutInListSelect;
        }

        for (let i = 0; i < _pickOutInList.length; i++) {
          if (
            !_pickOutInList[i].feedQuantity &&
            _pickOutInList[i].isSelection == '1'
          ) {
            this.$message.warning('物品数量不能为空');
            return;
          }
        }

        if (this.standardOutputList.length != 0) {
          for (let item of this.standardOutputList) {
            if (!item.demandQuantity) {
              this.$message.warning('产出清单数量不能为空');
              return;
            }
          }
        }

        this.outObj = this.deepCopy({ ...this.outObj, ...this.attributeData });

        let param = {
          ...this.outObj,
          isRelease: isRelease,
          bomMaterialList: this.bomMaterialList,
          pickOutInList: _pickOutInList,
          materialList: this.materialList,
          standardOutputList: this.standardOutputList,
          timeList: this.timeList
        };

        this.isLoading = this.$loading({
          lock: true,
          text: '加载中',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        applyoutsourceSave(param)
          .then((res) => {
            this.$emit('outScucc');
            this.isLoading.close();
            return this.$message({
              message: '提交成功',
              type: 'scuccess'
            });
            this.checkListLen = 0;
          })
          .catch(() => {
            this.isLoading.close();
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .c_header_title {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    height: 40px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color-lighter);
  }

  .operate_box {
    display: flex;
    flex-direction: row-reverse;
    padding: 15px;
    box-shadow: 0px -2px 15px 0px rgba(0, 0, 0, 0.1);
    z-index: 9999;
  }

  .c_title {
    color: #157a2c;
    font-size: 16px;
    font-weight: bold;
  }

  .materialList {
    height: 34vh;
    overflow: auto;
  }

  .card {
    width: 100%;
    padding: 0 20px;
  }

  .u-reset {
    width: 100%;
    padding: 5px;
    text-align: right;
  }

  .listBox-con {
    width: 100%;
  }
  .gxList {
    margin-left: 10px;
  }

  .listBox-sel {
    margin: 0 10px;
  }

  .listBox-top {
    display: flex;
    padding: 15px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
  }

  .listBox-bottom {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 0;
  }

  .listBox {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    margin-bottom: 20px;
  }

  .items {
    font-size: 12px;
    width: 23%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    // border: 1px solid #ddd;
    // border-bottom: 1px solid #ddd;
    // border-right: 0;
    span {
      display: block;
      padding: 10px;
      margin-right: 5px;
      color: #157a2c;
      background-color: #f7f9fa;
    }
  }

  ::v-deep .el-input--medium .el-input__inner {
    height: 26px;
    line-height: 26px;
  }

  ::v-deep .el-form-item {
    margin-bottom: 4px;
  }

  .full {
    width: 100%;
  }

  .btn-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
</style>
