<style>
  .actHead {
    background: #ffe0cc;
    padding: 10px 20px;
    color: #ff6600;
    border-radius: 25px;
    margin-right: 10px;
  }
</style>
<template>
  <div class="goods-list" style="width: 1100px">
    <el-dialog
      top="3vh"
      title="查看活动规则"
      width="1040px"
      :visible.sync="dialogVisible"
    >
      <img :src="`https://img.edsmall.com/ROOT/ETao/resource/actHelp730.png?t=${new Date().getTime()}`" alt="">
    </el-dialog>
    <toptitle name="活动报名">
    </toptitle>
    <div v-if="zoneList.length!=0">
      <div style="display: flex;justify-content: space-between;margin: 10px 15px">
        <div style="display: flex">
          <!--<div class="actHead" style="padding-right: 6px">-->
            <!--活动报名时间：{{applyEndDate}}&nbsp&nbsp-->
          <!--</div>-->
          <div class="actHead" @click="dialogVisible=true" style="cursor: pointer">
            查看活动规则
          </div>
          <el-button type="primary" @click="goback" v-if="showUpdateBtn">
            添加活动商品
          </el-button>
        </div>
      </div>
      <el-tabs v-model="activeStatus" @tab-click="handleClick">
        <el-tab-pane :name="item.actId" v-for="item in zoneList" :key="item.actId">
          <span slot="label">{{item.actName}}({{item.count}})</span>
        </el-tab-pane>
      </el-tabs>
      <div class="search-wrap">
        <div class="search-box">
          <div class="search-item">
            <span class="label">商品编号：</span>
            <el-input class="input" @keyup.enter.native="onSearch" clearable v-model="params.search"
                      placeholder="请输入商品SPU ID/SKU型号"></el-input>
          </div>
          <div class="search-item" v-if="isShowPreList">
            <span class="label">专区：</span>
            <el-select class="input" style="width:120px;" clearable v-model="params.type" placeholder="请选择专区">
              <el-option
                v-for="item in preList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="search-item">
            <el-button type="primary" size="medium " @click="onSearch">搜索</el-button>
            <el-button size="medium " @click="onReset">重置</el-button>
          </div>
        </div>
      </div>
      <div>
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="actSkuList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
        >
          <el-table-column type="selection" width="70" align="center"></el-table-column>
          <el-table-column prop="skuImg" label="商品" align="center">
            <template slot-scope="scope">
              <div style="display: flex">
                <div>
                  <img style="width:80px" :src="scope.row.mainImg" alt="">
                </div>
                <div>
                  <p>SPU:{{scope.row.spuId}}</p>
                  <p v-if="scope.row.zoneIcon"><img style="width:30px" :src="scope.row.zoneIcon" alt=""></p>
                  <p>交货期:{{scope.row.deliveryTimeStr}}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="skuModel" label="SKU型号" align="center"></el-table-column>
          <el-table-column label="库存" align="center" width="180">
            <template slot-scope="scope">
              <div>库存数量：{{scope.row.stock}}</div>
              <div>占用库存：{{scope.row.virtualQty}}</div>
              <div>可用库存：{{scope.row.usableStock}}</div>
            </template>
          </el-table-column>
          <el-table-column label="日常价" align="center">
            <template slot-scope="scope">
              <div>供货价：{{scope.row.supplyPrice}}</div>
              <div v-if="!priceformulaId">采购价：{{scope.row.purchasePrice}}</div>
              <div v-if="!priceformulaId">优惠价：{{scope.row.salePrice}}</div>
              <div v-if="!priceformulaId">零售价：{{scope.row.productPrice}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="actSkuAddDate" label="添加时间" align="center" v-if="activeStatus!='defaultActRegist'"></el-table-column>
          <el-table-column label="操作" align="center" width="100px" v-if="showUpdateBtn&&activeStatus!='defaultActRegist'">
            <template slot-scope="scope">
              <div class="edit" @click="passExamineBL(0,scope.row.skuId)">
              <span
              >剔除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-box">
          <div v-if="showUpdateBtn&&activeStatus!='defaultActRegist'">
            <el-button style="margin-right: 20px" @click="toggleSelection()">全选</el-button>
            <div>
              <span>已选{{selection.length}}个商品</span>
              <el-button size="mini" @click="passExamineBL(1)" type="primary">批量剔除</el-button>
            </div>
          </div>
          <pagination
            @eventSizeChange="eventSizeChange"
            @eventCurrentChange="eventCurrentChange"
            :total="total"
            :pageSize="params.pageSize"
            :currentPage="params.pageNum"
            :pagerCount='5'
          ></pagination>
        </div>
      </div>
    </div>
    <div style="text-align: center;margin-top: -10px" v-else>
      <img style="width: 600px;height: 400px" src="../../../../static/img/index/noact.png" alt="">
      <p style="color: #999999;">暂无相关活动，敬请期待!</p>
    </div>
  </div>
</template>

<script>
  import {_getStorage } from '@/utils/utils'
  import pagination from "@/components/common/pagination";
  import toptitle from "@/components/common/topTitle";

  export default {
    name: "list",
    components: {
      pagination,
      toptitle,
    },
    data() {
      return {
        priceformulaId:null,
        showUpdateBtn:true,
        isShowPreList:true,
        isAct: false,
        applyEndDate: "",
        dialogVisible: false,
        activeStatus: "",
        loading: false,
        preList: [
          {
            value: 99,
            label: "全部",
          },
          // {
          //   value: 1,
          //   label: "优选",
          // }, {
          //   value: 2,
          //   label: "严选",
          // },
          {
            value: 11,
            label: "铂金",
          }, {
            value: 10,
            label: "淘淘淘",
          },
        ],
        selection: [],
        total: 200,
        params: {
          pageSize: 20,
          pageNum: 1,
          search: "",
          type: 99,
        },
        zoneList: [],
        actSkuList: [],
      };
    },
    mounted() {
      this.priceformulaId = _getStorage('priceformulaId')
      this.init();
    },
    methods: {
      toggleSelection() {
        this.$refs.multipleTable.toggleAllSelection();
      },
      async init() {
        await this.getZoneList();
      },
      goback() {
        this.$router.push("/marketing/AddActivityProduct");
      },
      delActGoods() {
        this.$axios.post("/actregist/delActGoods", {
          skuIds: this.selection,
          "actId": this.activeStatus,
        }).then(res => {
          let { code, msg } = res.data;
          if (code == 200) {
            this.getZoneList();
            this.$message.success(msg);
            this.selection = [];
          } else {
            this.$message.error(msg);
          }
        }).catch(() => {

        });
      },
      passExamineBL(status, skuId) {
        var msg = status == 1 ? "批量" : "";
        if (status == 1) {
          if (this.selection.length == 0) {
            this.$message("请选择要" + msg + "剔除的商品");
            return false;
          }
        }
        this.$confirm("确定要" + msg + "剔除商品?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            if (status == 0) {
              this.selection = [skuId];
            }
            this.delActGoods();
          })
          .catch(() => {
          });
      },
      getActSkuList() {
        this.$axios.post("/actregist/actSkuList", {
          ...this.params,
          "actId": this.activeStatus,
        }).then(res => {
          let { code, data } = res.data;
          if (code === 200) {
            this.total = parseInt(data.total);
            this.actSkuList = data.list;
          }else {
            this.actSkuList=[]
            this.total=0
          }
        });
      },
      getZoneList() {
        this.$axios.get("/actregist/zoneList").then(res => {
          let { code, data } = res.data;
          if (code === 200) {
            this.showUpdateBtn=data.showUpdateBtn
            this.applyEndDate = data.applyEndDate;
            this.zoneList = data.list;
            if(data.list[0].actType==1||data.list[0].actType==2){
              this.isShowPreList=false
            }
            if(this.activeStatus==0||!this.activeStatus){
              this.activeStatus = data.list[0].actId;
            }
            this.getActSkuList();
          } else {
            this.isAct = true;
          }
        });
      },
      handleClick(e) {
        let actType = this.zoneList[Number(e.index)].actType;
        if(actType==1||actType==2){
          this.isShowPreList=false
        }else {
          this.isShowPreList=true
        }
        this.params.pageNum = 1;
        this.getActSkuList();
      },
      onSearch() {
        this.params.pageNum = 1;
        this.getActSkuList();
      },
      onReset() {
        this.params = {
          pageSize: 20,
          pageNum: 1,
          search: "",
          type: 99,
        };
        this.getActSkuList();
      },
      handleSelectionChange(e) {
        this.selection = [...new Set(e.map(t => t.skuId))];
      },
      eventSizeChange(e) {
        this.params.pageSize = e;
        this.getActSkuList();
      },
      eventCurrentChange(e) {
        this.params.pageNum = e;
        this.getActSkuList();
      },
    },
  };
</script>

<style lang="scss" scoped>
  .lefttime {
    text-align: left;
  }

  .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: space-between;
  }

  .category {
    // min-height: 500px;
    padding-top: 50px;
    .f_c_theme {
      color: #f60;
    }
    .btn-box {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
    }
  }

  /deep/ .el-cascader-menu__wrap {
    height: 368px;
  }
</style>
