<template>
  <div class="com-container active-container">
    <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>
          <div class="content-item-txt is-active">全部</div>
          <div class="content-item-txt"
               v-for="(item2, index2) in item.labelLists"
               :key="index2">
            {{item2.lableName}}
          </div>
        </div>
        <div class="content-item">
          <div class="content-item-tit">活动天数</div>
          <el-input v-model="queryForm.num1"
                    type="number"
                    :min="1"
                    placeholder="最小天数"
                    class="ml"
                    oninput="value=value.replace(/^0/g, '')"
                    @blur="onInputBlur"
          ></el-input>
          <div class="line">——</div>
          <el-input v-model="queryForm.num2"
                    type="number"
                    :min="1"
                    placeholder="最大天数"
                    oninput="value=value.replace(/^0/g, '')"
                    @blur="onInputBlur"
          ></el-input>
          <el-button @click="clearInput">清除</el-button>
        </div>
      </div>
    </div>

    <div class="active-list">
      <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.cover" fit="cover"></el-image>
          </div>
          <div class="active-list-item-cont">
            <div class="active-list-item-cont-header">
              <div class="label">{{item.label}}</div>
              <div class="title">{{item.name}}</div>
            </div>
            <div class="active-list-item-cont-txt1">{{item.school}}</div>
            <div class="active-list-item-cont-txt2">{{item.beginTime}} （共{{item.days}}天）</div>
            <div class="active-list-item-cont-txt3">报名截止时间：{{item.bmEndTime}}</div>
            <div class="active-list-item-cont-bottom" @click="$router.push('/active/current/'+item.id)">
              <div>查看详情</div>
              <i class="el-icon-right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import img from "../../../assets/img/recruit.png";

  export default {
    name: "Active",
    data() {
      return {
        loading: false,
        queryForm: {
          num1: null,
          num2: null,
        },
        labelList: [
          {
            categoryId: 1,
            categoryName: "活动状态",
            labelLists: [
              {
                lableId: 5,
                lableName: "222"
              },
              {
                lableId: 6,
                lableName: "33333"
              },
              {
                lableId: 12,
                lableName: "new"
              },
            ]
          },
          {
            categoryId: 2,
            categoryName: "学科分类",
            labelLists: [
              {lableId: 8, lableName: "数学"},
              {lableId: 9, lableName: "物理"},
              {lableId: 10, lableName: "英语"},
              {lableId: 11, lableName: "历史"},
              {lableId: 13, lableName: "语文"},
            ]
          },
          {
            categoryId: 3,
            categoryName: "学校",
            labelLists: [
              {lableId: 2, lableName: "南开大学444"},
              {lableId: 3, lableName: "北京航空航天大学"},
            ]
          },
          {
            categoryId: 4,
            categoryName: "面向人群",
            labelLists: [
              {lableId: 7, lableName: "555"},
            ]
          },
          {
            categoryId: 5,
            categoryName: "活动形式",
            labelLists: [
              {lableId: 14, lableName: "线上"},
              {lableId: 15, lableName: "线下"},
              {lableId: 16, lableName: " 线上结合线下"},
            ],
          }
        ],
        activeList: [
          {
            id: 1,
            cover: img,
            label: '线上',
            name: '2023年寒假历史营地',
            school: '南开大学 | 历史学',
            beginTime: '2023-09-01',
            endTime: '20230903',
            days: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 2,
            cover: img,
            label: '线上',
            name: '2023年寒假历史营地2',
            school: '南开大学 | 历史学',
            beginTime: '2023-09-01',
            endTime: '20230903',
            days: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 3,
            cover: img,
            label: '线上',
            name: '2023年寒假历史营地3',
            school: '南开大学 | 历史学',
            beginTime: '2023-09-01',
            endTime: '20230903',
            days: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 1,
            cover: img,
            label: '线上',
            name: '2023年寒假历史营地',
            school: '南开大学 | 历史学',
            beginTime: '2023-09-01',
            endTime: '20230903',
            days: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 2,
            cover: img,
            label: '线上',
            name: '2023年寒假历史营地2',
            school: '南开大学 | 历史学',
            beginTime: '2023-09-01',
            endTime: '20230903',
            days: '3',
            bmEndTime: '2023-08-31',
          },
          {
            id: 3,
            cover: img,
            label: '线上',
            name: '2023年寒假历史营地3',
            school: '南开大学 | 历史学',
            beginTime: '2023-09-01',
            endTime: '20230903',
            days: '3',
            bmEndTime: '2023-08-31',
          }
        ]
      }
    },
    created() {
      this.getList();
    },
    methods: {
      // 输入框失去焦点
      onInputBlur() {
        this.getList();
      },
      // 清除按钮
      clearInput() {
        this.queryForm.num1 = null;
        this.queryForm.num2 = null;
        this.getList();
      },
      // 获取列表
      getList() {
        if (this.loading) {
          return false;
        }
        this.loading = true;
        console.log('getList');
        setTimeout(() => {
          this.loading = false;
        }, 2000)
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "a/scss/common";

  @-webkit-keyframes fade {
    0% {
      -webkit-transform: translate3d(0, 3em, 0);
      transform: translate3d(0, 3em, 0);
      opacity: 0
    }

    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1
    }
  }

  @keyframes fade {
    0% {
      -webkit-transform: translate3d(0, 3em, 0);
      transform: translate3d(0, 3em, 0);
      opacity: 0
    }

    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1
    }
  }

  .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;
            background-color: #f5f5f5;
            margin-right: 10px;
          }

          .content-item-txt {
            padding: 0 10px;
            margin-left: 15px;
            cursor: pointer;

            &:hover,
            &.is-active {
              color: var(--all_color);
            }
          }

          ::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;
          }

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

            }
          }
        }
      }
    }

    .active-list {
      margin-top: 30px;
      display: flex;
      flex-flow: wrap;

      .active-list-item {
        flex-basis: 31%;
        margin: 1.75% 0;
        -webkit-transform: translate3d(0, 3em, 0);
        transform: translate3d(0, 3em, 0);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        opacity: 0;
        -webkit-animation: fade ease-out 0.5s forwards;
        animation: fade ease-out 0.5s forwards;
        -webkit-animation-delay: .3s;
        animation-delay: .3s;

        &:nth-child(3n+2) {
          margin: 1.75% 3.5%;
        }

        .inner {
          border-radius: 4px;
          overflow: hidden;
          max-width: none;
          background: #fff;
          box-sizing: border-box;
          transition: all ease-out 0.2s;
          -webkit-transform: scale(1);
          transform: scale(1);
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;

          .active-list-item-bg {
            width: 100%;
            height: 163px;
            overflow: hidden;
            background-color: #D8D8D8;
            border-radius: 4px 4px 0px 0px;

            ::v-deep .el-image {
              width: 100%;
              height: 100%;
              transition: all .5s;
              -webkit-transition: all .5s;

              .el-image__error {
                background-color: #D8D8D8;
              }

              &:hover {
                transform: scale(1.1);
                -ms-transform: scale(1.1); /* IE 9 */
                -moz-transform: scale(1.1); /* Firefox */
                -webkit-transform: scale(1.1); /* Safari 和 Chrome */
                -o-transform: scale(1.1);
              }
            }
          }

          .active-list-item-cont {
            flex: 1;
            /*height: 240px;*/
            padding: 10px 20px 0;
            background-color: #ffffff;
            border-radius: 0 0 4px 4px;
            font-family: PingFang SC;
            font-weight: 400;

            .active-list-item-cont-header {
              display: flex;
              flex-flow: row;
              align-items: center;
              line-height: 28px;
              margin: 10px 0 5px;

              .label {
                font-size: 12px;
                padding: 0 10px;
                border-radius: 8px;
                color: #ffffff;
                background-color: var(--all_color);
                margin-right: 5px;
              }

              .title {
                font-size: 18px;
                font-weight: 500;
              }
            }

            .active-list-item-cont-txt1 {
              font-size: 16px;
              line-height: 32px;
            }

            .active-list-item-cont-txt2 {
              font-size: 14px;
              color: #999999;
              line-height: 24px;
            }

            .active-list-item-cont-txt3 {
              font-size: 15px;
              color: #EC808D;
              line-height: 32px;
            }

            .active-list-item-cont-bottom {
              display: flex;
              flex-flow: row;
              align-items: center;
              justify-content: space-between;
              border-top: 1px solid #cccccc;
              margin-top: 10px;
              font-size: 14px;
              height: 50px;
              line-height: 50px;
              cursor: pointer;

              .el-icon-right {
                font-size: 18px;
              }

              &:hover {
                color: var(--all_color);
              }
            }
          }
        }

        &:hover {
          .inner {
            box-shadow: 6px 6px 40px rgba(0, 0, 0, 0.08);

            .active-list-item-bg {
              ::v-deep .el-image {
                transform: scale(1.1);
                -ms-transform: scale(1.1); /* IE 9 */
                -moz-transform: scale(1.1); /* Firefox */
                -webkit-transform: scale(1.1); /* Safari 和 Chrome */
                -o-transform: scale(1.1);
              }
            }
          }
        }
      }
    }
  }
</style>
