<template>
  <div class="app-container">
    <el-card>
      <span>项目名称</span>
      <el-select v-model="projectValue" placeholder="请选择项目名称" filterable size="small">
        <el-option
          v-for="item in project"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addReceipt">增加</el-button>
      <el-button type="warning" size="small" icon="el-icon-download" @click="exportTable()">导出</el-button>
      <div class="title">总装箱单</div>
      <el-table
        v-loading="loading"
        :data="receiptData"
        border
        size="mini"
        style="margin-top:20px"
        @row-click="searchTable">
        <el-table-column
          label="装箱单号"
          align="center"
          min-width="150px">
          <template slot-scope="scope">{{ scope.row.装箱单号 }}</template>
        </el-table-column>
        <el-table-column
          label="发货节点"
          align="center"
          min-width="100px">
          <template slot-scope="scope">{{ scope.row.发货节点 }}</template>
        </el-table-column>
        <el-table-column
          label="名称"
          align="center"
          min-width="100px">
          <template slot-scope="scope">{{ scope.row.名称 }}</template>
        </el-table-column>
        <el-table-column
          label="收货单位"
          align="center">
          <template slot-scope="scope">{{ scope.row.收货单位 }}</template>
        </el-table-column>
        <el-table-column
          label="联系人"
          align="center">
          <template slot-scope="scope">{{ scope.row.联系人 }}</template>
        </el-table-column>
        <el-table-column
          label="联系方式"
          align="center">
          <template slot-scope="scope">{{ scope.row.联系方式 }}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleEditReceipt(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDeleteReceipt(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card style="margin-top: 10px">
      <el-button :disabled="!disabled" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addMachine">添加主机</el-button>
      <div class="title">主机</div>
      <el-table
        v-loading="loading"
        :data="machineTableData"
        border
        size="mini"
        style="margin-top:20px">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="groupData"
              border
              size="mini"
              style="width: 90%">
              <el-table-column
                label="序号"
                type="index"
                align="center"
                width="100px"/>
              <el-table-column
                align="center"
                label="类别"
              ><template slot-scope="scope">{{ scope.row.类别 }}</template></el-table-column>
              <el-table-column
                align="center"
                label="代号"
              ><template slot-scope="scope">{{ scope.row.代号 }}</template></el-table-column>
              <el-table-column
                align="center"
                label="名称"
              ><template slot-scope="scope">{{ scope.row.名称 }}</template></el-table-column>
              <el-table-column
                align="center"
                label="规格"
              ><template slot-scope="scope">{{ scope.row.规格 }}</template></el-table-column>
              <el-table-column
                align="center"
                label="数量"
              ><template slot-scope="scope">{{ scope.row.数量 }}</template></el-table-column>
              <el-table-column
                align="center"
                label="备注"
              ><template slot-scope="scope">{{ scope.row.备注 }}</template></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="100px"/>
        <el-table-column
          label="代号"
          align="center"
          min-width="100px">
          <template slot-scope="scope">{{ scope.row.代号 }}</template>
        </el-table-column>
        <el-table-column
          label="机床名称"
          align="center"
          min-width="100px">
          <template slot-scope="scope">{{ scope.row.机床名称 }}</template>
        </el-table-column>
        <el-table-column
          label="数量"
          align="center"
          min-width="100px">
          <template slot-scope="scope">{{ scope.row.数量 }}</template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center">
          <template slot-scope="scope">{{ scope.row.备注 }}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="editMachine(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteMachine(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card style="margin-top: 10px">
      <el-button :disabled="!disabled" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addSpare">添加备件</el-button>
      <div class="title">随机供应的备件</div>
      <el-table
        v-loading="loading"
        :data="spareData"
        border
        size="mini"
        style="margin-top:20px">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          min-width="150px"/>
        <el-table-column
          label="名称"
          align="center">
          <template slot-scope="scope">{{ scope.row.名称 }}</template>
        </el-table-column>
        <el-table-column
          label="代号"
          align="center"
          min-width="100px">
          <template slot-scope="scope">{{ scope.row.代号 }}</template>
        </el-table-column>
        <el-table-column
          label="数量"
          align="center"
          min-width="100px">
          <template slot-scope="scope">{{ scope.row.数量 }}</template>
        </el-table-column>
        <el-table-column
          label="单位"
          align="center">
          <template slot-scope="scope">{{ scope.row.单位 }}</template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center">
          <template slot-scope="scope">{{ scope.row.备注 }}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="editSpare(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteSpare(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card style="margin-top: 10px">
      <el-button :disabled="!disabled" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addFile">添加文件</el-button>
      <div class="title">随机技术文件</div>
      <el-table
        v-loading="fileLoading"
        :data="fileData"
        border
        size="mini"
        style="margin-top:20px">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          min-width="150px"/>
        <el-table-column
          label="名称"
          align="center"
          min-width="200px">
          <template slot-scope="scope">{{ scope.row.名称 }}</template>
        </el-table-column>
        <el-table-column
          label="数量"
          align="center"
          min-width="100px">
          <template slot-scope="scope">{{ scope.row.数量 }}</template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center"
          min-width="500px">
          <template slot-scope="scope">{{ scope.row.备注 }}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="editFile(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteFile(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog :title="receiptTitle" :visible.sync="receiptVisible" center style="min-height: 200px" width="800px">
      <el-form ref="receiptForm" :rules="receiptRules" :model="receiptForm" label-position="left" label-width="110px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="装箱单号" prop="装箱单号">
              <el-input v-model="receiptForm.装箱单号" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="名称">
              <el-input v-model="receiptForm.名称" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货节点" prop="发货节点">
              <el-date-picker
                v-model="receiptForm.发货节点"
                value-format="yyyy-MM-dd"
                size="small"
                type="date"
                style="width:200px"
                placeholder="请选择发货节点"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货单位" prop="收货单位">
              <el-input v-model="receiptForm.收货单位" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="联系人">
              <el-input v-model="receiptForm.联系人" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="联系方式">
              <el-input v-model="receiptForm.联系方式" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button v-if="receiptTitle === '新增总装箱单'" type="primary" @click="submitAddReceipt">确定</el-button>
        <el-button v-else-if="receiptTitle === '编辑总装箱单'" type="primary" @click="submitEditReceipt">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="machineVisible" :title="machineTitle" center style="min-height: 200px" width="400px">
      <el-form ref="machineForm" :rules="machineRules" :model="machineForm" label-position="left" label-width="110px" class="demo-ruleForm">
        <el-row>
          <el-col v-if="machineTitle==='添加主机'" :span="24">
            <el-form-item label="机床号" prop="机床号">
              <el-select v-model="machineValue" placeholder="请选择机床图号" filterable size="small">
                <el-option
                  v-for="item in machine"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="数量" prop="数量">
              <el-input v-model="machineForm.数量" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="名称">
              <el-input v-model="machineForm.备注" type="textarea" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button v-if="machineTitle==='添加主机'" type="primary" @click="submitAddMachine">确定</el-button>
        <el-button v-else-if="machineTitle==='编辑主机'" type="primary" @click="submitEditMachine">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="fileVisible" :title="fileTitle" center style="min-height: 200px" width="400px">
      <el-form ref="fileForm" :rules="filerules" :model="fileForm" label-position="left" label-width="110px" class="demo-ruleForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称" prop="名称">
              <el-input v-model="fileForm.名称" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="数量" prop="数量">
              <el-input v-model="fileForm.数量" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="备注">
              <el-input v-model="fileForm.备注" type="textarea" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button v-if="fileTitle==='添加文件'" type="primary" @click="submitAddFile">确定</el-button>
        <el-button v-else-if="fileTitle==='编辑文件'" type="primary" @click="submitEditFile">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="spareVisible" :title="spareTitle" center style="min-height: 200px" width="400px">
      <el-form ref="spareForm" :rules="spareRule" :model="spareForm" label-position="left" label-width="110px" class="demo-ruleForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="图号" prop="图号">
              <el-input v-model="spareForm.图号" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="名称" prop="名称">
              <el-input v-model="spareForm.名称" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="规格" prop="规格">
              <el-input v-model="spareForm.规格" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="数量" prop="数量">
              <el-input v-model="spareForm.数量" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="单位" prop="单位">
              <el-input v-model="spareForm.单位" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="备注">
              <el-input v-model="spareForm.备注" type="textarea" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button v-if="spareTitle==='添加备件'" type="primary" @click="submitAddSpare">确定</el-button>
        <el-button v-else-if="spareTitle==='编辑备件'" type="primary" @click="submitEditSpare">确定</el-button>
      </div>
    </el-dialog>
    <div v-show="true" id="cjn">
      <!--封面-->
      <table class="tg" style="width: 900px">
        <colgroup>
          <col style="width: 150px">
          <col style="width: 150px">
          <col style="width: 150px">
          <col style="width: 150px">
          <col style="width: 150px">
          <col style="width: 150px">
        </colgroup>
        <tr>
          <td class="tg-cw9i" colspan="6"><p style="margin-top:170px">数 控 轧 辊 铣 扁 专机</p></td>
        </tr>
        <tr>
          <td class="tg-qj3h" colspan="6"><p style="margin-top:50px">装&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单</p></td>
        </tr>
        <tr>
          <td class="tg-qj3h" colspan="6">{{ receiptName }}</td>
        </tr>
        <tr>
          <td class="tg-qj3h" colspan="6">
            <img style="margin-top:120px" src="data:image/jpeg;base64, ">
          </td>
        </tr>
        <tr>
          <td class="tg-a8eg" colspan="6"><p style="margin-left:30px">出厂编号：</p></td>
        </tr>
        <tr>
          <td class="tg-qj3h" colspan="6"><p style="margin-top:70px">中&nbsp;&nbsp;&nbsp;华&nbsp;&nbsp;&nbsp;人&nbsp;&nbsp;&nbsp;民&nbsp;&nbsp;&nbsp;共&nbsp;&nbsp;&nbsp;和&nbsp;&nbsp;&nbsp;国</p></td>
        </tr>
        <tr>
          <td class="tg-qj3h" colspan="6"><p >江&nbsp;&nbsp;&nbsp;苏&nbsp;&nbsp;&nbsp;高&nbsp;&nbsp;&nbsp;精&nbsp;&nbsp;&nbsp;机&nbsp;&nbsp;&nbsp;电&nbsp;&nbsp;&nbsp;装&nbsp;&nbsp;&nbsp;备&nbsp;&nbsp;&nbsp;有&nbsp;&nbsp;&nbsp;限&nbsp;&nbsp;&nbsp;公&nbsp;&nbsp;&nbsp;司</p></td>
        </tr>
      </table>
      <!--内容-->
      <table class="tg1" style="table-layout: fixed; width: 900px;margin-top:50px">
        <colgroup>
          <col style="width: 150px">
          <col style="width: 150px">
          <col style="width: 150px">
          <col style="width: 150px">
          <col style="width: 150px">
          <col style="width: 150px">
        </colgroup>
        <tr>
          <td class="tg-8zau" colspan="5">装&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单</td>
          <td class="tg-hjji">{{ receiptName }}</td>
        </tr>
        <tr>
          <td class="tg-13k7" colspan="6">本装箱单所列的包装品开箱后应立即清点<br></td>
        </tr>
        <tr>
          <td class="tg-13pz">箱号</td>
          <td class="tg-baqh" rowspan="2"/>
          <td class="tg-13pz">箱体尺寸<br></td>
          <td class="tg-baqh" colspan="3" rowspan="2"/>
        </tr>
        <tr>
          <td class="tg-13pz">毛重</td>
          <td class="tg-13pz">净重<br></td>
        </tr>
        <tbody>
          <tr>
            <td class="tg-60hs" colspan="6">一、主机</td>
          </tr>
          <tr>
            <td class="tg-13pz">序号<br></td>
            <td class="tg-13pz">代号</td>
            <td class="tg-13pz" colspan="2">名称</td>
            <td class="tg-13pz">数量<br></td>
            <td class="tg-13pz">备注<br></td>
          </tr>
          <tr v-for="(list, index) in machineTableData" :key="index">
            <td class="tg-0lax">{{ list.序号 }}</td>
            <td class="tg-0lax">{{ list.代号 }}</td>
            <td class="tg-0lax" colspan="2">{{ list.机床名称 }}</td>
            <td class="tg-0lax">{{ list.数量 }}</td>
            <td class="tg-0lax">{{ list.备注 }}</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="tg-60hs" colspan="6">二、机床所属部件</td>
          </tr>
          <tr>
            <td class="tg-13pz">序号</td>
            <td class="tg-13pz">代号</td>
            <td class="tg-13pz">名称<br></td>
            <td class="tg-13pz">规格</td>
            <td class="tg-13pz">数量</td>
            <td class="tg-13pz">备注</td>
          </tr>
          <tr v-for="(list, index) in groupData" :key="index">
            <td class="tg-0lax">{{ index + 1 }}</td>
            <td class="tg-0lax">{{ list.代号 }}</td>
            <td class="tg-0lax">{{ list.名称 }}</td>
            <td class="tg-0lax">{{ list.规格 }}</td>
            <td class="tg-0lax">{{ list.数量 }}</td>
            <td class="tg-0lax">{{ list.备注 }}</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="tg-60hs" colspan="6">三、随机供应备件</td>
          </tr>
          <tr>
            <td class="tg-13pz">序号<br></td>
            <td class="tg-13pz">名称</td>
            <td class="tg-13pz" colspan="2">代号<br></td>
            <td class="tg-13pz">数量<br></td>
            <td class="tg-13pz">备注<br></td>
          </tr>
          <tr v-for="(list, index) in spareData" :key="index">
            <td class="tg-0lax">{{ index + 1 }}</td>
            <td class="tg-0lax">{{ list.名称 }}</td>
            <td class="tg-0lax" colspan="2">{{ list.代号 }}</td>
            <td class="tg-0lax">{{ list.数量 }}</td>
            <td class="tg-0lax">{{ list.备注 }}</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="tg-60hs" colspan="6">四、随机技术文件</td>
          </tr>
          <tr>
            <td class="tg-13pz">序号<br></td>
            <td class="tg-13pz">名称<br></td>
            <td class="tg-13pz" colspan="2">代号</td>
            <td class="tg-13pz">数量</td>
            <td class="tg-13pz">备注</td>
          </tr>
          <tr v-for="(list, index) in fileData" :key="index">
            <td class="tg-0lax" align="center">{{ index + 1 }}</td>
            <td class="tg-0lax" align="center">{{ list.名称 }}</td>
            <td class="tg-0lax" colspan="2" align="center">{{ list.代号 }}</td>
            <td class="tg-0lax" align="center">{{ list.数量 }}</td>
            <td class="tg-0lax" align="center">{{ list.备注 }}</td>
          </tr>
        </tbody>
        <tr>
          <td class="tg-baqh">标记<br></td>
          <td class="tg-baqh">处数<br></td>
          <td class="tg-baqh">更改文件号<br></td>
          <td class="tg-baqh">签字<br></td>
          <td class="tg-baqh">日期<br></td>
          <td class="tg-0lax"/>
        </tr>
        <tr>
          <td class="tg-0lax"/>
          <td class="tg-0lax"/>
          <td class="tg-0lax"/>
          <td class="tg-0lax"/>
          <td class="tg-0lax"/>
          <td class="tg-0lax"/>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { projectSelect, getReciptData, insertReciptData, updateReciptData, deleteReciptData, getMachineData, getGroupData, machineSelect, addMachineData, updateMachineData, deleteMachineData, getFileData, addFileData, editFileData, deleteFileData, getSpareData, addSpareData, editSpareData, deleteSpareData } from '@/api/TechnologyCenter/CreatePackingList'
import $ from 'jquery'
export default {
  data() {
    return {
      groupData: [],
      project: [],
      projectValue: '',
      machine: [],
      machineValue: '',
      receiptData: [],
      loading: false,
      fileData: [],
      fileLoading: false,
      receiptTitle: '',
      receiptVisible: false,
      machineTitle: '',
      machineVisible: false,
      GroupDataVisible: false,
      spareVisible: false,
      spareTitle: '',
      spareForm: {
        备件编号: '',
        图号: '',
        名称: '',
        规格: '',
        单位: '',
        备注: '',
        数量: ''
      },
      spareRule: {
        名称: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        数量: [{ required: true, message: '请输入数量', trigger: 'blur' }]
      },
      spareData: [],
      receiptForm: {
        装箱单号: '',
        发货节点: '',
        名称: '',
        收货单位: '',
        联系人: '',
        联系方式: ''
      },
      GroupDataForm: {
        部件编号: '',
        代号: '',
        名称: '',
        规格: '',
        备注: '',
        数量: ''
      },
      GroupDataRule: {
        名称: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        数量: [{ required: true, message: '请输入数量', trigger: 'blur' }]
      },
      receiptRules: {
        装箱单号: [{ required: true, message: '请输入装箱单号', trigger: 'blur' }],
        名称: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        发货节点: [{ required: true, message: '请输入发货节点', trigger: 'blur' }]
      },
      machineForm: {
        序号: '',
        机床号: '',
        备注: '',
        数量: ''
      },
      machineRules: {
        // 机床号: [{ required: true, message: '请选择机床号', trigger: 'change' }],
        // 数量: [{ required: true, message: '请输入数量', trigger: 'blur' }]
      },
      rules: {
      },
      machineTableData: [],
      receiptName: '',
      receiptNum: 0, // 装箱单号，全局要使用
      fileVisible: false,
      fileTitle: '',
      fileForm: {
        文件编号: '',
        名称: '',
        数量: '',
        备注: ''
      },
      filerules: {
        名称: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        数量: [{ required: true, message: '请输入数量', trigger: 'blur' }]
      }
    }
  },
  computed: {
    disabled() {
      return this.receiptData.length > 0
    },
    projectName() {
      for (let i = 0; i < this.project.length; i++) {
        if (this.project[i].value === this.projectValue) {
          return this.project[i].label
        }
      }
    }
  },
  watch: {
    project(val) {
      if (val.length > 0) {
        this.projectValue = val[0].value
      }
    },
    projectValue(val) {
      this.machineTableData = []
      this.receiptData = []
      this.spareData = []
      this.fileData = []
      this.receiptNum = 0
      this.receiptName = ''
      if (val) {
        this.getMachineSelect(val)
      }
      this.getReceipt()
    },
    receiptNum(val) {
      if (val !== 0) {
        this.getMachineData()
      }
    },
    machineTableData(val) {
      if (val.length > 0) {
        this.getFileData()
        this.getSpareData()
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getSelect(projectSelect, ['项目名称', '项目流水号'], 'project')
    },
    getMachineSelect(val) {
      this.getSelect(machineSelect, ['机床图号', '机床流水号'], 'machine', val)
    },
    async getReceipt() {
      this.receiptData = []
      this.machineTableData = []
      const response = await getReciptData(this.projectValue)
      const data = response.data
      if (data.length > 0) {
        // this.receiptNum = data[0].装箱单编号
        // this.receiptName = data[0].装箱单号
        this.receiptData = data
      } else {
        // this.receiptNum = 0
        // this.receiptName = ''
      }
    },
    addReceipt() {
      this.addForm('receiptForm')
      for (let i = 0; i < this.project.length; i++) {
        if (this.projectValue === this.project[i].value) {
          this.receiptForm.名称 = this.project[i].label
        }
      }
      this.receiptVisible = true
      this.receiptTitle = `新增总装箱单`
    },
    submitAddReceipt() {
      this.addTable(insertReciptData, [this.receiptForm.装箱单号, this.receiptForm.发货节点, this.receiptForm.名称, this.receiptForm.收货单位, this.receiptForm.联系方式, this.receiptForm.联系人, this.projectValue], 'receiptForm', function() {
        this.receiptVisible = false
        this.receiptNum = 0
        this.receiptName = ''
        this.getReceipt()
      })
    },
    handleEditReceipt(row) {
      this.editForm(row, 'receiptForm', function() {
        this.receiptVisible = true
        this.receiptTitle = `编辑总装箱单`
      })
    },
    submitEditReceipt() {
      this.editTable(updateReciptData, [this.receiptForm.装箱单号, this.receiptForm.发货节点, this.receiptForm.名称, this.receiptForm.收货单位, this.receiptForm.联系方式, this.receiptForm.联系人, this.receiptNum], 'receiptForm', function() {
        this.receiptVisible = false
        this.receiptNum = 0
        this.receiptName = ''
        this.getReceipt()
      })
    },
    handleDeleteReceipt(row) {
      this.deleteRow(deleteReciptData, row.装箱单编号, function() {
        this.receiptNum = 0
        this.receiptName = ''
        this.getReceipt()
      })
    },
    cancel() {
      this.receiptVisible = false
      this.machineVisible = false
      this.fileVisible = false
      this.spareVisible = false
    },
    searchTable(row) {
      console.log(row)
      this.receiptNum = row.装箱单编号
      this.receiptName = row.装箱单号
    },
    async getMachineData() {
      this.machineTableData = []
      const response = await getMachineData(this.receiptNum)
      const data = response.data
      console.log(data, 111)
      if (data.length === 0) {
        this.machineValue = ''
        this.spareData = []
        this.fileData = []
      } else {
        this.machineValue = data[0].机床号
      }
      console.log(this.machineValue, 222)
      this.groupData = []
      for (let i = 0; i < data.length; i++) {
        const resp = await getGroupData(data[i].机床号)
        console.log(resp)
        const groupData = resp.data.map(item => {
          item.类别 = '机床所属部件'
          return item
        })
        this.groupData = groupData
        this.machineTableData.push({
          序号: data[i].序号,
          代号: data[i].代号,
          机床名称: data[i].名称,
          数量: data[i].数量,
          备注: data[i].备注
        })
      }
    },
    addMachine() {
      this.addForm('machineForm', function() {
        this.machineTitle = `添加主机`
        this.machineVisible = true
      })
    },
    async submitAddMachine() {
      this.addTable(addMachineData, [this.projectName, this.machineValue, this.machineForm.备注, this.machineForm.数量, this.receiptNum], 'machineForm', function() {
        this.machineVisible = false
        this.getMachineData()
      })
      // const response = await addMachineData(this.projectName, this.machineValue, this.machineForm.备注, this.machineForm.数量, this.receiptNum)
      // if (response.data[0].result === '1') {
      //   this.machineVisible = false
      //   this.getMachineData()
      // }
    },
    editMachine(row) {
      this.editForm(row, 'machineForm', function() {
        this.machineTitle = `编辑主机`
        this.machineVisible = true
      })
    },
    async submitEditMachine() {
      this.editTable(updateMachineData, [this.machineForm.序号, this.machineForm.数量, this.machineForm.备注], 'machineForm', function() {
        this.machineVisible = false
        this.getMachineData()
      })
      // const response = await updateMachineData(this.machineForm.序号, this.machineForm.数量, this.machineForm.备注)
      // if (response.data[0].result === '1') {
      //   this.machineVisible = false
      //   this.getMachineData()
      // }
    },
    deleteMachine(row) {
      this.deleteRow(deleteMachineData, row.序号, function() {
        this.getMachineData()
      })
    },
    // editGroupData(row) {
    //   console.log(row)
    //   this.editForm(row, 'GroupDataForm', function() {
    //     this.GroupDataVisible = true
    //   })
    // },
    // async submitEditGroupData() {
    //   console.log(this.GroupDataForm.部件编号, this.GroupDataForm.代号, this.GroupDataForm.名称, this.GroupDataForm.规格, this.GroupDataForm.数量, this.GroupDataForm.备注)
    //   editGroupData(this.GroupDataForm.部件编号, this.GroupDataForm.代号, this.GroupDataForm.名称, this.GroupDataForm.规格, this.GroupDataForm.数量, this.GroupDataForm.备注).then(response => {
    //     if (response.data[0].result === '1') {
    //       this.$message.success('编辑成功')
    //       this.GroupDataVisible = false
    //       this.getMachineData()
    //     } else {
    //       this.$message.error('编辑失败')
    //     }
    //   })
    // },
    async getFileData() {
      const response = await getFileData(this.receiptNum)
      this.fileData = response.data
    },
    addFile() {
      this.addForm('fileForm', function() {
        this.fileTitle = `添加文件`
        this.fileVisible = true
      })
    },
    async submitAddFile() {
      this.addTable(addFileData, [this.fileForm.名称, this.fileForm.数量, this.fileForm.备注, this.receiptNum], 'fileForm', function() {
        this.fileVisible = false
        this.getFileData()
      })
    },
    editFile(row) {
      this.editForm(row, 'fileForm', function() {
        this.fileTitle = `编辑文件`
        this.fileVisible = true
      })
    },
    async submitEditFile() {
      this.editTable(editFileData, [this.fileForm.名称, this.fileForm.数量, this.fileForm.备注, this.fileForm.文件编号], 'fileForm', function() {
        this.fileVisible = false
        this.getFileData()
      })
    },
    deleteFile(row) {
      this.deleteRow(deleteFileData, row.文件编号, function() {
        this.getFileData()
      })
    },
    async getSpareData() {
      console.log(this.machineValue, 333)
      const response = await getSpareData(this.projectValue, this.machineValue)
      console.log(response)
      for (let i = 0; i < response.data.length; i++) {
        if (response.data[i].图号 !== undefined && response.data[i].规格 !== undefined) {
          response.data[i].代号 = response.data[i].图号 + ' ' + response.data[i].规格
        } else {
          response.data[i].代号 = ''
        }
      }
      this.spareData = response.data
    },
    addSpare() {
      this.addForm('spareForm', function() {
        this.spareTitle = `添加备件`
        this.spareVisible = true
      })
    },
    async submitAddSpare() {
      this.addTable(addSpareData, [this.spareForm.图号, this.spareForm.名称, this.spareForm.规格, this.spareForm.单位, this.spareForm.数量, this.spareForm.备注, this.receiptNum, this.projectValue, this.machineValue], 'spareForm', function() {
        this.spareVisible = false
        this.getSpareData()
      })
      // const response = await addSpareData(this.spareForm.名称, this.spareForm.规格, this.spareForm.单位, this.spareForm.数量, this.spareForm.备注, this.receiptNum)
      // if (response.data[0].result === '1') {
      //   this.spareVisible = false
      //   this.getSpareData()
      // }
    },
    editSpare(row) {
      this.editForm(row, 'spareForm', function() {
        this.spareTitle = `编辑备件`
        this.spareVisible = true
      })
    },
    async submitEditSpare() {
      this.editTable(editSpareData, [this.spareForm.图号, this.spareForm.名称, this.spareForm.规格, this.spareForm.单位, this.spareForm.数量, this.spareForm.备注, this.spareForm.备件编号], 'spareForm', function() {
        this.spareVisible = false
        this.getSpareData()
      })
      // const response = await editSpareData(this.spareForm.名称, this.spareForm.规格, this.spareForm.单位, this.spareForm.数量, this.spareForm.备注, this.spareForm.备件编号)
      // if (response.data[0].result === '1') {
      //   this.spareVisible = false
      //   this.getSpareData()
      // }
    },
    deleteSpare(row) {
      this.deleteRow(deleteSpareData, row.备件编号, function() {
        this.getSpareData()
      })
    },
    exportTable() {
      const htmlNode = $('#cjn').html()
      const body = $('body').attr('style', 'padding: 20px;margin: 0 auto;display: block;width: 950px;background: #fff;')
      body.children().hide()
      const printNode = $(htmlNode)
      body.append(printNode)
      window.print()
      body.removeAttr('style')
      body.children().not('script').show()
      body.children().not('#app').hide()
      printNode.remove()
    }
  }
}
</script>

<style scoped>
span{
  margin: 20px;
}
.title{
  float: right;
  font-size: 20px;
  padding: 10px;
  font-weight: bolder;
}
</style>
<style type="text/css">
  .tg {border-collapse: collapse;border-spacing: 0;border-width: 1px;border-style: solid;border-color: black;}
  .tg td {font-family: Arial, sans-serif;font-size: 14px;padding: 10px 5px;border-style: solid;border-width: 0px;overflow: hidden;word-break: normal;}
  .tg th {font-family: Arial, sans-serif;font-size: 14px;font-weight: normal;padding: 10px 5px;border-style: solid;border-width: 0px;overflow: hidden;word-break: normal;}
  .tg .tg-auka {font-size: 26px;text-align: center;vertical-align: top;}
  .tg .tg-qj3h {font-size: 36px;text-align: center;vertical-align: top;}
  .tg .tg-s268 {text-align: center;}
  .tg .tg-0lax {text-align: center;vertical-align: top;}
  .tg .tg-cw9i {font-size: 28px;text-align: center;vertical-align: top;}
  .tg .tg-a8eg {font-size: 28px;text-align: center;vertical-align: top;}
  .tg1  {border-collapse:collapse;border-spacing:0;}
  .tg1 td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
  .tg1 th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
  .tg1 .tg-hjji{font-size:24px;text-align:center;vertical-align:top}
  .tg1 .tg-13k7{font-size:20px;text-align:left}
  .tg1 .tg-auka{font-size:26px;text-align:center;vertical-align:top}
  .tg1 .tg-baqh{text-align:center;vertical-align:top}
  .tg1 .tg-qj3h{font-size:36px;text-align:center;vertical-align:top}
  .tg1 .tg-8zau{font-size:32px;text-align:center}
  .tg1 .tg-13pz{font-size:18px;text-align:center;vertical-align:top}
  .tg1 .tg-60hs{font-size:20px;text-align:left;vertical-align:top}
  .tg1 .tg-0lax{text-align:center;vertical-align:top}
  .tg1 .tg-a8eg{font-size:28px;text-align:center;vertical-align:top}
</style>
