<template>
  <div class="goods-list">
    <toptitle name="商品列表">
      <el-button type="primary"> 
        <router-link :to="{path:'/goods/templateold'}">+发布商品</router-link>
      </el-button>
    </toptitle>

    <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-item">
          <span class="label">品牌名称：</span>
          <el-select
            class="input"
            clearable
            filterable
            v-model="params.brandId"
            placeholder="请选择品牌"
          >
            <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div> -->
        <div class="search-item">
          <span class="label">类目：</span>
          <el-select
            class="input"
            clearable
            filterable
            v-model="params.templateId"
            placeholder="请选择类目"
          >
            <el-option v-for="item in tempList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <!-- <div class="search-item">
          <span class="label">供货商：</span>
          <el-select
            class="input"
            clearable
            filterable
            v-model="params.supplierId"
            placeholder="请选择供货商"
          >
            <el-option
              v-for="item in supplierList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div> -->
        <div class="search-item">
          <span class="label">状态：</span>
          <el-select class="input" clearable v-model="params.status" 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-date-picker
              v-model="releaseTime"
              class="input"
              type="daterange"
              :picker-options="pickerOptions"
              :default-time="['00:00:00','23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
        </div>
       
      </div>
      <div class="search-btn-box">
        <el-button type="primary" size="medium " @click="onSearch">搜索</el-button>
          <el-button size="medium " @click="onReset">重置</el-button>
        <p class="more" @click="showMore= !showMore">
          更多条件（状态、发布时间）
          <!-- 、平台 -->
          <i :style="{  transform: 'rotateZ('+deg+'deg)'}" class="el-icon-arrow-down icon-arrow"></i>
        </p>
      </div>
    </div>
    <div>
      <el-table
      v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column type="selection" width="70" :selectable="selectable" align="center"></el-table-column>
        <el-table-column prop="skuImg" label="SPU主图" align="center" width="100">
          <template slot-scope="scope">
            <div class="">
              <img style="width:80px" :src="scope.row.skuImg" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="spuId" label="SPU ID" align="center"></el-table-column>
        <el-table-column prop="templateTame" label="类目" align="center"></el-table-column>
        <el-table-column prop="brandName" label="品牌" align="center"></el-table-column>
        <el-table-column prop="model" label="SPU型号" align="center"></el-table-column>
        <!-- <el-table-column prop="supplierName" label="供应商" align="center"></el-table-column> -->
    
        <el-table-column prop="addTime" label="商品状态" align="center">
          <template slot-scope="scope">
            <div class="edit">
              <!-- <span style="color:#31B907;" v-if="scope.row.saleable==1">上架</span>
              <span style="color:red" v-else>仓库中</span> -->
              <!-- <span style="color:red" v-else>下架</span> -->
              <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 prop="releaseTime" label="发布时间" align="center"></el-table-column>
        <el-table-column prop="addTime" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间" align="center"></el-table-column>
        <!-- <el-table-column prop="reviewer" label="审核人" align="center"></el-table-column> -->
        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <div class="edit">
              <span
                v-if="scope.row.reviewStatus==1"
                @click="chageSaleable(scope.row.spuId,scope.row.isEtao)"
                >{{scope.row.isEtao=='仓库中'?"上架":"下架"}}</span>
              <span @click="handleToEdit(scope.row.spuId)">编辑</span>
              <span @click="handleToView(scope.row.spuId)">查看</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-box">
        <!-- " -->
        <div>
          <span>已选{{selection.length}}个商品</span>
          <el-button size="mini" @click="passExamineBL(1)">批量上架</el-button>
          <el-button size="mini" @click="passExamineBL(0)">批量下架</el-button>
        </div>
        <pagination
          @eventSizeChange="eventSizeChange"
          @eventCurrentChange="eventCurrentChange"
          :total="total"
          :pageSize="params.pageSize"
          :currentPage="params.pageNum"
          :pagerCount="5"
        ></pagination>
      </div>
    </div>
    <shelf></shelf>
  </div>
</template>

<script>
import {_getStorage,_saveStorage,_removeStorage } from '@/utils/utils'
import pagination from "@/components/common/pagination";
import toptitle from '@/components/common/topTitle'
import shelf from "@/components/common/shelf";
export default {
  data() {
    return {
       pickerOptions: {
            disabledDate(time) {
              var todayYear = (new Date()).getFullYear()
              var todayMonth = (new Date()).getMonth()
              var todayDay = (new Date()).getDate()
              var todayTime = (new Date(todayYear, todayMonth, todayDay, '23', '59', '59')).getTime()// 毫秒
              return time.getTime() > todayTime
          }
      },
      releaseTime:'',
      selection: [],
      loading: false,
      showMore: false,
      total: 200,
      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: ""
    };
  },
  computed: {
    deg() {
      return this.showMore ? 180 : 0;
    },
    searchHeight() {
      return this.showMore ? "auto" : "47px";
    }
  },
  mounted() {
    this.getData();
    // this.getBrandList();
    this.getTempList();
    this.getSupplierList();
  },
  methods: {
    passExamineBL(status) {
      var msg = status == 1 ? "上架" : "下架";
      if (this.selection.length == 0) {
        this.$message("请选择要批量" + msg + "的商品");
        return false;
      }
      this.$confirm("确定批量" + msg + "商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var ids = [];
          this.selection.map(item => {
            ids.push(item.spuId);
          });
          this.setEnableBatch(ids, status);
        })
        .catch(() => {});
    },
    selectable(row, index) {
      return row.reviewStatus == 1 ? true : false;
    },
    getSupplierList() {
      this.$axios.post("/products/supplierList",{
        headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
      }).then(res => {
        let { data, code } = res.data;
        if (code == 200) {
          this.supplierList = data;
        }
      });
    },
    chageSaleable(spuId, saleable) {
      let msg = saleable == '仓库中' ? "上" : "下";
      this.$confirm("是否确认" + msg + "架？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // let sa = saleable == 1 ? 0 : 1;
          let sa = saleable == '仓库中' ? 1 : 0;

          this.setEnableBatch([spuId], sa);
        })
        .catch(() => {});
    },
    setEnableBatch(spuIds, saleable) {
      this.$axios
        .post("/products/setEnableBatch", {
          spuIds: spuIds,
          saleable: saleable
        })
        .then(res => {
          let { data, code, msg } = res.data;
          if (code == 200) {
            this.$message({
              type: "success",
              message: msg
            });
            this.syncProduct(spuIds);
            this.getData();
          } else {
            this.$message.error(msg);
          }
        });
    },
        // 同步新商品数据到E淘旧商品库
    syncProduct(spuIds){
      let parseIntSpus = [];
      spuIds.map(res=>{
        parseIntSpus.push(parseInt(res))
      })
       this.$axios
        .post("/sync/syncProduct", {
          spuIds: parseIntSpus,
        })
        .then(res => {

        })
    },
    onSearch() {
      this.params.pageNum = 1;
       this.params.beginTime= this.releaseTime && this.releaseTime.length?this.releaseTime[0]:'';
      this.params.endTime= this.releaseTime && this.releaseTime.length?this.releaseTime[1]:'';
      this.getData();
    },
    onReset(){
      this.params = {
        pageSize: 20,
        pageNum: 1,
        search: "",
        brandId: "",
        templateId: "",
        supplierId: "",
        beginTime: "",
        status: "",
        endTime:""
      }
      this.releaseTime =''
        this.getData();
    },
    getTempList() {
       let { brandId } = _getStorage('info');
      this.$axios.get("/products/tempList",{
        params:{
            brandId:brandId
        }
      }).then(res => {
        let { data, code } = res.data;
        if (code == 200) {
          this.tempList = data;
        }
      });
    },
    getBrandList() {
      this.$axios.get("/products/getBrandList").then(res => {
        let { data, code } = res.data;
        if (code == 200) {
          this.brandList = data;
        }
      });
    },
    getData() {
      this.loading = true;
      let { brandId } = _getStorage('info');
      this.params.brandId =brandId;
      this.$axios.post("/products/etao/list", this.params).then(res => {
        let { data, code } = res.data;
        if (code == 200) {
          this.tableData = data.list;
          this.total = data.total;
        }
        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/newProductold", query: { spuId } });
    },
    handleToView(spuId) {
      this.$router.push({ path: "/goods/detailsold", query: { spuId } });
    }
  },
  components: {
    pagination,
    shelf,
    toptitle
  }
};
</script>

<style lang="scss" scoped>
.goods-list {
  color: #333333;
  padding: 20px;
}

.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-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: center;
  // justify-content: space-between;
}
</style>
