<template>
  <div class="goods-list bg_c_white radius_10">
    <div class="search-wrap">

      <div class="search-box">
        <div class="search-item">
           <span class="label">SPU ID/商品型号：</span>
          <el-input style="width:200px;" class="input" v-model="params.search" placeholder="请输入SPU ID或型号"></el-input>
        </div>
        <div class="search-item">
          <span class="label">库存状态：</span>
          <el-select  style="width:120px;" class="input" clearable v-model="params.stockType" placeholder="请选择状态">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <!-- <div class="search-item">
          <span class="label">专区：</span>
          <el-select class="input" style="width:120px;" clearable v-model="params.ocProductType" placeholder="请选择专区">
            <el-option
              v-for="item in preList"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </div> -->

        <el-button class="search-item" type="primary" @click="onSearch">查询</el-button>
        <el-button class="search-item" @click="reset">重置</el-button>
        <a :href="exportMain">
          <el-button >导出</el-button>
        </a>
      </div>
      <!--<div style="color:red;margin-bottom:14px;">注意：【限量专区】的商品已过滤，如需查看请到-->
        <!--<el-button type="text" style="color: rgb(64, 158, 255);font-size:13px;" @click="goPage">限量专区</el-button></div>-->
    </div>

    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <!-- <el-table-column
          type="index"
           label="序号"
           align="center"
          >
        </el-table-column> -->
        <el-table-column prop="spuId" label="商品图" align="center">
          <template slot-scope="scope">
            <div class="rows">
              <img class="row_img" :src="scope.row.mainImg" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="model" label="SPU信息" align="left">
          <template slot-scope="scope">
            <p>SPU ID：{{scope.row.spuId}}</p>
            <div>SPU型号：{{scope.row.model}}</div>
            <div>
              <img v-if="scope.row.etaoProductTypeIcon" style="width:30px;" :src="scope.row.etaoProductTypeIcon" alt="">
              <img v-else-if="scope.row.etaoProductVipIcon" style="width:30px;" :src="scope.row.etaoProductVipIcon" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="skuModel" label="SKU规格" align="center"></el-table-column>
        <el-table-column prop="supplyPrice" label="价格(元)" align="center">
          <template slot-scope="scope">
            <p class="price">供货价：{{scope.row.supplyPrice}}</p>
           <div v-if="!priceformulaId">
             <!--<p class="price">采购价：{{scope.row.purchasePrice}}</p>-->
             <p class="price">优惠价：{{scope.row.salePrice}}</p>
             <p class="price">零售价：{{scope.row.productPrice}}</p>
           </div>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" align="center" width="150px">
          <template slot-scope="scope">
            <p>库存数量：{{scope.row.stock}}</p>
            <p>占用库存：{{scope.row.virtualQty}}</p>
            <p :style="'color:' + (scope.row.usableStock==0?'red':'#409eff')">可用库存：{{scope.row.usableStock}}</p>
          </template>
        </el-table-column>
        <el-table-column label="商品率" align="left" width="120px">
          <template slot="header" slot-scope="scope">
            <el-tooltip class="item" effect="light" placement="top">
              <div slot="content">
                商品售后率：卖出后被售后的单品/ 单品的所有销售量<br/>
                商品平均发货天数：单品所有发货天数总和 / 订单的单品数量
              </div>
              <span>商品率 <i class="el-icon-question"></i></span>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <div>商品售后率：{{scope.row.afterSalesRate}}</div>
            <div>商品平均发货：{{scope.row.avDelivery}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="创建时间" align="center" width="150px">
          <template slot-scope="scope">
            <p v-if="scope.row.addTime">{{new Date(scope.row.addTime)|formatDate}}</p>
          </template>
        </el-table-column>
        <el-table-column label="增补库存" align="center" >
          <template slot-scope="scope">
            <div v-if="scope.row.allowSetAddStock==1">
              <div>增补库存：{{scope.row.addStock}}</div>
              <div>交货期：{{scope.row.deliveryTimeStr}}</div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="warnStock" label="预警库存" align="center">
          <template slot-scope="scope">
            {{scope.row.warnStock}}
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="stockType" label="SKU商品状态" align="center">
           <template slot-scope="scope">
              <span :style="{color:scope.row.stockType== '正常'?'#31B907':(scope.row.stockType== '库存预警'?'#F5AB2D':'red')}">{{scope.row.stockType}}</span>
           </template>
        </el-table-column> -->

         <el-table-column label="操作" align="center" width="80px">
          <template slot-scope="scope">
            <div class="edit">
              <p><router-link :to='"/goods/productdetails?skuId="+scope.row.skuId'>查看</router-link></p>
              <p class="edit" @click="stockDialog(scope.row)">设置</p>
              <p class="edit" @click="addStock(scope.row)" v-if="scope.row.allowSetAddStock==1">增补库存</p>
              <p class="edit" @click="showOperationHistory(scope.row.skuId)">操作历史</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
       <div class="pagination-box">
        <pagination
          @eventSizeChange="eventSizeChange"
          @eventCurrentChange="eventCurrentChange"
          :total="total"
          :pageSize="params.pageSize"
          :currentPage="params.pageNum"
        ></pagination>
      </div>
    </div>
        <!-- 设置库存 -->
   <setStockDialog :objProps="objProps" @resData="cancelForm" @okSend="getList"></setStockDialog>
          <!-- 增补库存 -->
   <addStock v-if="objPropsAdd.dialogVisibleStock"
   :objProps="objPropsAdd" @resData="cancelForm_add"></addStock>
    <operationHistory :show.sync="opDrawer.show" :id="opDrawer.id" />
  </div>
</template>

<script>
import qs from 'qs'
import {_getStorage,_saveStorage,_removeStorage, _supplierId ,_formatDate} from '@/utils/utils'
import pagination from "@/components/common/pagination"
import setStockDialog from '@/components/common/setStockDialog'
import addStock from './modules/addStock'
import operationHistory from "./modules/operationHistory";
export default {
  name:'warnstock',
  components: {
    pagination,
    setStockDialog,
    addStock,
    operationHistory
  },
  data() {
    return {
      priceformulaId:null,
       preList:[
        {
          value: '',
          label: "全部"
        },
        {
          value: 11,
          label: "铂金"
        },{
          value: 10,
          label: "淘淘淘"
        },
        //  {
        //   value: 1,
        //   label: "优选"
        // },{
        //   value: 2,
        //   label: "严选"
        // },
         {
          value: 4,
          label: "小E"
        }
      ],
      params: {
        pageNum: 1,
        pageSize: 10,
        brandId:'',
        search:'',
        stockType:'',
        ocProductType:''
      },
      tableData: [],
      total:0,
      gridDataSave:{},
      objProps:{
        dialogVisibleStock:false,
        gridData:[],
        gridDataSave:{},
      },
      objPropsAdd:{
        dialogVisibleStock:false,
        gridData:[],
        gridDataSave:{},
      },
      statusList: [
         {
          value: '0',
          label: "正常"
        },{
          value: '1',
          label: "已售完"
        },
        // {
        //   value: 2,
        //   label: "库存预警"
        // }
      ],
      actStatus:0,
      opDrawer: {
        id: undefined,
        show: false,
      },
    };
  },
  computed: {
    exportMain(){
      var info = localStorage.getItem('info') == "" ? "" : JSON.parse(localStorage.getItem('info'));
      var token = info && info.token ? info.token : '';
      var params = this.params;
        params.token = token;
        params.brandId = info.brandId;
        let dataparams = qs.stringify(params);
        return '/api/products/exportGetSkuList?' + dataparams;
    },
  },
  activated() {
    this.priceformulaId = _getStorage('priceformulaId')
      if (!this.$route.meta.isBack) {
           this.params.pageNum = 1;
           this.getList();
        }
        this.$route.meta.isBack = false;
      },
  beforeRouteEnter(to, from, next) {
      if (from.path == "/goods/productdetails") {
        to.meta.isBack = true;
      } else {
        to.meta.isBack = false;
      }
      next();
  },
  mounted() {
    let { priceformulaId} = _getStorage('info');
    this.priceformulaId = priceformulaId
    let type = this.$route.query.type;
    if(type==1){
      // this.params.stockType ='2'
    }else if(type ==2){
      this.params.stockType ='1'
    }else{
      this.params.stockType =''
    }

    this.getList();
     this.getActStatus()

  },
  methods: {
    showOperationHistory(id) {
      this.opDrawer.id = id
      this.opDrawer.show = true
    },
    getActStatus(){
      this.$axios.get("/products/queryAct").then(res => {
         let {code,data,msg} =res.data;
         if(code ==200){
            this.actStatus = data.actStatus
         }else{
            this.$message.error(msg);
         }
      }).catch(res => {});
    },
    addStock(data){
      data.beforeStock = data.stock
      this.objPropsAdd.gridData.push(data);
      this.objPropsAdd.dialogVisibleStock = true;
    },
    cancelForm_add(res,type){
      if(type=='ok'){
        this.getList();
      }
      this.objPropsAdd.dialogVisibleStock = res.state;
    },
    goPage(){
      this.$router.push({
        path:'/goods/limit'
      })
    },
    getList(){
      let { brandId } = _getStorage('info');
      this.params.brandId =brandId;
      this.$axios.get("/products/getSkuList",{
        params:this.params
      }).then(r => {
        let { code, data,message } = r.data;
        if(code == 200){
          this.tableData = data.list
          this.total = parseInt(data.total)
        }else{
          this.$message.error(message)
        }
      })
    },
    stockDialog(data){
      this.objProps.gridData.push(data);
      this.objProps.gridDataSave={
          skuId: data.skuId,
          stock: data.stock,
          beforeStock: data.stock,
          // warnStock: data.warnStock
      }
      this.objProps.dialogVisibleStock = true;
    },
    cancelForm(res){
      // 接收子组件参数并赋值
      this.objProps.dialogVisibleStock = res.state;
    },
    reset(){
      this.params.search =''
        this.params.pageNum = 1;
        this.params.stockType ='',
             this.params.ocProductType =''
      this.getList();
    },
    onSearch(){
      this.params.pageNum = 1;
      this.getList();
    },
    eventCurrentChange(e) {
      this.params.pageNum = e;
      this.getList();
    },
    eventSizeChange(e){
      this.params.pageSize = e;
      this.getList();
    },
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return _formatDate(date, 'yyyy-MM-dd hh:mm:ss');
    },
  }

};
</script>

<style lang="scss" scoped>
  .price{
    white-space:nowrap
  }
>>>.resTip .el-input__inner{
  color: red;
}
.goods-list {
  color: #333333;
  padding: 20px;
}
.title-box {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 10px;
  margin-bottom: 15px;
  align-items: center;
  .title {
    padding-left: 3px;
    border-left: 3px solid #46b791;
    color: #3a3a3a;
    font-weight: bold;
    font-size: 17px;
  }
}
.search-wrap {
  .search-box {
    overflow: hidden;
    flex-wrap: wrap;
    display: flex;
    transition: max-height 0.15s ease-in-out;
    .search-item {
      margin-right: 15px;
      margin-bottom: 15px;
      .label {
        font-size: 14px;
      }
      .input {
        width: 250px;
      }
    }
  }
  .search-btn-box {
    // margin-top: 15px;

    display: flex;
    align-items: center;
    .icon-arrow {
      margin-left: 4px;
      transition: transform 0.25s ease-in-out;
    }
    .more {
      color: #46b791;
      margin-left: 10px;
      cursor: pointer;
      line-height: 33px;
    }
  }
}
.edit {
  color: #16A8E7;
  // a{
  //   color: #2491A2;-
  // }
  span {
    cursor: pointer;
    margin: 0 4px;
  }
}
.pagination-box {
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
}
.rows{
  display: flex;
  align-items: center;
      justify-content: center;
  .row_img{
    width: 80px;
    height: 80px;
  }
  .row_info{
    display: inline-block;
    text-align: left;
    color:#BBBBBB;
    padding-left: 5px;
    .row_ruand{
      font-size: 20px;
    }
  }
}

</style>
