<!--重复报文信息页-->
<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-form-item label="起始顺序号" prop="HostSNBegin">
          <el-input
            v-model="listQuery.HostSNBegin"
            placeholder="起始顺序号"
            clearable
            size="small"
            style="width: 120px"
            @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: 120px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="KNR" prop="KNR">
          <el-input
            v-model="listQuery.KNR"
            placeholder="请输入KNR号"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="底盘号" prop="VIN">
          <el-input
            v-model="listQuery.VIN"
            placeholder="请输入底盘号"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="车型代码" prop="VehicleModelCode">
          <el-input
            v-model="listQuery.VehicleModelCode"
            placeholder="请输入总成名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <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-form-item label="上线日期">
          <el-date-picker
            v-model="OnlineTimeVale"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="接收日期">
          <el-date-picker
            v-model="ReceiveTimeVale"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <!-- <el-form-item label="单据状态" prop="BillStatus">
          <el-select
            v-model="listQuery.BillStatus"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option label="未领取生产任务" :value="1"></el-option>
            <el-option label="已领取生产任务" :value="2"></el-option>
            <el-option label="完成生产任务" :value="3"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item>
          <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-form-item>
      </el-form>
    </flexbox>
    </div>
    <div class="l-table">
      <!--表格渲染-->
      <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"
          fixed
          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 class="table-footer">
      <!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"-->
      <pagination
        v-show="totalCount > 0"
        :total="totalCount"
        :page.sync="page"
        :limit.sync="listQuery.MaxResultCount"
        @pagination="getList"
      />
      <!-- 导入Excel组件 -->
      <importExcel
        ref="importexcel"
        :show="showExcelImport"
        :crmType="crmType"
        @close="importExcelData"
      />
    </div>
    <!-- 抽屉控件 -->
    <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>
</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 moment from "moment";
import message_table from "../../components/mixins/message_table";
import Detail from "./detail.vue";
import { downloadFile } from "@/utils/crmindex.js";

//组件计量单位
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: "RepeatM100",
  components: { Pagination, CRMTableHead, importExcel, Detail },
  directives: { permission },
  filters: {
    IsCustomerSignFilter(status) {
      //翻译是否签字
      const statusMap = {
        true: "是",
        false: "否",
      };
      return statusMap[status];
    },
  },
  mixins: [message_table],
  data() {
    return {
      crmType: "bomdatabase",
      customerInfos: [],
      OnlineTimeVale: [],
      ReceiveTimeVale: [],
      versionValue: "",
      versionList: [], //版本列表
      searchContent: "", // 输入内容
      showExcelImport: false,
      form: {},
      drawer: false,
      list: null,
      totalCount: 0,
      listLoading: true,
      customerInfo: {
        bomId: "",
      },
      // 高级搜索
      filterObj: {
        type: Object,
        default: () => {
          return {};
        },
      },
      listQuery: {
        SkipCount: 0,
        MaxResultCount: 15,
        HostSNBegin: undefined,
        HostSNEnd: undefined,
        VIN: undefined,
        OnlineTimeBegin: undefined,
        OnlineTimeEnd: undefined,
        ReceiveTimeBegin: undefined,
        ReceiveTimeEnd: undefined,
        VehicleModelCode: undefined,
        Version: undefined,
        KNR: undefined,
      },
      page: 1,
      // 显示搜索条件
      showSearch: true,
      bomUnit,
      multipleSelection: [],
      drawer: false,
      //tableHeight: document.documentElement.clientHeight - 260,
    };
  },
  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为页面上部标签高度
    });
  },
  created() {
    this.getList();
  },
  computed: {
    getDefaultField() {
      var tempsTabs = [];
      tempsTabs.push({ label: "流水号", prop: "serialNum", width: 100 });
      tempsTabs.push({ label: "大众顺序号", prop: "hostSN", width: 120 });
      tempsTabs.push({
        label: "KNR",
        prop: "knr",
        width: 120,
      });
      // tempsTabs.push({
      //   label: "底盘号",
      //   prop: "vin",
      //   width: 130,
      // });
      tempsTabs.push({
        label: "上线时间",
        prop: "onlineTime",
        width: 150,
      });
      tempsTabs.push({
        label: "接收时间",
        prop: "receiveTime",
        width: 180,
      });
      tempsTabs.push({
        label: "车型代码",
        prop: "vehicleModelCode",
        width: 120,
      });
      tempsTabs.push({
        label: "版本",
        prop: "version",
        width: 150,
      });
      tempsTabs.push({ label: "单据状态", prop: "billStatus", width: 120 });
      tempsTabs.push({
        label: "车型名称",
        prop: "vehicleModelName",
        width: 120,
      });
      return tempsTabs;
    },
  },
  methods: {
    //抽屉
    handleDrawerOpen(param) {
      this.drawer = true;
      var parentId = param.id; //传入的是总成id
      this.customerInfos = [
        {
          ParentId: parentId,
        },
      ];
    },
    handleDrawerClose(done) {
      done();
    },
    /** 导出功能 */
    handleDownload() {
      this.listLoading = true;
      // if (this.OnlineTimeVale != []) {
      //   this.listQuery.OnlineTimeBegin = this.OnlineTimeVale[0];
      //   this.listQuery.OnlineTimeEnd = this.OnlineTimeVale[1];
      // }
      // if (this.ReceiveTimeVale != []) {
      //   this.listQuery.ReceiveTimeBegin = this.ReceiveTimeVale[0];
      //   this.listQuery.ReceiveTimeEnd = this.ReceiveTimeVale[1];
      // }
      if (this.OnlineTimeVale != []) {
        this.listQuery.OnlineTimeBegin = this.OnlineTimeVale
          ? this.OnlineTimeVale[0] || undefined
          : undefined;
        this.listQuery.OnlineTimeEnd = this.OnlineTimeVale
          ? this.OnlineTimeVale[1] || undefined
          : undefined;
      }
      if (this.ReceiveTimeVale != []) {
        this.listQuery.ReceiveTimeBegin = this.ReceiveTimeVale
          ? this.ReceiveTimeVale[0] || undefined
          : undefined;

        this.listQuery.ReceiveTimeEnd = this.ReceiveTimeVale
          ? this.ReceiveTimeVale[1] || undefined
          : undefined;
      }
      console.log("重复报文导出条件：" + JSON.stringify(this.listQuery));
      this.$axios
        .posts("/api/newjit/repeat-m100/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;
            })
            .catch(() => {
              this.listLoading = false;
            });
        });
    },
    /** 重置按钮操作 */
    resetQuery(refName) {
      this.OnlineTimeVale = [];
      this.ReceiveTimeVale = [];
      this.$refs[refName].resetFields();
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    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();
      }
    },
    /** 格式化字段 */
    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() {
      this.listLoading = true;
      this.listQuery.SkipCount = (this.page - 1) * 10;
      if (this.OnlineTimeVale != []) {
        this.listQuery.OnlineTimeBegin = this.OnlineTimeVale[0];
        this.listQuery.OnlineTimeEnd = this.OnlineTimeVale[1];
      }
      if (this.ReceiveTimeVale != []) {
        this.listQuery.ReceiveTimeBegin = this.ReceiveTimeVale[0];
        this.listQuery.ReceiveTimeEnd = this.ReceiveTimeVale[1];
      }
      this.$axios
        .gets("/api/newjit/repeat-m100/list", this.listQuery)
        .then((response) => {
          this.list = response.items;
          this.totalCount = response.totalCount;
          setTimeout(() => {
            //大数据量加载时
            this.listLoading = false;
          }, 500);
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    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);
    },
  },
};
</script>


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

