<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      label-width="68px"
    >
      <QueryFormWrapper>
        <el-col :span="8">
          <el-form-item label="物料编码" prop="materialNo">
            <el-input
              v-model="queryParams.materialNo"
              placeholder="请输入物料编码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料名称" prop="materialName">
            <el-input
              v-model="queryParams.materialName"
              placeholder="请输入物料名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="呆滞天数" prop="overProduceDate">
            <el-input
              v-model="queryParams.overProduceDate"
              placeholder="请输入呆滞天数"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <div slot="right">
          <el-form-item label-width="0" class="text-right" style="word">

            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            >
              搜索
            </el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">
              重置
            </el-button>
          </el-form-item>
        </div>
      </QueryFormWrapper>
    </el-form>

    <!-- 列表 -->
    <AutoResizer :given-height="177">
      <template #default="{ height }">
        <el-table
          ref="table"
          v-loading="loading"
          :height="height"
          :data="list"
          row-key="id"
          :summary-method="getSummaries"
          show-summary
          border
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionExpand"
        >
          <el-table-column
            type="selection"
            width="55"
            :reserve-selection="true"
            fixed="left"
          />
          <el-table-column
            label="物料条码"
            align="qrCode"
            prop="qrCode"
            width="180"
            show-overflow-tooltip
            fixed="left"
          />
          <el-table-column
            label="物料批次"
            align="center"
            prop="materialLots"
            width="160"
            show-overflow-tooltip
          />
          <el-table-column
            label="物料编码"
            align="center"
            prop="materialNo"
            width="150"
            show-overflow-tooltip
          />
          <el-table-column
            label="物料名称"
            align="center"
            prop="materialName"
            width="150"
            show-overflow-tooltip
          />
          <el-table-column
            label="入库仓库"
            align="center"
            width="120"
            sortable
            show-overflow-tooltip
            prop="erpStockId"
          />
          <el-table-column
            label="入库区域"
            align="center"
            width="120"
            sortable
            show-overflow-tooltip
            prop="wmsStoreAreaId"
          />
          <el-table-column
            label="入库货位"
            align="center"
            width="120"
            sortable
            show-overflow-tooltip
            prop="wmsStoreId"
          />
          <el-table-column
            label="长度(m)"
            align="center"
            width="100"
            sortable
            show-overflow-tooltip
            prop="length"
          />
          <el-table-column
            label="宽度(mm)"
            align="center"
            width="120"
            sortable
            show-overflow-tooltip
            prop="width"
          />
          <el-table-column
            label="厚度"
            align="center"
            width="120"
            show-overflow-tooltip
            prop="thickness"
          />
          <el-table-column
            label="生产日期"
            align="center"
            width="180"
            show-overflow-tooltip
            prop="produceDate"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.produceDate) }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="数量"
            align="center"
            width="80"
            sortable
            show-overflow-tooltip
            prop="qty"
          />
          <el-table-column
            label="单位"
            align="center"
            width="80"
            sortable
            show-overflow-tooltip
            prop="unitCode"
          />
          <el-table-column
            label="入库时间"
            align="center"
            prop="createTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="有效期天数"
            align="center"
            width="110"
            show-overflow-tooltip
            prop="expPeriod"
          />
          <el-table-column
            label="有效期单位"
            align="center"
            width="110"
            show-overflow-tooltip
            prop="expUnit"
          />
          <el-table-column
            label="有效期至"
            align="center"
            width="180"
            show-overflow-tooltip
            prop="validTill"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.validTill) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="剩余有效期天数"
            align="center"
            prop="leftDays"
            width="120"
            show-overflow-tooltip
          />

        </el-table>
      </template>
    </AutoResizer>

    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import * as ObsoleteMaterialWarningApi from '@/api/wms/inquirePurchase/obsoleteMaterialWarning'

export default {
  name: 'ObsoleteMaterialWarning',
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 呆滞料预警查询列表
      list: [],
      // 高级查询参数
      advParams: {},
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        materialNo: null,
        materialName: null,
        overProduceDate: null
      },
      // 表单参数
      form: {},

      // 选中的数据
      currentRows: []
    }
  },
  created() {
    this.getList()
  },
  beforeUpdate() {
    this.$nextTick(() => {
      if (this.$refs.table) {
        this.$refs.table.doLayout()
      }
    })
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      // 执行查询
      const params = {
        ...this.queryParams,
        ...this.advParams
      }
      ObsoleteMaterialWarningApi.getStagnantMaterialPage(params)
        .then((response) => {
          this.list = response.data.list
          this.total = response.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.advParams = {}
      this.handleQuery()
      this.$refs[`location1`].options = []
      this.$refs[`area1`].options = []
    },

    // 选中的
    handleSelectionExpand(val) {
      this.currentRows = val
    },

    // 高级查询
    advQuery(advQueryParams) {
      this.advParams = advQueryParams
      this.handleQuery()
    },
    // 小数点问题处理
    getHandleNumber(val) {
      return Math.round(parseFloat(val) * 100000000) / 100000000
    },
    // 数量合计
    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }

        const values = this.currentRows.map((item) =>
          Number(item[column.property])
        )
        if (
          column.property === 'qty' ||
          column.property === 'width' ||
          column.property === 'length'
        ) {
          sums[index] = values.reduce((acc, cur) => {
            const value = Number(cur)
            if (!isNaN(value)) {
              return this.getHandleNumber(acc + cur)
            } else {
              return acc
            }
          }, 0)
          sums[index]
        }
      })
      return sums
    },
    // 0 保质期内 1已过半保质期 2已过保质期
    tableRowClassName({ row }) {
      const { validStatus } = row

      if (validStatus === 1 || validStatus === '1') {
        return 'gray-row'
      } else if (validStatus === 2 || validStatus === '2') {
        return 'danger-row'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .gray-row {
    background: #909399!important;
  }

  ::v-deep.el-table .danger-row {
    background: #F56C6C!important;
  }
</style>
