<template>
  <div>
    <el-card class="box-card">
      <div>
        <el-row>
          <el-button :disabled="disabledAdd" type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="function_InvoiceAdd">新增</el-button>
          <el-button :disabled="disabledEdit" type="warning" icon="el-icon-edit" size="mini" @click="function_InvoiceEdit">编辑</el-button>
          <el-button :disabled="disabledSave" type="success" icon="el-icon-upload" size="mini" @click="function_InvoiceSave">保存</el-button>
          <el-button :disabled="disabledExamine" type="success" icon="el-icon-lock" size="mini" @click="function_InvoiceExamine">核准</el-button>
          <el-button :disabled="disabledAbandoningTrial" type="info" icon="el-icon-unlock" size="mini" @click="function_InvoiceAbandoningTrial">放弃</el-button>
          <el-button :disabled="disabledDelete" type="danger" icon="el-icon-delete" size="mini" @click="function_InvoiceDelete">删除</el-button>
          <div style="float: right">
            <el-autocomplete
              v-model="searchCriteria"
              :fetch-suggestions="querySearch"
              clearable
              style="width: 200px;margin-left: 10px;"
              size="small"
              class="inline-input"
              placeholder="请输入发货单名称"
              @clear="clearSelect"
              @select="handleSelect"
            />
          </div>
        </el-row>
        <el-divider/>
        <el-row>
          <div class="text">
            <span>制单人：</span>
            <span>{{ isMaker }}</span>
            <el-divider direction="vertical"/>
            <span style="margin-left: 10px">核准人：</span>
            <span>{{ isExamine }}</span>
            <el-divider direction="vertical"/>
            <span style="margin-left: 10px">发货执行人：</span>
            <span>{{ isDelive }}</span>
          </div>
        </el-row>

        <!--<el-button icon="el-icon-refresh" size="mini" @click="function_Refresh">刷新</el-button>-->

      </div>
      <el-divider class="fengexian" content-position="right"><el-button type="text" class="el-icon-caret-bottom" @click="show = !show">  展开</el-button></el-divider>
      <div v-show="show" style="margin-top: 20px" class="transition-box">
        <el-collapse-transition>
          <div class="text item">
            <el-row>
              <el-col :span="24">
                <span style="width:80px;display:inline-block;">发货单名：</span>
                <el-input
                  v-model="searchFrom.发货单名"
                  clearable
                  placeholder="请输入"
                  style="width: 150px;margin-right: 10px"
                  size="mini"/>
                <span style="width:80px;display:inline-block;">发货单号：</span>
                <el-input
                  v-model="searchFrom.发货单号"
                  placeholder="请输入"
                  clearable
                  style="width: 150px;margin-right: 10px"
                  size="mini"/>
                <span style="width:80px;display:inline-block;">收货单位：</span>
                <el-input
                  v-model="searchFrom.收货单位"
                  placeholder="请输入"
                  clearable
                  style="width: 150px;margin-right: 10px"
                  size="mini"/>
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="24">
                <span style="width:80px;display:inline-block;">车辆牌号：</span>
                <el-input
                  v-model="searchFrom.车辆牌号"
                  placeholder="请输入"
                  clearable
                  style="width: 150px;margin-right: 10px"
                  size="mini"/>
                <span style="width:80px;display:inline-block;">司机姓名：</span>
                <el-input
                  v-model="searchFrom.司机姓名"
                  placeholder="请输入"
                  clearable
                  style="width: 150px;margin-right: 10px"
                  size="mini"/>
                <span style="width:80px;display:inline-block;">司机电话：</span>
                <el-input
                  v-model="searchFrom.司机电话"
                  placeholder="请输入"
                  clearable
                  style="width: 150px;margin-right: 10px"
                  size="mini"/>
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="24">
                <span style="width:80px;display:inline-block;">制单人：</span>
                <el-input
                  v-model="searchFrom.制单人"
                  placeholder="请输入"
                  clearable
                  style="width: 150px;margin-right: 10px"
                  size="mini"/>
                <span style="width:80px;display:inline-block;">核准人：</span>
                <el-input
                  v-model="searchFrom.核准人"
                  placeholder="请输入"
                  clearable
                  style="width: 150px;margin-right: 10px"
                  size="mini"/>
                <span style="width:80px;display:inline-block;">执行人：</span>
                <el-input
                  v-model="searchFrom.执行人"
                  placeholder="请输入"
                  clearable
                  style="width: 150px;margin-right: 10px"
                  size="mini"/>
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="24">
                <span style="width:80px;display:inline-block;">制单日期：</span>
                <el-date-picker
                  v-model="searchFrom.开始制单日期"
                  style="width: 150px; margin-right: 10px"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="small"
                  type="datetime"
                  placeholder="开始日期"/>
                <span style="width:80px;display:inline-block;">制单日期：</span>
                <el-date-picker
                  v-model="searchFrom.结束制单日期"
                  style="width: 150px; margin-right: 10px"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="small"
                  type="datetime"
                  placeholder="结束日期"/>
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="24">
                <span style="width:80px;display:inline-block;">核准日期：</span>
                <el-date-picker
                  v-model="searchFrom.开始核准日期"
                  style="width: 150px; margin-right: 10px"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="small"
                  type="datetime"
                  placeholder="开始日期"/>
                <span style="width:80px;display:inline-block;">核准日期：</span>
                <el-date-picker
                  v-model="searchFrom.结束核准日期"
                  style="width: 150px; margin-right: 10px"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="small"
                  type="datetime"
                  placeholder="结束日期"/>
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="24">
                <span style="width:80px;display:inline-block;">发货日期：</span>
                <el-date-picker
                  v-model="searchFrom.开始发货日期"
                  style="width: 150px; margin-right: 10px"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="small"
                  type="datetime"
                  placeholder="开始日期"/>
                <span style="width:80px;display:inline-block;">发货日期：</span>
                <el-date-picker
                  v-model="searchFrom.结束发货日期"
                  style="width: 150px; margin-right: 10px"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="small"
                  type="datetime"
                  placeholder="结束日期"/>
                <el-button type="success" icon="el-icon-menu" size="mini" style="margin-left: 74px" @click="openSearch">加载</el-button>
                <el-button type="warning" icon="el-icon-delete" size="mini" @click="clearSearch">清空</el-button>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
        <el-divider/>
      </div>
      <div class="text item">
        <span style="width:80px;display:inline-block;">发货单号：</span>
        <el-input
          v-model="input_Number"
          :disabled="disabled"
          style="width: 200px;margin-right: 10px"
          size="mini"/>
        <span style="width:80px;display:inline-block;">收货地址：</span>
        <el-input
          :disabled="disabledAdress"
          v-model="input_Adress"
          clearable
          size="mini"
          style="width: 497px;margin-right: 10px"
          placeholder="请输入内容"/>
      </div>
      <div class="text item">
        <span style="width:80px;display:inline-block;">机床名称：</span>
        <el-autocomplete
          :disabled="disabledName"
          :fetch-suggestions="querySearchMachine"
          v-model="input_Name"
          style="width: 200px;margin-right: 10px"
          size="mini"
          class="inline-input"
          @select="handleSelectMachine"/>
        <span style="width:80px;display:inline-block;">注意事项：</span>
        <el-input
          :disabled="disabledRemake"
          v-model="input_Remake"
          clearable
          style="width: 497px;margin-right: 10px"
          size="mini"
          placeholder="请输入内容"/>
      </div>
      <div class="text item">
        <span style="width:80px;display:inline-block;">收货单位：</span>
        <el-input
          :disabled="disabledCompany"
          v-model="input_Company"
          clearable
          style="width: 200px;margin-right: 10px"
          size="mini"/>
        <span style="width:80px;display:inline-block;">收货人员：</span>
        <el-input
          :disabled="disabledPeople"
          v-model="input_People"
          clearable
          size="mini"
          style="width: 200px;margin-right: 10px"
          placeholder="请输入内容"/>
        <span style="width:80px;display:inline-block;">联系电话：</span>
        <el-input
          :disabled="disabledMobile"
          v-model="input_Mobile"
          :trigger-on-focus="false"
          clearable
          size="mini"
          style="width: 200px;margin-right: 10px"
          placeholder="请输入内容"/>
      </div>
      <div class="text item">
        <span style="width:80px;display:inline-block;">车辆牌号：</span>
        <el-input
          v-model="input_LicensePlateNumber"
          :disabled="disabled"
          size="mini"
          style="width: 200px;margin-right: 10px"
          clearable/>
        <span style="width:80px;display:inline-block;">司机姓名：</span>
        <el-input
          v-model="input_Driver"
          :disabled="disabled"
          size="mini"
          style="width: 200px;margin-right: 10px"
          clearable/>
        <span style="width:80px;display:inline-block;">司机电话：</span>
        <el-input
          v-model="input_Driver_Mobile"
          :disabled="disabled"
          size="mini"
          style="width: 200px;margin-right: 10px"
          clearable/>
      </div>
      <div class="text item">
        <span style="width:80px;display:inline-block;">备注：</span>
        <el-input
          v-model="input_Record"
          :disabled="disabled"
          size="mini"
          style="width: 795px;margin-right: 10px"
          clearable/>
      </div>
      <el-divider content-position="right"><el-button :disabled="disabledPick" size="mini" type="text" icon="el-icon-edit" @click="function_Pick">选货</el-button></el-divider>
      <el-table
        v-loading="listLoading"
        :data="tableData"
        highlight-current-row
        style="width: 100%;margin-top: 20px"
        height="560"
        border
        size="mini">
        <el-table-column align="center" label="货品类别" width="80">
          <template slot-scope="scope">
            <el-tag effect="dark" size="small" type="success">{{ scope.row.货品类别 }}</el-tag>
          </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="数量" width="130">
          <template slot-scope="scope">
            <template v-if="disabledPick === false">
              <el-input-number v-model="scope.row.数量" :min="1" label="描述文字" size="mini" controls-position="right" style="width:100px" @change="handleChange"/>
            </template>
            <template v-else>
              {{ scope.row.数量 }}
            </template>
          </template>
        </el-table-column>
        <el-table-column align="center" label="设计者" width="80">
          <template slot-scope="scope">
            {{ scope.row.设计者 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="130px">
          <template slot-scope="scope">
            <el-button
              :disabled="disabledDetailsDelete"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider/>
      <div class="tex">
        <span>制单时间：</span>
        <span>{{ MakerTime }}</span>
        <el-divider direction="vertical"/>
        <span style="margin-left: 10px">核准时间：</span>
        <span>{{ ExamineTime }}</span>
        <el-divider direction="vertical"/>
        <span style="margin-left: 10px">发货时间：</span>
        <span>{{ DeliveTime }}</span>
      </div>
    </el-card>

    <el-dialog :visible.sync="dialogFormVisible" center style="min-height: 300px" width="800px">
      <div>
        <el-autocomplete
          v-model="searchPick"
          :fetch-suggestions="queryPickSearch"
          clearable
          style="width: 300px;margin-left: 10px;"
          size="small"
          class="inline-input"
          placeholder="请输入查询条件"
          @select="handlePickSelect"
        />
        <el-divider/>
      </div>
      <div>
        <el-tabs v-model="category" tab-position="left" style="height: 200px;">
          <el-tab-pane label="机床">
            <el-table
              :data="tableDataMachine"
              highlight-current-row
              style="width: 100%"
              height="200"
              border
              size="mini"
              @selection-change="handleSelectionChangeMachine">
              <el-table-column
                type="selection"
                width="55"/>
              <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>
          </el-tab-pane>
          <el-tab-pane label="组件">
            <el-table
              :data="tableDataMachine"
              highlight-current-row
              style="width: 100%"
              height="200"
              border
              size="mini"
              @selection-change="handleSelectionChangeMachine">
              <el-table-column
                type="selection"
                width="55"/>
              <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>
          </el-tab-pane>
          <el-tab-pane label="零件">
            <el-table
              :data="tableDataMachine"
              highlight-current-row
              style="width: 100%"
              height="200"
              border
              size="mini"
              @selection-change="handleSelectionChangeMachine">
              <el-table-column
                type="selection"
                width="55"/>
              <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>
          </el-tab-pane>
          <el-tab-pane label="物料">
            <el-table
              :data="tableDataMachine"
              highlight-current-row
              style="width: 100%"
              height="200"
              border
              stripe
              size="mini"
              @selection-change="handleSelectionChangeMachine">
              <el-table-column
                type="selection"
                width="55"/>
              <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>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="off()">取消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisibleSearch" center style="height: 600px" width="98%">
      <div>
        <el-table
          :data="tableDataSearchList"
          highlight-current-row
          style="width: 100%"
          height="500"
          border
          size="mini"
          @row-click="searchListItem">
          <el-table-column align="center" label="状态" width="60">
            <template slot-scope="scope">
              {{ scope.row.是否发出.toString() === '1' ? '已发出' : '未发出' }}
            </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="收货人员" width="80">
            <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="司机姓名" width="80">
            <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="制单时间" show-overflow-tooltip>
            <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>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="offSearch()">取消</el-button>
        <el-button type="primary" @click="submitSearch()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { InvoiceAdd, InvoiceDelete, InvoiceSelectPush, InvoiceFeach, InvoiceSave, InvoiceExamine, InvoiceAbandoningTrial, PickSelectPush, SelectMachine, DetailsFeach, SelectAssembly, SelectPart, SelectMateriel, InvoiceDetailsSave, InvoiceListSearch } from '@/api/MarketingCenter/DeliveryApplication'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      machineNum: '',
      machineName: '',
      searchCriteria_Machine: '',
      restaurants_Machine: [],
      input_Record: '',
      disabled: true,
      disabledAdd: false, // 增加按钮启用状态
      disabledEdit: true, // 编辑按钮启用状态
      disabledSave: true, // 保存按钮启用状态
      disabledExamine: true, // 审核按钮启用状态
      disabledAbandoningTrial: true, // 弃审按钮启用状态
      disabledDelete: true, // 删除按钮启用状态
      disabledAdress: true, // 收货地址启用状态
      disabledPeople: true, // 收货人员启用状态
      disabledMobile: true, // 联系电话启用状态
      disabledRemake: true, // 注意事项启用状态
      disabledCompany: true, // 收货单位启用状态
      disabledPick: true, // 选货按钮启用状态
      disabledName: true,
      disabledDetailsDelete: true,
      input_Company: '', // 收货单位
      input_Adress: '', // 收货地址
      input_People: '', // 收货人
      input_Mobile: '', // 收货人电话
      input_LicensePlateNumber: '', // 车辆牌号
      input_Driver: '', // 司机姓名
      input_Driver_Mobile: '', // 司机电话
      input_Remake: '', // 注意事项
      input_Number: '', // 发货单号
      invoiceNum: '', // 发货单流水号
      category: '',
      searchCriteria: '',
      input_Name: '',
      restaurants: [],
      restaurantsPick: [],
      isExamine: '请查询',
      isMaker: '请查询',
      isDelive: '请查询',
      show: false,
      tableData: [],
      array: [],
      tableDataMachine: [],
      tableDataSearchList: [],
      listLoading: false,
      dialogFormVisible: false,
      dialogFormVisibleSearch: false,
      searchPick: '',
      MakerTime: '请查询',
      ExamineTime: '请查询',
      DeliveTime: '请查询',
      typeA: [],
      typeB: [],
      typeC: [],
      typeD: [],
      typeE: [],
      typeF: [],
      typeG: [],
      form: {
        项目: '',
        项目名称: ''
      },
      searchFrom: {
        发货单名: '',
        发货单号: '',
        收货单位: '',
        车辆牌号: '',
        司机姓名: '',
        司机电话: '',
        制单人: '',
        核准人: '',
        执行人: '',
        开始制单日期: '',
        结束制单日期: '',
        开始核准日期: '',
        结束核准日期: '',
        开始发货日期: '',
        结束发货日期: '',
        发货单名_check: null,
        发货单号_check: null,
        收货单位_check: null,
        车辆牌号_check: null,
        司机姓名_check: null,
        司机电话_check: null,
        制单人_check: null,
        核准人_check: null,
        执行人_check: null,
        开始制单日期_check: null,
        结束制单日期_check: null,
        开始核准日期_check: null,
        结束核准日期_check: null,
        开始发货日期_check: null,
        结束发货日期_check: null
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'id'// 人员编号
    ])
  },
  mounted() {
    // window.onbeforeunload=function(){
    //   return '';
    // }
  },
  methods: {
    querySearchMachine(queryString, cb) {
      this.restaurants_Machine = []
      if (this.input_Name !== '' && this.input_Name !== null) {
        SelectMachine(this.input_Name).then(response => {
          const res = response.data
          res.forEach(item => {
            this.restaurants_Machine.push({
              value: item.货品编号,
              num: item.机床流水号
            })
          })
          return this.restaurants_Machine
        }).then(data => {
          var restaurants = data
          var results = queryString ? restaurants.filter(this.createFilterMachine(queryString)) : restaurants
          return results
        }).then(data => {
          // 调用 callback 返回建议列表的数据
          cb(data)
        })
      }
    },
    createFilterMachine(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
        // !== -1为全字匹配  === 0为首字匹配
      }
    },
    handleSelectMachine(item) {
      // 在此方法中可以把下拉框选中值中的内容赋值给其他变量使用
      console.log(item, 998)
      this.machineNum = item.num
      this.machineName = item.value
    },
    // function_Refresh() {
    //   this.$confirm('检测到有未保存的单据', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     location.reload()
    //   })
    // },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    function_Pick() {
      this.dialogFormVisible = true
      this.tableDataMachine = []
      this.searchPick = ''
      this.category = '0'
    },
    clearSelect() {
      this.disabledName = true
      this.disabledAdd = false // 增加按钮启用状态
      this.disabledEdit = true // 编辑按钮启用状态
      this.disabledSave = true // 保存按钮启用状态
      this.disabledExamine = true // 审核按钮启用状态
      this.disabledAbandoningTrial = true // 弃审按钮启用状态
      this.disabledDelete = true // 删除按钮启用状态
      this.disabledAdress = true // 收货地址启用状态
      this.disabledPeople = true // 收货人员启用状态
      this.disabledMobile = true // 联系电话启用状态
      this.disabledRemake = true // 注意事项启用状态
      this.disabledCompany = true // 收货单位启用状态
      this.disabledPick = true
      this.disabledDetailsDelete = true
      this.input_Company = '' // 收货单位
      this.input_Adress = '' // 收货地址
      this.input_People = '' // 收货人
      this.input_Mobile = '' // 收货人电话
      this.input_LicensePlateNumber = '' // 车辆牌号
      this.input_Driver = '' // 司机姓名
      this.input_Driver_Mobile = '' // 司机电话
      this.input_Remake = '' // 注意事项
      this.input_Number = '' // 发货单号
      this.input_Name = '' // 发货单名
      this.invoiceNum = '' // 发货单流水号
      this.tableData = []
      this.isExamine = '请查询'
      this.isMaker = '请查询'
      this.isDelive = '请查询'
      this.MakerTime = '请查询'
      this.ExamineTime = '请查询'
      this.DeliveTime = '请查询'
    },
    clear() {
      this.input_Adress = ''
      this.input_People = ''
      this.input_Mobile = ''
      this.input_LicensePlateNumber = ''
      this.input_Driver = ''
      this.input_Driver_Mobile = ''
      this.input_Remake = ''
      this.input_Company = ''
      this.input_Name = ''
      this.tableData = []
      this.isExamine = '请查询'
      this.isMaker = '请查询'
      this.isDelive = '请查询'
      this.MakerTime = '请查询'
      this.ExamineTime = '请查询'
      this.DeliveTime = '请查询'
    },
    function_InvoiceFeach() {
      this.disabledAdress = true
      this.disabledPeople = true
      this.disabledMobile = true
      this.disabledRemake = true
      this.disabledCompany = true
      this.disabledName = true
      // this.disabledExamine = false
      if (this.invoiceNum !== '' && this.invoiceNum !== null) {
        InvoiceFeach(this.invoiceNum).then(response => {
          if (response.data.length !== 0) {
            this.input_Record = response.data[0].备注
            this.input_Adress = response.data[0].收货地址
            this.input_People = response.data[0].收货人员
            this.input_Mobile = response.data[0].联系电话
            this.input_LicensePlateNumber = response.data[0].车辆牌号
            this.input_Driver = response.data[0].司机姓名
            this.input_Driver_Mobile = response.data[0].司机电话
            this.input_Remake = response.data[0].注意事项
            this.input_Number = response.data[0].发货单编号
            this.invoiceNum = response.data[0].发货单流水号
            this.input_Company = response.data[0].收货单位
            this.input_Name = response.data[0].发货单名称
            if (response.data[0].是否审核.toString() === '1') {
              this.isExamine = response.data[0].审核人
              this.isMaker = response.data[0].制单人
              response.data[0].是否发出.toString() === '1' ? this.isDelive = response.data[0].执行人 : this.isDelive = '未发出'
              this.MakerTime = response.data[0].操作日期
              this.ExamineTime = response.data[0].审核日期
              response.data[0].是否发出.toString() === '1' ? this.DeliveTime = response.data[0].发出时间 : this.DeliveTime = '未发出'
              this.disabledAdd = false
              this.disabledAbandoningTrial = false
              this.disabledExamine = true
              this.disabledDelete = true
              this.disabledEdit = true
              this.disabledSave = true
              this.disabledPick = true
              this.disabledDetailsDelete = true
            } else {
              this.disabledAbandoningTrial = true
              this.disabledEdit = false
              this.disabledAdd = false
              this.disabledExamine = false
              this.disabledDelete = false
              this.disabledSave = true
              this.disabledPick = true
              this.disabledDetailsDelete = true
              this.isExamine = '未核准'
              this.isMaker = response.data[0].制单人
              this.MakerTime = response.data[0].操作日期
              this.ExamineTime = '未核准'
              this.DeliveTime = '未核准'
            }
          }
        })
        DetailsFeach(this.invoiceNum).then(response => {
          this.tableData = response.data
        })
      }
    },
    function_InvoiceAdd() {
      InvoiceAdd(this.name).then(response => {
        if (response.data.result.length !== 0) {
          this.$message.success('新增单据成功')
          this.clear()
          this.invoiceNum = response.data.output[0].发货单流水号
          this.input_Number = response.data.result[0].发货单编号
          this.disabledCompany = false
          this.disabledAdd = true
          this.disabledSave = false
          this.disabledDelete = false
          this.disabledEdit = true
          this.disabledAdress = false
          this.disabledPeople = false
          this.disabledMobile = false
          this.disabledRemake = false
          this.disabledPick = false
          this.disabledDetailsDelete = false
          this.disabledName = false
          this.tableData = []
        } else {
          this.$message.error('新增单据失败')
        }
      })
    },
    function_InvoiceDelete() {
      this.$confirm('此操作将删除该单据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        InvoiceDelete(this.invoiceNum).then(response => {
          if (response.data[0].提示 === 0) {
            this.$message.success('删除成功！')
            this.clearSelect()
          } else {
            this.$message.error('该单据已经审核！')
          }
        })
      })
    },
    function_InvoiceSave() {
      this.typeA = []
      this.typeB = []
      this.typeC = []
      this.typeD = []
      this.typeE = []
      this.typeF = []
      this.typeG = []
      InvoiceSave(this.invoiceNum, this.input_Company, this.input_Adress, this.input_People, this.input_Mobile, this.input_Remake, this.machineName, this.machineNum).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('保存成功！')
          this.function_InvoiceFeach()
        } else {
          this.$message.error('保存失败')
        }
      })
      for (let i = 0; i < this.tableData.length; i++) {
        this.typeA.push(this.tableData[i].货品类别)
        this.typeB.push(this.tableData[i].货品编号)
        this.typeC.push(this.tableData[i].货品名称)
        this.typeD.push(this.tableData[i].货品规格)
        this.typeE.push(this.tableData[i].货品型号)
        this.typeF.push(this.tableData[i].设计者)
        this.typeG.push(this.tableData[i].数量)
      }
      InvoiceDetailsSave(this.typeA, this.typeB, this.typeC, this.typeD, this.typeE, this.typeF, this.typeG, this.invoiceNum).then(response => {
        console.log(response, 9990)
        if (response.data[0].result === '1') {
          this.$message.success('保存成功！')
          this.function_InvoiceFeach()
        } else {
          this.$message.error('保存失败')
        }
      })
    },
    function_InvoiceExamine() {
      this.$confirm('此操作将核准该单据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        InvoiceExamine(this.invoiceNum, this.name).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('审核成功！')
            this.function_InvoiceFeach()
          } else {
            this.$message.error('审核失败')
          }
        })
      })
    },
    function_InvoiceAbandoningTrial() {
      this.$confirm('此操作将放弃核准该单据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        InvoiceAbandoningTrial(this.invoiceNum).then(response => {
          if (response.data[0].弃审是否成功 === '成功') {
            this.$message.success('放弃核准成功！')
            this.function_InvoiceFeach()
          } else {
            this.$message.error('放弃核准失败,可能原因是装配部门已经确认发货,如需调整请联系装配部门打回！')
          }
        })
      })
      // this.disabledAdd = false
      // this.disabledSave = true
      // this.disabledAdress = true
      // this.disabledPeople = true
      // this.disabledMobile = true
      // this.disabledRemake = true
      // this.disabledExamine = false
      // this.disabledAbandoningTrial = true
      // this.disabledEdit = false
      // this.disabledDelete = false
    },
    function_InvoiceEdit() {
      this.disabledSave = false
      this.disabledExamine = true
      this.disabledAbandoningTrial = true
      this.disabledAdress = false
      this.disabledName = false
      this.disabledPeople = false
      this.disabledMobile = false
      this.disabledRemake = false
      this.disabledCompany = false
      this.disabledPick = false
      this.disabledDetailsDelete = false
      this.disabledEdit = true
    },
    querySearch(queryString, cb) {
      this.restaurants = []
      if (this.searchCriteria !== '' && this.searchCriteria !== null) {
        InvoiceSelectPush(this.searchCriteria).then(response => {
          const res = response.data
          res.forEach(item => {
            this.restaurants.push({
              value: item.发货单名称,
              num: item.发货单流水号
            })
          })
          return this.restaurants
        }).then(data => {
          var restaurants = data
          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
          return results
        }).then(data => {
          cb(data)
        })
      }
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
      }
    },
    handleSelect(item) {
      this.invoiceNum = item.num
      this.function_InvoiceFeach()
    },

    queryPickSearch(queryString, cb) {
      this.restaurantsPick = []
      if (this.searchPick !== '' && this.searchPick !== null) {
        PickSelectPush(this.category, this.searchPick).then(response => {
          const res = response.data
          res.forEach(item => {
            if (this.category === '0') {
              this.restaurantsPick.push({
                value: item.机床图号
              })
            }
            if (this.category === '1') {
              this.restaurantsPick.push({
                value: item.组号
              })
            }
            if (this.category === '2') {
              this.restaurantsPick.push({
                value: item.零件图号
              })
            }
            if (this.category === '3') {
              this.restaurantsPick.push({
                value: item.物料名称
              })
            }
          })
          return this.restaurantsPick
        }).then(data => {
          var restaurants = data
          var results = queryString ? restaurants.filter(this.createFilterPick(queryString)) : restaurants
          return results
        }).then(data => {
          cb(data)
        })
      }
    },
    createFilterPick(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
      }
    },
    handlePickSelect(item) {
      if (this.category === '0') {
        SelectMachine(item.value).then(response => {
          if (response.data.length !== 0) {
            this.tableDataMachine = response.data
          }
        })
      }
      if (this.category === '1') {
        SelectAssembly(item.value).then(response => {
          if (response.data.length !== 0) {
            this.tableDataMachine = response.data
          }
        })
      }
      if (this.category === '2') {
        SelectPart(item.value).then(response => {
          if (response.data.length !== 0) {
            this.tableDataMachine = response.data
          }
        })
      }
      if (this.category === '3') {
        SelectMateriel(item.value).then(response => {
          if (response.data.length !== 0) {
            this.tableDataMachine = response.data
          }
        })
      }
    },
    handleSelectionChangeMachine(val) {
      this.array = val
    },
    off() {
      this.dialogFormVisible = false
    },
    submit() {
      for (let i = 0; i < this.array.length; i++) {
        this.tableData.push({
          货品名称: this.array[i].货品名称 ? this.array[i].货品名称 : '—' || '—',
          货品编号: this.array[i].货品编号 ? this.array[i].货品编号 : '—' || '—',
          设计者: this.array[i].设计者 ? this.array[i].设计者 : '—' || '—',
          货品规格: this.array[i].货品规格 ? this.array[i].货品规格 : '—' || '—',
          货品型号: this.array[i].货品型号 ? this.array[i].货品型号 : '—' || '—',
          数量: 1,
          货品类别: this.array[i].类别 ? this.array[i].类别 : '—' || '—'
        })
      }
    },
    openSearch() {
      this.tableDataSearchList = []
      this.searchFrom.发货单名 !== null && this.searchFrom.发货单名 !== '' ? this.searchFrom.发货单名_check = 1 : this.searchFrom.发货单名_check = 0
      this.searchFrom.发货单号 !== null && this.searchFrom.发货单号 !== '' ? this.searchFrom.发货单号_check = 1 : this.searchFrom.发货单号_check = 0
      this.searchFrom.收货单位 !== null && this.searchFrom.收货单位 !== '' ? this.searchFrom.收货单位_check = 1 : this.searchFrom.收货单位_check = 0
      this.searchFrom.车辆牌号 !== null && this.searchFrom.车辆牌号 !== '' ? this.searchFrom.车辆牌号_check = 1 : this.searchFrom.车辆牌号_check = 0
      this.searchFrom.司机姓名 !== null && this.searchFrom.司机姓名 !== '' ? this.searchFrom.司机姓名_check = 1 : this.searchFrom.司机姓名_check = 0
      this.searchFrom.司机电话 !== null && this.searchFrom.司机电话 !== '' ? this.searchFrom.司机电话_check = 1 : this.searchFrom.司机电话_check = 0
      this.searchFrom.制单人 !== null && this.searchFrom.制单人 !== '' ? this.searchFrom.制单人_check = 1 : this.searchFrom.制单人_check = 0
      this.searchFrom.核准人 !== null && this.searchFrom.核准人 !== '' ? this.searchFrom.核准人_check = 1 : this.searchFrom.核准人_check = 0
      this.searchFrom.执行人 !== null && this.searchFrom.执行人 !== '' ? this.searchFrom.执行人_check = 1 : this.searchFrom.执行人_check = 0
      this.searchFrom.开始制单日期 !== null && this.searchFrom.开始制单日期 !== '' ? this.searchFrom.开始制单日期_check = 1 : this.searchFrom.开始制单日期_check = 0
      this.searchFrom.结束制单日期 !== null && this.searchFrom.结束制单日期 !== '' ? this.searchFrom.结束制单日期_check = 1 : this.searchFrom.结束制单日期_check = 0
      this.searchFrom.开始核准日期 !== null && this.searchFrom.开始核准日期 !== '' ? this.searchFrom.开始核准日期_check = 1 : this.searchFrom.开始核准日期_check = 0
      this.searchFrom.结束核准日期 !== null && this.searchFrom.结束核准日期 !== '' ? this.searchFrom.结束核准日期_check = 1 : this.searchFrom.结束核准日期_check = 0
      this.searchFrom.开始发货日期 !== null && this.searchFrom.开始发货日期 !== '' ? this.searchFrom.开始发货日期_check = 1 : this.searchFrom.开始发货日期_check = 0
      this.searchFrom.结束发货日期 !== null && this.searchFrom.结束发货日期 !== '' ? this.searchFrom.结束发货日期_check = 1 : this.searchFrom.结束发货日期_check = 0
      this.dialogFormVisibleSearch = true
      InvoiceListSearch(this.searchFrom.发货单名, this.searchFrom.发货单号, this.searchFrom.收货单位, this.searchFrom.车辆牌号, this.searchFrom.司机姓名, this.searchFrom.司机电话, this.searchFrom.制单人, this.searchFrom.核准人, this.searchFrom.执行人, this.searchFrom.开始制单日期, this.searchFrom.结束制单日期, this.searchFrom.开始核准日期, this.searchFrom.结束核准日期, this.searchFrom.开始发货日期, this.searchFrom.结束发货日期, this.searchFrom.发货单名_check, this.searchFrom.发货单号_check, this.searchFrom.收货单位_check, this.searchFrom.车辆牌号_check, this.searchFrom.司机姓名_check, this.searchFrom.司机电话_check, this.searchFrom.制单人_check, this.searchFrom.核准人_check, this.searchFrom.执行人_check, this.searchFrom.开始制单日期_check, this.searchFrom.结束制单日期_check, this.searchFrom.开始核准日期_check, this.searchFrom.结束核准日期_check, this.searchFrom.开始发货日期_check, this.searchFrom.结束发货日期_check).then(response => {
        if (response.data.length !== 0) {
          this.tableDataSearchList = response.data
        }
      })
    },
    offSearch() {
      this.dialogFormVisibleSearch = false
    },
    clearSearch() {
      this.searchFrom.发货单名 = ''
      this.searchFrom.发货单号 = ''
      this.searchFrom.收货单位 = ''
      this.searchFrom.车辆牌号 = ''
      this.searchFrom.司机姓名 = ''
      this.searchFrom.司机电话 = ''
      this.searchFrom.制单人 = ''
      this.searchFrom.核准人 = ''
      this.searchFrom.执行人 = ''
      this.searchFrom.开始制单日期 = ''
      this.searchFrom.结束制单日期 = ''
      this.searchFrom.开始核准日期 = ''
      this.searchFrom.结束核准日期 = ''
      this.searchFrom.开始发货日期 = ''
      this.searchFrom.结束发货日期 = ''
    },
    searchListItem(row) {
      this.invoiceNum = row.发货单流水号
    },
    submitSearch() {
      console.log(this.invoiceNum, 99)
      this.dialogFormVisibleSearch = false
      this.function_InvoiceFeach()
    }
  }
}
</script>
<style>
  .el-textarea__inner,
  .el-radio__inner,
  .el-input__inner{
    border-bottom: 1px solid #dcdfe6!important;
  }
  .el-textarea__inner, .el-radio__inner, .el-input__inner{
    border: 1px solid #dcdfe6!important;
  }
</style>

<style scoped>
  .el-divider{
    margin: 5px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 5px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
