<!--  -->
<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="tab_show">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>库存管理</span>   <span style="padding:0 5px;">></span>  <span style="color:#000000e6">库存预警</span></div>
      </div>
      <div style="margin-bottom:20px;"><el-button  plain @click="setthreshold"  style="background-color: #3F9B6A;color: #fff;">库存阈值设置</el-button></div>
      <!-- 搜索 -->
       <div class="filter-container">
         <div style="display:flex;justify-content: space-between;background-color: #f5f5f5;padding:10px">
          <div style="line-height:200%">筛选查询</div>
          <div>
            <button @click="toggleFilter">收起筛选</button>
            <el-button  plain @click="search"  style="background-color: #3F9B6A;color: #fff;">查询</el-button>
            <el-button plain @click="clear"  style="color: #000;border-color:#d5d5d5;">重置</el-button>
          </div>
         </div>
         <div :class="fut?'formSearch':'collapsed'" ref="formSearch">
            <el-form :inline="true" :model="formInline" label-width="auto">
              <el-form-item label="商品名称">
                <el-input v-model="formInline.productName" placeholder="请输入商品名称"  style="width: 178px;margin-right: 5px;"/>
              </el-form-item>
              <!-- <el-form-item label="入库人">
                <el-input v-model="formSel.rkr" placeholder="请输入方案编号"  style="width: 178px;margin-right: 5px;"/>
              </el-form-item> -->
              <!-- <el-form-item label="上架时间">
                <el-input v-model="formInline.stime" placeholder="请输入方案编号"  style="width: 178px;margin-right: 5px;"/>
              </el-form-item> -->
              <!-- <el-form-item label="入库时间">
                <el-input v-model="formSel.rtime" placeholder="请输入方案编号"  style="width: 178px;margin-right: 5px;"/>
              </el-form-item> -->
              </el-form>
              </div>
        </div>
        <div style="background-color: #f5f5f5;padding:10px;margin-top: 20px;">
         <div style="line-height:200%;font-size: 14px;">数据列表</div>
        </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table
          ref="multipleTable" 
          :data="tableData"
          tooltip-effect="dark"
   
       :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
        >

          <el-table-column
            prop="productId"
            label="商品id"
            show-overflow-tooltip
           min-width="8%"
          />
          <el-table-column label="商品主图" width="150" align="center">
			  
            <template slot-scope="scope">
				
              <img height="80" width="80" :src="$baseURL+msgList(scope.row.image)" alt srcset>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" min-width="10%" />
          <el-table-column
            prop="stockNumber"
            label="属性"
            show-overflow-tooltip
            min-width="8%">
          <template slot-scope="scope">
            属性:1
            </template>
              </el-table-column>
          <el-table-column
            prop="stockNumber"
            label="库存数量"
            show-overflow-tooltip
            min-width="8%"
          />
          <el-table-column
            prop="warningStatus"
            label="预警状态"
            show-overflow-tooltip
            min-width="8%">
           
              </el-table-column>
      <!--    <el-table-column
            prop=""
            label="补货信息"
            show-overflow-tooltip
            min-width="8%"
          /> -->

        </el-table>
        <div class="fenye">
			<div style="line-height: 200%;">共{{total}}条</div>
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50, 100]"
            :page-size="10"
            layout="prev, pager, next"
            :total="total"
			background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <div class="setclass">
      <el-dialog
        title="阈值设置"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="false"
        :close-on-click-modal="false"
        :before-close="handleClose">
        <div class="formyuzhi">
          <el-form :inline="true" :model="kucunNum" label-width="auto" label-position="left">
            <el-form-item label="最小库存阈值">
              <el-input v-model="kucunNum.minNum" placeholder="请输入"  style="width: 100%;"/>
            </el-form-item>
            <el-form-item label="最大库存阈值">
              <el-input v-model="kucunNum.maxNum" placeholder="请输入"  style="width: 100%;"/>
            </el-form-item>
            <el-form-item label="安全库存量">
              <el-input v-model="kucunNum.anNum" placeholder="请输入"  style="width: 100%;"/>
            </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button plain @click="handleClose"   class="buttonHover"
          style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button>
      <el-button  plain @click="kucunSet"  style="background-color: #3F9B6A;color: #fff;">确定</el-button>

        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    getClassifyGetAll,
    Forced,
    // setFictitious,
    examine,
    productExport
  } from '@/api/commodity';
  import{
    setThreshold,
    inventoryAlert
  } from '@/api/stocksForewarn'
import { async } from 'q';
export default {
  data () {
    // 这里存放数据
    return {
      activeName: 'first',
      kucunNum:{
        minNum:'',
        maxNum:'',
        anNum:'',
      },
      formSel:{
        shopname:'',
        rkr:'',
        sTime:'',
        rTime:''
      },
      formInline: {
        searchType: '1',
        search: '', // 搜索字段
        state: '',
        // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
        dates: [], // 下单时间数组
        page: 1,
        shopName: '',
        pageSize: 10
      },
      fut:true,
      total: 1,
      tableData: [],
      tableLoading: false,
      dialogVisible:false,
	  currentPage:1
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getAll(this.formInline)
  },
  // 方法集合
  methods: {
	    msgList(list){
	        if(list && list!=''){
	          let strin = list.split(',')
	          return strin[0]
	        }
	      },
    toggleFilter(){
      this.fut = !this.fut
    },
    handleSizeChange (val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    handleCurrentChange (val) {
      this.formInline.page = val
      this.getAll(this.formInline)
    },
    //  查询
    search () {
      this.total = 1;
      this.formInline.page = 1;
      this.getAll(this.formInline);
    },
    async kucunSet(){
      const yuzhi={
        minimumInventoryThresho:this.kucunNum.minNum,
        maximumInventoryThresho:this.kucunNum.maxNum,
        safetyStock:this.kucunNum.anNum,
        merchantId:'000000'
      }
      await setThreshold(yuzhi)
       this.dialogVisible = false
       this.getAll(this.formInline)
     },
    // 初始化查询所有数据
     async getAll (formInline) {
         this.tableLoading = true
        const res = await getClassifyGetAll(formInline);
         // let obj ={
         //   merchantId:'000000',
         //   shopProductList:res.data.list
         // }
         // const yujing = await inventoryAlert(obj);
        this.total = res.data.total;
        this.tableData = res.data.list
       },
    setthreshold(){
      this.dialogVisible = true
    },
     handleClose() {
this.dialogVisible = false
      },
 // 重置
 clear () {
      this.formInline = {
        searchType: '1',
        search: '', // 搜索字段
        state: '',
        // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
        dates: [], // 下单时间数组
        page: 1,
        shopName: '',
        pageSize: 10
      };
      this.getAll(this.formInline);
    },
  }
}
</script>
<style lang='scss' scoped>
.pending{
  padding-left: 15px;
}
.tab_show{
  padding: 0  20px 20px 20px;
  min-height: calc(100vh - 50px - 20px);
  background-color: #Fff;
  }
.filter-container {
font-size:14px;
border:1px solid #EBEEF5;

}
.formSearch{
  padding: 0 20px;
    height: 60px; /* 或者你想要的任何高度 */
    /* 过渡效果 */
    transition: height 0.3s ease-in-out; /* 动画的持续时间、类型 */
    overflow: hidden; /* 隐藏溢出的内容，这样高度变化时内容不会显示出来 */

}
.collapsed {
  padding: 0 10px;
  margin-top: 0px;
  height: 0;
    transition: height 0.3s ease-in-out; /* 动画的持续时间、类型 */
    overflow: hidden; /* 隐藏溢出的内容，这样高度变化时内容不会显示出来 */
}
::v-deep .collapsed{
  .el-form--inline .el-form-item{
        margin-top: 10px;
    margin-right:20px;
    margin-bottom:0px;
  }
  .el-form-item__label{
    font-size:14px;
  }
}
::v-deep .formSearch{
  .el-form--inline .el-form-item{
      margin-top: 10px;
    margin-right:20px;
    margin-bottom:0px;
  }
  .el-form-item__label{
    font-size:14px;
  }
}
.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
::v-deep .setclass{
  .el-dialog__header{
    background-color:#fff;
  }
  .el-dialog__title{
     color:#000;
         font-size: 14px;
  }
}
::v-deep .formyuzhi{
  .el-form--inline .el-form-item{
     margin-bottom:0px;
     width:100%
  }

  .el-form-item__content{
    width:75%
  }
  .el-form-item__label{
    font-weight: 400;
    font-size: 14px;
  }


}
 ::v-deep .el-dialog__body{
     padding: 0 20px;
   }
</style>
