<template>
  <div class="goods-list" v-loading="loading">
    <toptitle name="添加活动商品">
      <el-button type="primary" @click="goback">
        返回
      </el-button>
    </toptitle>
    <div style="display: flex;align-items: center;width: 1200px">
      <div style="width: 45%">
        <p style="margin-bottom: 10px">未参加活动的商品</p>
        <div class="search-wrap">
          <div class="search-box">
            <div class="search-item">
              <el-input style="width: 220px" clearable v-model="params2.search"
                        placeholder="请输入商品SPU ID/SKU型号"></el-input>
            </div>
            <div class="search-item">
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </div>
          </div>
        </div>
        <div>
          <el-table
            height="600px"
            style="overflow-y: scroll;width: 100%"
            border
            v-loading="loading"
            ref="multipleTable"
            :data="actSkuList2"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            stripe
          >
            <el-table-column type="selection" width="70" align="center"></el-table-column>
            <el-table-column prop="skuImg" label="商品" align="center" width="100">
              <template slot-scope="scope">
                <div class="">
                  <image-alert  showDefaultImg :image="scope.row.mainImg"></image-alert>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="spuModel" label="SPU型号" align="center" width="100"></el-table-column>
            <el-table-column prop="skuModel" label="SKU型号" align="center"></el-table-column>
          </el-table>
        </div>
        <div class="pagination-box" style="margin-top: 10px">
          共{{total2}}条
          <el-pagination
            :page-size="20"
            :current-page="params2.pageNum"
            @current-change="eventSizeChange2"
            background
            layout="prev, pager, next"
            :total="total2">
          </el-pagination>
        </div>
      </div>
      <div style="width: 10%;text-align: center">
        <div style="margin-bottom: 10px">
          <el-button type="primary" @click="addActGoods" :loading="otherLoading">确认添加></el-button>
        </div>
        <div>
          <el-button @click="delActGoods" :loading="otherLoading1"> < 确认剔除</el-button>
        </div>
      </div>
      <div style="width: 45%">
        <p style="margin-bottom: 10px">参加活动的商品</p>
        <div class="search-wrap">
          <div class="search-box">
            <div class="search-item">
              <el-input style="width: 220px" clearable v-model="params.search"
                        placeholder="请输入商品SPU ID/SKU型号"></el-input>
            </div>
            <div class="search-item">
              <el-button type="primary" @click="onSearch2">搜索</el-button>
            </div>
          </div>
        </div>
        <div>
          <el-table
            border
            v-loading="loading"
            ref="multipleTable"
            :data="actSkuList"
            tooltip-effect="dark"
            height="600px"
            style="overflow-y: scroll;width: 100%"
            @selection-change="handleSelectionChange2"
            stripe
          >
            <el-table-column type="selection" width="70" align="center"></el-table-column>
            <el-table-column prop="skuImg" label="商品" align="center" width="100">
              <template slot-scope="scope">
                <div class="">
                  <image-alert showDefaultImg :image="scope.row.mainImg"></image-alert>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="spuModel" label="SPU型号" align="center" width="100"></el-table-column>
            <el-table-column prop="skuModel" label="SKU型号" align="center"></el-table-column>
          </el-table>
        </div>
        <div class="pagination-box" style="margin-top: 10px">
          共{{total}}条
          <el-pagination
            :page-size="20"
            :current-page="params.pageNum"
            @current-change="eventSizeChange"
            background
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import pagination from "@/components/common/pagination";
  import toptitle from "@/components/common/topTitle";
  import imageAlert from "@/components/common/imageAlert";
  export default {
    name: "list",
    components: {
      pagination,
      toptitle,imageAlert
    },
    data() {
      return {
        otherLoading: false,
        otherLoading1: false,
        loading: false,
        selection: [],
        total: 200,
        total2: 200,
        params2: {
          pageSize: 20,
          pageNum: 1,
          search: "",
          type: "",
          actType: "",
        },
        params: {
          pageSize: 20,
          pageNum: 1,
          search: "",
          type: "",
          actType: "",
        },
        actSkuList: [],
        actSkuList2: [],
        delSelection: [],
        temType:null,
        temActId:null,
        delSelectionAct:[],
      };
    },
    mounted() {
      if (this.$route.query) {
        this.temType = this.$route.query.type;
        this.temActId = this.$route.query.actId;
      }
      this.init()
    },
    methods: {
      init(){
        this.getNotRegistsList();
        this.getRegisteredList();
      },
      // 未参加活动的商品
      getNotRegistsList() {
        this.loading = true;
        this.$axios.post("/actregist/notRegistsList", {
          ...this.params2,
          "actId":this.temType==2?this.temActId:'f4f15eac-0699-11ed-9da2-7cd30aeb12-7z',
        }).then(res => {
          let { code, data } = res.data;
          if (code === 200) {
            this.actSkuList2 = data.list;
            this.total2 = parseInt(data.total);
          } else {
            this.actSkuList2 = [];
            this.total2 = 0;
          }
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },
      // 参加活动的商品
      getRegisteredList() {
        this.loading = true;
        this.$axios.post("/actregist/registered", {
          ...this.params,
          "actId":this.temType==2?this.temActId:'f4f15eac-0699-11ed-9da2-7cd30aeb12-7z',
        }).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;
          }
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },
      delActGoods() {
        if (this.delSelection.length == 0) {
          this.$message.warning("请选择要剔除的商品");
          return;
        }
        let params = {
          id:this.delSelectionAct,
          skuIds: this.delSelection,
          actId:this.temType==2?this.temActId:'f4f15eac-0699-11ed-9da2-7cd30aeb12-7z',
        }
        // if(this.temType==2){
        //   params={
        //     id:this.delSelection
        //   }
        // }
        this.otherLoading1 = true;
        this.$axios.post("/actregist/delActGoods",params).then(res => {
          let { code, msg } = res.data;
          if (code == 200) {
            if(this.actSkuList.length-this.delSelection.length==0){
              this.params.pageNum=1
            }
            this.init()
            this.$message.success(msg);
            this.otherLoading1 = false;
          } else {
            this.$message.error(msg);
            this.otherLoading1 = false;
          }
        }).catch(() => {
          this.otherLoading1 = false;
        });
      },
      addActGoods() {
        if (this.selection.length == 0) {
          this.$message.warning("请选择要添加的商品");
          return;
        }
        this.otherLoading = true;
        this.$axios.post("/actregist/addActGoods", {
          skuIds: this.selection,
          "actId":this.temType==2?this.temActId:'f4f15eac-0699-11ed-9da2-7cd30aeb12-7z',
        }).then(res => {
          let { code, msg } = res.data;
          if (code == 200) {
            if (this.actSkuList2.length - this.selection.length == 0) {
              this.params2.pageNum = 1;
            }
            this.init()
            this.$message.success(msg);
            this.otherLoading = false;
          } else {
            this.otherLoading = false;
            this.$message.error(msg);
          }
        }).catch(() => {
          this.otherLoading = false;
        });
      },

      onSearch() {
        this.params2.pageNum = 1;
        this.getNotRegistsList();
      },
      onSearch2() {
        this.params.pageNum = 1;
        this.getRegisteredList();
      },
      handleSelectionChange(e) {
        this.selection = [...new Set(e.map(t => this.temType==2?t.skuId: t.skuId))];
      },
      handleSelectionChange2(e) {
        this.delSelectionAct = [...new Set(e.map(t =>t.skuActId))];
        this.delSelection = [...new Set(e.map(t => t.skuId))];
      },
      eventSizeChange2(e) {
        this.params2.pageNum = e;
        this.getNotRegistsList();
      },
      eventSizeChange(e) {
        this.params.pageNum = e;
        this.getRegisteredList();
      },
      goback(){
        this.$router.push("/marketing/activityMall-act");
      },
    },
  };
</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: 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>
