<template>
  <view class="page">
    <u-search
      :style="{ width: '100%', height: '32px', fontSize: '14px' }"
      bg-color="#F7F7F7"
      placeholder="请输入职位名称"
      search-icon-color="#D9D9D9"
      placeholder-color="#8C8C8C"
      input-align="left"
      :clearabled="true"
      :show-action="false"
      v-model="search"
      :focus="true"
      @search="handelLink()"
    >
    </u-search>
    <view
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 40rpx;
      "
    >
      <view class="title"> 历史搜索 </view>
      <u-image
        width="16px"
        height="16px"
        src="/static/img/recruit/delete.png"
        @click="clear"
      ></u-image>
    </view>
    <view class="his">
      <view
        class="historyItem"
        v-for="(item, index) in history"
        :key="index"
        @click="clickItem(item)"
      >
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: "",
      search: "",
      history: [],
    };
  },

  onLoad(option) {
    console.log("onshow", option);
    if (option && option.type) {
      this.type = option.type;
    }
  },

  onShow() {
    let that = this;

    if (this.vuex_role == "student") {
      uni.getStorage({
        key: "search_history1",
        success: function (res) {
          console.log("123", res);
          that.history = res.data || [];
        },
      });
    } else if (this.vuex_role == "work") {
      uni.getStorage({
        key: "search_history2",
        success: function (res) {
          console.log("123", res);
          that.history = res.data || [];
        },
      });
    } else {
      uni.getStorage({
        key: "search_history3",
        success: function (res) {
          console.log("123", res);
          that.history = res.data || [];
        },
      });
    }
  },

  methods: {
    handelLink(e) {
      let that = this;
      if (e == "" || !e) {
        this.$u.toast("请输入搜索条件");
        return;
      }

      if (!this.history || (this.history && this.history.indexOf(e) == -1)) {
        this.history.push(e);

        if (this.vuex_role == "student") {
          uni.setStorage({
            key: "search_history1",
            data: that.history,
            success: function () {
              console.log("success");
            },
          });
        } else if (this.vuex_role == "work") {
          uni.setStorage({
            key: "search_history2",
            data: that.history,
            success: function () {
              console.log("success");
            },
          });
        } else {
          uni.setStorage({
            key: "search_history3",
            data: that.history,
            success: function () {
              console.log("success");
            },
          });
        }
      }

      let url = "";
      if (this.type == "c") {
        url = "/pages/student/home/search-detail/search-detail";
      } else {
        url = "/pages/recruit/home/search-detail/search-detail";
      }

      this.$u.route({
        url: url,
        params: {
          s: e,
        },
      });
    },

    clear() {
      let that = this;

      uni.showModal({
        title: "温馨提示",
        content: "您确定删除历史记录吗？",
        confirmText: "确定",
        cancelText: "取消",
        success: function (res) {
          if (res.confirm) {
            if (that.vuex_role == "student") {
              uni.removeStorage({
                key: "search_history1",
                success: function (res) {
                  that.history = [];
                },
              });
            } else if (that.vuex_role == "work") {
              uni.removeStorage({
                key: "search_history2",
                success: function (res) {
                  that.history = [];
                },
              });
            } else {
              uni.removeStorage({
                key: "search_history3",
                success: function (res) {
                  that.history = [];
                },
              });
            }
          } else if (res.cancel) {
          }
        },
      });
    },

    clickItem(e) {
      let url = "";
      if (this.type == "c") {
        url = "/pages/student/home/search-detail/search-detail";
      } else {
        url = "/pages/recruit/home/search-detail/search-detail";
      }

      this.$u.route({
        url: url,
        params: {
          s: e,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 40rpx;

  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }

  .his {
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
  }

  .historyItem {
    height: 32px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 16px;
    padding: 12rpx 32rpx;
    font-size: 14px;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.65);
    text-align: center;
    margin-right: 20rpx;
  }
}
</style>