<template>
  <div>
    <NavHeader color="#0687D2" title="人才政策服务" @back="$router.go(-1)" />
    <van-dropdown-menu active-color="#0687D2">
      <van-dropdown-item
        v-model="departmentCode"
        :options="option1"
        @change="onRefresh"
      />
      <van-dropdown-item
        v-model="handlingMethod"
        :options="option2"
        @change="onRefresh"
      />
    </van-dropdown-menu>
    <van-pull-refresh v-model="refresh" class="list" @refresh="onRefresh">
      <div style="height: 20px"></div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="card"
          v-for="item in list"
          :key="item.id"
          @click="jumpDetail(item)"
        >
          <div class="title">
            <img src="@/assets/policy/matter_icon.png" alt="" />
            <p>{{ item.name }}</p>
          </div>
          <div class="cell">
            <p class="label">实施主体</p>
            <p class="value">{{ item.departmentName }}</p>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import NavHeader from "@/components/NavHeader";
import Vue from "vue";
import { DropdownMenu, DropdownItem, PullRefresh, List } from "vant";
import {
  departmentList,
  /*mattersList ,*/ mattersGuideList
} from "@/api/policy";

Vue.use(DropdownMenu)
  .use(DropdownItem)
  .use(PullRefresh)
  .use(List);

export default {
  components: { NavHeader },
  data() {
    return {
      departmentCode: "",
      handlingMethod: "",
      option1: [{ text: "全部实施主体", value: "" }],
      option2: [
        { text: "全部办理方式", value: "" },
        { text: "线上办理", value: 1 },
        { text: "线下办理", value: 2 }
      ],
      refresh: false,
      loading: false,
      finished: true,
      pageNum: 1,
      list: []
    };
  },
  methods: {
    getDepart() {
      departmentList({ appId: "1234" }).then(res => {
        console.log("列表的res---", res);
        this.option1 = this.option1.concat(
          res.data.map(item => {
            return {
              text: item.name,
              value: item.code
            };
          })
        );
      });
    },
    getName(value) {
      return this.option1.find(el => {
        return el.value == value;
      }).text;
    },
    onRefresh() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中..."
      });
      mattersGuideList({
        appId: 1234,
        departmentCode: this.departmentCode,
        handlingMethod: this.handlingMethod,
        pageNo: 1,
        pageSize: 10
      }).then(res => {
        this.$toast.clear();
        this.refresh = false;
        this.pageNum = 1;
        const records = res.data.list;
        if (records.length <= 0) {
          this.list = [];
          this.finished = this.nodata = true;
        } else {
          this.list = records;
          this.nodata = false;
          this.finished = !res.data.hasNextPage;
        }
      });
    },
    onLoad() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中..."
      });
      mattersGuideList({
        appId: 1234,
        departmentCode: this.departmentCode,
        handlingMethod: this.handlingMethod,
        pageNo: this.pageNum + 1,
        pageSize: 10
      }).then(res => {
        this.$toast.clear();
        this.loading = false;
        this.pageNum = this.pageNum + 1;
        const records = res.data.list;
        if (records.length <= 0) {
          this.finished = this.nodata = true;
        } else {
          this.list = this.list.concat(records);
          this.finished = this.nodata =  !res.data.hasNextPage;
        }
      });
    },
    jumpDetail(item) {
      console.log("item----", item);
      // console.log(item)
      this.$router.push({ name: "PolicyDetail", query: { id: item.id } });
    }
  },
  created() {
    this.getDepart();
    this.onRefresh();
  }
};
</script>

<style lang="stylus" scoped>
.list {
  height: calc(100vh - 184px);
  overflow: auto;
  background: #F3F6F9;

  .card {
    margin: 0 30px 20px;
    padding: 30px;
    background: #fff;
    border-radius: 2px;

    .title {
      display: flex;
      align-items: center;

      img {
        width: 50px;
        height: 50px;
        margin-right: 27px;
      }

      p {
        line-height: 45px;
        font-size: 32px;
        font-weight: 500;
        color: #333333;
      }
    }

    .cell {
      margin-top: 30px;
      display: flex;

      .label {
        width: 120px;
        margin-right: 30px;
        font-size: 28px;
        color: #999999;
        line-height: 40px;
      }

      .value {
        width: calc(100% - 210px);
        font-size: 28px;
        color: #333333;
        line-height: 40px;
      }
    }
  }
}
</style>
