<template>
  <div class="Search">
    <div class="incoM" @click="searchShow = true">
      <img src="../assets/img/search.svg" alt="" />
    </div>

    <div class="mainTop" :class="{ mainTopShow: searchShow }">
      <div class="mainCen">
        <div class="top">
          <div class="title">搜 索</div>
          <div class="right" @keyup.enter="searchFu">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            &emsp;
            <el-input
              placeholder="请输入关键词"
              suffix-icon="el-icon-search"
              v-model="input1"
              :maxlength="20"
            >
            </el-input>
            <div class="searchIcon" @click="searchFu"></div>
          </div>
        </div>
        <div class="main">
          <div class="noInfo" v-if="dataAll.length && data.length === 0">
            暂无信息
          </div>
          <div class="row" v-else v-for="item in data" :key="item.id">
            <img :src="`dataImg/${item.id}.jpg`" alt="" />
            <div class="infoBox">
              <div class="name">{{ item.name }}</div>
              <div class="tagBox">
                <div class="tag" v-for="(val, ind) in item.tit" :key="ind">
                  {{ val }}
                </div>
              </div>
              <div class="txtBox">
                <div class="inco">
                  <img
                    src="../assets/img/time.svg"
                    alt=""
                  />&nbsp;线下展览时间：
                </div>
                <div class="txt" :title="item.time">{{ item.time }}</div>
              </div>
              <div class="txtBox">
                <div class="inco">
                  <img
                    src="../assets/img/location.svg"
                    alt=""
                  />&nbsp;展览地点：
                </div>
                <div class="txt" :title="item.loc">{{ item.loc }}</div>
              </div>
              <div class="txtBox">
                <div class="inco">
                  <img src="../assets/img/scene.svg" alt="" />&nbsp;参展博物馆：
                </div>
                <div
                  class="txt link"
                  :title="item.scene.link"
                  @click="openUrlFu(item.scene.link)"
                >
                  {{ item.scene.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <img
        @click="searchShow = false"
        class="searchClose"
        src="../assets/img/close.svg"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      searchShow: false,

      input1: "",
      value: "全部",
      options: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "选项1",
          label: "选项1",
        },
        {
          value: "选项2",
          label: "选项2",
        },
      ],
      dataAll: [],
      data: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    searchFu() {
      if (this.input1.trim() === "") this.data = [...this.dataAll];
      else this.data = this.dataAll.filter((v) => v.name.includes(this.input1));
    },
    openUrlFu(url) {
      window.open(url);
    },
  },
  created() {},
  mounted() {
    fetch("search.json")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        this.dataAll = data;
        this.data = data;
      });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Search {
  position: fixed;
  z-index: 11;
  right: 20px;
  bottom: 50px;
  height: 40px;
  width: 54px;
  background-color: #e3e3e3;
  border-radius: 20px;

  .incoM {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 30px;
    }
  }

  .mainTop {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 22;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    background-color: rgba(0, 0, 0, 0.8);

    .mainCen {
      position: absolute;
      width: 86%;
      height: 76%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border-radius: 10px;
      padding: 20px 5px 0px 30px;
      .top {
        display: flex;
        justify-content: space-between;
        .title {
          font-weight: 700;
          font-size: 24px;
          color: #7a7a7a;
        }
        .right {
          padding-right: 35px;
          display: flex;
          position: relative;
          .searchIcon {
            cursor: pointer;
            position: absolute;
            z-index: 10;
            right: 0;
            top: 0;
            width: 28px;
            height: 40px;
          }
        }
      }
      .main {
        margin-top: 20px;
        width: 100%;
        height: calc(100% - 80px);
        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
          height: 1px;
        }
        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px transparent;
          background: black;
        }
        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          -webkit-box-shadow: inset 0 0 5px transparent;
          border-radius: 10px;
          background: transparent;
        }
        display: flex;
        flex-wrap: wrap;
        overflow-y: auto;
        padding-bottom: 20px;
        .row {
          width: 23%;
          height: 400px;
          border-radius: 6px;
          overflow: hidden;
          margin-right: 2%;
          box-shadow: 0px 0px 6px 3px #ccc;
          margin-bottom: 2%;
          transition: all 0.3s;
          &:hover {
            box-shadow: 0px 0px 6px 6px #ccc;
          }
          & > img {
            width: 100%;
            height: 200px;
            object-fit: cover;
          }
          .infoBox {
            padding: 10px;
            .tagBox {
              margin: 14px 0;
              display: flex;
              .tag {
                background-color: #e8e2d9;
                padding: 3px 6px;
                border-radius: 4px;
                border: 1px solid #a1670a;
                color: #a1670a;
                font-size: 12px;
                margin-right: 6px;
              }
            }
            .txtBox {
              font-size: 14px;
              display: flex;
              margin-bottom: 15px;
              .inco {
                display: flex;
                & > img {
                  width: 20px;
                }
              }
              .txt {
                width: calc(100% - 130px);
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .link {
                color: #409eff;
              }
            }
          }
        }
        .noInfo {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          font-size: 24px;
          color: #a1670a;
        }
      }
    }
    .searchClose {
      position: absolute;
      cursor: pointer;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
    }
  }
  .mainTopShow {
    opacity: 1;
    pointer-events: auto;
  }
}
</style>