<template>
  <div class="goods-list p_all_20" v-loading="loading">
    <div class="search-wrap">
      <div class="search-box" :style="{height: searchHeight}">
        <div class="search-item">
          <span class="label">商品信息：</span>
          <el-input class="input"  @keyup.enter.native="onSearch" clearable v-model="params.search" placeholder="请输入SPU ID或型号"></el-input>
        </div>
        <div class="search-btn-box2 search-item">
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button  @click="onReset">重置</el-button>
        </div>
      </div>

    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
         stripe
      >
        <el-table-column prop="skuImg" label="商品图" align="center" width="100">
          <template slot-scope="scope">
            <div>
              <img style="width:80px" :src="scope.row.skuImg" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="spuId" label="SPU ID" align="center">
          <template slot-scope="scope">
              <div>
                <span><i v-if="scope.row.isNew" style="display: inline-block;background: #31B907;width:8px;height: 8px;border-radius:100%;"></i> {{scope.row.spuId}}</span>
              </div>
            </template>
        </el-table-column>
         <el-table-column prop="model" label="SPU型号" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.model}}</span>
            <img v-if="scope.row.etaoProductVip" class="icon_vip" src="@/assets/img/vipgoods.png" alt />
          </template>
        </el-table-column>
        <el-table-column prop="templateTame" label="类目" align="center"></el-table-column>
        <el-table-column prop="brandName" label="品牌" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.brandName}}</span>
            <img v-if="scope.row.isEtaoVip" class="icon_vip" src="@/assets/img/vipbrand.png" alt />
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="添加时间" align="center"></el-table-column>
        <el-table-column prop="addTime" label="商品状态" align="center">
          <template slot-scope="scope">
            <div class="edit">
              <span :style="{color: scope.row.isEtao == '仓库中'?'#F5AB2D':
              (scope.row.isEtao=='审核不通过' || scope.row.isEtao=='已下架'?'red':'#31B907')}">{{scope.row.isEtao}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="edit">
              <span @click="handleToViewSku(scope.row.spuId)"><i class="el-icon-view"></i> 库存</span>
              <span @click="handleToView(scope.row.spuId)">查看</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-box">
        <div></div>
        <pagination
          @eventSizeChange="eventSizeChange"
          @eventCurrentChange="eventCurrentChange"
          :total="total"
          :pageSize="params.pageSize"
          :pageNum="params.pageNum"
        ></pagination>
      </div>
    </div>
            <!-- 设置库存 -->
   <setStockDialog v-if="objProps.dialogVisibleStock" :objProps="objProps" @resData="cancelForm"></setStockDialog>
    <shelf></shelf>
  </div>
</template>

<script>
import pagination from "@/components/common/pagination";
import { _getStorage,_deepClone, _deal } from '@/utils/utils'
import shelf from "@/components/common/shelf";
import setStockDialog from './modules/lookStockLimit'
export default {
  name:'limitlist',
    components: {
        pagination,
        shelf,
        setStockDialog
  },
  data() {
    return {
      releaseTime:'',
       prodStyle:[],//风格列表
      formstyle:{
        prodStyleVal:''
      },
      spuIdVal:'',
      styleSelect:false,
      rules:{
        prodStyleVal:[{ required: true, message: '风格不能为空'}],
      },
      selection: [],
      loading: false,
      showMore: false,
      total: 0,
      params: {
        pageSize: 20,
        pageNum: 1,
        search: "",
        brandId: "",
        templateId: "",
        supplierId: "",
        beginTime: "",
        status: "",
        endTime:''
      },
      statusList: [
        {
          value: 1,
          label: "已上架"
        },{
          value: 2,
          label: "正在审核"
        },{
          value: 3,
          label: "审核不通过"
        },{
          value: 4,
          label: "仓库中"
        },
      ],
      input: "",
      // brandList: [],
      tableData: [],
      tempList: [],

      supplierList: [],
      value: "",
      dialogData:{
        isShowDrawer:false,//弹窗
      },
     objProps:{
        dialogVisibleStock:false,
        spuId:''
      },
   
    };
  },
  computed: {
    deg() {
      return this.showMore ? 180 : 0;
    },
    searchHeight() {
      return this.showMore ? "auto" : "47px";
    },

  },
  mounted() {
    this.getData();
  },
  methods: {
    handleToViewSku(spuId){
        this.objProps.spuId = spuId;
        this.objProps.dialogVisibleStock = true;
    },
    cancelForm(res,ok){
      this.objProps.dialogVisibleStock = res;
    },
    onSearch() {
      this.params.pageNum = 1;
      this.getData();
    },
    onReset(){
      this.params = {
        pageSize: 20,
        pageNum: 1,
        search: "",
        brandId: "",
        templateId: "",
        supplierId: "",
        beginTime: "",
        status: "",
        endTime:""
      }
      this.releaseTime =''
        this.getData();
    },
    getData() {
      this.loading = true
      let { brandId } = _getStorage('info');
      this.params.brandId =brandId;
      this.$axios.post("/products/LimitList", this.params).then(res => {
        let { data, code } = res.data;
        if (code == 200) {
           if(data && data.list && data.list.length>0){
              this.total = parseInt(data.total);
              this.tableData =data.list
            }else{
              this.tableData =[]
              this.total =0
            }
        }
        this.loading = false;
      });
    },
    handleSelectionChange(e) {
      this.selection = e;
    },
    eventSizeChange(e) {
      this.params.pageSize = e;
      this.getData();
    },
    eventCurrentChange(e) {
      this.params.pageNum = e;
      this.getData();
    },
    toPage(path) {
      this.$router.push({
        path
      });
    },
    handleToEdit(spuId) {
      this.$router.push({ path: "/goods/newProduct", query: { spuId } });
    },
    handleToView(spuId) {
      this.$router.push({ path: "/goods/details", query: { spuId } });
    }
  },

};
</script>

<style lang="scss" scoped>
.goods-list {
  color: #333333;
  box-sizing: border-box;
}
.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 #ff6600;
    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 {
        display: inline-block;
        width: 74px;
        text-align: right;
        font-size: 14px;
      }
      .input {
        width: 250px;
      }
    }
  }
  .search-btn-box2{
    flex: 1;
    text-align: left;
    .left1{
      margin-left: 10px;
    }
  }
  .search-btn-box {
    margin-bottom: 10px;

    display: flex;
    align-items: center;
    .icon-arrow {
      margin-left: 4px;
      transition: transform 0.25s ease-in-out;
    }
    .more {
      color: #ff6600;
      margin-left: 10px;
      cursor: pointer;
      line-height: 33px;
    }
  }
}
.edit {
  color: #0785dd;
  span {
    cursor: pointer;
    margin: 0 4px;
  }
}
.pagination-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon_vip{
  height: 14px;
  vertical-align: text-bottom;
}
</style>
