<template>
   <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>农事管理</el-breadcrumb-item>
            <el-breadcrumb-item>库存</el-breadcrumb-item>
        </el-breadcrumb>
         <div class="search-box">
            <div class="filter-box">
                <el-input
                    size="small"
                    placeholder="请输入物料名称"
                    v-model="item_name">
                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-select size="small" v-model="category" placeholder="请选择品类">
                    <el-option label="肥料" value="1"></el-option>
                    <el-option label="农药" value="2"></el-option>
                    <el-option label="种苗" value="3"></el-option>
                    <el-option label="其他" value="4"></el-option>
                </el-select>
            </div>
        </div>
         <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" v-for="item in stockList" :key="item.id">
                <el-card class="box-card ">
                    <div class="img-box">
                        <img  src="@/assets/images/sy/farmThing/stock.png" >
                    </div>
                    <div class="detail">
                        <p class="borderLine">所属基地 : {{item.farm}}</p>
                        <p class="borderLine">所属地块 : {{item.land}}</p>
                        <p class="borderLine">物料编号 : {{item.suppliescode}}</p>
                        <p class="borderLine">物料名称 : {{item.suppliesname}}</p>
                        <p class="borderLine">品类 : {{item.typename==1?'肥料':'其他'}}</p>
                        <p class="borderLine">库存数量(kg) : {{item.stocknum}}</p>
                     </div>
                    <div class="btns">
                        <a :class="{bg:itemId==item.id&&btnindex==1?true:false}"  @click="viewDetail(item.id)">详情</a>
                        <a :class="{bg:itemId==item.id&&btnindex==2?true:false}" @click="stockOutAdd(item)">出库</a>
                    </div>
                </el-card>
            </el-col>
         </el-row>
        <el-pagination
        background
        layout="prev, pager, next"
        :total="totalNum"
        @current-change="changePage">
       </el-pagination>
        <!-- 查看详情弹框 -->
         <el-dialog
         title="库存详情"
         :visible.sync="stockDetailDialogVisible"
         width="700px"
         @close="stockDetailDialogClosed">
           <el-table
            :data="tableData1"
            stripe
            style="width: 100%">
            <el-table-column
            prop="item_num"
            label="物料编号"
           >
            </el-table-column>
            <el-table-column
            prop="category"
            label="品类"
            >
            </el-table-column>
            <el-table-column
            prop="item_name"
            label="物料名称">
            </el-table-column>
              <el-table-column
            prop="stock_quantity"
            label="结存(kg)">
            </el-table-column>
          </el-table>
          <el-table
            :data="tableData2"
            stripe
            style="width: 100%;margin:50px 0">
            <el-table-column
            prop="in_batch"
            label="入库批次"
           >
            </el-table-column>
            <el-table-column
            prop="date"
            label="入库日期"
            >
            </el-table-column>
            <el-table-column
            prop="pro_weight"
            label="数量(kg)">
            </el-table-column>
            <el-table-column
            prop="stock_quantity"
            label="剩余">
            </el-table-column>
            <el-table-column
            prop="operator"
            label="经办人">
            </el-table-column>
          </el-table>
          <el-table
            :data="tableData3"
            stripe
            style="width: 100%">
            <el-table-column
            prop="out_batch"
            label="出库批次"
           >
            </el-table-column>
            <el-table-column
            prop="date"
            label="出库日期"
            >
            </el-table-column>
            <el-table-column
            prop="pro_weight"
            label="数量(kg)">
            </el-table-column>
            <el-table-column
            prop="used_place"
            label="使用地点">
            </el-table-column>
            <el-table-column
            prop="operator"
            label="经办人">
            </el-table-column>
          </el-table>
         </el-dialog> 
        <!-- 新增出库弹框 -->
         <el-dialog
         title="出库"
         :visible.sync="farmThingAddDialogVisible"
         width="30%"
         @close="AddDialogClosed">
            <el-form ref="addFormRef" :model="addForm" label-width="100px" :rules="addFormRules" >
                <el-form-item label="所属地块 : " prop="pro_cascader">
                    <el-cascader
                            style="width:100%"
                            v-model="addForm.pro_cascader"
                            :options="FieldCascader"
                            :props="{ expandTrigger: 'hover',label:'farmname',value:'farmname'}">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="品类 : " prop="category">
                  <el-select  v-model="addForm.category" style="width: 100%;">
                    <el-option label="肥料" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="物料名称 : " prop="item_name">
                    <el-input v-model="addForm.item_name"></el-input>
                </el-form-item>
                <el-form-item label="物料编号 : " prop="item_num">
                    <el-input  v-model="addForm.item_num"></el-input>
                </el-form-item>
                 <el-form-item label="生产企业 : " prop="firm">
                    <el-input v-model="addForm.firm"></el-input>
                </el-form-item>
                <el-form-item label="出库批次 : " prop="batch">
                    <el-input  v-model="addForm.batch"></el-input>
                </el-form-item>
                <el-form-item label="出库数量 : " prop="pro_weight">
                    <el-input  v-model="addForm.pro_weight"></el-input>
                </el-form-item>
               <el-form-item label="经办人 : " prop="operator">
                    <el-input  v-model="addForm.operator"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="farmThingAddDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="addSubm">确认</el-button>
            </span>
         </el-dialog> 
   </div>
</template>

<script>
   export default {
      data(){
         return {
            itemId:'',
            item_name:'',//物料名称
            category:'', //品类名称
            page:1,
            stockDetailDialogVisible:false,
            farmThingAddDialogVisible:false,
            FieldCascader:[],
            addForm:{
                pro_cascader:[],
                category:'',
                item_name:'',
                item_num:'',
                firm:'',
                batch:'',
                pro_weight:'',
                operator:'',
            },
            addFormRules:{
                pro_cascader:[{ required: true, message: '请选择所属地块', trigger: 'change'}],
                category:[{ required: true, message: '请选择品类', trigger: 'change'}],
                item_name:[{ required: true, message: '请选择物料名称', trigger: 'blur'}],
                item_num:[{ required: true, message: '请填写物料编号', trigger: 'blur'}],
                firm:[{ required: true, message: '请填写生产企业', trigger: 'blur'}],
                batch:[{ required: true, message: '请填写入库批次', trigger: 'blur'}],
                pro_weight:[{ required: true, message: '请填写入库数量', trigger: 'blur'}],
                operator:[{ required: true, message: '请选择经办人', trigger: 'blur'}],
            },
            stockList:[],
            totalNum:1,
            tableData1:[{
               item_num:'1454',
               category:'农药' ,
               item_name:'牌螺螨酯',
               stock_quantity:456
            }],
            tableData2:[{
                in_batch:'4514',
                date:'2020-02-14',
                pro_weight:'41',      //数量
                stock_quantity:1412,  //剩余
                operator:'小张'
            },{
                in_batch:'4514',
                date:'2020-02-14',
                pro_weight:'41',      //数量
                stock_quantity:1412,  //剩余
                operator:'小张'
            },{
                in_batch:'4514',
                date:'2020-02-14',
                pro_weight:'41',      //数量
                stock_quantity:1412,  //剩余
                operator:'小张'
            }],
            tableData3:[{
                out_batch:'4514',
                date:'2020-02-14',
                pro_weight:'41',
                used_place:'基地1—地块2',
                operator:'小张'
            },{
                out_batch:'4514',
                date:'2020-02-14',
                pro_weight:'41',
                used_place:'基地1—地块2',
                operator:'小张'
            },{
                out_batch:'4514',
                date:'2020-02-14',
                pro_weight:'41',
                used_place:'基地1—地块2',
                operator:'小张'
            }]
         }
      },
      mounted(){
        this.getAllFieldsCascader();
        this.getFields();
      },
      methods:{
         getFields(){
            this.$axios({
                method:"POST",
                url:"/stock_info",
                data:this.qs.stringify({page:this.page})
                }).then((res)=>{
                    if (res.data.message=='') {
                            this.stockList=res.data.data.data;
                            this.totalNum=res.data.data.counts;
                    }
                })
         },
        getAllFieldsCascader(){
            this.$axios({
               method:"POST",
               url:"/all_base",
            }).then((res)=>{
                  if (res.data.message== "") {
                      this.FieldCascader=res.data.data.data;
                      console.log(this.FieldCascader) 
                  }
            })
         },
         viewDetail(id){
            this.stockDetailDialogVisible=true;
            this.itemId=id;
         },
         stockDetailDialogClosed(){

         },
         changePage(val){
            this.page=val;
            this.getFields()
         },
        stockOutAdd(item){
            this.addForm.pro_cascader=[item.farm,item.land];
            this.addForm.category='1';
            this.addForm.item_name=item.suppliesname;
            this.addForm.firm=item.firm;
            this.farmThingAddDialogVisible=true;
        },
        AddDialogClosed(){
          this.$refs.addFormRef.resetFields();   
        },
        addSubm(){
            this.$refs.addFormRef.validate((valid)=>{
               if (!valid) return 
                this.$axios({
                    method:'POST',
                    url:'/out_stock',
                    data:this.qs.stringify({
                        farm:this.addForm.pro_cascader[0],
                        land:this.addForm.pro_cascader[1],
                        suppliesname:this.addForm.item_name,
                        suppliescode:this.addForm.item_num,
                        typename:this.addForm.category,
                        stockbatch :this.addForm.batch,
                        stocknum:this.addForm.pro_weight,
                        firm:this.addForm.firm,
                        user:this.addForm.operator
                    })
                }).then(res=>{
                    if(res.data.message==""){
                       this.farmThingAddDialogVisible=false;
                       this.getFields();
                    }
                })
              
            })
        },
      }
   }
</script>

<style lang='less' scoped>
.search-box{
    display:flex;
    justify-content: space-between;
    margin-bottom:10px;
    .el-input{width:200px;}
    }
.el-card {
    text-align: center;
    color:#555;
    font-size:13px;
    .borderLine{
        border: #eee;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 8px 0;
        margin: 10px 0;
    }
   .btns{
      display:flex;
      width:180px;
      border-radius:30px;
      box-shadow: 0 0 10px rgba(0,0,0,.15);
      margin:20px auto 0;
      a.bg{background:#17BB89;color:#fff;}
      a{
         width:50%;
         height:30px;
         line-height:30px;
         cursor:pointer;
         &:first-child{border-top-left-radius:30px;border-bottom-left-radius:30px;}
         &:last-child{border-top-right-radius:30px;border-bottom-right-radius:30px;}
         }
      a:hover{background:#14a478;color:#fff}
   } 
}
  .el-table /deep/ th{
       background:#eee
   }
</style>