<!--保质期查询-->
<template>
  <ContainerQuery>
    <div
      v-if="$accessCheck($Access.GetBatchSearchAllInventoryBatch)"
      slot="more"
    >
      <el-form inline size="small" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="searchData.keyWord"
            placeholder="商品名称"
            style="width: 240px"
            clearable
            @keyup.enter.native="pageChange(1)"
            @clear="pageChange(1)"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="pageChange(1)"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchData.batchNo"
            placeholder="批次号"
            style="width: 240px"
            clearable
            @keyup.enter.native="pageChange(1)"
            @clear="pageChange(1)"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="pageChange(1)"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchData.warehouseId"
            filterable
            placeholder="请选择仓库"
            @change="pageChange(1)"
          >
            <el-option
              v-for="item in stock_list"
              :key="item.id"
              :label="item.warehouseName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 引入时间检索组件 -->
        <searchTime
          ref="searchTime"
          label=" "
          @searchTimeChange="searchTimeChange"
        ></searchTime>
      </el-form>
    </div>
    <!-- 表格 -->
    <ul slot="left" class="status-div">
      <li class="status-li success-bg">
        <i class="el-icon-arrow-right"></i>
        60天
      </li>
      <li class="status-li primary-bg">
        <i class="el-icon-arrow-left"></i>
        60天
      </li>
      <li class="status-li warning-bg">
        <i class="el-icon-arrow-left"></i>
        30天
      </li>
      <li class="status-li danger-bg">
        <i class="el-icon-arrow-left"></i>
        10天
      </li>
      <li class="status-li error-bg">已过期</li>
    </ul>
    <el-table :data="tableData" size="mini" @selection-change="selectionChange">
      <el-table-column type="selection" width="55" fixed="left" />
      <el-table-column
        prop="id"
        label="ID"
        fixed="left"
        width="60"
      ></el-table-column>
      <el-table-column
        prop="materielName"
        label="商品名称"
        min-width="160"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="batchNo"
        label="批次号"
        min-width="160"
      ></el-table-column>
      <el-table-column prop="num" label="剩余数量" min-width="120">
        <template slot-scope="scope">
          {{ $_common.formatNub(scope.row.num, 2) }}
        </template>
      </el-table-column>
      <el-table-column prop="productionData" label="批次日期" min-width="160">
        <template slot-scope="scope">
          {{
            scope.row.productionData
              ? $_common.formatDate(scope.row.productionData, "yyyy-MM-dd")
              : "-- "
          }}
        </template>
      </el-table-column>
      <el-table-column prop="shelfLife" label="批次保质期" min-width="130">
        <template slot-scope="scope">
          {{ !scope.row.shelfLife ? "无期限" : scope.row.shelfLife + "天" }}
        </template>
      </el-table-column>
      <el-table-column prop="nowStatus" label="当前状态" min-width="130">
        <template slot-scope="scope">
          <span
            v-if="!scope.row.shelfLife || scope.row.nowStatus === 'success'"
            class="status-li-td success-bg"
          >
            {{ scope.row.shelfLife ? scope.row.surplusDay + "天" : "正常" }}
          </span>
          <span
            v-else-if="scope.row.nowStatus === 'primary'"
            class="status-li-td primary-bg"
          >
            {{ scope.row.surplusDay }}天
          </span>
          <span
            v-else-if="scope.row.nowStatus === 'warning'"
            class="status-li-td warning-bg"
          >
            {{ scope.row.surplusDay }}天
          </span>
          <span
            v-else-if="scope.row.nowStatus === 'danger'"
            class="status-li-td danger-bg"
          >
            {{ scope.row.surplusDay }}天
          </span>
          <span
            v-else-if="scope.row.nowStatus === 'error'"
            class="status-li-td error-bg"
          >
            已过期
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :visible.sync="is_set"
      width="30%"
    >
      <el-form>
        <el-form-item label="设置状态">
          <el-select
            v-model="setStatus"
            clearable
            placeholder="请选择"
            @change="statusChange"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="is_set = false">取 消</el-button>
        <el-button type="primary" @click="moreSubData">确 定</el-button>
      </span>
    </el-dialog>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total_data"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
  </ContainerQuery>
</template>

<script>
  import searchTime from "../component/searchTime";
  import {
    getAllBatch,
    searchAllInventoryBatch,
    getAllWarehouse,
  } from "@/api/Stock";
  export default {
    name: "ShelfLife",
    components: {
      searchTime,
    },
    data() {
      return {
        is_set: false,
        page: 1, // 页码
        pageSize: 10, // 每页显示条数
        total_data: 0,
        tableData: [], // 流水数据
        value: "",
        // 单据状态
        sheetTypeData: [
          { value: 1, label: "待审核" },
          { value: 2, label: "已审核" },
        ],
        statusList: [
          { value: 1, label: "正常" },
          { value: 2, label: "预警" },
          { value: 3, label: "报警" },
          { value: 4, label: "过期" },
        ],
        setStatus: 1,
        stock_list: [],
        searchData: {
          warehouseId: "",
          status: "", // 单据状态
          keyWord: "",
          source: "",
          operatorId: "", // 操作员ID
          startTime: "", // 制单开始时间
          endTime: "", // 制单结束时间
          batchNo: "", //批次号
        },
        choose_data: [],
        nowTime: "",
        status: 0,
      };
    },
    async created() {
      this.nowTime = parseInt(new Date().getTime() / 1000);
      await this.getAllWarehouse();
      await this.getAllBatch();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getAllBatch();
    },
    methods: {
      //  批量选择商品
      selectionChange(val) {
        this.choose_data = val;
      },
      //  选择要使用的状态
      statusChange(val) {
        this.setStatus = val;
      },
      // 设置后提交
      moreSubData() {
        if (!this.choose_data.length) {
          this.$message.warning("请选择要操作的商品");
          return;
        }
        if (!this.setStatus) {
          this.$message.warning("请选择要使用的状态");
        }
        this.is_set = false;
      },
      async getAllBatch() {
        const { data, pageTotal } = await getAllBatch({
          warehouseId: this.searchData.warehouseId,
          page: this.page,
          pageSize: this.pageSize,
          materielId: "",
          skuId: "",
          start: this.searchData.startTime,
          end: this.searchData.endTime,
          keyword: this.searchData.keyWord,
          batchNo: this.searchData.batchNo,
        });

        this.tableData = data.map((item) => {
          const productionData =
            (item.productionData + item.shelfLife * 86400 - this.nowTime) /
            86400;
          return {
            ...item,
            surplusDay: parseInt(productionData),
            nowStatus:
              productionData >= 60
                ? "success"
                : productionData < 60 && productionData >= 30
                ? "primary"
                : productionData < 30 && productionData >= 10
                ? "warning"
                : productionData < 10 && productionData >= 1
                ? "danger"
                : "error",
          };
        });
        this.total_data = pageTotal;
      },
      async getAllWarehouse() {
        const { data } = await getAllWarehouse({
          page: 1,
          pageSize: 999,
        });

        this.stock_list = data;
        if (!this.searchData.warehouseId) {
          this.searchData.warehouseId = data[0].id;
        }
      },
      pageChange(page) {
        this.page = page;
        this.getAllBatch();
      },
      sizeChange(size) {
        this.pageSize = size;
        this.pageChange(1);
      },
      //  选择时间
      searchTimeChange(time) {
        // 时间组件导出数据
        this.searchData.startTime = time.startTime;
        this.searchData.endTime = time.endTime;
        this.pageChange(1);
      },
      // 导出
      async exportData() {},
    },
  };
</script>

<style>
  .box-search-form .el-form-item--mini.el-form-item,
  .box-search-form .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
</style>
<style scoped lang="scss">
  .status-div {
    text-align: center;
    display: flex;
    width: 100%;
  }
  .status-li {
    flex: 6;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #1c8fef;
    color: #fff;
    border-radius: 2px;
    font-size: 12px;
    margin-right: 5px;
    font-weight: 700;
    i {
      font-weight: 700;
    }
  }
  .status-li-td {
    display: inline-block;
    padding: 0 10px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #1c8fef;
    color: #fff;
    border-radius: 2px;
    font-size: 12px;
    margin-right: 5px;
    font-weight: 700;
  }
  .success-bg {
    background: #36c1a0;
  }
  .primary-bg {
    background: #1881f7;
  }
  .warning-bg {
    background: #e6a23c;
  }
  .danger-bg {
    background: #e84960;
  }
  .error-bg {
    background: #000;
    color: #f40;
  }
</style>
