<template>
  <div class="mergePutMesh-container">
    <div class="title" style="margin-left: 0px">
      <div class="item">
        <span class="font subWorkNameBox">合并挂网</span>
      </div>
      <div class="item">
        <span class="font"
          >{{ riqi }} &nbsp; &nbsp;{{ days }} &nbsp; {{ shijian }}</span
        >
      </div>
      <div class="item">
        <img class="top-bar__img" :src="info.avatar" />
        <span class="font">
          {{ info.name }}
        </span>
      </div>
      <div class="item">
        <div class="back" @click="$router.back()">
          <i class="icon-mes-fanhui"></i>
          <!-- <span class="font">返回</span> -->
        </div>
      </div>
    </div>
    <basic-container
      v-loading="pageLoading"
      element-loading-text="数据加载中..."
      element-loading-spinner="el-icon-loading"
    >
      <!-- 板材计划未合并挂网详情列表 -->
      <div class="unMerge-list">
        <div class="table-header-row">
          <el-button
            size="small"
            icon="el-icon-search"
            type="primary"
            class="screen"
            @click="searchDialogVisible = true"
            >筛选</el-button
          >
          <span class="table-title">板材计划未合并挂网详情列表</span>
        </div>
        <el-table
          :data="unMergeTableData"
          style="max-height: 300px"
          border
          v-loading="unMergeTableLoading"
          :header-row-style="headerRowStyle"
        >
          <el-table-column
            label="计划编号"
            align="center"
            prop="code"
            width="170"
          ></el-table-column>
          <el-table-column label="等级" align="center" width="60">
            <template slot-scope="scope">
              <span>{{ scope.row.weight | weightFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="规格型号"
            align="center"
            prop="specification"
          ></el-table-column>
          <el-table-column
            prop="productName"
            width="110"
            align="center"
            label="产品名称"
          ></el-table-column>

          <el-table-column label="开槽类型" align="center" prop="slottingType">
            <template slot-scope="scope">
              <span>{{
                getDictValue('开槽类型', scope.row.slottingType + '')
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="未排程块数"
            align="center"
            prop="noWordCount"
          ></el-table-column>
          <el-table-column
            label="计划块数"
            align="center"
            prop="blockCount"
          ></el-table-column>
          <el-table-column label="计划日期" align="center" prop="startTime">
            <template slot-scope="scope">
              <span>{{ scope.row.planDeliveryTime | subTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="交货期" align="center" prop="deliveryDate">
            <template slot-scope="scope">
              <span>{{ scope.row.reqMoldTime | subTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="项目名称"
            align="center"
            prop="projectName"
          ></el-table-column>
          <el-table-column label="首次排程" align="center" prop="createTime">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime | subTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            align="center"
            prop="remark"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="挂网"
                  placement="bottom"
                >
                  <el-button
                    type="text"
                    size="small"
                    class="handle-btn"
                    icon="el-icon-guide"
                    @click="handlePutMesh(scope.row)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="bottom"
                >
                  <el-button
                    type="text"
                    size="small"
                    class="handle-btn"
                    icon="el-icon-delete"
                    @click="handleDeleteSchedule(scope.row)"
                  ></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination background layout="prev, pager, next" :total="count">
        </el-pagination> -->
        <!-- 筛选弹窗 -->
        <el-dialog
          :visible.sync="searchDialogVisible"
          width="600px"
          append-to-body
          :close-on-click-modal="false"
          :close-on-press-escape="false"
        >
          <span slot="title">查询条件</span>
          <el-form class="search-form" :model="searchForm" label-width="120px">
            <el-form-item label="项目名称：">
              <el-select v-model="searchForm.projectName" :clearable="true">
                <el-option
                  v-for="(item, index) in projectNameList"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品名称：">
              <el-select v-model="searchForm.productName" :clearable="true">
                <el-option
                  v-for="(item, index) in materialNameList"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="规格型号：">
              <el-input
                v-model="searchForm.specification"
                placeholder="请输入规格型号"
                style="width: 200px"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="是否开槽：">
              <el-select v-model="searchForm.isSlotting" :clearable="true">
                <el-option value="1" label="是"></el-option>
                <el-option value="2" label="否"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="等级：">
              <el-select v-model="searchForm.weight" :clearable="true">
                <el-option :value="1" label="A"></el-option>
                <el-option :value="2" label="B"></el-option>
                <el-option :value="3" label="C"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="searchForm-btns">
            <el-button size="small" @click="reset">重置</el-button>
            <el-button size="small" type="success" @click="search"
              >查询</el-button
            >
          </div>
        </el-dialog>
      </div>

      <!-- 合并挂网(并模)图示 -->
      <div class="merge-pic-table-title">合并组网</div>
      <div class="merge-pic-table">
        <!-- 左边图示 -->
        <div class="merge-pic">
          <div
            v-for="(item, index) in editTableData"
            :key="index"
            class="pic-item"
            :style="{
              width: Number(item.specification.split('*')[0]) / 6 + '%'
            }"
          >
            <div>{{ item.specification }}</div>
            <div>{{ item.productName }}</div>
            <div>块数：{{ item.blockCount }}</div>
          </div>
          <div
            :style="{
              width: `${(surplusLength / 6.1).toFixed(2)}` + '%'
            }"
          >
            <span>剩余：</span>
            <span>{{ surplusLength }}</span>
            <div>{{ Number((surplusLength / 6.1).toFixed(2)) }}%</div>
          </div>
        </div>
        <div style="flex: 1; display: flex">
          <!-- 中间表格 -->
          <div class="merge-table">
            <el-table
              :data="editTableData"
              border
              :header-row-style="headerRowStyle"
            >
              <el-table-column
                label="规格"
                align="center"
                width="120"
                prop="specification"
              ></el-table-column>
              <el-table-column
                prop="productName"
                width="110"
                align="center"
                label="产品名称"
              ></el-table-column>
              <el-table-column
                label="块数"
                align="center"
                prop="blockCount"
              ></el-table-column>
              <el-table-column label="等级" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.weight | weightFilter }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="剩余模数"
                align="center"
                prop="surplusModulus"
              >
                <template slot-scope="scope">
                  <span>{{ getSurplusModulus(scope.row.specification) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="附加工艺"
                align="center"
                prop="slottingType"
              >
                <template slot-scope="scope">
                  <span>{{
                    getDictValue('开槽类型', scope.row.slottingType + '')
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="merge-btns">
              <el-button size="small" type="primary" @click="updateMerge"
                >确定</el-button
              >
              <el-button size="small" type="primary" @click="resetEditTable"
                >重置</el-button
              >
            </div>
          </div>
          <!-- 右边统计表 -->
          <div class="info-message">
            <div class="info-item">
              <span :style="headerRowStyle">班组</span>
              <span>*模数</span>
              <span>合计模数</span>
              <span>允许模数</span>
            </div>
            <div class="info-item">
              <span :style="headerRowStyle">网A</span>
              <el-input
                v-model="modulusNum1"
                placeholder="输入模数"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                @input="modulsNumInput"
              ></el-input>
              <span>{{ modulusSum }}</span>
              <span>{{ allowModulus }}</span>
            </div>
            <div class="info-item">
              <span :style="headerRowStyle">网B</span>
              <el-input
                v-model="modulusNum2"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                placeholder="输入模数"
                @input="modulsNumInput"
              ></el-input>
              <span>*任务日期</span>
              <el-date-picker
                v-model="taskDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>

      <!-- 任务未下发列表操作 && 下发未报工列表 -->
      <div class="task-distribution">
        <!-- 任务未下发列表 -->
        <div class="task-dist">
          <div class="task-btns">
            <div>
              <el-button
                size="small"
                @click="seletAll(taskDistTableData, 'taskDistTableData')"
                >全选</el-button
              >
              <!-- <el-button size="small">排序</el-button> -->
              <!-- <el-button size="small">筛选</el-button> -->
            </div>
            <div class="task-dist-title">组网过渡表</div>
            <div>
              <el-button
                size="small"
                @click="handleDeleteWorkOrder('取消', '0')"
                :disabled="taskDistSelection.length == 0"
                >取消</el-button
              >
              <el-button
                size="small"
                :disabled="taskDistSelection.length == 0"
                @click="taskDistribute"
                >任务下发</el-button
              >
            </div>
          </div>
          <el-table
            ref="taskDistTableData"
            :data="taskDistTableData"
            v-loading="taskDistTableLoading"
            style="max-height: 300px"
            border
            @selection-change="taskDistTableSelectionChange"
          >
            <el-table-column type="selection" width="45" align="center">
            </el-table-column>
            <el-table-column
              label="等级"
              align="center"
              width="70"
              prop="weight"
              filterable
              :filters="[
                { text: 'A', value: 1 },
                { text: 'B', value: 2 },
                { text: 'C', value: 3 }
              ]"
              :filter-method="filterWeightMethod1"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.weight | weightFilter }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="70"
              label="高度"
              prop="height"
              filterable
              :filters="heightFilterArr1"
              :filter-method="filterHeightMethod1"
            ></el-table-column>
            <el-table-column
              label="长1+长2+长3"
              align="center"
              width="120"
              prop="length"
            ></el-table-column>
            <el-table-column
              prop="productName"
              width="110"
              align="center"
              label="产品名称"
            ></el-table-column>
            <el-table-column
              label="模数"
              align="center"
              width="70"
              prop="moCount"
            ></el-table-column>
            <el-table-column
              label="片1+片2+片3"
              align="center"
              width="120"
              prop="blockCount"
            >
            </el-table-column>
            <!-- <el-table-column label="是否开槽" align="center"></el-table-column> -->
            <el-table-column
              align="center"
              width="115"
              prop="slottingType"
              filterable
              label="开槽类型"
              :filters="[
                { text: '开槽', value: '开槽' },
                { text: '不开槽', value: '不开槽' }
              ]"
              :filter-method="filterSlottingMethod1"
            >
              <template slot-scope="scope">
                <span>{{
                  getDictValue('开槽类型', scope.row.slottingType + '')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="日期" align="center" prop="taskTime">
              <template slot-scope="scope">
                <span>{{ scope.row.taskTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="85"
              prop="teamName"
              label="班组"
              filterable
              :filters="[
                { text: '班组A', value: '班组A' },
                { text: '班组B', value: '班组B' }
              ]"
              :filter-method="filterJobMethod1"
            ></el-table-column>
          </el-table>
        </div>
        <!-- 任务下发未报工列表 -->
        <div class="work-unreport">
          <div class="unreport-btns">
            <div>
              <el-button
                size="small"
                @click="
                  seletAll(workUnreportTableData, 'workUnreportTableData')
                "
                >全选</el-button
              >
              <!-- <el-button size="small">排序</el-button> -->
              <!-- <el-button size="small">筛选</el-button> -->
            </div>
            <div class="work-unreport-title">组网任务表</div>
            <div>
              <el-button
                size="small"
                @click="handleDeleteWorkOrder('中止', '1')"
                :disabled="workUnreportSelection.length == 0"
                >人工中止</el-button
              >
              <el-button
                size="small"
                :disabled="workUnreportSelection.length == 0"
                @click="handleDeleteWorkOrder('撤回', '0')"
                >撤回</el-button
              >
            </div>
          </div>
          <el-table
            :data="workUnreportTableData"
            ref="workUnreportTableData"
            style="max-height: 300px"
            v-loading="workUnreportTableLoading"
            border
            @selection-change="workUnreportTableSelectionChange"
          >
            <el-table-column type="selection" width="45" align="center">
            </el-table-column>
            <el-table-column
              label="等级"
              align="center"
              width="70"
              prop="weight"
              filterable
              :filters="[
                { text: 'A', value: 1 },
                { text: 'B', value: 2 },
                { text: 'C', value: 3 }
              ]"
              :filter-method="filterWeightMethod1"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.weight | weightFilter }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="70"
              label="高度"
              prop="height"
              filterable
              :filters="heightFilterArr2"
              :filter-method="filterHeightMethod1"
            ></el-table-column>
            <el-table-column
              label="长1+长2+长3"
              align="center"
              prop="length"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="productName"
              width="110"
              align="center"
              label="产品名称"
            ></el-table-column>
            <el-table-column
              label="余量"
              align="center"
              width="70"
              prop="allowance"
            ></el-table-column>
            <el-table-column
              label="模数"
              align="center"
              prop="moCount"
              width="120"
            ></el-table-column>
            <el-table-column
              label="片1+片2+片3"
              align="center"
              prop="blockCount"
              width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.blockCount }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="是否开槽" align="center"></el-table-column> -->
            <el-table-column
              align="center"
              width="115"
              prop="slottingType"
              filterable
              label="开槽类型"
              :filters="[
                { text: '开槽', value: '开槽' },
                { text: '不开槽', value: '不开槽' }
              ]"
              :filter-method="filterSlottingMethod1"
            >
              <template slot-scope="scope">
                <span>{{
                  getDictValue('开槽类型', scope.row.slottingType + '')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="任务日期" prop="taskTime" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.taskTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="下发日期" align="center" prop="issuedTime">
              <template slot-scope="scope">
                <span>{{ scope.row.issuedTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="85"
              prop="teamName"
              label="班组"
              filterable
              :filters="[
                { text: '班组A', value: '班组A' },
                { text: '班组B', value: '班组B' }
              ]"
              :filter-method="filterJobMethod1"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
  import basicContainer from '@/components/basic-container/main';
  import {
    getScheduleWorkOrderByPage,
    updateMergeV2,
    getPutMeshWorkOrderByPage,
    issuedPutMeshWorkOrder,
    deletePutMeshWorkOrder,
    deleteScheduleWorkOrder
  } from '@/api/mergePutMesh/mergePutMesh';
  import { mapState } from 'vuex';
  import dictMixins from '@/mixins/dictMixins';

  export default {
    components: {
      basicContainer
    },
    mixins: [dictMixins],
    data() {
      return {
        permission: {},
        pageLoading: false,
        unMergeTableData: [], // 未合并挂网详情列表
        count: 0,
        editTableData: [], // 合并挂网任务编辑详情列表
        taskDistTableData: [], // 任务未下发列表
        workUnreportTableData: [], // 任务已下发未报工列表
        taskDistSelection: [],
        workUnreportSelection: [],
        unMergeTableLoading: false,
        taskDistTableLoading: false,
        workUnreportTableLoading: false,
        searchDialogVisible: false, // 筛选弹窗
        headerRowStyle: {
          backgroundColor: ' #d0e4d5'
        },
        // 筛选弹窗表单
        searchForm: {
          projectName: '', // 项目名称下拉
          productName: '', // 产品名称下拉
          specification: '', // 规格型号
          weight: '', // 等级
          isSlotting: ''
        },
        projectNameList: [],
        materialNameList: [],
        modulusNum1: 0,
        modulusNum2: 0,
        taskDate: '', // 任务日期
        modulusLength: '',
        surplusLength: 610, // 剩余长度
        allowModulus: 0, // 允许模数
        modulusSum: 0, // 合计模数
        heightFilterArr1: [], // 高度筛选1表格
        heightFilterArr2: [], // 高度筛选2表格
        riqi: '',
        days: '',
        shijian: ''
      };
    },
    computed: {
      ...mapState({
        info: (store) => store.user.info //用户数据
      })
    },
    filters: {
      weightFilter(value) {
        let weight = '';
        switch (value) {
          case 1:
            weight = 'A';
            break;
          case 2:
            weight = 'B';
            break;
          case 3:
            weight = 'C';
            break;
        }
        return weight;
      },
      subTime(value) {
        if (!value) return;
        let date = value.substr(0, value.indexOf(' '));
        return date;
      }
    },
    created() {
      this.requestDict('开槽类型');
      this.getScheduleWorkOrder({});
      this.getPutMeshWorkOrder();
      this.getWorkUnreport();
    },
    mounted() {
      this.gettime();
      this.newtime();
    },
    methods: {
      gettime() {
        var date = new Date();
        let year = date.getFullYear();
        let mou = date.getMonth() + 1;
        let day = date.getDate();
        let days = date.getDay();
        switch (days) {
          case 1:
            days = '星期一';
            break;
          case 2:
            days = '星期二';
            break;
          case 3:
            days = '星期三';
            break;
          case 4:
            days = '星期四';
            break;
          case 5:
            days = '星期五';
            break;
          case 6:
            days = '星期六';
            break;
          case 0:
            days = '星期日';
            break;
        }
        let hou = date.getHours(); //获取当前小时数(0-23)
        let min = date.getMinutes(); //获取当前分钟数(0-59)
        let sec = date.getSeconds(); //获取当前秒数(0-59)
        if (mou < 10) mou = '0' + mou;
        if (day < 10) day = '0' + day;
        if (hou < 10) hou = '0' + hou;
        if (min < 10) min = '0' + min;
        if (sec < 10) sec = '0' + sec;
        this.riqi = year + '/' + mou + '/' + day;
        this.days = days;
        this.shijian = hou + ':' + min + ':' + sec;
      },
      newtime() {
        setInterval(() => {
          this.gettime();
        }, 1000);
      },
      // 获取未合并挂网数据列表
      getScheduleWorkOrder(params) {
        this.unMergeTableLoading = true;
        this.projectNameList = [];
        this.materialNameList = [];
        let pages = {
          pageNum: 1,
          size: 100
        };
        let query = Object.assign(pages, params, {
          status: ['3', '2', '4']
        });
        getScheduleWorkOrderByPage(query)
          .then((res) => {
            this.unMergeTableLoading = false;
            console.log('未合并挂网数据列表:', res.data.data.list);
            this.unMergeTableData = res.data.data.list.filter((item) =>
              item.productName.includes('板材')
            );
            console.log(this.unMergeTableData, 'unMergeTableData');
            this.unMergeTableData.map((item) => {
              if (
                !this.projectNameList.includes(item.projectName) &&
                item.projectName
              ) {
                this.projectNameList.push(item.projectName);
              }
              if (!this.materialNameList.includes(item.productName)) {
                this.materialNameList.push(item.productName);
              }
            });
          })
          .catch(() => {
            this.unMergeTableLoading = false;
          });
      },
      // 获取任务未下发数据列表
      async getPutMeshWorkOrder() {
        this.taskDistTableLoading = true;
        this.heightFilterArr1 = [];
        let pages = {
          // pageNum: 1,
          // pageSize: 100,
          listStatus: [0]
          // artisanStatus: '0'
        };
        const res = await getPutMeshWorkOrderByPage(pages);
        console.log('任务未下发数据列表:', res.list);
        this.taskDistTableLoading = false;
        this.taskDistTableData = res.list;

        let tempHeight = [];
        this.taskDistTableData.map((item) => {
          tempHeight.push(item.height);
        });
        tempHeight = [...new Set(tempHeight)];
        tempHeight.map((item) => {
          this.heightFilterArr1.push({
            value: item,
            text: item
          });
        });
        // console.log(this.heightFilterArr1);
      },
      // 获取已下发未报工列表数据
      async getWorkUnreport() {
        this.workUnreportTableLoading = true;
        this.heightFilterArr2 = [];
        let pages = {
          // pageNum: 1,
          // pageSize: 100,
          listStatus: [1]
          // artisanStatus: '0'
        };
        const res = await getPutMeshWorkOrderByPage(pages);
        console.log('任务已下发数据列表:', res.list);
        // this.taskDistTableLoading = false
        this.workUnreportTableData = res.list;
        this.workUnreportTableLoading = false;

        let tempHeight = [];
        this.workUnreportTableData.map((item) => {
          tempHeight.push(item.height);
        });
        tempHeight = [...new Set(tempHeight)];
        tempHeight.map((item) => {
          this.heightFilterArr2.push({
            value: item,
            text: item
          });
        });
      },
      // 重置筛选表单
      reset() {
        this.searchForm = {
          projectName: '',
          productName: '',
          specification: '',
          weight: '',
          isSlotting: ''
        };
        this.searchDialogVisible = false;
        this.getScheduleWorkOrder({});
      },
      // 按表单查询
      search() {
        this.searchDialogVisible = false;
        this.getScheduleWorkOrder(this.searchForm);
      },
      // 挂网报工按钮操作
      handlePutMesh(row) {
        // 挂网判断
        // 1,只允许添加相同高度的计划
        // 2,只允许添加相同宽度的计划
        // 3,只允许添加相同工艺的计划
        // 4,长度加起来不能大610
        // 5,最多只能添加3条
        let rowModelArr = row.specification.split('*');
        // 要添加的规格的高度
        let addWide = Number(rowModelArr[1]);
        let addHeight = Number(
          rowModelArr[2].substr(0, rowModelArr[2].indexOf('cm'))
        );
        let allowSlotting = ''; // 已添加计划的工艺
        let allowWide = 0; // 已添加计划的高度
        let allowHeight = 0; // 已添加计划的高度
        let allowLong = 0; // 已添加计划的长度
        let addLong = Number(rowModelArr[0]); // 要添加计划的长度
        if (this.editTableData.length > 0) {
          allowSlotting = this.editTableData[0].slottingType;
          let modelArr = this.editTableData[0].specification.split('*');
          allowWide = Number(modelArr[1]);
          allowHeight = Number(
            modelArr[2].substr(0, modelArr[2].indexOf('cm'))
          );

          // 计算已添加的长度的总和是否大610
          this.editTableData.map((item) => {
            allowLong += Number(item.specification.split('*')[0]);
          });
          if (this.editTableData.length == 3) {
            return this.$alert('最多只能添加三条计划！');
          }
          if (allowLong + addLong > 610) {
            return this.$alert('挂网并模总长度不能大于610！');
          }
          if (row.slottingType != allowSlotting) {
            return this.$alert(
              `请添加${this.getDictValue(
                '开槽类型',
                allowSlotting + ''
              )}工艺的计划！`
            );
          }
          if (addHeight != allowHeight) {
            return this.$alert(`请添加高度为${allowHeight}cm的计划！`);
          }
          if (addWide != allowWide) {
            return this.$alert(`请添加宽度为${allowWide}的计划！`);
          }
        }
        this.editTableData.push(JSON.parse(JSON.stringify(row)));

        let equalIdObj = {};
        this.editTableData.map((item) => {
          if (equalIdObj[item.id]) {
            equalIdObj[item.id]++;
          } else {
            this.$set(equalIdObj, item.id, 1);
          }
        });

        let longSum = 0;
        let surplusModulusArr = []; // 允许模数
        this.editTableData.map((item) => {
          item.equalIdNum = equalIdObj[item.id];
          let modelArr = item.specification.split('*');
          let modelHeight = modelArr[2];
          modelHeight = Number(
            modelHeight.substr(0, modelHeight.indexOf('cm'))
          );
          longSum += Number(modelArr[0]);
          // 块数
          item.blockCount = Number(Math.floor(120 / modelHeight));
          // 剩余模数
          item.surplusModulus = Number(
            Math.ceil(item.noWordCount / item.blockCount / item.equalIdNum)
          );

          surplusModulusArr.push(item.surplusModulus);
        });
        // console.log(this.editTableData,'editTableData')
        // 获取允许模数 allowModulus
        this.allowModulus = Math.min(...surplusModulusArr);

        this.surplusLength = 610 - longSum;
        // 计算模数长度
        this.modulusLength =
          (100 - (this.surplusLength / 6.1).toFixed(2)) /
            this.editTableData.length +
          '%';
      },
      getSurplusModulus(specification) {
        return Math.min(
          ...this.editTableData
            .filter((item) => item.specification == specification)
            .map((item) => item.surplusModulus)
        );
      },
      // 输入模数
      modulsNumInput() {
        this.modulusSum = Number(this.modulusNum1) + Number(this.modulusNum2);
        if (this.modulusSum > this.allowModulus) {
          this.$alert('合计模数不能大于允许模数！');
          this.modulusSum = 0;
          this.modulusNum1 = 0;
          this.modulusNum2 = 0;
          return false;
        }
        return true;
      },
      // 重置合并挂网
      resetEditTable() {
        this.editTableData = [];
        this.modulusSum = 0;
        this.modulusNum1 = 0;
        this.modulusNum2 = 0;
        this.allowModulus = 0;
        this.taskDate = '';
        this.surplusLength = 610;
        this.modulusLength = '';
      },
      // 确定添加挂网并模
      updateMerge() {
        if (this.editTableData.length == 0)
          return this.$alert('请选择要挂网的计划列表！');
        if (Number(this.modulusNum1) + Number(this.modulusNum2) == 0)
          return this.$alert('请输入班组模数！');
        if (!this.taskDate) return this.$alert('请选择任务日期！');
        if (!this.modulsNumInput()) return;

        this.pageLoading = true;
        let ids = [];
        let meshSpecs = [];
        let meshNumber = [];
        let meshSpecsTwo = [];
        let meshNumberTwo = [];
        let numbersArr = [];
        // for (let i = 0; i < this.editTableData.length; i++) {
        //   ids.push(this.editTableData[i].id);
        //   meshSpecs.push(this.editTableData[i].model);
        //   meshNumber.push(this.editTableData[i].moCount);
        //   meshSpecsTwo.push('+');
        //   meshNumberTwo.push('+');
        //   numbersArr.push('1');
        // }

        let data = {
          mergeIds: this.editTableData.map((item) => item.id).toString(),
          meshNumber: this.editTableData
            .map((item) => item.blockCount)
            .join('+'),
          modulus:
            this.modulusNum1 && this.modulusNum2
              ? this.modulusNum1 + ',' + this.modulusNum2
              : this.modulusNum1 || this.modulusNum2,
          job: this.modulusNum1 && this.modulusNum2 ? 2 : 1,
          endTime: this.taskDate
          // mergeId: ids.join(','),
          // numbers: numbersArr.join(','),
          // moduls: String(this.modulusSum), // 合计模数
          // meshSpecs: meshSpecs.join(','), // 网片尺寸
          // meshNumber: meshNumber.join(','), // 网片数量
          // meshSpecsTwo: meshSpecsTwo.join(','), // 网片尺寸2
          // meshNumberTwo: meshNumberTwo.join(','), // 网片数量2
          // meshType: '单网', // 网片类型
          // joba: '班组A',
          // jobb: '班组B',
          // endTime: this.taskDate + ' 00:00:00', // 任务日期
          // jobaModulus: Number(this.modulusNum1), // 网A数量
          // jobbModulus: Number(this.modulusNum2) // 网B数量
        };

        updateMergeV2(data)
          .then((res) => {
            this.pageLoading = false;
            this.$message.success('任务添加成功！');
            this.resetEditTable();
            this.getScheduleWorkOrder({});
            this.getPutMeshWorkOrder();
          })
          .catch((err) => {
            this.pageLoading = false;
            this.$message.success('任务添加失败！');
          });
      },
      // 筛选等级1
      filterWeightMethod1(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      // 筛选高度1
      filterHeightMethod1(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      // 筛选班组1
      filterJobMethod1(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      // 筛选开槽1
      filterSlottingMethod1(value, row, column) {
        if (value == '开槽') {
          return row['isSlotting'] == '1';
        } else {
          return row['isSlotting'] == '2';
        }
      },
      // 任务未下发列表多选
      taskDistTableSelectionChange(val) {
        this.taskDistSelection = val;
      },
      // 任务下发按钮操作
      taskDistribute() {
        this.$confirm('确认下发选中的任务吗？', '提示', {
          confirmButtonText: '确定',
          cancleButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            let ids = this.taskDistSelection.map((item) => item.id);
            const res = await issuedPutMeshWorkOrder({ id: ids, status: 1 });
            this.$message.success('任务下发成功！');
            this.getPutMeshWorkOrder();
            this.getWorkUnreport();
          })
          .catch(() => {});
      },
      // 任务下发未报工列表多选
      workUnreportTableSelectionChange(val) {
        this.workUnreportSelection = val;
      },
      // 按钮全选
      seletAll(data, tableName) {
        if (data) {
          data.forEach((row) => {
            this.$refs[tableName].toggleRowSelection(row, true);
          });
        }
      },
      // 批量删除挂网工单信息(取消、删除、撤回)
      handleDeleteWorkOrder(btnType, type) {
        this.$confirm(`确定${btnType}选中的任务吗？`, '提示', {
          confirmButtonText: '确定',
          cancleButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.pageLoading = true;
            let ids = '';
            if (btnType == '取消') {
              ids = this.taskDistSelection.map((item) => item.id);
            } else if (btnType == '撤回' || btnType == '中止') {
              ids = this.workUnreportSelection.map((item) => item.id);
            }

            // let params = { type, ids };
            deletePutMeshWorkOrder({ id: ids }, type)
              .then((res) => {
                this.pageLoading = false;
                this.$message.success(res.data.msg);
                this.getScheduleWorkOrder({});
                this.getPutMeshWorkOrder();
                this.getWorkUnreport();
              })
              .catch(() => {
                this.pageLoading = false;
              });
          })
          .catch(() => {});
      },
      // 未合并挂网列表删除
      handleDeleteSchedule(row) {
        this.$confirm('确定删除选中的任务吗？', '提示', {
          confirmButtonText: '确定',
          cancleButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.pageLoading = true;
            // let ids = row.id;
            deleteScheduleWorkOrder(row.id)
              .then((res) => {
                this.$message.success(res.data.msg);
              })
              .finally(() => {
                this.pageLoading = false;
                this.getScheduleWorkOrder({});
              })
              .catch(() => {});
          })
          .catch(() => {});
      }
    }
  };
</script>

<style lang="scss" scoped>
  .avue-view {
    height: 100vh;
  }
  .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 0;
    padding: 0 20px;
    box-sizing: border-box;
    // color: #000;
    height: 60px;
    width: 100%;
    background-color: #fff;
    font-size: 16px;
    .item:nth-child(1) {
      flex: 1;
    }
    .item:nth-child(2) {
      flex: 2;
      text-align: left;
    }
    .item:nth-child(3) {
      flex: 2;
      text-align: left;
    }
    .item:nth-child(4) {
      flex: 2;
      text-align: right;
    }
    .item:nth-child(5) {
      flex: 1;
    }
    .subWorkNameBox {
      font-size: 24px;
    }
  }
  :deep(.el-table) th.el-table__cell {
    background: none;
  }
  :deep(.el-card.is-always-shadow),
  :deep(.el-table__empty-block),
  .basic-container {
    // background-color: #fff;
    height: calc(100% - 66px);
  }

  :deep(.el-table--border) {
    overflow: auto;
  }

  :deep(.el-table::before) {
    display: none;
  }

  :deep(.el-table) thead,
  :deep(.el-table) tbody {
    // color: #000 !important;
  }

  :deep(.el-table) thead th,
  :deep(.el-table) tbody td {
    // background-color: #080848 !important;
    font-size: 16px;
  }

  // 全局修改滚动条样式
  :deep(::-webkit-scrollbar-thumb) {
    // background-color: #666aa1;
  }

  :deep(.el-button) {
    // background-color: #080848;
    // color: #fff;
  }

  // 最上面一行
  .unMerge-list {
    height: 50%;
    margin-bottom: 8px;
    // border: 1px solid #fff;
    .table-header-row {
      display: flex;
      .screen {
        padding: 9px 30px;
        margin: 5px 0 5px 5px;
      }
      .table-title {
        flex: 1;
        // color: #fff;
        text-align: center;
        font-size: 20px;
        padding-right: 10%;
        line-height: 43px;
      }
    }
    .handle-btn {
      font-size: 16px;
    }
  }

  // 筛选弹窗
  .search-form {
    :deep(.el-input__inner) {
      width: 300px;
    }
  }
  // 筛选弹窗
  .searchForm-btns {
    margin-top: 10px;
    text-align: center;
    padding-right: 30px;
    :deep(.el-button) {
      // background-color: #157a2c !important;
      padding: 9px 30px;
    }
  }

  // 第二行
  .merge-pic-table-title {
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    // border: 1px solid #fff;
    border-bottom: 0;
  }
  .merge-pic-table {
    display: flex;
    height: 200px;
    .merge-pic {
      display: flex;
      width: 610px;
      height: 100%;
      margin-right: 8px;
      color: #fff;
      // border: 1px solid #fff;
      box-sizing: border-box;
      font-size: 14px;
      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 15px 0;
        &:nth-child(1) {
          background-color: #409eff;
        }
        &:nth-child(2) {
          background-color: #e6a23c;
        }
        &:nth-child(3) {
          background-color: #67c23a;
        }
        &:last-child {
          background-color: #191a23;
        }
      }
    }

    .merge-table {
      flex: 0.6;
      height: 100%;
      border: 1px solid #fff;
      box-sizing: border-box;
      :deep(.el-table__header-wrapper) {
        background-color: #080848;
      }
      :deep(.el-table) {
        // border: 0;
        height: calc(100% - 45px);
        // background-color: #080848;
      }
      :deep(.el-button--primary) {
        padding: 9px 30px;
        // border-color: #fff;
      }
      .merge-btns {
        padding: 5px;
        text-align: right;
      }
    }
    .info-message {
      flex: 0.4;
      border-top: 1px solid #ededed;
      border-left: 1px solid #ededed;
      margin-left: 8px;
      display: flex;
      // color: #fff;
      .info-item {
        flex: 1;
        border-right: 1px solid #ededed;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        > span,
        :deep(.el-input) {
          flex: 1;
          border-bottom: 1px solid #ededed;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        :deep(.el-input__inner) {
          padding: 0;
          padding-left: 10px;
          // border: 0;
          border-radius: 0;
          margin: 0 5px;
          // background-color: #ccc;
          // color: #fff;
        }
        :deep(.el-date-editor) {
          width: 100%;
        }
        :deep(.el-input__icon) {
          display: none;
        }
      }
    }
  }

  // 第三行 任务未下发列表 和下发未报工列表
  .task-distribution {
    margin-top: 8px;
    display: flex;
    .task-dist {
      width: 45%;
      overflow: auto;
      margin-right: 8px;
      // border: 1px solid #fff;
      box-sizing: border-box;
      .task-btns {
        // border-bottom: 1px solid #fff;
        padding: 5px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .task-dist-title {
          font-size: 20px;
          // color: #fff;
          text-align: center;
          flex: 1;
          align-self: center;
        }
      }
    }

    .work-unreport {
      width: 55%;
      overflow: auto;
      // border: 1px solid #fff;
      box-sizing: border-box;
      .unreport-btns {
        padding: 5px;
        // border-bottom: 1px solid #fff;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .work-unreport-title {
          flex: 1;
          font-size: 20px;
          // color: #fff;
          text-align: center;
          line-height: 33px;
        }
      }
    }
  }
  :deep(.el-dropdown-selfdefine) {
    font-size: 16px;
    // color: #fff;
  }
  :deep(.el-dropdown-menu) {
    padding: 4px;
    box-sizing: border-box;
  }
  :deep(.el-dropdown-menu__item) {
    font-size: 16px !important;
  }
  :deep(.el-table__column-filter-trigger) i {
    font-size: 14px;
    // color: #fff;
  }
  // /deep/ .el-table__header tr,
  // /deep/ .el-table__header th {
  //   height: 42px;
  // }
</style>
