<template>
  <div class="com-container active-container" v-loading="loading">
    <div class="active-search">
      <div class="active-search-title">活动筛选</div>
      <div class="active-search-content">
        <div class="content-item" v-for="(item, index) in labelList" :key="index">
          <div class="content-item-tit">{{item.categoryName}}</div>
          <el-checkbox
            class="is-check-all"
            v-model="checkAll[index]"
            @change="handleCheckAllChange($event,1, item.labelLists, index)"
          >全部
          </el-checkbox>
          <el-checkbox-group v-model="selectIds[index]"
                             @change="handleCheckedItemChange($event,1, item.labelLists, index)">
            <el-checkbox v-for="(item2, index2) in item.labelLists"
                         :key="index2"
                         :label="item2.lableId"
                         border>{{item2.lableName}}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="content-item">
          <div class="content-item-tit">活动天数</div>
          <el-input v-model="queryForm.minDay"
                    type="number"
                    :min="1"
                    placeholder="最小天数"
                    class="ml"
                    oninput="value=value.replace(/^0/g, '')"
          ></el-input>
          <div class="line">——</div>
          <el-input v-model="queryForm.maxDay"
                    type="number"
                    :min="1"
                    placeholder="最大天数"
                    oninput="value=value.replace(/^0/g, '')"
          ></el-input>
        </div>
        <div class="content-item">
          <div class="content-item-tit">本站报名</div>
          <el-checkbox
            class="is-check-all"
            v-model="checkAllSupp"
            @change="handleCheckAllChange($event,2, supportList)"
          >全部
          </el-checkbox>
          <el-checkbox-group v-model="isSupport"
                             @change="handleCheckedItemChange($event,2, supportList)">
            <el-checkbox v-for="(item, index) in supportList"
                         :key="index"
                         :label="item.lableId"
                         border>{{item.lableName}}
            </el-checkbox>
          </el-checkbox-group>
          <div class="btn-area">
            <el-button @click="resetHandle">重置</el-button>
            <el-button @click="searchHandle">确定</el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="active-list" v-if="activeList.length>0">
      <div class="active-list-item" v-for="(item, index) in activeList" :key="index"
           :style="{
        '-webkit-animation-delay': (index+1)*0.1+'s',
        'imation-delay': (index+1)*0.1+'s',
      }">
        <div class="inner">
          <div class="active-list-item-bg">
            <el-image :src="item.activityCover" fit="cover"></el-image>
          </div>
          <div class="active-list-item-cont">
            <div class="active-list-item-cont-header">
              <div class="label" v-if="item.activityLabel">
                <span v-for="(item2, index2) in item.activityLabel.split(',')"
                      :key="index2">{{item2}}</span>

              </div>
              <div class="title">{{item.name}}</div>
            </div>
            <div class="active-list-item-cont-txt1">
              <div class="sign-box" v-if="item.schoolName">
                <div class="sign"
                     v-for="(item2, index2) in item.schoolName.split(',')"
                     :key="index2">{{item2}}
                </div>
              </div>
              <div class="sign-box" v-if="item.subjectName">
                <div class="sign"
                     v-for="(item2, index2) in item.subjectName.split(',')"
                     :key="index2">{{item2}}
                </div>
              </div>
            </div>
            <div class="active-list-item-cont-txt2">{{formatYMD(item.activityStartTime)}} （共{{item.activityTime}}天）</div>
            <div class="active-list-item-cont-txt3">报名截止时间：{{formatYMDChina(item.bmEndTime)}}</div>
            <div class="active-list-item-cont-bottom" @click="$router.push('/active/'+item.id)">
              <div>查看详情</div>
              <i class="el-icon-right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="active-list" v-else>
      <el-empty description="暂无数据" style="margin: 0 auto;"></el-empty>
    </div>
  </div>
</template>

<script>
  import {LabelType, HotList} from "r/base/active";

  export default {
    name: "Active",
    data() {
      return {
        loading: false,
        queryForm: {
          ids: {},
          isSupport: null,
          minDay: null,
          maxDay: null,
        },
        labelList: [],
        activeList: [],
        supportList: [
          {
            lableId: 2,
            lableName: '支持'
          },
          {
            lableId: 1,
            lableName: '不支持'
          },
        ],
        selectIds: {},
        checkAll: {},
        isSupport: [],
        checkAllSupp: false,
      }
    },
    created() {
      this.getLabelType();
      this.getList();
    },
    methods: {
      // 确定按钮
      searchHandle() {
        this.getList();
      },
      // 重置按钮
      resetHandle() {
        this.queryForm = {
          ids: {},
          isSupport: null,
          minDay: null,
          maxDay: null,
        };
        for (let key in this.selectIds) {
          this.selectIds[key] = [];
        }
        for (let key in this.checkAll) {
          this.checkAll[key] = false;
        }
        this.isSupport = [];
        this.checkAllSupp = false;
        console.log(this.checkAll)
        this.getList();
      },
      // 全部-标签操作
      handleCheckAllChange(val, type = 1, list = [], idx = 0) {
        let lableIdArr = list.map(item => item.lableId);
        let arr = val ? lableIdArr : [];
        if (type == 1) {
          this.selectIds[idx] = arr;
          if (arr.length > 0) {
            this.queryForm.ids[idx] = arr;
          } else {
            delete this.queryForm.ids[idx]
          }
        } else {
          this.isSupport = arr;
          this.queryForm.isSupport = arr.join(',');
        }
      },
      // 单个-标签操作
      handleCheckedItemChange(val, type = 1, list = [], idx = 0) {
        let lableIdArr = list.map(item => item.lableId);
        let checkedCount = val.length;
        if (type == 1) {
          this.checkAll[idx] = checkedCount === lableIdArr.length;
          if (checkedCount > 0) {
            this.queryForm.ids[idx] = val;
          } else {
            delete this.queryForm.ids[idx]
          }
        } else {
          this.checkAllSupp = checkedCount === lableIdArr.length;
          this.queryForm.isSupport = val.join(',');
        }
      },
      // 获取列表
      getList() {
        if (this.loading) {
          return false;
        }
        this.loading = true;
        let queryForm = JSON.parse(JSON.stringify(this.queryForm));
        let flag = true;
        for (let key in queryForm['ids']) {
          if (!this.checkAll[key]) {
            flag = false;
          }
        }
        if (flag) {
          queryForm['ids'] = {};
        }
        HotList(queryForm).then(res => {
          console.log(res)
          if (res.data.code != 200) {
            this.loading = false;
            return this.$message.error(res.data.msg);
          }
          this.loading = false;
          this.activeList = res.data.data;
        }).catch(err => {
          console.log(err)
          this.loading = false;
        })
      },
      // 获取筛选标签列表
      getLabelType() {
        LabelType({}).then(res => {
          console.log(res)
          if (res.data.code != 200) {
            return this.$message.error(res.data.msg);
          }
          let labelList = res.data.data;
          let selectIds = {};
          let checkAll = {};
          labelList.forEach((item, index) => {
            selectIds[index] = [];
            checkAll[index] = false;
          })
          this.selectIds = selectIds;
          this.checkAll = checkAll;
          this.labelList = labelList;
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "a/scss/common";
  @import "a/scss/active/activeList";
  .active-container {
    padding: 50px;
    color: #333333;
    font-family: "PingFang SC";

    .active-search {
      padding: 20px 25px;
      border-radius: 4px;
      background-color: #ffffff;

      .active-search-title {
        font-size: 20px;
        line-height: 46px;
      }

      .active-search-content {
        .content-item {
          display: flex;
          flex-flow: row;
          align-items: center;
          line-height: 36px;
          margin: 15px 0;

          .content-item-tit {
            width: 140px;
            text-align: center;
            font-size: 16px;
            background-color: #f5f5f5;
            margin-right: 10px;
          }

          ::v-deep .el-checkbox-group {
            height: 36px;
            line-height: 36px;
          }

          ::v-deep .el-checkbox {
            color: #333333;
            border: 0;
            padding: 0 10px;
            margin: 0 0 0 15px;
            height: 36px;
            line-height: 36px;

            .el-checkbox__input {
              display: none;
            }

            .el-checkbox__label {
              padding: 0;
              font-size: 16px;
            }

            /*&:hover,*/
            &.is-checked {
              .el-checkbox__label {
                color: var(--all_color) !important;
              }
            }

            &.is-check-all.is-checked {
              .el-checkbox__label {
                font-weight: bold;
              }
            }
          }

          ::v-deep .el-input {
            width: 130px;
            height: 36px;
            line-height: 36px;

            &.ml {
              margin-left: 25px;
            }

            .el-input__inner {
              height: 36px;
              line-height: 36px;
              color: #333333;
              border-color: #333333;

              &:focus,
              &:hover {
                color: #000000;
                border-color: var(--all_color);
              }
            }
          }

          .line {
            color: #333333;
            margin: 0 10px;
            display: inline-block;
          }

          .btn-area {
            /*margin-left: 130px;*/
            .el-button {
              height: 36px;
              color: #333333;
              border-color: #333333;
              background-color: #ffffff;
              margin-left: 15px;

              &:hover {
                color: var(--all_color);
                border-color: var(--all_color);
                background-color: #ffffff;

              }
            }
          }

        }
      }
    }

    ::v-deep .el-loading-spinner {
      top: 200px !important;
    }
  }
</style>
