<template>
  <div class="wrapper">
    <div class="fixed">
      <u-search placeholder="请输入党组织" v-model="name" :show-action="false" @search="searchParty" @clear="clearName"></u-search>
    </div>
    <div class="history-list" v-if="showHistory">
      <div class="title">
        <div class="left">历史选择</div>
        <div class="right" @click="clearHistory"><img src="./img/del-icon.png" alt=""> 清空</div>
      </div>
      <div class="item" v-for="(item, index) in historyList" :key="index" @click="itemClick(item)">{{item}}</div>
      <AiEmpty description="暂无搜索数据" v-if="!historyList.length"/>
    </div>
    <div class="list" v-else>
      <div class="item" v-for="(item, index) in list" :key="index" @click="back(item)">{{item.name}}</div>
      <AiEmpty v-if="!list.length"/>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex';

export default {
  name: "search",
  appName: "选择党组织",
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      name: '',
      showHistory: true,
      historyList: [],
      list: []
    };
  },
  onLoad() {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#E76056",
    })
    this.historyList = uni.getStorageSync("historyList")
  },
  methods: {
    back(item) {
      uni.navigateBack({
        delta: 1,
        success: () => {
          uni.$emit('selectParty', item)
        },
      })
      // uni.$emit('selectParty', item)
      // uni.navigateBack()
    },
    clearHistory() {
      this.historyList = []
      uni.setStorageSync("historyList", this.historyList)
    },
    searchParty() {
      if(!this.name) {
        return this.$u.toast('请输入查询的党组织')
      }
      if(!this.historyList.includes(this.name)) {
        this.historyList.push(this.name)
        uni.setStorageSync("historyList", this.historyList)
      }
      this.getList()
    },
    clearName() {
      this.name = ''
      this.showHistory = true
    },
    itemClick(e) {
      this.name = e
      this.getList()
    },
    getList() {
      this.$instance.post(`/app/partyOrganization/queryPartyOrganizationListByName`).then((res) => {
        if(res?.data) {
          this.showHistory = false
          this.list = res.data
        }
      })
    }
  }
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";
page{
  height: 100%;
}
.wrapper{
  height: 100%;
  background-color: #fff;
}
.fixed{
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  padding: 18px 32px;
  box-sizing: border-box;
}
.history-list{
  padding: 100px 32px 0;
  background-color: #fff;
  .title{
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    padding: 26px 0;
    line-height: 48px;
    color: #333;
    .left{
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
    }
    .right{
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      img{
        width: 48px;
        height: 48px;
        vertical-align: middle;
      }
    }
  }
  .item{
    display: inline-block;
    background: #EEE;
    padding: 12px 24px;
    border-radius: 40px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #333;
    line-height: 40px;
    margin: 0 16px 16px 0;
  }
}
.list{
  padding: 100px 0 0 32px;
  .item{
    width: 100%;
    border-bottom: 1px solid #ddd;
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #333;
    line-height: 44px;
    padding: 34px 32px 34px 0;
    box-sizing: border-box;
  }
}
</style>
