<template>
  <div>
    <div class="search">
      <div class="inputWrapper">
        <img src="@/assets/govservice/search_icon.png" alt="" />
        <input
          v-model="keyword"
          placeholder="请输入搜索关键字"
          class="input"
          type="text"
        />
      </div>
      <div class="button" @click="search">搜索</div>
    </div>
    <van-pull-refresh v-model="refreshing" class="list" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        finished-text="没有更多了"
      >
        <div
          class="cell"
          v-for="item in list"
          :key="item.taskguid"
          @click="jump(item.taskguid, item.taskname)"
        >
          {{ item.taskname }}
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from "vue";
import { PullRefresh, List, Button } from "vant";
import { getTaskList } from "@/api/govservice";

Vue.use(PullRefresh).use(List).use(Button);

export default {
  data() {
    return {
      categoryvalue: "",
      areacode: "",
      ouguid: "",
      keyword: "",
      refreshing: false,
      loading: false,
      finished: true,
      currentpage: 0,
      list: [],
    };
  },
  methods: {
    onRefresh() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      let params = {
        categoryvalue: this.categoryvalue,
        ouguid: this.ouguid,
        keyword: this.keyword,
        currentpage: 0,
        pagesize: 20,
        areacode: this.areacode,
      };
      getTaskList(params).then((res) => {
        this.$toast.clear();
        this.refreshing = false;
        this.currentpage = 0;
        const records = res.custom.tasklist;
        if (records.length <= 0) {
          this.list = [];
          this.finished = true;
        } else {
          this.list = records;
          this.finished = false;
        }
      });
    },
    onLoad() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      let params = {
        categoryvalue: this.categoryvalue,
        ouguid: this.ouguid,
        keyword: this.keyword,
        currentpage: this.currentpage + 1,
        pagesize: 20,
        areacode: this.areacode,
      };
      getTaskList(params).then((res) => {
        this.$toast.clear();
        this.loading = false;
        this.currentpage = this.currentpage + 1;
        const records = res.custom.tasklist;
        if (records.length <= 0) {
          this.finished = true;
        } else {
          this.finished = false;
          this.list = this.list.concat(records);
        }
      });
    },
    search() {
      this.onRefresh();
    },
    jump(taskguid, taskname) {
      this.$router.replace({
        name: "AddOrder",
        query: {
          taskguid,
          taskname,
        },
      });
    },
  },
  created() {
    this.categoryvalue = this.$route.query.categoryvalue;
    this.areacode = this.$route.query.areacode;
    this.ouguid = this.$route.query.ouguid;
    this.keyword = this.$route.query.keyword;
    this.onRefresh();
  },
};
</script>

<style lang="stylus" scoped>
.search {
  padding 19px 30px 17px;
  background #fff;
  display flex;

  .inputWrapper {
    width calc(100% - 170px)
    height 60px;
    padding 0 20px;
    display flex;
    align-items center;
    background: #F3F6F9;
    border-radius: 4px;

    img {
      width 27px;
      height 26px;
    }

    .input {
      width calc(100vw - 217px)
      margin-left 20px;
      height 100%
      background: rgba(0,0,0,0);
      font-size: 26px;
      color: #666666;
    }
  }

  .button {
    width 120px;
    height 60px;
    margin-left 10px;
    background: #EB4E3F;
    border-radius: 3px;
    line-height 60px;
    text-align center
    font-size: 28px;
    font-weight: 500;
    color: #FFFFFF;
  }
}
.list {
  margin-top 20px;
  height calc(100vh - 120px)
  overflow-y auto

  .cell {
    padding 30px;
    background: #FFFFFF;
    line-height 35px;
    font-size: 32px;
    color: #333333;
    border-bottom 1px solid #eee
  }
  .cell:last-child {
    border-bottom 0
  }
}
</style>
