<template>
  <div class="wrapper">
    <NavHeader color="#0687D2" title="我的申报" @back="$router.go(-1)" />
    <van-tabs
      color="#0687D2"
      title-active-color="#0687D2"
      title-inactive-color="#666666"
      @click="handleChange"
    >
      <van-tab v-for="item in list" :title="item.title" :key="item.state">
        <van-pull-refresh
          v-model="refreshing"
          class="list"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="item.finished"
            @load="onLoad"
            finished-text="没有更多了"
          >
            <div style="height: 20px"></div>
            <div
              class="card"
              v-for="record in item.content"
              :key="record.code"
              @click="jump(record)"
            >
              <div class="title">
                <img src="@/assets/policy/matter_icon.png" alt="" />
                <p>{{ record.guideName }}</p>
              </div>
              <div class="cell">
                <p class="label">状态</p>
                <p class="value" :style="{ color: record.color }">
                  {{ record.stateName }}
                </p>
              </div>
              <div class="cell">
                <p class="label">实施主体</p>
                <p class="value">{{ record.departmentName }}</p>
              </div>
              <div class="cell">
                <p class="label">申报时间</p>
                <p class="value">{{ record.createTime }}</p>
              </div>
              <div
                class="foot"
                v-if="
                 record.houseState === 4 || record.houseState === 5
                "
              >
                <van-button
                  size="small"
                  color="#0687D2"
                  plain
                  style="width: 100px"
                  @click.stop="update(record)"
                  >修改</van-button
                >
                <van-button
                  v-if="record.houseState === 4"
                  size="small"
                  color="#EB4E3F"
                  plain
                  style="width: 100px; margin-left: 10px"
                  @click.stop="cancle(record)"
                  >撤销</van-button
                >
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>  
</template>

<script>
import NavHeader from "@/components/NavHeader";
import Vue from "vue";
import { Tab, Tabs, PullRefresh, List, Button } from "vant";
import {
  mattersHouseList,
  mattersHouseUpdateState,
} from '@/api/policy';
import { policyEnume } from "@/utils/utils";
// import { encryptByDES } from "@/utils/utils";

Vue.use(Tab).use(Tabs).use(PullRefresh).use(List).use(Button);
export default {
  components: { NavHeader },
  data() {
    return {
      userInfo: {},
      list: [],
      refreshing: false,
      loading: false,
      currentPage: 0,
    }
  },
  methods: {
    init(index,type) {
      let params = {
        appId: 1234,
        state: this.list[index].state,
        pageNum:
          type === "refresh" ? 1 : parseInt(this.list[index].pageNum) + 1,
        pageSize: 20,
        // userId: encryptByDES(this.userInfo.userId, "MnuYbhGv"),
      };
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      mattersHouseList(params).then((res) => {
        // alert(JSON.stringify(res))
        console.log(res);
        this.$toast.clear();
        this.refreshing = false;
        this.loading = false;
        const current = res.data.pageNum;
        const records = res.data.list.map((item) => {
          let Obj = policyEnume(item.houseState);
          item.stateName = Obj.text;
          item.color = Obj.color;
          return item;
        });
        this.list = this.list.map((item, i) => {
          if (i === index) {
            if (current === 1 && records.length === 0) {
              item.content = records;
              item.pageNum = 1;
            } else {
              item.pageNum = current;
              item.finished = !res.data.hasNextPage;
              if (type === "refresh") item.content = records;
              else item.content = item.content.concat(records);
            }
          }
          return item;
        });
      })
    },
    handleChange(index) {
      this.currentPage = index;
      this.init(index, "refresh");
    },
    onRefresh() {
      this.init(this.currentPage, "refresh");
    },
    onLoad() {
      this.init(this.currentPage, "loading");
    },
    jump(record) {
      console.log(record);
      this.$router.push({
        name: "PolicyPurchaseIndexedit",
        query: {
          code: record.houseCode,
          houseCode: record.houseCode,
          type: "view"
        }
      });
    },
    // 修改
    update(record) {
      console.log(record);
      this.$router.push({
        name: "PolicyPurchaseIndexedit",
        query: {
          code: record.houseCode,
          houseCode: record.houseCode,
          guideId: record.guideId,
          userInfo: this.userInfo,
          type: "edit",
        },
      });
    },
    // 撤销
    cancle(record) {
      console.log(record);
      console.log(this.userInfo);
      this.$dialog.confirm({
        message: '确认撤回该预约申报单吗？',
      }).then(() => {
        mattersHouseUpdateState({
          appId: 1234,
          code: record.houseCode,
          name: this.userInfo.realName,
          state: 0,
        }).then((res) => {
          console.log(res);
          this.$toast("撤销成功");
          this.onRefresh();
        })
      })
    }
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res);
    let arr = [
      { title: "全部", state: "" },
      { title: "待审核", state: 0 },
      { title: "待复审", state: 1 },
      { title: "待终审", state: 2 },
      { title: "已完结", state: 3 },
      { title: "发放补贴", state: 7 },
      { title: "已驳回", state: 4 },
      { title: "已撤销", state: 5 },
    ];
    this.list = arr.map((item) => {
      return {
        title: item.title,
        state: item.state,
        pageNum: 1,
        finished: true,
        content: [],
      };
    });
    this.init(0, "refresh");
  },
}
</script>

<style lang="stylus" scoped>
.list
  height: calc(100vh - 285px)
  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
    .foot
      margin-top: 30px
      padding-top: 20px
      display: flex
      align-items: center
      justify-content: flex-end
      border-top: 1px solid #C9C9C9
  .continue
    padding: 0 30px
    .continueBtn
      width: 100%
      height: 90px
      font-size: 36px
      line-height: 90px
</style>