<!--总成模块信息管理页-->
<template>
  <div class="cr-body-content">
    <div ref="box">
      <flexbox class="content-header">
        <el-form
          :model="listQuery"
          ref="queryForm"
          v-show="showSearch"
          :inline="true"
        >
          <!-- <el-row> -->
          <el-form-item label="生产线:" prop="productType">
            <el-select
              v-model="listQuery.productType"
              clearable
              placeholder="请选择"
              size="medium"
              style="margin-right: 15px"
              @change="ptypeselectChange"
            >
              <el-option
                v-for="item in productTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="productLine">
            <el-select
              v-model="listQuery.productLine"
              clearable
              placeholder="请选择"
              size="medium"
              style="margin-right: 15px"
              @change="valueselectChange"
            >
              <el-option
                v-for="item in PLChildList"
                :key="item.id"
                :label="item.productLineName"
                :value="item.productLineCode"
              />
            </el-select>
          </el-form-item>

          <!-- <el-collapse accordion>
            <el-collapse-item> -->
          <!-- <template slot="title">
                其他搜索条件(单击折叠或伸展)<i class="header-icon el-icon-info"></i>
              </template> -->
          <!-- <el-form-item label="版本:" prop="Version">
                <el-input
                  v-model="listQuery.Version"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item> -->
          <!-- </el-row> -->
          <!-- <el-form-item label="流水号:" prop="serialNumBegin">
                <el-input
                  v-model="listQuery.serialNumBegin"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item> -->
          <!-- <el-form-item label="-" prop="serialNumEnd">
                <el-input
                  v-model="listQuery.serialNumEnd"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item> -->
          <!-- <el-row> -->
          <!-- <el-form-item label="大众顺序号:" prop="HostSNBegin">
                <el-input
                  v-model="listQuery.HostSNBegin"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="-" prop="HostSNEnd">
                <el-input
                  v-model="listQuery.HostSNEnd"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item> -->

          <!-- <el-form-item label="KNR:" prop="KNRBegin">
                <el-input
                  v-model="listQuery.KNRBegin"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="-" prop="KNREnd">
                <el-input
                  v-model="listQuery.KNREnd"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item> -->
          <!-- </el-row> -->
          <!-- <el-row> -->
          <!-- <el-form-item label="底盘号:" prop="VINBegin">
                <el-input
                  v-model="listQuery.VINBegin"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="-" prop="VINEnd">
                <el-input
                  v-model="listQuery.VINEnd"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item> -->

          <!-- <el-form-item label="上线日期">
                <el-date-picker
                  v-model="listQuery.OnlineTimeValue"
                  size="small"
                  style="width: 380px"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item> -->
          <!-- </el-row> -->
          <!-- <el-row> -->
          <!-- <el-form-item label="接收日期">
                <el-date-picker
                  v-model="listQuery.ReceiveTimeValue"
                  size="small"
                  style="width: 380px"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item> -->
          <!-- <el-form-item label="单据状态" prop="State" v-show="isShowState">
                <el-checkbox-group v-model="listQuery.state">
                  <el-checkbox
                    v-for="(item, index) in billState"
                    :key="item.id"
                    :label="item.id"
                    @change="checkedListChange(index)"
                  >
                    {{ item.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item> -->
          <!-- </el-collapse-item>
          </el-collapse> -->
          <el-form-item style="margin-top: -5px">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleFilter"
              >搜索</el-button
            >
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery('queryForm')"
              >重置</el-button
            >
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              style="margin-left: 15px"
              @click="handleDownload()"
              >导出(Excel)
            </el-button>
            <el-button
              ref="btn1"
              type="primary"
              size="mini"
              style="margin-left: 15px"
              @click="print()"
              >打印门板发货排序单
            </el-button>
            <el-button
              ref="btn2"
              type="primary"
              size="mini"
              style="margin-left: 15px"
              @click="rePrint()"
              >重新打印门板发货排序单
            </el-button>
            <el-button
              ref="btn3"
              type="primary"
              size="mini"
              style="margin-left: 15px"
              @click="makeUpPrint()"
              >补打门板发货排序单
            </el-button>
            <el-button
              ref="btn4"
              type="primary"
              v-show="this.listQuery.productType === 1"
              size="mini"
              style="margin-left: 15px"
              @click="drawerMB = true"
              >门板重打和作废
            </el-button>
            <el-button
              ref="btn5"
              type="primary"
              v-show="this.listQuery.productType === 2"
              size="mini"
              style="margin-left: 15px"
              @click="drawerMB = true"
              >柱护板重打和作废
            </el-button>
            <!-- margin-left: 550px; -->
            <!-- <el-button
              type="text"
              v-show="this.listQuery.productType === 1"
              @click="drawerMB = true"
              style="color: #e6a23c; fontweight: bold; font-size: 15pt"
            >
              <strong>门板重打和作废</strong></el-button
            > -->
            <!-- <el-button
              type="text"
              v-show="this.listQuery.productType === 2"
              @click="drawerZHB = true"
              style="color: #f56c6c; fontweight: bold; font-size: 15pt"
              ><strong>柱护板重打和作废</strong></el-button
            > -->
          </el-form-item>

          <!-- </el-row> -->
        </el-form>
      </flexbox>
    </div>
    <!--门板重打和作废-->
    <el-drawer
      title="门板作废和重打"
      :visible.sync="drawerMB"
      direction="rtl"
      size="65%"
    >
      <MBDetail v-bind:customerInfosMB="customerInfosMB"></MBDetail>
    </el-drawer>
    <!--柱护板重打和作废-->
    <el-drawer
      title="柱护板作废和重打"
      :visible.sync="drawerZHB"
      direction="rtl"
      size="65%"
    >
      <ZHBDetail v-bind:customerInfosZHB="customerInfosZHB"></ZHBDetail>
    </el-drawer>

    <div class="l-table" style="margin-top: -30px">
      <!--表格渲染-->
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        class="cr-table"
        :data="list"
        :height="tableHeight"
        :cell-style="cellStyle"
        :header-cell-style="headerRowStyle"
        size="small"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column
          label="底盘号"
          prop="vin "
          sortable="custom"
          align="center"
          width="180px"
        >
          <template slot-scope="scope">
            <span class="link-type" @click="handleDrawerOpen(scope.row)">{{
              scope.row.vin
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in getDefaultField"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
          :formatter="fieldFormatter"
          sortable="custom"
          show-overflow-tooltip
          :gutter="0"
        >
          <template slot="header" slot-scope="scope">
            {{ scope.column.label }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        :title="formTitle"
        width="700px"
        @close="closeDialog"
      >
        <el-form
          ref="form"
          :inline="true"
          :model="form"
          :rules="rules"
          size="small"
          label-width="120px"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="大众顺序号:"
                prop="beginHostSN"
                v-show="isShowHostSN"
              >
                <el-input
                  v-model="form.beginHostSN"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                />
                <label class="label1">-</label>
                <el-input
                  v-model="form.endHostSN"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="底盘号:" prop="VIN" v-show="isShowVin">
                <el-input
                  v-model="form.beginVin"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                />
                <label class="label1">-</label>
                <el-input
                  v-model="form.endVin"
                  placeholder=""
                  clearable
                  size="small"
                  style="width: 240px"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="dialogFormVisible = false"
            >取消</el-button
          >
          <el-button v-loading="formLoading" type="primary" @click="save"
            >确认</el-button
          >
        </div>
      </el-dialog>
    </div>

    <div class="table-footer">
      <!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"-->
      <pagination
        v-show="totalCount > 0"
        :total="totalCount"
        style="margin-bottom: -5px; float: right"
        :page.sync="page"
        :limit.sync="listQuery.MaxResultCount"
        @pagination="getList"
      />
      <!-- 抽屉控件 -->
      <el-drawer
        title="信息详细页"
        size="75%"
        direction="rtl"
        :visible.sync="drawer"
        :before-close="handleDrawerClose"
      >
        <div>
          <Detail
            v-bind:customerInfos="customerInfos"
            style="margin-top: -35px"
          ></Detail>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
import CRMTableHead from "../../components/CRMTableHead";
import importExcel from "@/components/ImportExcel-vw";
import Lockr from "lockr";
import { mapGetters } from "vuex";
import moment from "moment";
import Detail from "./detail.vue";
import MBDetail from "./detailMB.vue";
import ZHBDetail from "./detailZHB.vue";
import { downloadFile } from "@/utils/crmindex.js";
import qs from "qs";

//组件计量单位
const bomUnit = [
  { key: 0, display_name: "PC" },
  { key: 1, display_name: "TON" },
  { key: 2, display_name: "Other" },
];

const projectTypeKeyValue = bomUnit.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name;
  return acc;
}, {});

export default {
  name: "M100Online",
  components: {
    Pagination,
    CRMTableHead,
    importExcel,
    Detail,
    MBDetail,
    ZHBDetail,
  },
  directives: { permission },
  filters: {
    IsCustomerSignFilter(status) {
      //翻译是否签字
      const statusMap = {
        true: "是",
        false: "否",
      };
      return statusMap[status];
    },
  },
  data() {
    const validVersion = (rule, value, callback) => {
      let numberReg = /^\d{6}$/;
      if (!numberReg.test(value)) {
        callback(new Error("只能为6位数字！"));
      } else {
        callback();
      }
    };
    return {
      crmType: "M100Online",
      drawerZHB: false,
      drawerMB: false,
      activeNames: ["1"],
      rules: {
        erpAssemblyName: [
          { required: true, message: "必须输入！", trigger: "blur" },
        ],
      },
      billState: [
        { id: 2, name: "已匹配" },
        { id: 3, name: "已打印" },
      ],
      valueSelect: "",
      customerInfos: [],
      customerInfosMB: [],
      customerInfosZHB: [],
      dialogOptions: [],
      versionValue: "",
      searchContent: "", // 输入内容
      showExcelImport: false,
      form: {},
      drawer: false,
      list: null,
      totalCount: 0,
      listLoading: true,
      customerInfo: {
        bomId: "",
      },
      // 高级搜索
      filterObj: {
        type: Object,
        default: () => {
          return {};
        },
      },
      listQuery: {
        SkipCount: 0,
        MaxResultCount: 15,
        productType: 1, //1:门板；2:柱护板
        ProductLine: undefined,
        Version: undefined,
        serialNumBegin: undefined,
        serialNumEnd: undefined,
        HostSNBegin: undefined,
        HostSNEnd: undefined,
        KNRBegin: undefined,
        KNREnd: undefined,
        VINBegin: undefined,
        VINEnd: undefined,
        OnlineTimeValue: [],
        OnlineTimeBegin: undefined,
        OnlineTimeEnd: undefined,
        ReceiveTimeValue: [],
        ReceiveTimeBegin: undefined,
        ReceiveTimeEnd: undefined,
        billStatus: 1,
        state: [],
      },
      listExportQuery: {
        erpAssemblyCode: undefined,
        erpAssemblyName: undefined,
      },
      listPLQuery: {
        BillType: 2,
        //UserId: this.userinfo.UserId,
      },
      hostSNQuery: {
        productLine: undefined,
      },
      hostCheckQuery: {
        printType: undefined, //0:打印;1:重打;2:补打;
        productLine: undefined,
        beginHostSN: undefined,
        endHostSN: undefined,
        beginVin: undefined,
        endVin: undefined,
      },
      hostPrintQuery: {
        printType: undefined, //0:打印;1:重打;2:补打;
        productLine: undefined,
        beginHostSN: undefined,
        endHostSN: undefined,
        beginVin: undefined,
        endVin: undefined,
      },
      vinPrintQuery: {
        printType: undefined, //0:打印;1:重打;2:补打;
        productLine: undefined,
        beginHostSN: undefined,
        endHostSN: undefined,
        beginVin: undefined,
        endVin: undefined,
      },
      fileQuery: {
        dataname: undefined,
      },
      form: {
        details: [],
      },
      page: 1,
      // 显示搜索条件
      showSearch: true,
      bomUnit,
      drawer: false,
      dialogFormVisible: false,
      formTitle: "",
      isEdit: false,
      formLoading: false,
      tableHeight: document.documentElement.clientHeight - 335,
      detailTableHeight: 250,
      details: [], //修改子表数据源
      PLList: [], //产线下拉
      PLChildList: [], //筛选后产线下拉
      productTypeList: [
        { id: 1, name: "门板" },
        { id: 2, name: "柱护板" },
      ],
      isShowHostSN: false,
      isShowVin: false,
      isShowState: true,
    };
  },
  mounted() {
    this.$nextTick(() => {
      var offsetHei = document.documentElement.clientHeight;
      //console.log(offsetHei);
      let boxH = this.$refs.box.offsetHeight;
      this.tableHeight = offsetHei - boxH - 57 - 79; //57为footer高度，79为页面上部标签高度
      //this.tableHeight = offsetHei -260
    });
  },
  created() {
    this.billState.forEach((element, index) => {
      if (index === 0) {
        this.listQuery.state.push(element.id);
      }
    });
    this.getProductLine();
  },
  computed: {
    getDefaultField() {
      var tempsTabs = [];
      tempsTabs.push({ label: "流水号", prop: "serialNum", width: 100 });
      tempsTabs.push({ label: "大众顺序号", prop: "hostSN", width: 120 });
      // tempsTabs.push({
      //   label: "底盘号",
      //   prop: "vin",
      //   width: 130,
      // });
      tempsTabs.push({
        label: "KNR",
        prop: "knr",
        width: 150,
      });
      tempsTabs.push({
        label: "M100上线时间",
        prop: "onlineTime",
        width: 150,
      });
      tempsTabs.push({
        label: "M100接收时间",
        prop: "receiveTime",
        width: 180,
      });
      tempsTabs.push({
        label: "车型代码",
        prop: "vehicleModelCode",
        width: 120,
      });
      tempsTabs.push({
        label: "版本",
        prop: "version",
        width: 150,
      });
      tempsTabs.push({
        label: "R100上线时间",
        prop: "r100OnlineTime",
        width: 150,
      });
      tempsTabs.push({
        label: "R100接收时间",
        prop: "r100ReceiveTime",
        width: 180,
      });
      tempsTabs.push({
        label: "产线",
        prop: "productLine",
        width: 120,
      });
      tempsTabs.push({
        label: "状态",
        prop: "billStatus",
        width: 120,
      });

      tempsTabs.push({
        label: "备注",
        prop: "remark",
        width: 120,
      });
      return tempsTabs;
    },
    ...mapGetters(["userInfo"]), //获取当前用户信息
  },
  methods: {
    //抽屉
    handleDrawerOpen(param) {
      this.drawer = true;
      //console.log(510)
      //console.log(param)
      var parentId = param.assemblyID; //主键id
      this.customerInfos = [
        {
          ParentId: parentId,
        },
      ];
    },
    handleDrawerClose(done) {
      done();
    },

    fetchData(id) {
      //循环动态
      this.$axios
        .gets("/api/newjit/assembly-cfg-erp/" + id)
        .then((response) => {
          this.form = response.item;
          //this.details = response.item.details;
          //console.log(this.details);
        });
    },
    /** 导出功能 */
    handleDownload() {
      this.listLoading = true;
      this.listExportQuery.erpAssemblyCode = this.listQuery.ErpAssemblyCode;
      this.listExportQuery.erpAssemblyName = this.listQuery.ErpAssemblyName;
      console.log(JSON.stringify(this.listQuery));
      this.$axios
        .posts("/api/newjit/assembly-cfg-erp/export", this.listQuery)
        .then((res) => {
          let filename = res.item;
          this.$axios
            .BolbGets("/api/newjit/exclude-part-cfg/download/" + filename)
            .then((response) => {
              if (filename.indexOf("_") != -1) {
                let downName =
                  filename.slice(0, filename.lastIndexOf("_")) +
                  filename.slice(filename.lastIndexOf("."));
                downloadFile(response, downName);
                this.$notify({
                  title: "成功",
                  message: "数据-导出成功！",
                  type: "success",
                  duration: 2000,
                });
              } else {
                downloadFile(response, filename);
                this.$notify({
                  title: "成功",
                  message: "数据-导出成功！",
                  type: "success",
                  duration: 2000,
                });
              }
              this.listLoading = false;
            });
        });
      this.listLoading = false;
    },
    /** 重置按钮操作 */
    resetQuery(refName) {
      this.$refs[refName].resetFields();
      this.listQuery.OnlineTimeValue = [];
      this.listQuery.ReceiveTimeValue = [];
      this.listQuery.state = [];
      this.handleQuery();
      this.getProductLine();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.listQuery.SkipCount = 1;
      //this.getList();
    },
    selectValue(params) {
      //版本下拉选择
      this.versionValue = params.value;
      this.getList();
    },

    selectOptionsChange(item) {
      this.getList();
    },
    importExcelData() {
      //关闭导入窗体时调用
      this.showExcelImport = false;
      //this.getList();
    },

    /** 刷新列表 */
    handleHandle(data) {
      if (data.type !== "edit") {
        this.getList();
      }
    },

    handleAddDetails() {
      if (this.form.details === undefined) {
        this.form.details = [];
        //console.log(679);
      }
      let obj = {};
      obj.partCode = "";
      obj.partName = "";
      obj.partNum = "";
      obj.isKey = false;
      obj.description = "";

      //console.log(this.form.details);
      this.form.details.push(obj);
      //console.log(688);
    },
    handleDeleteDetails(index) {
      this.form.details.splice(index, 1);
      //console.log(693);
    },

    /** 格式化字段 */
    fieldFormatter(row, column) {
      if (column.property === "billStatus") {
        return { 1: "未匹配", 2: "已匹配", 3: "已打印" }[row[column.property]];
      }
      if (column.property == "onlineTime" || column.property == "receiveTime") {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      }
      return row[column.property] || "--";
    },
    roleFilter(type) {
      return projectTypeKeyValue[type];
    },
    getList(data) {
      this.listLoading = true;
      if (data != undefined) {alert()
        this.listQuery.SkipCount = (this.page - 1) * data.limit;
      } else {
        this.listQuery.SkipCount = (this.page - 1) * 15;
      }
      if (this.listQuery.OnlineTimeValue !== undefined) {
        this.listQuery.OnlineTimeBegin = this.listQuery.OnlineTimeValue[0];
        this.listQuery.OnlineTimeEnd = this.listQuery.OnlineTimeValue[1];
      }
      if (this.listQuery.ReceiveTimeValue !== undefined) {
        this.listQuery.ReceiveTimeBegin = this.listQuery.ReceiveTimeValue[0];
        this.listQuery.ReceiveTimeEnd = this.listQuery.ReceiveTimeValue[1];
      }
      if (this.listQuery.state == 1) {
        this.listQuery.billStatus = this.listQuery.state[0];
      }
 
      this.$axios
        .gets("/api/newjit/bill-m100/list", this.listQuery)
        .then((response) => {
          this.list = response.items;
          this.totalCount = response.totalCount;
          setTimeout(() => {
            //大数据量加载时
            this.listLoading = false;
          }, 500);
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    getDetialList(partCode) {
      this.listLoading = true;
      console.log("详表条件：" + JSON.stringify(this.customerInfo.parentId));
      this.$axios
        .gets("/api/newjit/assembly-cfg-erp/" + this.customerInfo.parentId)
        .then((response) => {
          //console.log(partCode)
          if (partCode !== "" && partCode !== undefined) {
            //console.log(partCode)
            this.list = response.item.details.filter(
              (u) => u.partCode === partCode
            );
          } else {
            this.list = response.item.details;
          }
          //alert(JSON.stringify(response.Items))
          //this.totalCount = response.totalCount;
          setTimeout(() => {
            //大数据量加载时
            this.listLoading = false;
          }, 500);
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    valueselectChange(val) {
      this.$forceUpdate();
      this.customerInfosMB = [];
      this.customerInfosZHB = [];
      if (this.listQuery.productType === 1) {
        //把产线值传到子组件
        this.customerInfosMB = [
          {
            PrintType: 1,
            ProductLine: val,
          },
        ];
      }
      if (this.listQuery.productType === 2) {
        //把产线值传到子组件
        this.customerInfosZHB = [
          {
            PrintType: 1,
            ProductLine: val,
          },
        ];
      }
    },
    handleImportSAP() {},

    handleFilter() {
      this.page = 1;
      this.getList();
    },
    sortChange(data) {
      const { prop, order } = data;
      if (!prop || !order) {
        this.handleFilter();
        return;
      }
      this.listQuery.Sorting = prop + " " + order;
      this.handleFilter();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === "qty") {
        return { textAlign: "right" };
      } else {
        return { textAlign: "left" };
      }
    },
    /** 通过回调控制表头style */
    headerRowStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === "qty") {
        return { textAlign: "right", background: "#FAFAFA" };
      } else {
        return { textAlign: "left", background: "#FAFAFA" };
      }
    },
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row);
    },

    closeDialog() {},
    /**打印 */
    print() {
      (this.hostPrintQuery = {
        printType: undefined, //0:打印;1:重打;2:补打;
        productLine: undefined,
        beginHostSN: undefined,
        endHostSN: undefined,
        beginVin: undefined,
        endVin: undefined,
      }),
        (this.hostCheckQuery.printType = 0);
      this.hostPrintQuery.printType = 0;
      this.vinPrintQuery.printType = 0;
      if (
        this.listQuery.productLine === "" ||
        this.listQuery.productLine === undefined
      ) {
        this.$message({
          message: "请选择生产线",
          type: "warning",
        });
        return;
      }
      this.hostSNQuery.productLine = this.listQuery.productLine;
      this.hostPrintQuery.productLine = this.listQuery.productLine;
      //后端服务更改了 前端跟着更改成以下方式
      if (this.listQuery.productType === 1) {
        //门板
        this.hostSNQuery.isZhuHuBan = "0";
        console.log("门板hostsn2参数" + JSON.stringify(this.hostSNQuery));
        this.$axios
          .gets(
            "/api/newjit/bill-m100/get-print-start-hostsn2",
            this.hostSNQuery
          )
          .then((response) => {
            console.log("获取hostsn大众顺序号起始");
            console.log(response.item);
            if (response.item !== null) {
              this.form.beginHostSN = parseInt(response.item);
              if (this.listQuery.productType === 1) {
                //门板
                this.form.endHostSN = parseInt(response.item) + 11;
              } else if (this.listQuery.productType === 2) {
                //柱护板
                this.form.endHostSN = parseInt(response.item) + 23;
              }
            } else {
              this.$message({
                message: "获取不到大众顺序号",
                type: "warning",
              });
              return;
            }
          });
      } else if (this.listQuery.productType === 2) {
        //柱护板
        this.hostSNQuery.isZhuHuBan = "1";
        console.log("柱护板hostsn2参数" + JSON.stringify(this.hostSNQuery));
        this.$axios
          .gets(
            "/api/newjit/bill-m100/get-print-start-hostsn2",
            this.hostSNQuery
          )
          .then((response) => {
            console.log("获取hostsn大众顺序号起始");
            console.log(response.item);
            if (response.item !== null) {
              this.form.beginHostSN = parseInt(response.item);
              if (this.listQuery.productType === 1) {
                //门板
                this.form.endHostSN = parseInt(response.item) + 11;
              } else if (this.listQuery.productType === 2) {
                //柱护板
                this.form.endHostSN = parseInt(response.item) + 23;
              }
            } else {
              this.$message({
                message: "获取不到大众顺序号",
                type: "warning",
              });
              return;
            }
          });
      }

      // this.$axios
      //   .gets("/api/newjit/bill-m100/get-print-start-hostsn", this.hostSNQuery)
      //   .then((response) => {
      //     console.log("获取hostsn大众顺序号起始");
      //     console.log(response.item);
      //     if (response.item !== null) {
      //       this.form.beginHostSN = parseInt(response.item);
      //       if (this.listQuery.productType === 1) {
      //         //门板
      //         this.form.endHostSN = parseInt(response.item) + 11;
      //       } else if (this.listQuery.productType === 2) {
      //         //柱护板
      //         this.form.endHostSN = parseInt(response.item) + 23;
      //       }
      //     } else {
      //       this.$message({
      //         message: "获取不到大众顺序号",
      //         type: "warning",
      //       });
      //       return;
      //     }
      //   })
      //   .catch(() => {});
      this.formTitle = "打印";
      this.dialogFormVisible = true;
      this.form = {
        beginHostSN: "",
        endHostSN: "",
      };
      this.isShowHostSN = true;
      this.isShowVin = false;
    },
    /**重打 */
    rePrint() {
      (this.hostPrintQuery = {
        printType: undefined, //0:打印;1:重打;2:补打;
        productLine: undefined,
        beginHostSN: undefined,
        endHostSN: undefined,
        beginVin: undefined,
        endVin: undefined,
      }),
        (this.hostCheckQuery.printType = 1);
      this.hostPrintQuery.printType = 1;
      this.vinPrintQuery.printType = 1;
      if (
        this.listQuery.productLine === "" ||
        this.listQuery.productLine === undefined
      ) {
        this.$message({
          message: "请选择生产线",
          type: "warning",
        });
        return;
      }
      this.formTitle = "重打";
      this.hostPrintQuery.productLine = this.listQuery.productLine;
      this.dialogFormVisible = true;
      this.form = {
        beginVin: "",
        endVin: "",
      };
      this.isShowHostSN = false;
      this.isShowVin = true;
    },
    /**补打 */
    makeUpPrint() {
      (this.hostPrintQuery = {
        printType: undefined, //0:打印;1:重打;2:补打;
        productLine: undefined,
        beginHostSN: undefined,
        endHostSN: undefined,
        beginVin: undefined,
        endVin: undefined,
      }),
        (this.hostCheckQuery.printType = 2);
      this.hostPrintQuery.printType = 2;
      this.vinPrintQuery.printType = 2;
      if (
        this.listQuery.productLine === "" ||
        this.listQuery.productLine === undefined
      ) {
        this.$message({
          message: "请选择生产线",
          type: "error",
        });
        return;
      }
      this.formTitle = "补打";
      this.hostPrintQuery.productLine = this.listQuery.productLine;
      this.dialogFormVisible = true;
      this.form = {
        beginVin: "",
        endVin: "",
      };
      this.isShowHostSN = false;
      this.isShowVin = true;
    },
    /**保存*/
    save() {
      if (this.isShowHostSN === true) {
        if (this.form.beginHostSN === "" || this.form.endHostSN === "") {
          this.$message({
            message: "请输入完整的顺序号起始范围",
            type: "error",
          });
          return;
        } else {
          if (this.listQuery.productType === 1) {
            //门板
            if (
              parseInt(this.form.endHostSN) - parseInt(this.form.beginHostSN) <=
              0
            ) {
              this.$message({
                message: "起止大众顺序号相减不能为零！",
                type: "error",
              });
              return;
            }
          } else if (this.listQuery.productType === 2) {
            //柱护板
            if (
              parseInt(this.form.endHostSN) - parseInt(this.form.beginHostSN) >
              23
            ) {
              this.$message({
                message:
                  "最多只能打印24个顺序号，终止顺序号不能大于" +
                  (parseInt(this.form.beginHostSN) + 23),
                type: "error",
              });
              return;
            }
          }
        }
      }
      if (this.isShowVin === true) {
        if (this.form.beginVin === "" || this.form.endVin === "") {
          this.$message({
            message: "请输入完整的底盘号起始范围",
            type: "error",
          });
          return;
        }
      }
      /**打印时传递大众顺序号范围，接口1获取大众顺序号，接口2验证是否断号，接口3获取打印数据，接口4获得grid++模板的base64编码 */
      if (this.formTitle === "打印") {
        this.hostPrintQuery.beginHostSN = parseInt(this.form.beginHostSN);
        this.hostPrintQuery.endHostSN = parseInt(this.form.endHostSN);
        //验证是否断号
        this.$axios
          .posts(
            "/api/newjit/bill-m100/check-hostsn-break-num",
            this.hostCheckQuery
          )
          .then((response) => {
            console.log("检查hostsn大众顺序号是否断号");
            console.log(response);
            if (response.item.length > 0) {
              this.$confirm("本次打印存在断号是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  //判断productType类型
                  if (this.listQuery.productType === 1) {
                    //门板
                    //传递大众顺序号起止
                    this.$axios
                      .posts(
                        "/api/newjit/bill-m100/print-menban-packing-list",
                        this.hostPrintQuery
                      )
                      .then((response) => {
                        console.log("打印门板装箱单");
                        console.log(response);
                        console.log(response.status);
                        if (response.status === false) {
                          this.$message({
                            message: response.message,
                            type: "error",
                          });
                          return;
                        } else {
                          //传给grid++接口json数据，得到返回的文件base64
                          //this.fileQuery.report = "menban";
                          this.fileQuery.dataname = JSON.stringify(
                            response.item
                          );
                          //this.fileQuery.dataname = "";
                          console.log("打印json");
                          console.log(this.fileQuery.dataname);
                          this.$axios
                            .posts(
                              "/Handlers/Handler1.ashx?report=menban",
                              qs.stringify(this.fileQuery)
                            )
                            .then((response) => {
                              console.log("获取文件base64编码");
                              console.log(response);
                              this.printpdf(response); //打印我文件流
                            });
                        }
                      });
                  } else if (this.listQuery.productType === 2) {
                    //柱护板
                    //传递大众顺序号起止
                    this.$axios
                      .posts(
                        "/api/newjit/bill-m100/print-zhuhuban-packing-list",
                        this.hostPrintQuery
                      )
                      .then((response) => {
                        console.log("打印柱护板装箱单");
                        console.log(response);
                        if (response.status === false) {
                          this.$message({
                            message: response.message,
                            type: "error",
                          });
                          return;
                        } else {
                          //传给grid++接口json数据，得到返回的文件base64
                          //this.fileQuery.report = "menban";
                          this.fileQuery.dataname = JSON.stringify(
                            response.item
                          );
                          //this.fileQuery.dataname = "";
                          console.log("打印json");
                          console.log(this.fileQuery.dataname);
                          this.$axios
                            .posts(
                              "/Handlers/Handler1.ashx?report=zhuhuban",
                              qs.stringify(this.fileQuery)
                            )
                            .then((response) => {
                              console.log("获取文件base64编码");
                              console.log(response);
                              this.printpdf(response); //打印我文件流
                            });
                        }
                      });
                  }
                })
                .catch(() => {});
            } //无断号
            else {
              //判断productType类型
              if (this.listQuery.productType === 1) {
                //门板
                //传递大众顺序号起止
                this.$axios
                  .posts(
                    "/api/newjit/bill-m100/print-menban-packing-list",
                    this.hostPrintQuery
                  )
                  .then((response) => {
                    console.log("打印门板装箱单");
                    console.log(response);
                    if (response.status === false) {
                      this.$message({
                        message: response.message,
                        type: "error",
                      });
                      return;
                    } else {
                      //传给grid++接口json数据，得到返回的文件base64
                      //this.fileQuery.report = "menban";
                      this.fileQuery.dataname = JSON.stringify(response.item);
                      //this.fileQuery.dataname = "";
                      console.log("打印json");
                      console.log(this.fileQuery.dataname);
                      this.$axios
                        .posts(
                          "/Handlers/Handler1.ashx?report=menban",
                          qs.stringify(this.fileQuery)
                        )
                        .then((response) => {
                          console.log("获取文件base64编码");
                          console.log(response);
                          this.printpdf(response); //打印我文件流
                        });
                    }
                  })
                  .catch(() => {
                    this.$message({
                      message: response.message,
                      type: "error",
                    });
                    return;
                  });
              } else if (this.listQuery.productType === 2) {
                //柱护板
                //传递大众顺序号起止
                this.$axios
                  .posts(
                    "/api/newjit/bill-m100/print-zhuhuban-packing-list",
                    this.hostPrintQuery
                  )
                  .then((response) => {
                    console.log("打印柱护板装箱单");
                    console.log(response);
                    if (response.status === false) {
                      this.$message({
                        message: response.message,
                        type: "error",
                      });
                      return;
                    } else {
                      //传给grid++接口json数据，得到返回的文件base64
                      //this.fileQuery.report = "menban";
                      this.fileQuery.dataname = JSON.stringify(response.item);
                      //this.fileQuery.dataname = "";
                      console.log("打印json");
                      console.log(this.fileQuery.dataname);
                      this.$axios
                        .posts(
                          "/Handlers/Handler1.ashx?report=zhuhuban",
                          qs.stringify(this.fileQuery)
                        )
                        .then((response) => {
                          console.log("获取文件base64编码");
                          console.log(response);
                          this.printpdf(response); //打印我文件流
                        });
                    }
                  })
                  .catch(() => {
                    this.$message({
                      message: response.message,
                      type: "error",
                    });
                    return;
                  });
              }
            }
          });
      } else {
        /**接口1获取打印数据，接口2获得grid++模板的base64编码 */
        this.hostPrintQuery.beginVin = this.form.beginVin;
        this.hostPrintQuery.endVin = this.form.endVin;
        //判断productType类型
        if (this.listQuery.productType === 1) {
          //门板
          //传递底盘号起止
          this.$axios
            .posts(
              "/api/newjit/bill-m100/print-menban-packing-list",
              this.hostPrintQuery
            )
            .then((response) => {
              console.log(
                "重新或补打打印门板装箱单" + JSON.stringify(this.hostPrintQuery)
              );
              console.log(response);
              if (response.status === false) {
                this.$message({
                  message: response.message,
                  type: "error",
                });
                return;
              } else {
                //传给grid++接口json数据，得到返回的文件base64
                //this.fileQuery.report = "menban";
                this.fileQuery.dataname = JSON.stringify(response.item);
                //this.fileQuery.dataname = "";
                console.log("打印json");
                console.log(this.fileQuery.dataname);
                this.$axios
                  .posts(
                    "/Handlers/Handler1.ashx?report=menban",
                    qs.stringify(this.fileQuery)
                  )
                  .then((response) => {
                    console.log("获取文件base64编码");
                    console.log(response);
                    this.printpdf(response); //打印我文件流
                  });
              }
            })
            .catch(() => {
              this.$message({
                message: response.message,
                type: "error",
              });
              return;
            });
        } else if (this.listQuery.productType === 2) {
          //柱护板
          //传递底盘号起止
          this.$axios
            .posts(
              "/api/newjit/bill-m100/print-zhuhuban-packing-list",
              this.hostPrintQuery
            )
            .then((response) => {
              console.log("打印柱护板装箱单");
              console.log(response);
              if (response.status === false) {
                this.$message({
                  message: response.message,
                  type: "error",
                });
                return;
              } else {
                //传给grid++接口json数据，得到返回的文件base64
                //this.fileQuery.report = "zhuhuban";
                this.fileQuery.dataname = JSON.stringify(response.item);
                //this.fileQuery.dataname = "";
                console.log("打印json");
                console.log(this.fileQuery.dataname);
                this.$axios
                  .posts(
                    "/Handlers/Handler1.ashx?report=zhuhuban",
                    qs.stringify(this.fileQuery)
                  )
                  .then((response) => {
                    console.log("获取文件base64编码");
                    console.log(response);
                    this.printpdf(response); //打印我文件流
                  });
              }
            })
            .catch(() => {
              this.$message({
                message: response.message,
                type: "error",
              });
              return;
            });
        }
      }
    },
    //获取所有产线
    getProductLine() {
      this.listPLQuery.UserId = this.userInfo.userId;
      this.$axios
        .gets("/api/newjit/product-line/list", this.listPLQuery)
        .then((response) => {
          //console.log(response);
          this.PLList = response.item;
          this.PLChildList = this.PLList.filter(
            (u) => u.productType === parseInt(this.listQuery.productType)
          ).sort((a, b) => {
            return a.productLineCode - b.productLineCode;
          });
          this.listQuery.productLine = this.PLChildList[0].productLineCode;
          if (this.listQuery.productLine != "") {
            //把产线值传到子组件
            this.customerInfosMB = [
              {
                PrintType: 1,
                ProductLine: this.PLChildList[0].productLineCode,
              },
            ];
          }
          this.getList();
          //console.log(this.PLList)
        })
        .catch(() => {});
    },
    //产线类型变更
    ptypeselectChange() {
      this.$forceUpdate();
      //console.log(this.listQuery.productType);
      this.listQuery.productLine = "";
      this.PLChildList = this.PLList.filter(
        (u) => u.productType === parseInt(this.listQuery.productType)
      ).sort((a, b) => {
        return a.productLineCode - b.productLineCode;
      });
      //console.log(this.PLList)
      //变更打印按钮文字
      if (this.listQuery.productType === 1) {
        this.$refs.btn1.$el.innerText = "打印门板发货排序单";
        this.$refs.btn2.$el.innerText = "重新打印门板发货排序单";
        this.$refs.btn3.$el.innerText = "补打门板发货排序单";
        this.listQuery.state.push(this.billState[0].id);
        this.isShowState = true;
      } else if (this.listQuery.productType === 2) {
        this.$refs.btn1.$el.innerText = "打印柱护板发货排序单";
        this.$refs.btn2.$el.innerText = "重新打印柱护板发货排序单";
        this.$refs.btn3.$el.innerText = "补打柱护板发货排序单";
        this.listQuery.state = [];
        this.isShowState = false;
      }
    },
    /*单据状态变更 */
    checkedListChange(index) {
      if (this.listQuery.state.length <= 1) {
        this.listQuery.state.push(this.billState[index].id);
      } else {
        this.listQuery.state = [];
        this.listQuery.state.push(this.billState[index].id);
      }
    },
    /**解析文件流 */
    getUrl() {
      //dataResult.data是后台返回的流
      let pdfUrl = window.URL.createObjectURL(
        new Blob([dataResult.data], { type: `application/pdf` })
      );
      const fname = item.name + str + "_" + lists[1] + lists[2]; // 下载文件的名字
      const link = document.createElement("a");
      link.href = pdfUrl;
      link.setAttribute("download", "下载的文件名");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    //base64转化成流，dataurl是后台返回的base64
    dataURLtoBlob(dataurl) {
      var bstr = atob(dataurl.substring(dataurl.indexOf(",") + 1));
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: "application/pdf" });
    },
    doPrint(val) {
      var ordonnance = document.getElementById(val).contentWindow;
      setTimeout(() => {
        // window.print()
        ordonnance.print();
        this.pdfLoading = false;
      }, 100);
    },
    printpdf(dataResult) {
      //打印功能，dataResult是后台返回的base64
      let blob = this.dataURLtoBlob(dataResult);
      var date = new Date().getTime();
      var ifr = document.createElement("iframe");
      ifr.style.frameborder = "no";
      ifr.style.display = "none";
      ifr.style.pageBreakBefore = "always";
      ifr.setAttribute("id", "printPdf" + date);
      ifr.setAttribute("name", "printPdf" + date);
      ifr.src = window.URL.createObjectURL(blob);
      document.body.appendChild(ifr);
      this.doPrint("printPdf" + date);
      window.URL.revokeObjectURL(ifr.src); // 释放URL 对象
      this.dialogFormVisible = false;
    },
    httpPost(URL, PARAMS) {
      var temp = document.createElement("form");
      temp.action = URL;
      temp.method = "post";
      temp.style.display = "none";

      for (var x in PARAMS) {
        var opt = document.createElement("textarea");
        opt.name = x;
        opt.value = PARAMS[x];
        temp.appendChild(opt);
      }

      document.body.appendChild(temp);
      temp.submit();

      return temp;
    },
  },
};
</script>



<style lang="scss" scoped>
@import "../../../pg-fis/styles/crmtable.scss";

// /*表格全选框去除空框*/
// .el-table >>> .DisabledSelection .cell .el-checkbox__inner {
//   display: none;
//   position: relative;
// }
// /*表格全选框改为：选择*/
// .el-table >>> .DisabledSelection .cell:before {
//   content: "是否Key件";
//   position: absolute;
//   left: 7px;
// }
.divider1 {
  margin: 0;
}
.divider2 {
  margin: 10px;
  margin-bottom: 20px;
  width: 95%;
}
.label1 {
  margin-left: 5px;
  margin-right: 5px;
}
</style>


