<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item  prop="keyWord">
            <el-input
                v-model="queryParams.keyWord"
                placeholder="请输入关键词"
                clearable
                @keyup.enter.native="handleQuery"
                maxlength="20"
            />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="warning" plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                >导出数据</el-button>
            </el-col>
        </el-row>


      <el-table v-loading="loading" :data="tableList" ref="multipleTable" row-key="taskId" border>
        <el-table-column label="序号" align="center" width="80" type="index">
          <template slot-scope="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="配件名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
        <el-table-column label="规格型号" align="center" prop="typeModelName" :show-overflow-tooltip="true"/>
        <el-table-column label="单位" align="center" prop="unit" :show-overflow-tooltip="true"/>
        <el-table-column label="库存" align="center" prop="storeNum"  :show-overflow-tooltip="true"/>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </template>

  <script>
  import {getPartPersonNumApi} from '@/api/part/partArrived';
import vueEasyPrint from "vue-easy-print";
  export default {
    name: "PartInventory",
    dicts: ['part_task_status'],
    components: { vueEasyPrint },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        //表格数据
        tableList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyWord:undefined,
        },
      };
    },
    created() {
      this.getList();
    },
    methods: {
        /** 查询列表 */
        getList() {
            this.loading = true;
          getPartPersonNumApi(this.queryParams).then(response => {
                this.tableList = response.data.rows;
                this.total = response.data.total;
                this.loading = false;
            });
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams.keyWord=null;
            this.handleQuery();
        },
        /** 搜索按钮操作 */
        handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
        },
        handleExport() {
          const formatTime = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}${month}${day}_${hours}${minutes}${seconds}`;
          };

          const currentTime = formatTime(new Date());
            this.download(
                "/material/complex_query/export",
                { ...this.queryParams},
                `配件库存_${currentTime}.xlsx`
            );
        },


    }
  };
  </script>
  <style lang="scss" scoped>
  .uploadImg {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .deviceCode {
      margin-top: 10px;
      padding-bottom: 20px;
      font-size: 18px;
  }
  ::v-deep.el-table .fixed-width .el-button--mini {
      width: 60px !important;
      margin-bottom: 10px;
  }
  //隐藏图片上传框的css
  ::v-deep.disabled {
      .el-upload--picture-card {
          display: none;
      }
  }
  </style>
