<template>
    <div class="goods">
      <el-card class="boxcard" shadow="never">
        <r-search ref="searchalt" :searchData="searchData" :searchForm="searchForm" :searchHandle="searchHandle"  />
      </el-card>
      
      <div :style="{height:`${this.contentHeight}px`}" style="padding-top:30px;">
          <r-table class="page" :isIndex="false" isHandle :tableData="tableData" :tableCols="tableCols" :tableHandles="tableHandles"  :isPagination="true" :tablePage="pagination" @refresh="init()">
            <el-upload slot="tip" ref="newset" action="/api/uploadPutWarehouse" :multiple="false" name="file"
              :show-file-list="false" :on-success="inventorySuccess" :before-upload="beforeInventory"
              :on-error="inventoryError" style="display:inline-block;margin: 0 10px 0 10px;" :headers="headers">
              <el-button type="primary" plain>入库导入</el-button>
            </el-upload>
          </r-table>
        
      </div>
      <r-form
        :isHandle="true"
        :formRules="formRules"
        :formCols="formCols"
        :formHandle="formHandle"
        :formData="formData"
              labelWidth="100px"
        dialogWidth="550px"
        :inline="false"
        ref="elForm"
      />
    </div>
  </template>
  <script>
  
  export default {

      data() {
          return {
            load:false,
            flag:false,
            title:'',
            param:{},
            supplierType:[],
            headers: {
              'Authorization': 'Bearer ' + localStorage.getItem("token")
            },
            pagination: { size: 10, page: 1, total: 0 },
            searchData: {
              keyWord:"",
              // status:'',
            },
            searchForm: [
              { type: "input",label: "关键词", prop: "keyWord",placeholder:'商品、SKU、批次',width:400},
            ],
            searchHandle: [
              {type: "info",icon: "el-icon-refresh", handle: e => this.init(true) },
              {label: "搜索",type: "primary",icon: "el-icon-search",handle: e => this.seach()},  
            ],
            
            tableData: [],
            tableCols:[
              { label: "供应商名称", prop: "supplier_name",width:200},
              { label: "商品名称", prop: "good_name",width:150},
              { label: "商品sku", prop: "sku_name",width:200},
              { label: "采购批次", prop: "batch",width:150},
              { label: "采购数量", prop: "stock",width:200},
              { label: "采购单价", prop: "buyer_price",width:150},
              { label: "销售价格", prop: "price",width:150},
              { label: "保质期/天", prop: "shelf_life",width:150},
              { label: "采购日期", prop: "buyer_at",width:150},
              { label: "采购员", prop: "username",width:200},
              { label: "备注", prop: "remark",width:250},
              { label: "创建时间", prop: "created_at",width:200},
              { label: "操作",type: "button",width: 300,
                btnList: [
                  // {label: "修改",type: "primary",size: "mini",handle: (row) => this.elFormChange(row)},
                  {label: "删除",type: "danger",size: "mini",handle: (row) => this.elFormDelete(row)},
                ]
              },
            ],
            
            tableHandles: [
              {
                label: "新增入库",
                type: "primary",
                handle: e => {this.elFormVisible(e)} ,
              }
            ],
            formData: {
              supplier_id: "",
              good_type:[],
              stock:'',
              buyer_price:'',
              price:'',
              shelf_life:"",
              buyer_at:"",
              buyer_by:"",
              remark:"",
            },
            formCols: [
              { label: "供应商名称", prop: "supplier_id",width:350,type:'select',options:[]},
              { label: "商品/规格", prop: "good_type",width:350,type:'cascader',options:[]},
              { label: "入库数量", prop: "stock",width:350,type:'number'},
              { label: "采购单价", prop: "buyer_price",width:350,type:'number'},
              { label: "销售价格", prop: "price",width:350,type:'number'},
              { label: "保质期/天", prop: "shelf_life",width:350,type:'number'},
              { label: "入库日期", prop: "buyer_at",width:350,type:'dateTime'},
              { label: "采购员", prop: "buyer_by",width:350,type:'select',options:[]},
              { label: "备注", prop: "remark",width:350,type: "textarea"},
            ],
            formRules: {
              supplier_id: [{ required: true, message: "请选择供应商名称", trigger: "blur" }],
              good_type: [{ required: true, message: "请选择商品/规格", trigger: "blur" }],
              buyer_by: [{ required: true, message: "请选择采购员", trigger: "blur" }],
            },
            formHandle: [
              {
                label: "确认",
                type: "primary",
                icon: "el-icon-circle-plus-outline",
                handle: e => this.elFormSubmit(),
              },
              {
                label: "取消",
                icon: "el-icon-circle-close",
                handle: e => this.elFormVisible(),
              },
            ],
            width:500,
            height:500,
            contentHeight:500,
        }
      },
      mounted() {
        let  element = document.querySelector('.box-card');
        this.width=element.offsetWidth
        this.height=element.offsetHeight
        let  topEl = document.querySelector('.boxcard');
        this.contentHeight=element.offsetHeight-topEl.offsetHeight

        this.$http.post('/getProSku').then(res=>{
          this.formCols[0].options=res.data.supplier;
          this.formCols[1].options=res.data.product;
          this.formCols[7].options=res.data.user;
        })
        
        this.init()
      },
      methods: {
        beforeInventory() {
            this.loadingModule = this.$loading({
                lock: true,
                text: '导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
      },
      inventorySuccess(response) {
          this.$message({
              message: '导入成功！',
              type: "success",
          });
          this.loadingModule.close();
      },
      inventoryError(err) {
          this.$message({
              message: err.errorMessage,
              type: "error",
          });
          this.loadingModule.close();
      },
        init(param={}) {
          let data=Object.assign(this.pagination,param)
          this.$http.get('/listPutWarehouse',data).then(res=>{
            this.pagination.page=res.data.page
            this.pagination.size=res.data.size
            this.pagination.total=res.data.total
            this.tableData=res.data.list;
            console.log(this.tableData);
          })
        },
      seach(){
        this.init(this.searchData)
      },
      elFormUpload(e){
        console.log('导入',e);
      },
      elFormVisible(title){
        if (title==undefined) {
          this.title='新增'
          this.formData = { ...{} };
        }
        this.$refs.elForm.dialogFormTitle=this.title
        this.$refs.elForm.dialogFormVisible =!this.$refs.elForm.dialogFormVisible
      },
      elFormChange(e){
        this.title='修改'
        this.formData={...e}
        console.log(this.formData);
        this.elFormVisible("修改");
        
      },
      elFormDelete(e){
        this.$confirm('您确定要删除吗？','提示').then(()=>{
          this.$http.post('/delPutWarehouse',{id:e.id}).then(res=>{
            if (res.code == 200) {
              this.$msg.success('删除成功！')
              this.tableData=this.tableData.filter((obj)=>{
                return obj.id!=e.id
              })
            }
          })
        }).catch(()=>{})
      },
      elFormSubmit(e) {
        this.$refs.elForm.$refs.ruleForm.validate((valid) => {
          if (valid) {
            // console.log(this.formData);return;
            this.$http.post('/savePutWarehouse', this.formData).then((res) => {
              console.log(res);
              if (res.code==200) {
                this.$message({
                  type: "success",
                  message: `${this.title}成功！`,
                  duration: 1300,
                  onClose: (res) => {
                    this.elFormVisible();
                    this.init();
                  },
                });
              }
            });
                      // this.treeUpload()
          }
        });
      },
    
      
    },
  };
  </script>