<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-button  @click="goback1()">返回上一层</el-button>
   <div style="background: #f0f5ff;height: 50px;width: 96%;padding: 20px;margin-top: 3px">
     <h3>{{headTitle.name}}
       <span
         style="color: #FFFFFF;font-size: 12px;background: #ff6600;padding: 5px 8px;margin-left: 6px;border-radius: 16px">
         <span v-if="headTitle.actStatus==1">未开始</span>
         <span v-if="headTitle.actStatus==2">进行中</span>
         <span v-if="headTitle.actStatus==3">已结束</span>
       </span>
     </h3>
     <el-row style="margin-top: 20px">
       <el-col :span="8" style="text-align: center"><div class="grid-content bg-purple">活动时间：{{headTitle.actDateStr}}</div></el-col>
       <el-col :span="8" style="text-align: center"><div class="grid-content bg-purple-light">创建时间：{{headTitle.addDate}}</div></el-col>
       <el-col :span="8" style="text-align: center"><div class="grid-content bg-purple">参与活动SKU总数：{{total}}</div></el-col>
     </el-row>
   </div>
    <div v-if="zoneList.length!=0">
      <div style="display: flex;justify-content: space-between;margin: 10px 15px">
        <div style="display: flex">

        </div>
      </div>
      <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">
            <el-button type="primary"  @click="onSearch">搜索</el-button>
            <el-button  @click="onReset">重置</el-button>
            <el-button type="primary" @click="goback" v-if="headTitle.actStatus==1">
              添加活动商品
            </el-button>
            <el-tooltip class="item" effect="light" placement="top-start" v-if="headTitle.actStatus==1">
              <div slot="content">
                <div>注：活动开始后，不可添加/剔除商品</div>
              </div>
              <span class="el-icon-question"></span>
            </el-tooltip>
            <el-button type="primary" @click="showModel('',2)" v-if="temallowCustomActDiscount==1&&headTitle.type==1">
              批量设置折扣
            </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="left" width="200">
            <template slot-scope="scope">
              <div style="display: flex">
                <div>
                  <image-alert height="80px" style="margin-right: 6px"  showDefaultImg :image="scope.row.mainImg"></image-alert>
                </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="left"></el-table-column>
          <!--<el-table-column label="商品类目" align="left">-->
            <!--<template slot-scope="scope">-->
              <!--吊灯-->
            <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column label="增补库存" align="left" width="180" v-if="headTitle.type==1">
            <template slot-scope="scope">
              <div v-if="scope.row.allowSetAddStock==1">
                <div>增补库存：{{scope.row.addStock}}</div>
                <div>交货期：{{scope.row.deliveryTimeStr}}<i @click="addStock(scope.row)" class="el-icon-edit-outline" style="font-size: 18px;cursor: pointer;font-weight: bold"></i> </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="库存" align="left" width="180">
            <template slot-scope="scope" >
              <div>库存数量：{{scope.row.stock}}</div>
              <div>占用库存：{{scope.row.virtualQty}}</div>
              <div>可用库存：{{scope.row.usableStock}} <i @click="stockDialog(scope.row)" class="el-icon-edit-outline" style="font-size: 18px;cursor: pointer;font-weight: bold"></i> </div>
            </template>
          </el-table-column>
          <el-table-column label="价格" align="left">
            <template slot="header" slot-scope="scope">
              <el-tooltip class="item" effect="light" placement="top">
                <div slot="content">活动折扣默认95折</div>
                <span>价格 <i class="el-icon-question"></i></span>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <div>日常供货价：{{scope.row.supplyPrice}}</div>
              <div>活动供货价：{{scope.row.actSupplyPrice}}</div>
            </template>
          </el-table-column>
          <el-table-column label="活动折扣" align="center" v-if="headTitle.type==2">
            <template slot="header" slot-scope="scope">
              <el-tooltip class="item" effect="light" placement="top">
                <div slot="content">默认95折</div>
                <span>活动折扣 <i class="el-icon-question"></i></span>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <div v-if="scope.row.priceRatio">{{scope.row.priceRatio}} &nbsp<i v-if="scope.row.allowCustomActDiscount" @click="showModel(scope.row,1)" class="el-icon-edit-outline" style="font-size: 18px;cursor: pointer;font-weight: bold"></i> </div>
            </template>
          </el-table-column>
          <el-table-column prop="actSkuAddDate" label="添加时间" align="left"></el-table-column>
          <el-table-column label="操作" align="center" width="100px" v-if="headTitle.actStatus==1">
            <template slot-scope="scope">
              <div class="edit" @click="passExamineBL(0,headTitle.type==2?scope.row.skuActId:scope.row.skuId)">
              <span
              >剔除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-box" >
          <div v-if="headTitle.actStatus==1">
            <div>
              <el-button style="margin-right: 20px" @click="toggleSelection()">全选</el-button>
              <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>
    <addStock v-if="objPropsAdd.dialogVisibleStock"
              :objProps="objPropsAdd" @resData="cancelForm_add"></addStock>
    <!-- 设置库存 -->
    <setStockDialog :objProps="objProps" @resData="cancelForm" @okSend="init()"></setStockDialog>
    <el-dialog
      title="提示"
      :visible.sync="isShowPriceRatio"
      width="400px"
      >
      活动折扣：<el-input-number v-model="priceRatio" :precision="1" :min="1" :max="10"></el-input-number> 折
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowPriceRatio = false">取 消</el-button>
        <el-button type="primary" :loading="priceLoading" @click="savePriceRatio(priceRatio)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import addStock from '@/pages/goods/modules/addStock'
  import imageAlert from "@/components/common/imageAlert";
  import {_getStorage } from '@/utils/utils'
  import pagination from "@/components/common/pagination";
  import toptitle from "@/components/common/topTitle";
  import setStockDialog from '@/components/common/setStockDialog'
  export default {
    name: "list",
    components: {
      addStock,
      pagination,
      toptitle,
      imageAlert,
      setStockDialog
    },
    data() {
      return {
        temallowCustomActDiscount:null,
        priceLoading:false,
        priceRatio:'',
        isShowPriceRatio:false,
        objPropsAdd:{
          dialogVisibleStock:false,
          gridData:[],
          gridDataSave:{},
        },
        objProps:{
          dialogVisibleStock:false,
          gridData:[],
          gridDataSave:{},
        },
        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: 0,
        params: {
          pageSize: 20,
          pageNum: 1,
          search: "",
          type: 99,
        },
        zoneList: [],
        actSkuList: [],
        headTitle:{},
        save_type:null,
        temskuActIds:'',
      };
    },
    mounted() {
      if(sessionStorage.getItem('setActiveShop')){
        this.headTitle=JSON.parse(sessionStorage.getItem('setActiveShop'))||{}
      }
      this.priceformulaId = _getStorage('priceformulaId')
      this.init();
    },
    methods: {
      savePriceRatio(data){
        if(!data){
          this.$message.error('请输入折扣');
          return
        }
        let skuActIds= []
        if(this.save_type==1){
          skuActIds=[this.temskuActIds]
        }else {
          if(this.selection.length==0){
            this.$message.error('未选中商品');
            return
          }else {
            skuActIds=this.selection
          }
        }
        let params ={
          actId:this.activeStatus,
          customPriceRatio:data,
          skuActIds:skuActIds,
        }
        this.priceLoading=true
        this.$axios.post("/actregist/autonom/customDiscount",params).then(res=>{
          let { code, msg } = res.data;
          if (code == 200) {
            this.$message.success(msg);
            this.isShowPriceRatio=false
            this.priceLoading=false
            this.init();
          }else {
            this.isShowPriceRatio=false
            this.priceLoading=false
            this.$message.error(msg);
          }
        })
      },
      showModel(data,type){
        if(type==1){
          this.temskuActIds=data.skuActId
          this.priceRatio=data.priceRatio
        }else {
          this.priceRatio=''
        }
        this.save_type=type
        this.isShowPriceRatio=true
      },
      addStock(data){
        data.beforeStock = data.stock
        this.objPropsAdd.gridData.push(data);
        this.objPropsAdd.dialogVisibleStock = true;
      },
      cancelForm_add(res,type){
        if(type=='ok'){
          this.init();
        }
        this.objPropsAdd.dialogVisibleStock = res.state;
      },
      stockDialog(data){
        data.model=data.spuModel
        data.specName=data.skuModel
        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;
      },
      toggleSelection() {
        this.$refs.multipleTable.toggleAllSelection();
      },
      async init() {
        await this.getZoneList();
      },
      goback() {
        let url = "";
        if (this.headTitle.type = 2) {
          url = "/marketing/AddActivityProduct-act?type=2&actId="+this.headTitle.actId;
        } else {
          url = "/marketing/AddActivityProduct-act";
        }
        this.$router.push(url);
      },
      goback1() {
        this.$router.push("/marketing/brandActivity");
      },
      delActGoods() {
        let params = {
          skuIds: this.selection,
          actId:this.activeStatus
        }
        if(this.headTitle.type==2){
          params={
            id:this.selection
          }
        }
        this.$axios.post(this.headTitle.type==2?"/actregist/autonom/delActGoods":"/actregist/delActGoods",params).then(res => {
          let { code, msg } = res.data;
          if (code == 200) {
            this.params.pageNum=1
            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.loading=true
        this.$axios.post(this.headTitle.type==2?"/actregist/autonom/actSkuList":"/actregist/actSkuList", {
          ...this.params,
          "actId":this.headTitle.type==2?this.headTitle.actId:this.activeStatus,
        }).then(res => {
          let { code, data } = res.data;
          if (code === 200) {
            this.total = parseInt(data.total);
            this.actSkuList = data.list;
            if (data.list && data.list.length > 0) {
              this.temallowCustomActDiscount = data.list[0].allowCustomActDiscount;
            }
            this.loading=false
          }else {
            this.actSkuList=[]
            this.total=0
            this.loading=false
          }
        }).catch(()=>{
          this.loading=false
        });

      },
      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 => this.headTitle.type==2?t.skuActId: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: 10px;
  }

  .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>
