<template>
  <div class="search-list">
    <span style="height: 28px; line-height: 28px; font-size: 20px; font-weight: bold; color: rgba(0, 0, 0, 0.85)">栏目：</span>
    <!-- <a-select allow-clear style="width: 120px" @change="handleChange">
      <a-select-option v-for="(item, index) in bannerList" :key="index" :value="index + 1"> {{ item }} </a-select-option>
    </a-select> -->
    <span
      class="ban-style"
      :class="bannerNum === index + 1 ? 'ban-act' : ''"
      @click="onClick(index)"
      v-for="(item, index) in bannerList"
      :key="index"
    >
      {{ item }}
    </span>
    <br />
    <span style="font-size: 20px; font-weight: bold; color: rgba(0, 0, 0, 0.85)">类型：</span>
    <span
      class="ban-style"
      :class="typeNum === index + 1 ? 'ban-act' : ''"
      @click="onClick1(index)"
      v-for="(item, index) in typeList"
      :key="index + 10"
    >
      {{ item }}
    </span>
    <br />
    <span style="font-size: 20px; font-weight: bold; color: rgba(0, 0, 0, 0.85)">时间：</span>
    <span
      class="ban-style"
      :class="timeNum === index + 1 ? 'ban-act' : ''"
      @click="onClick2(index)"
      v-for="(item, index) in timeList"
      :key="item"
    >
      {{ item }}
    </span>
    <a-input placeholder="搜索标题..." class="search-ipt" allow-clear style="width: 30%" v-model="titleText" />
    <a-button class="search-btn" type="primary" @click="submit">搜索</a-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeList: ['视频', '音频', '文档', '全部'],
      typeNum: 0,
      bannerList: ['栏目1', '栏目2', '栏目3', '全部'],
      bannerNum: 0,
      titleText: '',
      timeList: ['近七天', '近一个月', '近一年', '全部'],
      timeNum: 0,
    };
  },
  methods: {
    submit() {
      // console.log(this.getParam);
      const getParam = {
        typeNum: this.typeNum,
        bannerNum: this.bannerNum,
        titleText: this.titleText,
      };
      this.$emit('getData', getParam);
    },
    handleChange(e) {
      if (e) {
        this.bannerNum = e;
      } else {
        this.bannerNum = '';
      }
    },
    handleChange1(e) {
      if (e) {
        this.typeNum = e;
      } else {
        this.typeNum = '';
      }
    },
    onClick1(index) {
      if (index + 1 === this.typeNum) {
        this.typeNum = 0;
      } else {
        this.typeNum = index + 1;
      }
    },
    onClick(index) {
      if (index + 1 === this.bannerNum) {
        this.bannerNum = 0;
      } else {
        this.bannerNum = index + 1;
      }
    },
    onClick2(index) {
      if (index + 1 === this.timeNum) {
        this.timeNum = 0;
      } else {
        this.timeNum = index + 1;
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.search-list {
  position: relative;
  height: 108px;
  line-height: 36px;
  // background: #fff;
  box-shadow: 0 0 4px #ccc;
  border-radius: 4px;
  padding: 0 24px;
  position: relative;
  margin: 40px auto;
}

.search-btn {
  position: absolute;
  right: 19px;
  height: 34px;
  top: 38px;
  width: 80px;
  font-size: 16px;
  // color: white !important;
  // background-color: #0195DA !important;
  // border-color: #0195DA !important;
}

.ban-style {
  margin-left: 10px;
  cursor: pointer;
}

.ban-act {
  color: #E77816;
}

.search-ipt {
  position: absolute;
  right: 100px;
  top: 39px;
}
</style>
