<template>
  <div class="wrapper">
    <NavHeader color="#0687D2" title="我的申报" @back="$router.go(-1)" />
    <van-search
      class="content-search"
      v-model="guideName"
      placeholder="可搜索申报内容"
    />
    <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.state === 0 || record.state === 4 || record.state === 5
                "
              >
                <van-button
                  size="small"
                  color="#0687D2"
                  plain
                  style="width: 100px"
                  @click.stop="update(record)"
                  >修改</van-button
                >
                <van-button
                  v-if="record.state === 0"
                  size="small"
                  color="#EB4E3F"
                  plain
                  style="width: 100px; margin-left: 10px"
                  @click.stop="cancle(record)"
                  >撤销</van-button
                >
              </div>
              <div
                v-if="
                  record.state != 0 &&
                  record.state != 4 &&
                  record.state != 5 &&
                  isParentState == true
                "
                style="text-align: right"
              >
                <van-button
                  size="small"
                  color="#0687D2"
                  plain
                  style="width: 100px"
                  @click.stop="oncontinue(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, Search, Button } from "vant";
import {
  mattersByUserIdList,
  mattersUpdateState,
  isParentState,
} from "@/api/policy";
import { policyEnume } from "@/utils/utils";
import { encryptByDES } from "@/utils/utils";

Vue.use(Tab).use(Tabs).use(PullRefresh).use(List).use(Search).use(Button);

export default {
  components: { NavHeader },
  data() {
    return {
      userInfo: {},
      guideName: "",
      refreshing: false,
      loading: false,
      currentPage: 0,
      list: [],
      isParentState: null,
    };
  },
  methods: {
    init(index, type) {
      let params = {
        appId: 1234,
        guideName: this.guideName,
        state: this.list[index].state,
        pageNo:
          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: "加载中...",
      });
      mattersByUserIdList(params).then((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.state);
          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;
        });
      });
    },
    onRefresh() {
      this.init(this.currentPage, "refresh");
    },
    onLoad() {
      this.init(this.currentPage, "loading");
    },
    jump(record) {
      console.log(record);
      if (record.matterType === 1) {
        this.$router.push({
          name: "HealthManage",
          query: {
            code: record.code,
            type: "view",
          },
        });
      } else if (record.matterType === 2) {
        this.$router.push({
          name: "HealthCheck",
          query: {
            code: record.code,
            type: "view",
          },
        });
      } else if (record.matterType === 3) {
        this.$router.push({
          name: "HealthPath",
          query: {
            code: record.code,
            type: "view",
          },
        });
      } else if (record.matterType === 4) {
        this.$router.push({
          name: "PolicyCare",
          query: {
            code: record.code,
            type: "view",
          },
        });
      }
    },
    // 撤销
    cancle(record) {
      this.$dialog
        .confirm({
          message: "确认撤回该预约申报单吗？",
        })
        .then(() => {
          mattersUpdateState({
            appId: 1234,
            code: record.code,
            name: this.userInfo.realName,
            state: 5,
          }).then((res) => {
            console.log(res);
            this.$toast("撤销成功");
            this.onRefresh();
          });
        })
        .catch(() => {
          console.log("取消");
        });
    },
    // 修改
    update(record) {
      if (record.matterType === 1) {
        this.$router.push({
          name: "HealthManage",
          query: {
            code: record.code,
            type: "edit",
          },
        });
      } else if (record.matterType === 2) {
        this.$router.push({
          name: "HealthCheck",
          query: {
            code: record.code,
            type: "edit",
          },
        });
      } else if (record.matterType === 3) {
        this.$router.push({
          name: "HealthPath",
          query: {
            code: record.code,
            type: "edit",
          },
        });
      } else if (record.matterType === 4) {
        this.$router.push({
          name: "PolicyCare",
          query: {
            code: record.code,
            type: "edit",
          },
        });
      }
    },
    // 追加按钮
    oncontinue(record) {
      console.log(this.$route.query);
      this.$router.push({
        name: "PolicyCare",
        query: {
          code: record.code,
          type: "continue",
          departmentCode: this.$route.query.departmentCode,
          guideId: this.$route.query.guideId,
          talentCode: this.$route.query.talentCode,
        },
      });
    },
    handleChange(index) {
      this.currentPage = index;
      this.init(index, "refresh");
    },
  },
  created() {
    console.log(this.$route.query);
    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: 4 },
      { title: "已撤销", state: 5 },
    ];
    this.list = arr.map((item) => {
      return {
        title: item.title,
        state: item.state,
        pageNum: 1,
        finished: true,
        content: [],
      };
    });
    isParentState({ appId: 1234, userId: this.userInfo.userId }).then((res) => {
      this.isParentState = res;
      console.log("是否还能追加----", this.isParentState);
    });
    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>
