<template>
  <div class="goods-list" v-loading="loading">
    <toptitle name="添加活动商品">
      <el-button type="primary" @click="goback">
        返回
      </el-button>
    </toptitle>
    <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 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 v-if="isShowPreList">
              <span class="label">专区：</span>
              <el-select style="width: 160px;margin-right: 20px" clearable v-model="params2.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" @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="">
                  <img style="width:40px" :src="scope.row.mainImg" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="brandName" label="品牌" align="center" width="100"></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 v-if="isShowPreList">
              <span class="label">专区：</span>
              <el-select style="width: 160px;margin-right: 20px" 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" @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="">
                  <img style="width:40px" :src="scope.row.mainImg" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="brandName" label="品牌" align="center" width="100"></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";

  export default {
    name: "list",
    components: {
      pagination,
      toptitle,
    },
    data() {
      return {
        isShowPreList:true,
        otherLoading: false,
        otherLoading1: false,
        activeStatus: "",
        loading: false,
        tempList: [],
        preList: [
          {
            value: 99,
            label: "全部",
          },
          // {
          //   value: 1,
          //   label: "优选",
          // }, {
          //   value: 2,
          //   label: "严选",
          // },
          {
            value: 11,
            label: "铂金",
          }, {
            value: 10,
            label: "淘淘淘",
          },
        ],
        selection: [],
        total: 200,
        total2: 200,
        params2: {
          pageSize: 20,
          pageNum: 1,
          search: "",
          type: "",
          actType: "",
        },
        params: {
          pageSize: 20,
          pageNum: 1,
          search: "",
          type: "",
          actType: "",
        },
        zoneList: [],
        actSkuList: [],
        actSkuList2: [],
        delSelection: [],
      };
    },
    mounted() {
      this.getZoneList();
    },
    methods: {
      goback(){
        this.$router.push("/marketing/activityMall");
      },
      delActGoods() {
        if (this.delSelection.length == 0) {
          this.$message.warning("请选择要剔除的商品");
          return;
        }
        this.loading=true
        this.otherLoading1 = true;
        this.$axios.post("/actregist/delActGoods", {
          skuIds: this.delSelection,
          "actId": this.activeStatus,
        }).then(res => {
          let { code, msg } = res.data;
          if (code == 200) {
            this.params2.pageNum = 1;
            this.getZoneList();
            this.$message.success(msg);
            this.otherLoading1 = false;
          } else {
            this.$message.error(msg);
          }
        }).catch(() => {
          this.otherLoading1 = false;
        });
      },
      addActGoods() {
        if (this.selection.length == 0) {
          this.$message.warning("请选择要添加的商品");
          return;
        }
        this.loading=true
        this.otherLoading = true;
        this.$axios.post("/actregist/addActGoods", {
          skuIds: this.selection,
          "actId": this.activeStatus,
        }).then(res => {
          let { code, msg } = res.data;
          if (code == 200) {
            this.params.pageNum = 1;
            this.getZoneList();
            this.$message.success(msg);
            this.otherLoading = false;
          } else {
            this.$message.error(msg);
          }
        }).catch(() => {
          this.otherLoading = false;
        });
      },
      // 未参加活动的商品
      getNotRegistsList() {
        this.loading = true;
        this.$axios.post("/actregist/notRegistsList", {
          ...this.params2,
          "actId":this.activeStatus,
        }).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.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;
          }
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },
      getZoneList() {
        this.$axios.get("/actregist/zoneList").then(res => {
          let { code, data } = res.data;
          if (code === 200) {
            this.zoneList = data.list.filter(item=>item.actId!='defaultActRegist');
            this.activeStatus = data.list[0].actId;
            let actType = null
            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;
              actType=data.list[0].actType
            }else {
              data.list.forEach(item=>{
                if(this.activeStatus==item.actId){
                  actType=item.actType
                  if(item.actType==1||item.actType==2){
                    this.isShowPreList=false
                  }else {
                    this.isShowPreList=true
                  }
                }
              })
            }
            this.params.actType = actType;
            this.params2.actType = actType;
            this.getNotRegistsList();
            this.getRegisteredList();
          }
        });
      },
      handleClick(e) {
        let actType = this.zoneList[Number(e.index)].actType;
        this.params.actType = actType;
        this.params2.actType = actType;
        if(actType==1||actType==2){
          this.isShowPreList=false
        }else {
          this.isShowPreList=true
        }
        this.params.pageNum = 1;
        this.params2.pageNum = 1;
        this.getNotRegistsList();
        this.getRegisteredList();
      },
      onSearch() {
        this.params2.pageNum = 1;
        this.getNotRegistsList();
      },
      onSearch2() {
        this.params.pageNum = 1;
        this.getRegisteredList();
      },
      handleSelectionChange(e) {
        this.selection = [...new Set(e.map(t => t.skuId))];
      },
      handleSelectionChange2(e) {
        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();
      },
    },
  };
</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>
