<template>
  <div>
    <!-- 物料包历史记录 -->
    <!-- <el-tab-pane label="物料包历史记录" name="HistoryOfMaterialPackage"> -->
    <div style="position: relative; display: inline-block">
      <span>技师名称：</span>
      <el-input
        style="width: 200px"
        placeholder="请输入技师名称"
        v-model="historyArtificerName"
      >
      </el-input
      >&nbsp;&nbsp;
    </div>
    <div style="position: relative; display: inline-block">
      <span>选择时间：</span>
      <el-date-picker
        clearable
        v-model="selectDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <el-button
        style="margin-left: 10px"
        size="mini"
        type="primary"
        icon="document"
        @click="searchDataList"
        >查询
      </el-button>
      <el-button
        style="margin-left: 10px"
        size="mini"
        type="primary"
        icon="document"
        @click="resetSearch"
        >重置 </el-button
      >&nbsp;&nbsp;
    </div>
    <el-table :data="historyOfMaterialPackageList.records" row-key="id">
      <el-table-column prop="id" label="编号" width="80" fixed="left">
      </el-table-column>
      <el-table-column prop="artificerName" label="技师名称" width="120">
      </el-table-column>
      <el-table-column prop="typeToStr" label="修改类型" width="120">
      </el-table-column>
      <el-table-column
        prop="number"
        label="此次修改数量"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="total"
        label="此次剩余数量"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="修改时间"
        width="180"
      ></el-table-column>
      <el-table-column prop="recordDescribe" label="备注"></el-table-column>
    </el-table>
    <div style="text-align: center; margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        :current-page="currentPage"
        layout="total,sizes, prev, pager, next"
        :total="historyOfMaterialPackageList.total"
      >
      </el-pagination>
    </div>
    <!-- </el-tab-pane> -->
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      historyArtificerName: "",
      currentPage: 1,
      pageSize: 10,
      historyOfMaterialPackageList: [],
      selectDate: [],
    };
  },
  methods: {
    resetSearch() {
      this.historyArtificerName = "";
      this.selectDate = [];
    },
    searchDataList() {
      this.getHistoryOfMaterialPackageList();
    },
    // 获取历史物料包列表
    getHistoryOfMaterialPackageList() {
      this.$http({
        url: this.$http.adornUrl("materialRecord/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.currentPage,
          limit: this.pageSize,
          artificerName: this.historyArtificerName,
          startDate: this.selectDate[0],
          endDate: this.selectDate[1],
        }),
      }).then((data) => {
        if (data && data.data.code === 0) {
          data.data.data.records.forEach((item) => {
            item.typeToStr = item.type == 1 ? "增加" : "减少";
          });
          this.historyOfMaterialPackageList = data.data.data;
          console.log(this.historyOfMaterialPackageList);
        }
      });
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.getHistoryOfMaterialPackageList();
    },
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getHistoryOfMaterialPackageList();
    },
  },
  mounted() {
    this.getHistoryOfMaterialPackageList();
  },
};
</script>

<style lang="" scoped>
</style>