<template>
  <section class="p_all_20">

    <div class="">
      <el-tabs v-model="params.tagType" @tab-click="changeTabs">
        <el-tab-pane label="出售中的商品" name="1"></el-tab-pane>
        <el-tab-pane label="已售罄的商品" name="2"></el-tab-pane>
        <el-tab-pane label="仓库中的商品" name="3"></el-tab-pane>
        <el-tab-pane label="库存预警的商品" name="4"></el-tab-pane>
        <!-- <el-tab-pane label="待审核" name="5"></el-tab-pane> -->
      </el-tabs>
      <div class="search-wrap">
        <el-form ref="form" label-width="100px" :model="searchParam">
          <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="商品名称">
                    <el-input v-model="searchParam.orderCode" placeholder="商品名称" @keyup.enter.native="onSubmit('form')"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="商品编号">
                    <el-input v-model="searchParam.invoiceNo" placeholder="商品编号" @keyup.enter.native="onSubmit('form')"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row :gutter="20">
             <el-col :span="12">
               <el-row :gutter="0">
                  <el-form-item label="价格">
                    <el-col :span="11">
                        <el-input v-model="searchParam.receiver"></el-input>
                    </el-col>
                    
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-input v-model="searchParam.receiver"></el-input>
                    </el-col>
                </el-form-item>
                </el-row>
              </el-col>
             
              <el-col :span="12">
                <el-form-item label="上架时间">
                  <el-row :gutter="0">
                    <el-col :span="11">
                      <el-date-picker type="date" placeholder="选择日期" v-model="searchParam.completionDateBegin" style="width: 100%;" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                      <el-date-picker type="date" placeholder="选择日期" v-model="searchParam.completionDateEnd" style="width: 100%;" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              
          </el-row>
          <el-row :gutter="0">
            <el-col :span="12">
              <el-form-item label="交货期" prop="deliveryDateStatus">
                  <el-select v-model="searchParam.deliveryDateStatus" placeholder="全部">
                    <el-option label="现货" value="0"></el-option>
                    <el-option label="15天交期" value="1"></el-option>
                    <el-option label="30天交期" value="2"></el-option>
                    <el-option label="45天交期" value="3"></el-option>
                    <el-option label="45天交期以上" value="4"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item class="btn">
                  <el-button type="primary" @click="onSubmit('form')">搜索</el-button>
                  <el-button @click="reset('form')">重置</el-button>
                  <a :href="exportMain">
                    <el-button >导出</el-button>
                  </a>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
      </div>
      <!-- <div class="btn-wrap">
        <el-button type="primary" plain>下架</el-button>
        <el-button type="primary" plain>查看</el-button>
        <el-button type="primary">添加商品</el-button>
      </div>-->
      <div class="table-wrap">
        <el-table :data="tableData" style="width: 100%" v-loading="tableLoading" stripe>
          <!-- <el-table-column type="selection" width="40"></el-table-column> -->
          <el-table-column prop="skuImg" label="商品" align="center">
            <template slot-scope="scope">
              <div class="ico-box list-box sku_box" @click="goProdetail(scope.row.skuId)">
                <!-- <img
                  style="width: 30px;"
                  class="ico"
                  src="http://oss.av-gd.com/ROOT/busiImage/dest/product/MDGH/big/7385-8 拷贝_20180726231155678.png@400w_400h.png.webp"
                >-->
                <div class="item_1">
                  <img :src="scope.row.skuImg + '?x-oss-process=image/resize,h_200,w_200'" alt="">
                </div>
                <div class="item_2">
                  <span>{{scope.row.brandName}}{{scope.row.skuNum}}</span>
                </div>
              </div>
            </template>
          </el-table-column>
         
          <el-table-column prop="skuSupplyPrice" label="供货价" align="center">
            <template slot-scope="scope">
              <div>
                <div>
                  <p>供货价：￥{{scope.row.skuSupplyPrice}}</p>
                  <p>经销商采购价：￥{{scope.row.skuPurchasePrice}}</p>
                  <p>商品原价：￥{{scope.row.skuPrice}}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="productStyle" label="风格" align="center"></el-table-column> -->
          <el-table-column prop="skuVisualStock" label="SKU库存" align="center">
            <template slot-scope="scope">
              <div class="list-box icon_edit">
                <div class="item_2 sku">
                  <p>库存数量：{{scope.row.skuStock}}</p>
                  <p>占用库存：{{scope.row.skuVisualStock}}</p>
                  <p>可用库存：{{scope.row.skuAvailableStock}}</p>
                </div>
                <div class="item_1 sku_edit">
                  <el-button
                    type="primary"
                    @click="onEditSku(scope.$index,scope.row)"
                    icon="el-icon-edit"
                    circle
                  ></el-button>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="deliveryDate" label="交货期" align="center"></el-table-column>
          <el-table-column prop="salesVolume" label="销量" align="center"></el-table-column>
          <el-table-column prop="salesVolume" label="买家秀" align="center"></el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <pagination
          @eventSizeChange="eventSizeChange"
          @eventCurrentChange="eventCurrentChange"
          :total="total"
          :pageSize="params.pageSize"
        ></pagination>
      </div>
    </div>
    <sku-stock-alert :editSku="editSku" ref="skuStockAlert" @eventEditSkuStock="onPostSkuStock"></sku-stock-alert>
    <!-- <div class="table-wrap">
      <el-dialog title="编辑商品库存" :visible.sync="dialogTableVisible">
        <el-table :data="editSku" border>
          <el-table-column property="skuImg" label="商品" align="center">
            <template slot-scope="scope">
              <div class="ico-box list-box">
                <div class="item_1">
                  <image-alert height="80" :image="scope.row.skuImg"></image-alert>
                </div>
                <div class="item_2">
                  <span>{{scope.row.brandName}}{{scope.row.skuNum}}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column property="skuStock" label="商品库存" align="center">
            <template slot-scope="scope">
              <div class="alert-sku">
                <p>
                  库存数量：
                  <el-input
                    class="input-box"
                    style="width:150px"
                    v-model="scope.row.skuStock"
                    @input="onEditSkuStock($event,scope.$index)"
                    placeholder="请输入内容"
                  ></el-input>
                </p>
                <p>占用库存：{{scope.row.skuVisualStock}}</p>
                <p>可用库存：{{scope.row.skuAvailableStock}}</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="onPostSkuStock">确 定</el-button>
        </div>
      </el-dialog>
    </div> -->
  </section>
</template>

<script>
import imageAlert from "@/components/common/imageAlert";
import pagination from "@/components/common/pagination";
import skuStockAlert from '@/components/common/SkuStockAlert'

export default {
  // name: "xianshang",
  data() {
    return {
      searchParam:{},
      tableLoading: true,
      tableData: [],
      selectList: [],
      // dialogTableVisible: false,
      editSkuIndex: -1,
      editSku: [],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
        brandId: "",
        search: "",
        // productStatus: "",
        tagType: "1",
        type:""
      },
      value: "",

      input: "",
      productType:[],
    };
  },
  mounted() {
    this.params.tagType = this.$route.query.activeStatus?this.$route.query.activeStatus +'':this.params.tagType;
    this.getData();
    this.getBrandList();
    this.getProductType();
  },
  computed: {
    exportUrl() {
      var params = this.params;
      var paramUrl = "";
      for (var param in params) {
        paramUrl += "&" + param + "=" + params[param];
      }
      var info =
        localStorage.getItem("info") == ""
          ? ""
          : JSON.parse(localStorage.getItem("info"));
      var token = info && info.token ? info.token : "";
      return (paramUrl =
        this.HOST + "/v1/export/etao/skus?token=" + token + paramUrl);
    }
  },
  methods: {
    getProductType(){
          this.$axios.get(this.HOST +'/v1/select/sku/type').then((res) => {
              if(res.data.code==200){
                 this.productType = res.data.data;
              }else{
                this.$message.error(res.data.message);
              }
            }).catch(()=>{})
        },
    onPostSkuStock(editSku) {
      var stock = editSku[0]["skuStock"];
      var skuVisualStock = editSku[0]["skuVisualStock"];
      var skuId = editSku[0]["skuId"];
      this.$axios
        .post(this.HOST + "/v1/etao/stock", {
          stock,
          skuId
        })
        .then(res => {
          if (res.data.code == 200) {
            this.tableData[this.editSkuIndex]["skuStock"] = stock;
            this.tableData[this.editSkuIndex]["skuAvailableStock"] = (stock - skuVisualStock)>0?(stock - skuVisualStock):0;
            
            // this.dialogTableVisible = false;
            this.$refs['skuStockAlert'].toggle();
            this.$message({ type: "success", message: res.data.message });
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
      goProdetail(productId){
          //  var productId = productId;
          //  if(productId){
          //   this.$router.push({ path: '/product/etao/detail', query:{
          //     skuId:productId,
          //   }})
          //  }
      },
    // onEditSkuStock(skuStock, index) {
    //   var sku = skuStock.replace(/[^\d]/g, "");
    //   this.editSku[index]["skuStock"] = sku;
    // },
    onEditSku(index, row) {
      var row = JSON.parse(JSON.stringify(row));
      this.editSku = [row];
      this.editSkuIndex = index;
      this.$refs['skuStockAlert'].toggle();
      // this.dialogTableVisible = true;
    },
    getBrandList() {
      this.$axios
        .get(this.HOST + "/v1/select/brand", {
          params: {
            type: 1
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            var data = res.data.data;
            this.selectList = data;
          }
        });
    },
    onSreach() {
      this.params.pageNum = 1;
      this.getData();
    },
    onRest() {
      this.params.pageNum = 1;
      this.params.brandId = "";
      this.params.search = "";
      this.params.type = "";
      // this.params.productStatus = "";
      this.getData();
    },
    getData() {
      var params = this.params;
      this.$axios
        .get(this.HOST + "/v1/etao/skus", {
          params
        })
        .then(res => {
          this.tableLoading = false;
          if (res.data.code == 200) {
            var data = res.data.data;
            this.total = parseInt(data.total);
            this.tableData = data.list;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    eventSizeChange(e) {
      this.params.pageSize = e;
      this.getData();
    },
    eventCurrentChange(e) {
      this.params.pageNum = e;
      this.getData();
    },
    changeTabs(tab) {
      this.params.pageNum = 1;
      this.params.tagType = tab.name;
      this.getData();
    },
    
  },
  components: { pagination, imageAlert,skuStockAlert },
      watch:{
          //监听相同路由下参数变化的时候，从而实现异步刷新
          '$route'(to,from) {
              if(this.$route.query.activeStatus){
                  this.params.tagType = this.$route.query.activeStatus +'';
                 this.getData();
              } 
          }
     },
};
</script>

<style lang="scss" scoped>

.container{padding-bottom: 0;}
.search-wrap {
  .line{
      text-align: center;
  }
  .btn{
    text-align: right;
  }
  border-bottom: 1px solid #f2f2f2;
  .search-box {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .text {
    font-size: 14px;
    display: inline-block;
    // width: 75px;
    // text-align: right;
    color: #545454;
  }
  .input-box {
    width: 180px;
    display: inline-block;
  }
}
.btn-wrap {
  margin: 15px 0;
}
.table-wrap {
  .ico-box {
    min-width: 200px;
  }

  .list-box {
    box-sizing: border-box;
    display: flex;
    justify-items: center;
    align-items: center;
    .item_1 {
      width: 80px;
    }
    .item_2 {
      flex: 1;
      // min-width: 60px;
    }

  }
        .sku_box:hover{
    cursor: pointer;
    color: #f60;
  }
  .icon_edit {
      min-width: 220px;
      .sku {
        width: 60%;
        p {
          text-align: right;
        }
      }
      .sku_edit {
        // width: 100px;
         width: 40%;
        text-align: left;
        margin-left: 10px;
      }
    }
  .alert-sku {
    display: inline-block;
    p {
      text-align: left;
    }
  }
}
</style>
